@charset "utf-8";

@font-face { font-family: 'Cafe24ShiningStar'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff'); font-weight: normal; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

/* ── CSS 변수 (매 이벤트 교체) ── */
:root {
  --color-primary:      #2456ff;
  --color-primary-dark: #1a2c66;
  --color-bg-overview:  linear-gradient(135deg, #edf3ff 0%, #e8f0ff 100%);
  --color-text-main:    #0b1322;
  --color-text-sub:     #374151;
  --color-text-muted:   #6b7280;
  --color-border:       #e6ebf2;
  --color-bg-gray:      #f7f9fc;
  --color-cta:          #2456ff;
  --event-end-date:     '2026-07-30T23:59:59';
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── 공통 ── */
html { scroll-behavior: smooth; }
body { color: var(--color-text-main); word-break: keep-all; }
em { font-style: normal; color: var(--color-primary); }
.wrap { width: 1240px; margin: 0 auto; }
main.qrorder section { opacity: 0; transition: .5s; }
main.qrorder section hgroup { margin-bottom: clamp(32px, 3.33vw, 64px); }
.pc_con { display: block; }
.m_con { display: none; }

/* 이미지 전역 */
img { max-width: 100%; height: auto; display: block; }

/* 아이콘 계열 */
.namecard_avatar img { width: 22px; height: 22px; max-width: 100%; }
.namecard_footer i img { width: 42px; height: 42px; max-width: 100%; }
.namecard_dark_header img { width: 34px; height: 34px; max-width: 100%; }
.onclick_tags li img { width: 14px; height: 14px; }
.step_ico img { width: 76px; height: 76px; max-width: 100%; }


/* ── overview -------------- */
@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
@keyframes floatYR {
  0%   { transform: translateY(0) rotate(-4deg); }
  50%  { transform: translateY(-12px) rotate(4deg); }
  100% { transform: translateY(0) rotate(-4deg); }
}
.overview { position: relative; min-height: 686px; overflow: hidden; background: var(--color-bg-overview); background-image: url(/images/event/qrorder/bg_overview.png); background-size: cover; background-position: center; }
.overview_wrap { position: relative; z-index: 1; display: flex; align-items: center; min-height: 686px; padding-top: clamp(60px, 6.25vw, 120px); padding-bottom: clamp(60px, 6.25vw, 120px); }
.overview_content { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 36px); max-width: 660px; }
.overview_badge { display: inline-flex; }
.overview_badge span { display: inline-block; padding: 10px 15px; border: 1.5px solid var(--color-text-main); border-radius: 100px; font-size: clamp(15px, 0.885vw, 17px); font-weight: 600; color: var(--color-text-main); line-height: 18px; }
/* 세 줄 위계 분리 */
.tit_overview { display: flex; flex-direction: column; gap: 0; margin-bottom: 0 !important; }
.tit_overview h2 { display: flex; flex-direction: column; gap: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
/* ① 클릭엔 서비스 하나면 */
.overview_sub { font-size: clamp(22px, 1.875vw, 36px); font-weight: 700; color: #174cff; line-height: 1.3; letter-spacing: -0.02em; margin-bottom: 2px; }
/* ② 온라인 명함 · QR 주문 · 예약 기능까지 */
.overview_h2_mid { font-size: clamp(22px, 1.875vw, 36px); font-weight: 700; color: #233659; line-height: 1.2; letter-spacing: -0.02em; }
/* ③ 모두 무료 */
.overview_h2_big { display: block; margin-top: 12px; font-size: clamp(34px, 4.27vw, 82px); font-weight: 700; color: #0a183a; line-height: 1.15; letter-spacing: -0.03em; }
.overview_date { font-size: clamp(15px, 0.885vw, 17px); color: #6b7280; }
.overview_date strong { color: var(--color-text-main); font-weight: 600; }
.overview_btns { display: flex; gap: 12px; flex-wrap: wrap; }
.overview_deco { position: absolute; pointer-events: none; z-index: 1; }
.overview_deco_wifi { top: 12.5%; left: 86.3%; width: clamp(50px, 3.95vw, 76px); animation: floatYR 3s ease-in-out infinite; }
.overview_deco_qrcode { top: 52.3%; left: 48.5%; width: clamp(100px, 12.03vw, 231px); animation: floatY 3.5s 0.6s ease-in-out infinite; }
.overview_deco_main { bottom: 7%; right: 11%; z-index: 0; }
/* overview// -------------- */


/* ── 공통 버튼 ── */
.btn_primary { display: inline-flex; align-items: center; justify-content: center; height: clamp(48px, 3.02vw, 58px); padding: 0 clamp(24px, 2.08vw, 40px); background: var(--color-primary); border-radius: 12px; font-size: clamp(16px, 1.04vw, 20px); font-weight: 600; color: #fff; line-height: 1; white-space: nowrap; }
.btn_secondary { display: inline-flex; align-items: center; justify-content: center; height: clamp(48px, 3.02vw, 58px); padding: 0 clamp(24px, 2.08vw, 40px); background: #fff; border: 1px solid var(--color-border); border-radius: 12px; font-size: clamp(16px, 1.04vw, 20px); font-weight: 600; color: var(--color-text-sub); line-height: 1; white-space: nowrap; }
.btn_exp { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; background: var(--color-text-main); border-radius: 100px; font-size: clamp(12px, 0.677vw, 13px); font-weight: 600; color: #fff; align-self: flex-start; margin-top: auto; }
.btn_white { display: inline-flex; align-items: center; justify-content: center; height: clamp(48px, 3.33vw, 64px); padding: 0 clamp(24px, 2.08vw, 40px); background: #fff; border-radius: 14px; font-size: clamp(16px, 1.04vw, 20px); font-weight: 600; color: var(--color-text-main); white-space: nowrap; }
.qr_link { font-weight: 600; font-size: clamp(14px, 0.885vw, 17px); color: var(--color-text-sub); text-decoration: underline; }


/* ── start -------------- */
.start { background: #fff; padding: clamp(60px, 6.25vw, 120px) 0; }
.tit_start { text-align: center; margin-bottom: clamp(32px, 3.33vw, 64px); }
.tit_start h2 { font-size: clamp(22px, 2.29vw, 44px); font-weight: 800; line-height: 1.31; letter-spacing: -0.037em; color: var(--color-text-main); }
.start_card { display: flex; gap: clamp(24px, 3.125vw, 60px); background: #fff; border: 1px solid var(--color-border); border-radius: 24px; padding: clamp(28px, 2.97vw, 57px); }
.start_card_left { flex: 1; display: flex; flex-direction: column; }
.start_card_left h3 { font-size: clamp(20px, 1.875vw, 36px); font-weight: 700; letter-spacing: -0.058em; line-height: 1.39; color: var(--color-text-main); padding-top: clamp(10px, 0.938vw, 18px); }
.start_card_left > p { font-size: clamp(13px, 0.776vw, 15px); color: var(--color-text-sub); line-height: 1.83; padding-top: clamp(10px, 0.938vw, 18px); }
.start_list { display: flex; flex-direction: column; gap: 12px; padding-top: clamp(20px, 1.98vw, 32px); }
.start_list li { position: relative; padding-left: 30px; font-size: clamp(13px, 0.74vw, 14px); font-weight: 500; color: var(--color-text-sub); line-height: 1.64; }
.start_list li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(/images/event/qrorder/ico_start_check.png); background-size: contain; }
.start_qr_box { display: flex; align-items: center; gap: 18px; margin-top: 20px; padding: 19px; background: #fbfcfe; border: 1px dashed #d1d5db; border-radius: 14px; }
.start_qr_box i { width: 100px; height: 100px; flex-shrink: 0; }
.start_card_right { flex: 1; max-width: max(509px,100%); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* 명함 A */
.namecard { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px -8px rgba(13,26,58,.08); }
.namecard_blue { background: #fff; border: 1px solid var(--color-border); display: flex; flex-direction: column; }
.namecard_header { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 25px 22px 0; border-bottom: 1px dashed var(--color-border); gap: 4px; }
.namecard_brand { font-size: 14px; font-weight: 700; color: var(--color-primary); letter-spacing: 1.4px; }
.namecard_branch { font-size: 11px; color: var(--color-text-muted); }
.namecard_avatar { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin: auto 0; }
.namecard_avatar img { width: 100%; height: 100%; }
.namecard_role { font-size: 13px; color: var(--color-text-muted); }
.namecard_name { font-size: 19px; font-weight: 700; color: var(--color-text-main); }
.namecard_tel { margin-bottom: auto; font-size: 12px; color: var(--color-text-muted); }
.namecard_footer { display: flex; align-items: center; gap: 20px; padding: 31px 18px 35px; }
.namecard_footer div { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.namecard_footer strong { font-size: 13px; font-weight: 700; color: var(--color-text-main); text-align: left; }
.namecard_footer span { font-size: 12px; color: var(--color-text-muted); }

/* 명함 B */
.namecard_dark { background: #1a2c66; border: 1px solid var(--color-border); }
.namecard_dark_body { display: flex; flex-direction: column; padding: 20px; height: 100%; justify-content: center; gap: 12px; }
.namecard_dark_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.namecard_dark_header span { font-size: 14px; font-weight: 600; color: #cdd9f4; }
.namecard_dark_name { font-size: 23px; font-weight: 700; color: #fff; letter-spacing: -0.03em; }
.namecard_dark_contact { font-size: 13px; color: #cdd9f4; line-height: 24px; font-weight: 200; }
.namecard_dark_addr { margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13px; color: #a8b3d1; line-height: 24px; font-weight: 200; }
/* start// -------------- */


/* ── share -------------- */
.share { background: var(--color-bg-gray); padding: clamp(60px, 6.25vw, 120px) 0; }
.share_inner { display: flex; justify-content: space-around; align-items: center; gap: clamp(40px, 5.2vw, 100px); }
.share_img_wrap img { width: 100%; max-width: 100%; height: auto; border-radius: 20px; }
.share_content { flex: 1; display: flex; flex-direction: column; gap: 20px; max-width: 580px; }
.share_content h2 { font-size: clamp(20px, 1.875vw, 36px); font-weight: 700; letter-spacing: -0.037em; line-height: 1.35; color: var(--color-text-main); }
.share_content p { font-size: clamp(15px, 0.938vw, 18px); color: var(--color-text-sub); line-height: 1.8; }
.share_qr_box { display: flex; align-items: center; gap: 18px; padding: 19px 23px; background: #fbfcfe; border: 1px dashed #d1d5db; border-radius: 14px; }
.share_qr_box i { width: 100px; height: 100px; flex-shrink: 0; }
/* share// -------------- */


/* ── onclick -------------- */
.onclick { background: #fff; padding: clamp(60px, 6.25vw, 120px) 0; }
.onclick_inner { display: flex; justify-content: space-between; align-items: center; gap: clamp(40px, 5.2vw, 100px); margin-bottom: clamp(40px, 4.17vw, 80px); }
.onclick_content { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.onclick_content h2 { font-size: clamp(20px, 1.67vw, 32px); font-weight: 700; letter-spacing: -0.037em; line-height: 1.35; color: var(--color-text-main); }
.onclick_content p { font-size: clamp(15px, 0.938vw, 18px); color: var(--color-text-sub); line-height: 1.8; }
.onclick_qr_box { display: flex; align-items: center; gap: 20px; padding: 23px; background: #fbfcfe; border: 1px dashed #d1d5db; border-radius: 14px; }
.onclick_qr_box i { width: 100px; height: 100px; flex-shrink: 0; }
.onclick_tags { display: flex; flex-wrap: wrap; gap: 10px; }
.onclick_tags li { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #fff; border: 1px solid var(--color-border); border-radius: 100px; font-size: clamp(13px, 0.74vw, 14px); font-weight: 600; color: var(--color-text-sub); }
.onclick_img_wrap img { width: auto; margin: 0 auto; }
.onclick_steps { display: flex; align-items: center; gap: 0; }
.onclick_step { flex: 1; position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: 20px; padding: clamp(20px, 2.08vw, 29px) clamp(16px, 1.25vw, 24px); min-height: 246px; display: flex; flex-direction: column; justify-content: space-between; }
.step_text { display: flex; flex-direction: column; gap: 6px; }
.step_num { font-size: clamp(15px, 0.885vw, 17px); font-weight: 700; color: var(--color-primary); }
.onclick_step h4 { font-size: clamp(16px, 1.04vw, 20px); font-weight: 600; color: var(--color-text-main); }
.onclick_step p { font-size: clamp(15px, 0.885vw, 17px); color: var(--color-text-muted); }
.step_ico { display: flex; justify-content: flex-end; }
.onclick_step_arrow { flex: 0 0 auto; width: 22px; height: 22px; background: url(/images/event/qrorder/ico_onclick_arrow.png) no-repeat center; background-size: contain; margin: 0 8px; }
/* onclick// -------------- */


/* ── point -------------- */
.point { background: var(--color-bg-gray); padding: clamp(60px, 6.25vw, 120px) 0; }
.tit_point { text-align: center; margin-bottom: clamp(32px, 3.33vw, 64px); }
.tit_point h2 { font-size: clamp(22px, 2.29vw, 44px); font-weight: 800; letter-spacing: -0.037em; color: var(--color-text-main); }
.tit_point p { font-size: clamp(15px, 0.885vw, 17px); color: var(--color-text-muted); margin-top: 16px; }
.point_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.point_list li { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 20px; padding: clamp(28px, 2.92vw, 56px) 29px clamp(28px, 1.98vw, 38px); text-align: center; }
.point_ico { width: 80px; height: 80px; background: var(--ico-bg, #f1f5ff); border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.point_ico img { width: 80px; height: 80px; max-width: 100%; }
.point_list strong { display: block; font-size: clamp(15px, 0.99vw, 19px); font-weight: 700; color: var(--color-text-main); margin-top: 14px; }
.point_list span { font-size: clamp(14px, 0.885vw, 17px); color: var(--color-text-muted); line-height: 1.7; }
/* point// -------------- */


/* ── plus -------------- */
.plus { background: #fff; padding: clamp(60px, 6.25vw, 120px) 0; }
.tit_plus { text-align: center; margin-bottom: clamp(24px, 1.67vw, 32px); }
.tit_plus h2 { font-size: clamp(22px, 2.29vw, 44px); font-weight: 800; letter-spacing: -0.037em; color: var(--color-text-main); }
.plus_list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.plus_item { display: flex; gap: 26px; background: #fff; border: 1px solid var(--color-border); border-radius: 22px; padding: clamp(24px, 1.82vw, 35px); }
.plus_img { display: flex; align-items: flex-start;

  background: #f1f5ff;
  border-radius: 14px;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 18px;
  overflow: hidden;
  aspect-ratio: 1/1;
}


.plus_img img { max-width: 100%; height: auto; }
.plus_content { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.plus_content h3 { font-size: clamp(16px, 1.04vw, 20px); font-weight: 700; letter-spacing: -0.037em; color: var(--color-text-main); }
.plus_content p { font-size: clamp(13px, 0.833vw, 16px); color: var(--color-text-muted); line-height: 23.1px; }
.plus_tags { display: flex; flex-wrap: wrap; gap: 6px; }
.plus_tags span { display: inline-block; padding: 5px 10px; background: #eaf0ff; border-radius: 6px; font-size: clamp(13px, 0.74vw, 14px); font-weight: 500; color: var(--color-primary); }
/* plus// -------------- */


/* ── benefit -------------- */
.benefit { background: var(--color-bg-gray); padding: clamp(60px, 6.25vw, 120px) 0; }
.tit_benefit { text-align: center; margin-bottom: clamp(24px, 1.25vw, 24px); }
.tit_benefit h2 { font-size: clamp(22px, 2.29vw, 44px); font-weight: 800; letter-spacing: -0.037em; line-height: 1.32; color: var(--color-text-main); }
.tit_benefit p { font-size: clamp(15px, 0.885vw, 17px); color: var(--color-text-muted); margin-top: 18px; }
.benefit_cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 880px; margin: 0 auto clamp(28px, 2.14vw, 41px); }
.benefit_card { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(28px, 2.14vw, 41px) clamp(24px, 1.875vw, 36px); display: flex; flex-direction: column; gap: 9px; }
.benefit_card_a { background: linear-gradient(135deg, #1a2c66 0%, #2456ff 100%); }
.benefit_card_b { background: linear-gradient(135deg, #0d1a3a 0%, #1a2c66 100%); }
.benefit_period { font-size: clamp(14px, 0.885vw, 17px); font-weight: 600; color: #bcd0ff; }
.benefit_card_b .benefit_period { color: #9bb6ff; }
.benefit_num { display: flex; align-items: baseline; gap: 0; }
.benefit_num strong { font-size: clamp(40px, 3.23vw, 62px); font-weight: 700; color: #fff; letter-spacing: -0.05em; line-height: 1; }
.benefit_num span { font-size: clamp(20px, 1.56vw, 30px); font-weight: 700; color: #fff; letter-spacing: -0.05em; }
.benefit_card > p { font-size: clamp(13px, 0.833vw, 16px); color: #cdd9f4; }
.benefit_card_a > p { color: #e0e9ff; }
.benefit_deco { position: absolute; bottom: -30px; right: -30px; width: clamp(100px, 8.33vw, 160px); height: auto; opacity: 0.9; pointer-events: none; }
.benefit_notice { max-width: 880px; margin: 0 auto clamp(16px, 1.25vw, 24px); padding: clamp(16px, 1.09vw, 21px) 26px; background: #f2f5f9; border-radius: 14px; }
.benefit_notice strong { display: block; font-size: clamp(13px, 0.833vw, 16px); color: var(--color-text-sub); margin-bottom: 5px; }
.benefit_notice .dot_list li { text-indent: -6px; font-size: clamp(13px, 0.833vw, 16px); color: var(--color-text-muted); }
.benefit_notice .dot_list > li::before { color: var(--color-text-muted); }
.benefit_cta { text-align: center; padding-top: 12px; }
/* benefit// -------------- */


/* ── reason -------------- */
.reason { background: #fff; padding: clamp(60px, 6.25vw, 120px) 0; }
.tit_reason { text-align: center; margin-bottom: clamp(32px, 3.33vw, 64px); }
.tit_reason h2 { font-size: clamp(22px, 2.29vw, 44px); font-weight: 800; letter-spacing: -0.037em; color: var(--color-text-main); }
.reason_grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; }
.reason_grid li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(32px, 2.5vw, 48px) 20px clamp(32px, 2.5vw, 48px); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); text-align: center; }
.reason_grid > li:nth-child(n+4) { border-bottom: none; }
.reason_grid > li:nth-child(3n) { border-right: none; }
.reason_kpi { display: block; font-size: clamp(28px, 2.5vw, 48px); font-weight: 700; color: var(--color-primary); letter-spacing: -0.04em; line-height: 1; }
.reason_grid h4 { font-size: clamp(15px, 0.885vw, 17px); font-weight: 600; color: var(--color-text-main); margin-top: 4px; }
.reason_grid p { font-size: clamp(13px, 0.833vw, 16px); color: var(--color-text-muted); line-height: 1.75; }
.reason_grid small { font-size: clamp(10px, 0.625vw, 12px); color: #9ca3af; }
/* reason// -------------- */


/* ── how -------------- */
.how { padding: clamp(60px, 6.25vw, 120px) 0; }
.tit_how { text-align: center; margin-bottom: clamp(32px, 2.5vw, 48px); }
.tit_how h2 { font-size: clamp(22px, 2.29vw, 44px); font-weight: 800; letter-spacing: -0.037em; line-height: 1.32; color: var(--color-text-main); }
.tit_how p { font-size: clamp(15px, 0.938vw, 18px); color: var(--color-text-muted); margin-top: 16px; }
.how_list { display: flex; justify-content: center; gap: clamp(8px, 1.25vw, 24px); border-radius: 24px; padding: 0 clamp(24px, 3.13vw, 60px) clamp(24px, 2.08vw, 40px); }
.how_list li { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; padding: clamp(20px, 1.875vw, 36px) clamp(16px, 1.46vw, 28px); background: var(--color-bg-gray); border-radius: 16px; }
.how_ico { width: 48px; height: 48px; background: var(--ico-bg, #fef0e7); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.how_ico img { width: 100%; height: 100%; max-width: 100%; }
.how_list h4 { margin-top: 20px; font-size: clamp(16px, 1.04vw, 20px); font-weight: 600; color: var(--color-text-main); line-height: 1.3; }
.how_list p { font-size: clamp(14px, 0.885vw, 17px); color: var(--color-text-muted); line-height: 1.75; }
.how_cta { text-align: center; padding-top: clamp(24px, 2.08vw, 40px); }
/* how// -------------- */


/* ── short -------------- */
.short { background: #0d1a3a; }
.short_links { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 24px; }
.short_link { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(24px, 1.51vw, 29px) clamp(16px, 1.25vw, 24px) clamp(24px, 1.56vw, 30px); border-right: 1px solid #232d4d; text-align: center; }
.short_link:last-child { border-right: none; }
.short_link > p { font-size: clamp(12px, 0.781vw, 15px); color: #8a96b8; }
.short_link h3 { font-size: clamp(16px, 1.04vw, 20px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.65; color: #fff; }
.short_link h3 span { color: #fff; }
.short_link:nth-child(1) h3 { color: #1aaee0; }
.short_link:nth-child(2) h3 { color: #ff7a3d; }
.short_link:nth-child(3) h3 { color: #7da8ff; }
.short_link a { display: inline-flex; align-items: center; justify-content: center; padding: 10px 23px; border: 1px solid #2d3a5e; border-radius: 100px; font-size: clamp(12px, 0.781vw, 15px); font-weight: 600; color: #cdd9f4; }
.short_cta { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: clamp(40px, 3.33vw, 64px) 24px clamp(40px, 3.33vw, 64px); text-align: center; }
.short_cta h3 { font-size: clamp(28px, 2.5vw, 48px); font-weight: 700; color: #fff; letter-spacing: -0.042em; }
.short_cta em { color: #1aaee0; }
/* short// -------------- */


/* ── side_nav -------------- */
.side_nav { position: fixed; left: clamp(12px, 2.08vw, 40px); top: 50%; transform: translateY(-50%); z-index: 200; background: #1a2c66; border-radius: 16px; padding: 24px 0 20px; min-width: 148px; box-shadow: 0 8px 32px -8px rgba(13,26,58,.28); }
.side_nav_title { display: block; font-size: 14px; font-weight: 700; color: #fff; padding: 0 20px 16px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 8px; white-space: nowrap; text-align: center; }
.side_nav ul { display: flex; flex-direction: column; }
.side_nav li a { display: block; margin: 2px 4px; padding: 10px 20px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.55); white-space: nowrap; transition: color .2s, background .2s; text-align: center; }
.side_nav li a:hover,
.side_nav li a.is-active { color: #fff; background: rgba(255,255,255,.08); border-radius: 8px; }
/* side_nav// -------------- */


/* ── responsive -------------- */
@media screen and (max-width:1239px) {
  .wrap { width: 100%; }
}
@media screen and (max-width:1024px) {
  .wrap { width: auto; margin: 0 5vw; }
  .side_nav { display: none; }
  .overview_wrap { min-height: auto; padding: clamp(24px, 3.125vw, 60px) 0; flex-direction: column; }
  .overview_badge span { padding: 6px 15px; }
  .overview_content { max-width: 100%; align-self: flex-start; }
  .overview_deco_main { position: relative; right: auto; bottom: auto; margin: 0 auto; display: block; }
  .overview_deco_wifi { top: 8%; left: 75%; width: 15vw; }
  .overview_deco_qrcode { top: 10%; left: 51%; width: 35vw; }
  .start_card { flex-direction: column; }
  .start_card_right { width: 100%; grid-template-columns: 1fr 1fr; height: auto; }
  .share_inner { flex-direction: column; }
  .share_img_wrap { flex: none; margin: 0 auto; }
  .onclick_inner { flex-direction: column; }
  .onclick_img_wrap { flex: none; width: 100%; max-width: 100%; }
  .onclick_steps { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .onclick_step_arrow { display: none; }
  .onclick_step { flex: 0 0 calc(50% - 6px); min-height: 200px; }
  .plus_list { grid-template-columns: 1fr; }
  .reason_grid { grid-template-columns: repeat(3, 1fr); }
  .how_list { flex-wrap: wrap; }
  .how_list li { flex: 1 1 calc(50% - 12px); }
  .short_links { grid-template-columns: 1fr; margin: 0; }
  .short_link { border-right: none; border-bottom: 1px solid #232d4d; }
  .short_link:last-child { border-bottom: none; }
}
@media screen and (max-width:767px) {
  .pc_con { display: none; }
  .m_con { display: block; }
  .overview_h2_big { font-size: clamp(28px, 8vw, 52px); }
  .overview_deco_wifi { top: 18%; left: 75%; width: 23vw; }
  .overview_deco_qrcode { top: 21%; left: 51%; width: 42vw; }
  .start_card_right { grid-template-columns: 1fr; height: auto; }
  .point_list { grid-template-columns: repeat(2, 1fr); }
  .plus_img { flex: none; min-width:30%;width:35%;  }
  .plus_img img { width: 130px; }
  .benefit_cards { grid-template-columns: 1fr; }
  .reason_grid { grid-template-columns: repeat(2, 1fr); }
  .reason_grid * { border: none !important; }
  .how_list { flex-direction: column; gap: 12px; }
  .how_list li { flex: none; width: 100%; }
}
/* responsive// -------------- */


/* 우측 상단 대시보드 */
.box_order_mockup { position: relative; min-height: 380px; }
.om_dashboard { background: #fff; border-radius: 18px; padding: 22px 20px; box-shadow: 0 18px 44px -16px rgba(13,26,58,.16); width: 88%; margin-left: auto; border: 1px solid #eef1f5; }
.om_dash_title { font-size: 17px; font-weight: 800; color: #0d1a3a; margin-bottom: 18px; letter-spacing: -0.02em; }
.om_orders { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.om_order_card { background: #fff; border: 1px solid #e6ebf2; border-radius: 12px; overflow: hidden; }
.om_order_head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; color: #fff; font-weight: 800; }
.om_head_blue { background: #2456ff; }
.om_head_orange { background: #ff7a3d; }
.om_order_name { font-size: 13px; letter-spacing: -0.01em; }
.om_order_status { font-size: 11px; padding: 3px 10px; border-radius: 100px; background: rgba(255,255,255,.22); font-weight: 700; backdrop-filter: saturate(180%) blur(2px); }
.om_order_body { padding: 10px 14px 14px; }
.om_order_row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; color: #6b7280; }
.om_order_row span:last-child { color: #0d1a3a; font-weight: 700; }
.om_order_divider { margin: 6px 0; border-top: 1px dashed #e6ebf2; }
.om_order_menu { padding: 8px 0 12px; font-size: 13px; font-weight: 800; color: #0d1a3a; text-align: center; }
.om_order_btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.om_btn { padding: 8px; border: 1px solid #cdd6e2; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 700; color: #0d1a3a; cursor: pointer; }
.om_btn:hover { border-color: #94a3b8; }
.om_btn_warn:hover { border-color: #f3a2a2; }
.om_btn_warn { color: #ff5252; border-color: #ffd6d6; }
.om_btn_warn:hover { background: #fff5f5; }

/* 좌측 하단 폰 오버레이 */
.om_phone_overlay { position: absolute; left: 0; bottom: 0; width: 42%; max-width: 200px; z-index: 2; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 50px -16px rgba(13,26,58,.22); }
.om_phone_overlay img { width: 100%; display: block; }

@media(max-width: 900px) {
  .box_order_mockup { min-height: auto; }
  .om_dashboard { width: 100%; margin-left: 0; }
  .om_orders { grid-template-columns: 1fr; }
  .om_phone_overlay { position: relative; width: 60%; max-width: 220px; margin: 18px auto 0; left: auto; bottom: auto; }
}

.lst_pay { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
.lst_pay .pay_pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: #fff; border: 1px solid #e6ebf2; border-radius: 100px; font-size: 13px; font-weight: 700; color: #4b5563; white-space: nowrap; }
.lst_order_step { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; position: relative; }
.item_order_step { background: #fff; border: 1px solid #e6ebf2; border-radius: 18px; padding: 26px 22px; position: relative; }
.item_order_step .step_num { font-size: 13px; font-weight: 800; color: #2456ff; margin-bottom: 10px; }
.item_order_step .step_ti { font-size: 18px; font-weight: 800; color: #0d1a3a; }
.item_order_step .step_ds { margin-top: 8px; font-size: 14px; color: #6b7280; line-height: 1.55; }
.item_order_step .step_img { margin-top: 18px; height: 80px; display: flex; align-items: center; justify-content: flex-end; }
.item_order_step .step_img svg { height: 64px; width: auto; }
.item_order_step .step_img img { height: 64px; width: auto; max-width: none; object-fit: contain; display: block; }
.item_order_step::after { content: "›"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); font-size: 24px; color: #cdd9f4; font-weight: 300; z-index: 2; }
.item_order_step:last-child::after { display: none; }

@media(max-width: 900px) {
  .area_qr_order_top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 50px; }
  .lst_order_step { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .item_order_step::after { display: none; }
}

.clickn.qrorder .cite { max-height: 100vh; background: var(--color-bg-gray); }

/* cite */
.clickn.qrorder .cite { max-height: 100vh; display: flex; flex-direction: column; gap: clamp(20px, 5vw, 76px); padding: clamp(60px, 12vw, 140px) 0; background-color: #f4f6f9; }
.clickn .cite .tit_wrap { display: flex; flex-direction: column; text-align: center; gap: 7px; }
.clickn .cite .tit_wrap h3 { font-size: clamp(26px, 3.8vw, 52px); font-weight: 800; }
.clickn .cite .tit_wrap h3 strong { color: #0066ff; font-weight: 800; }
.clickn .cite .tit_wrap small { font-size: clamp(16px, 2vw, 24px); color: #555555; font-weight: 400; letter-spacing: -0.48px; }
.clickn .cite > article { position: relative; overflow: hidden; }
.clickn .cite .swiper-slide { position: relative; width: fit-content; aspect-ratio: 680/434; transition: 0.5s; transition: 0.3s; border-radius: 20px; overflow: hidden; }
.clickn .cite .swiper-slide * { letter-spacing: -0.4px; }
.clickn .cite .swiper-slide a { position: relative; display: block; }
.clickn .cite .swiper-slide div:has(h4) { position: absolute; display: flex; flex-direction: column; gap: 8px; position: absolute; width: 100%; bottom: 28px; text-align: center; }
.clickn .cite .swiper-slide div:has(span) { position: absolute; z-index: 1; opacity: 0; }
.clickn .cite .swiper-slide a div:has(span) span { display: flex; align-items: center; }
.clickn .cite .swiper-slide a div:has(span) span::after { display: inline-block; content: ''; z-index: 1; width: clamp(8px, 5vw, 16px); height: clamp(8px, 5vw, 16px); background: url(/images/event/clickn/ico_arrow_link.svg) no-repeat; background-size: contain; }
.clickn .cite .swiper-slide a:hover div:has(h4) { opacity: 0; }
.clickn .cite .swiper-slide a:hover div:has(span) { display: flex; align-items: center; gap: 2px; justify-content: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); font-size: 18px; color: #fff; font-weight: 400; text-align: center; opacity: 1; }
.clickn .cite .swiper-slide p { color: #e5e5e5; font-weight: 400; font-size: clamp(16px, 4vw, 20px); line-height: 18px; }
.clickn .cite .swiper-slide h4 { color: #ffffff; font-weight: 700; font-size: clamp(18px, 2vw, 24px); line-height: 24px; }
.clickn .cite .swiper-slide img { display: block; width: 100%; }
.clickn .cite .swiper-slide-prev,
.clickn .cite .swiper-slide-next { transform: scale(0.63); opacity: 0.5; margin-top: 20px; }
.clickn .cite .swiper-slide-prev div,
.clickn .cite .swiper-slide-next div { opacity: 0; }
.citeSwiper-navigation { position: relative; }
.clickn .cite .citeSwiper-button-prev,
.clickn .cite .citeSwiper-button-next { position: absolute; top: 44.5%; width: 48px; aspect-ratio: 1/1; font-size: 0; background-repeat: no-repeat; background-size: contain; filter: opacity(0.6); }
.clickn .cite .citeSwiper-button-prev:hover,
.clickn .cite .citeSwiper-button-next:hover { filter: opacity(1); }
.clickn .cite .citeSwiper-button-prev { left: calc(50% - 22.5vw); background-image: url(/images/event/clickn/ico_arrowRound_left.svg); }
.clickn .cite .citeSwiper-button-next { right: calc(50% - 22.5vw); background-image: url(/images/event/clickn/ico_arrowRound_right.svg); }
@media screen and (max-width: 1024px) {
  .clickn .cite .citeSwiper-button-prev,
  .clickn .cite .citeSwiper-button-next { display: none; }
}
@media screen and (max-width: 640px) {
  .clickn .cite .swiper-slide div:has(h4) { bottom: 8px; gap: 4px; }
  .clickn .cite > article { margin: 0 5vw; }
  .clickn .cite .swiper-slide-prev,
  .clickn .cite .swiper-slide-next { transform: scale(1); opacity: 0.5; margin-top: 0; }
}


/* ── faq -------------- */
.faq { background: #f7f9fc; padding: clamp(60px, 6.25vw, 120px) 0; }
.tit_faq { text-align: center; margin-bottom: clamp(32px, 3.33vw, 64px); }
.tit_faq h2 { font-size: clamp(22px, 2.29vw, 44px); font-weight: 700; letter-spacing: -0.037em; color: var(--color-text-main); }
.faqlist_wrap { display: flex; flex-direction: column; max-width: 860px; margin: 0 auto; border-top: 1px solid #333; }
.faqlist_wrap li { border-bottom: 1px solid var(--color-border); }
.faqlist_wrap details { overflow: hidden; background: var(--color-bg-gray); }
.faqlist_wrap summary { position: relative; display: flex; align-items: center; padding: clamp(16px, 1.25vw, 24px); font-size: clamp(15px, 0.938vw, 18px); font-weight: 600; color: var(--color-text-main); cursor: pointer; list-style: none; }
.faqlist_wrap summary::before { content: 'Q.'; font-weight: 700; color: var(--color-primary); margin-right: 12px; flex-shrink: 0; }
.faqlist_wrap summary::after { position: absolute; right: clamp(16px, 1.25vw, 24px); top: 50%; content: '+'; font-size: clamp(18px, 1.25vw, 24px); color: var(--color-text-muted); transform: translateY(-50%); transition: .3s; }
.faqlist_wrap details[open] summary::after { content: '−'; color: var(--color-primary); }
.faqlist_wrap details > div { padding: clamp(16px, 1.25vw, 24px) clamp(20px, 2.5vw, 48px); }
.faqlist_wrap details > div p { font-size: clamp(14px, 0.833vw, 16px); color: var(--color-text-sub); line-height: 1.8; }
/* faq// -------------- */


/* ── notice -------------- */
.notice { background: #0d1a3a; }
.notice > div { border-top: 1px solid rgba(255,255,255,.08); padding: clamp(40px, 3.33vw, 64px) 0; }
.notice h3 { font-size: clamp(14px, 0.833vw, 16px); font-weight: 700; color: #fff; margin-bottom: 16px; }
.notice .dot_list li { font-size: clamp(13px, 0.729vw, 14px); color: #8a96b8; line-height: 1.9; padding-left: 14px; }
.notice .dot_list li::before { color: #8a96b8; }
.notice .dot_list li a { color: #8a96b8; text-decoration: underline; font-weight: 600; }
/* notice// -------------- */


/* ── box_vcard_phone -------------- */
.box_vcard_phone { width: 340px; margin: 0 auto; background: #0d1a3a; border-radius: 32px; padding: 14px; box-shadow: 0 30px 80px -20px rgba(13,26,58,.3); }
.box_vcard_phone .vc_screen { background: #11224a; border-radius: 22px; overflow: hidden; color: #fff; }
.box_vcard_phone .vc_screen .vc_top { height: 36px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 18px 6px; font-size: 10px; font-weight: 700; }
.box_vcard_phone .vc_screen .vc_avatar { display: flex; justify-content: center; padding: 18px 0 12px; }
.box_vcard_phone .vc_screen .vc_avatar img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; }
.box_vcard_phone .vc_screen .vc_name { text-align: center; font-size: 22px; font-weight: 800; padding: 6px 0 18px; }
.box_vcard_phone .vc_screen .lst_vc_ico { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 0 14px 16px; }
.box_vcard_phone .vc_screen .lst_vc_ico .vc_ic { background: #1f3061; border-radius: 10px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 600; }
.box_vcard_phone .vc_screen .lst_vc_row .vc_row { background: #fff; color: #0d1a3a; margin: 0 14px 8px; padding: 12px 16px; border-radius: 10px; }
.box_vcard_phone .vc_screen .vc_row .vc_lb { font-size: 12px; color: #6b7280; font-weight: 600; }
.box_vcard_phone .vc_screen .vc_row .vc_vl { font-size: 14px; font-weight: 700; color: #2456ff; margin-top: 2px; }
/* box_vcard_phone// -------------- */

.benefit .deco_circle { position: absolute; right: -30px; bottom: -30px; opacity: .18; }


/* ── hover -------------- */

/* point 카드 */
.point_list li { transition: border-color .2s, box-shadow .2s, transform .2s; cursor: default; }
.point_list li:hover { border-color: var(--color-primary); box-shadow: 0 8px 28px -8px rgba(36,86,255,.18); transform: translateY(-4px); }

/* plus 카드 */
.plus_item { transition: border-color .2s, box-shadow .2s, transform .2s; }
.plus_item:hover { border-color: var(--color-primary); box-shadow: 0 8px 28px -8px rgba(36,86,255,.18); transform: translateY(-4px); }

/* how 카드 */
.how_list li { transition: background .2s, box-shadow .2s, transform .2s; }
.how_list li:hover { background: #eef2ff; box-shadow: 0 6px 20px -6px rgba(36,86,255,.14); transform: translateY(-3px); }

/* reason 그리드 */
.reason_grid li { transition: background .2s; }
.reason_grid li:hover { background: #f3f6ff; }

/* faq summary */
.faqlist_wrap summary { transition: background .2s; }
.faqlist_wrap summary:hover { background: #eef2ff; }

/* 버튼 */
.btn_primary { transition: background .2s, transform .15s, box-shadow .2s; }
.btn_primary:hover { background: #1a3ecf; box-shadow: 0 6px 20px -4px rgba(36,86,255,.4); transform: translateY(-2px); }
.btn_secondary { transition: border-color .2s, color .2s, transform .15s; }
.btn_secondary:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.btn_white { transition: background .2s, box-shadow .2s, transform .15s; }
.btn_white:hover { background: #f0f4ff; box-shadow: 0 6px 20px -4px rgba(255,255,255,.3); transform: translateY(-2px); }
.btn_exp { transition: background .2s, transform .15s; }
.btn_exp:hover { background: #2456ff; transform: translateY(-1px); }
.overview_btns a { transition: opacity .2s, transform .15s; }
.overview_btns a:hover { opacity: .88; transform: translateY(-2px); }
/* hover// -------------- */