@charset "UTF-8"; /* ========================================================= POWER LANGUAGE — 제2외국어 1:1 실시간 화상수업 Design system + components ========================================================= */ /* ---------- 1. Tokens ---------- */ :root{ /* neutrals */ --bg:#FFFFFF; --bg-soft:#F5F7FC; --bg-softer:#FAFBFE; --bg-deep:#0A0F1F; --bg-deep-2:#121A31; --ink:#0F1626; --ink-2:#3B4457; --ink-3:#6E7789; --ink-4:#9AA2B1; --line:#E4E8F1; --line-soft:#EFF2F8; /* brand */ --brand:#2F5BFF; --brand-dark:#1B3CD1; --brand-soft:#EDF1FF; --gold:#F0B429; /* per-language accent (overridden on ) */ --accent:var(--brand); --accent-dark:var(--brand-dark); --accent-soft:var(--brand-soft); /* shape */ --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px; --sh-1:0 1px 2px rgba(15,22,38,.05), 0 2px 8px rgba(15,22,38,.05); --sh-2:0 4px 12px rgba(15,22,38,.06), 0 12px 32px rgba(15,22,38,.08); --sh-3:0 8px 24px rgba(15,22,38,.09), 0 24px 60px rgba(15,22,38,.12); --sh-accent:0 10px 30px color-mix(in srgb, var(--accent) 28%, transparent); --maxw:1180px; --header-h:72px; --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Malgun Gothic","맑은 고딕",sans-serif; --font-jp:"Noto Sans JP",var(--font); --font-cn:"Noto Sans SC",var(--font); } body.lang-en{ --accent:#2F5BFF; --accent-dark:#1B3CD1; --accent-soft:#EDF1FF; } body.lang-jp{ --accent:#E03A4E; --accent-dark:#B01F31; --accent-soft:#FFF0F2; } body.lang-cn{ --accent:#D98A16; --accent-dark:#A9670A; --accent-soft:#FFF6E6; } /* ---------- 2. Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); } body{ margin:0; font-family:var(--font); font-size:16px; line-height:1.65; color:var(--ink); background:var(--bg); letter-spacing:-.02em; word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p,figure,blockquote{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; } img,svg{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button,input,select,textarea{ font:inherit; color:inherit; } button{ background:none; border:0; cursor:pointer; } table{ border-collapse:collapse; width:100%; } :focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px; border-radius:6px; } /* ---------- 3. Layout helpers ---------- */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; } .sec{ padding:88px 0; position:relative; } .sec--soft{ background:var(--bg-soft); } .sec--softer{ background:var(--bg-softer); } .sec--tight{ padding:64px 0; } .sec-head{ text-align:center; max-width:720px; margin:0 auto 48px; } .sec-head--left{ text-align:left; margin-inline:0; } .eyebrow{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--accent); background:var(--accent-soft); padding:6px 14px; border-radius:var(--r-pill); margin-bottom:16px; } .sec-title{ font-size:clamp(26px,3.4vw,40px); font-weight:800; line-height:1.3; letter-spacing:-.035em; } .sec-title em{ font-style:normal; color:var(--accent); } .sec-desc{ margin-top:14px; color:var(--ink-3); font-size:clamp(15px,1.6vw,17px); line-height:1.75; } .hl{ background:linear-gradient(transparent 58%, color-mix(in srgb, var(--accent) 22%, transparent) 58%); } .nowrap{ white-space:nowrap; } /* ---------- 4. Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 26px; border-radius:var(--r-pill); font-size:16px; font-weight:700; letter-spacing:-.02em; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--sh-accent); } .btn--primary:hover{ background:var(--accent-dark); } .btn--dark{ background:var(--ink); color:#fff; } .btn--dark:hover{ background:#000; } .btn--ghost{ background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--sh-1); } .btn--ghost:hover{ border-color:var(--accent); color:var(--accent); } .btn--line-light{ background:rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.32); } .btn--line-light:hover{ background:rgba(255,255,255,.16); } .btn--sm{ height:42px; padding:0 18px; font-size:14px; } .btn--lg{ height:60px; padding:0 34px; font-size:17px; } .btn--block{ width:100%; } /* ---------- 5. Top bar ---------- */ .topbar{ background:linear-gradient(90deg,#0A0F1F,#1B2A57 55%,#2F5BFF); color:#fff; font-size:13.5px; font-weight:500; } .topbar .wrap{ display:flex; align-items:center; justify-content:center; gap:14px; height:40px; } .topbar b{ font-weight:800; } .topbar .tb-tag{ background:var(--gold); color:#231A00; font-weight:800; font-size:11.5px; padding:3px 9px; border-radius:var(--r-pill); letter-spacing:.02em; } .topbar .tb-link{ text-decoration:underline; text-underline-offset:3px; opacity:.9; } .topbar .tb-link:hover{ opacity:1; } /* ---------- 6. Header ---------- */ .site-header{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.88); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line-soft); transition:box-shadow .25s ease, background-color .25s ease; } .site-header.is-stuck{ box-shadow:0 6px 24px rgba(15,22,38,.08); background:rgba(255,255,255,.96); } .header-inner{ display:flex; align-items:center; gap:28px; height:var(--header-h); } .brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; } .brand-mark{ width:38px; height:38px; border-radius:11px; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(140deg,var(--brand),#7B3BFF 90%); color:#fff; font-weight:900; font-size:17px; letter-spacing:-.06em; box-shadow:0 6px 16px rgba(47,91,255,.32); } .brand-text{ display:flex; flex-direction:column; line-height:1.15; } .brand-en{ font-size:16.5px; font-weight:800; letter-spacing:-.03em; } .brand-kr{ font-size:11px; font-weight:600; color:var(--ink-3); letter-spacing:.02em; } .gnb{ display:flex; align-items:center; gap:4px; margin-left:auto; } .gnb > li > a{ display:flex; align-items:center; gap:5px; height:40px; padding:0 14px; border-radius:var(--r-pill); font-size:15px; font-weight:600; color:var(--ink-2); transition:background-color .18s ease, color .18s ease; } .gnb > li > a:hover{ background:var(--bg-soft); color:var(--ink); } .gnb > li > a.is-current{ color:var(--accent); background:var(--accent-soft); } .has-sub{ position:relative; } .has-sub > a::after{ content:""; width:6px; height:6px; margin-left:2px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.55; } .subnav{ position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,8px); min-width:230px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh-3); padding:8px; opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease, visibility .18s; } .has-sub:hover .subnav, .has-sub:focus-within .subnav{ opacity:1; visibility:visible; transform:translate(-50%,0); } .subnav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; font-size:14.5px; font-weight:600; color:var(--ink-2); transition:background-color .15s ease; } .subnav a:hover{ background:var(--bg-soft); color:var(--ink); } .subnav .chip{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:13px; font-weight:800; color:#fff; flex-shrink:0; } .chip--en{ background:#2F5BFF; } .chip--jp{ background:#E03A4E; font-family:var(--font-jp); } .chip--cn{ background:#D98A16; font-family:var(--font-cn); } .subnav small{ display:block; font-size:11.5px; font-weight:500; color:var(--ink-4); } .header-cta{ display:flex; align-items:center; gap:8px; flex-shrink:0; } .header-tel{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.2; margin-right:4px; } .header-tel span{ font-size:10.5px; font-weight:600; color:var(--ink-4); letter-spacing:.04em; } .header-tel b{ font-size:17px; font-weight:800; letter-spacing:-.02em; } .nav-toggle{ display:none; width:44px; height:44px; margin-left:auto; position:relative; } .nav-toggle span{ position:absolute; left:11px; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease, top .25s ease; } .nav-toggle span:nth-child(1){ top:15px; } .nav-toggle span:nth-child(2){ top:21px; } .nav-toggle span:nth-child(3){ top:27px; } body.nav-open .nav-toggle span:nth-child(1){ top:21px; transform:rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2){ opacity:0; } body.nav-open .nav-toggle span:nth-child(3){ top:21px; transform:rotate(-45deg); } /* mobile drawer */ .m-nav{ position:fixed; inset:0; z-index:190; background:#fff; padding:calc(var(--header-h) + 24px) 20px 40px; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto; display:none; } body.nav-open .m-nav{ transform:translateX(0); } .m-nav h4{ font-size:12px; font-weight:700; color:var(--ink-4); letter-spacing:.08em; margin:26px 0 10px; } .m-nav a{ display:flex; align-items:center; gap:12px; padding:14px 4px; font-size:17px; font-weight:700; border-bottom:1px solid var(--line-soft); } .m-nav .m-cta{ margin-top:28px; display:grid; gap:10px; } .m-nav .m-cta a{ border:0; justify-content:center; } /* ---------- 7. Hero (home) ---------- */ .hero{ position:relative; overflow:hidden; color:#fff; background:radial-gradient(120% 100% at 12% 0%, #23306B 0%, #0F1730 45%, #070B18 100%); padding:74px 0 90px; } .hero::before,.hero::after{ content:""; position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; } .hero::before{ width:520px; height:520px; top:-180px; right:-120px; background:rgba(47,91,255,.5); } .hero::after{ width:420px; height:420px; bottom:-200px; left:-100px; background:rgba(123,59,255,.34); } .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; } .hero-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; } .hero-badges span{ font-size:12.5px; font-weight:700; padding:6px 13px; border-radius:var(--r-pill); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#E7ECFF; } .hero-title{ font-size:clamp(32px,4.6vw,56px); font-weight:900; line-height:1.22; letter-spacing:-.045em; } .hero-title .grad{ background:linear-gradient(90deg,#7FA6FF,#C6A2FF 60%,#FFC978); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero-sub{ margin-top:20px; font-size:clamp(15px,1.8vw,18.5px); line-height:1.75; color:#BCC5DE; max-width:520px; } .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; } .hero-stats{ display:flex; gap:36px; margin-top:44px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14); flex-wrap:wrap; } .hero-stats div strong{ display:block; font-size:clamp(24px,2.8vw,32px); font-weight:900; letter-spacing:-.04em; line-height:1.2; } .hero-stats div span{ font-size:13px; color:#98A2BF; font-weight:500; } /* hero side card = quick apply */ .quick-card{ background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:30px 28px 26px; box-shadow:0 24px 70px rgba(3,7,18,.5); } .quick-card .qc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .quick-card h3{ font-size:21px; font-weight:800; letter-spacing:-.035em; } .quick-card .qc-free{ font-size:11.5px; font-weight:800; color:#0B7A3B; background:#E4F8EC; padding:5px 10px; border-radius:var(--r-pill); } .quick-card > p{ font-size:14px; color:var(--ink-3); margin-bottom:20px; } /* ---------- 8. Forms ---------- */ .field{ margin-bottom:14px; } .field > label{ display:block; font-size:13px; font-weight:700; color:var(--ink-2); margin-bottom:7px; } .field > label .req{ color:#E03A4E; margin-left:2px; } .input, .select, .textarea{ width:100%; height:50px; padding:0 14px; background:var(--bg-softer); border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:15px; transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .textarea{ height:auto; min-height:104px; padding:13px 14px; resize:vertical; line-height:1.6; } .select{ appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236E7789' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; } .input:focus,.select:focus,.textarea:focus{ outline:none; background:#fff; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } .input::placeholder,.textarea::placeholder{ color:var(--ink-4); } .input.is-error,.select.is-error{ border-color:#E03A4E; background:#FFF6F7; } .err-msg{ display:none; font-size:12.5px; color:#D62B41; font-weight:600; margin-top:6px; } .field.is-error .err-msg{ display:block; } .pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .pick input{ position:absolute; opacity:0; width:0; height:0; } .pick label{ display:flex; align-items:center; justify-content:center; gap:5px; height:46px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:var(--bg-softer); font-size:14.5px; font-weight:700; color:var(--ink-2); cursor:pointer; transition:all .16s ease; } .pick label:hover{ border-color:var(--ink-4); } .pick input:checked + label{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); } .pick--2{ grid-template-columns:repeat(2,1fr); } .pick--4{ grid-template-columns:repeat(4,1fr); } .agree{ display:flex; align-items:flex-start; gap:9px; margin:6px 0 4px; } .agree input{ width:18px; height:18px; margin-top:3px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; } .agree label{ font-size:13px; color:var(--ink-3); line-height:1.6; cursor:pointer; } .agree a{ text-decoration:underline; text-underline-offset:2px; color:var(--ink-2); } .form-note{ font-size:12.5px; color:var(--ink-4); text-align:center; margin-top:12px; line-height:1.6; } .form-ok{ display:none; text-align:center; padding:38px 20px; } .form-ok.is-on{ display:block; } .form-ok .ok-mark{ width:62px; height:62px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:#E4F8EC; color:#0B7A3B; font-size:30px; font-weight:900; } .form-ok h4{ font-size:20px; font-weight:800; margin-bottom:8px; } .form-ok p{ font-size:14.5px; color:var(--ink-3); line-height:1.7; } /* ---------- 9. Language cards ---------- */ .lang-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .lang-card{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 28px 28px; box-shadow:var(--sh-1); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; display:flex; flex-direction:column; } .lang-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); border-color:transparent; } .lang-card::before{ content:""; position:absolute; inset:0 0 auto; height:5px; background:var(--c); } .lang-card .lc-stamp{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center; font-size:28px; font-weight:900; color:#fff; background:var(--c); margin-bottom:20px; box-shadow:0 10px 24px color-mix(in srgb, var(--c) 34%, transparent); } .lang-card h3{ font-size:23px; font-weight:800; letter-spacing:-.035em; } .lang-card h3 small{ display:block; font-size:12.5px; font-weight:700; color:var(--c); letter-spacing:.08em; margin-bottom:4px; } .lang-card > p{ margin-top:12px; font-size:14.5px; color:var(--ink-3); line-height:1.7; } .lang-card ul{ margin:20px 0 24px; display:grid; gap:9px; } .lang-card li{ display:flex; gap:9px; font-size:14.5px; color:var(--ink-2); font-weight:500; } .lang-card li::before{ content:"✓"; color:var(--c); font-weight:900; font-size:13px; flex-shrink:0; margin-top:1px; } .lang-card .lc-go{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; height:50px; padding:0 20px; border-radius:var(--r-pill); background:var(--bg-soft); font-size:15px; font-weight:700; transition:background-color .2s ease, color .2s ease; } .lang-card:hover .lc-go{ background:var(--c); color:#fff; } .lang-card .lc-go span:last-child{ transition:transform .2s ease; } .lang-card:hover .lc-go span:last-child{ transform:translateX(4px); } .c-en{ --c:#2F5BFF; } .c-jp{ --c:#E03A4E; } .c-cn{ --c:#D98A16; } .lc-stamp.jp{ font-family:var(--font-jp); } .lc-stamp.cn{ font-family:var(--font-cn); } /* ---------- 10. Feature grid ---------- */ .feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .feature{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; transition:transform .22s ease, box-shadow .22s ease; } .feature:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); } .feature .f-no{ font-size:12px; font-weight:800; color:var(--accent); letter-spacing:.1em; margin-bottom:14px; display:block; } .feature .f-ico{ width:50px; height:50px; border-radius:14px; background:var(--accent-soft); display:grid; place-items:center; margin-bottom:18px; font-size:23px; } .feature h3{ font-size:18.5px; font-weight:800; letter-spacing:-.03em; margin-bottom:9px; } .feature p{ font-size:14.5px; color:var(--ink-3); line-height:1.75; } /* ---------- 11. Compare (1:1 vs 그룹) ---------- */ .compare{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:0 auto; } .cmp{ border-radius:var(--r-lg); padding:30px 28px; border:1px solid var(--line); background:#fff; } .cmp--bad{ background:var(--bg-soft); } .cmp--good{ border:2px solid var(--accent); box-shadow:var(--sh-2); position:relative; } .cmp--good::after{ content:"POWER LANGUAGE"; position:absolute; top:-12px; left:28px; background:var(--accent); color:#fff; font-size:11px; font-weight:800; letter-spacing:.06em; padding:4px 12px; border-radius:var(--r-pill); } .cmp h3{ font-size:19px; font-weight:800; margin-bottom:18px; } .cmp--bad h3{ color:var(--ink-3); } .cmp li{ display:flex; gap:10px; font-size:15px; padding:11px 0; border-bottom:1px dashed var(--line); line-height:1.6; } .cmp li:last-child{ border-bottom:0; } .cmp--bad li{ color:var(--ink-3); } .cmp--bad li::before{ content:"✕"; color:#C3C9D6; font-weight:800; flex-shrink:0; } .cmp--good li::before{ content:"✓"; color:var(--accent); font-weight:900; flex-shrink:0; } .cmp--good li{ font-weight:600; } /* ---------- 12. Steps ---------- */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; } .step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:52px 24px 28px; text-align:center; } .step::before{ counter-increment:step; content:"0" counter(step); position:absolute; top:22px; left:50%; transform:translateX(-50%); font-size:13px; font-weight:900; letter-spacing:.08em; color:#fff; background:var(--accent); width:38px; height:24px; border-radius:var(--r-pill); display:grid; place-items:center; } .step:not(:last-child)::after{ content:""; position:absolute; top:34px; right:-13px; width:8px; height:8px; border-right:2px solid var(--line); border-bottom:2px solid var(--line); transform:rotate(-45deg); } .step h3{ font-size:17.5px; font-weight:800; margin-bottom:8px; letter-spacing:-.03em; } .step p{ font-size:14px; color:var(--ink-3); line-height:1.7; } .step .s-time{ display:inline-block; margin-top:12px; font-size:11.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:var(--r-pill); } /* ---------- 13. Level table ---------- */ .level-wrap{ overflow-x:auto; border-radius:var(--r); border:1px solid var(--line); background:#fff; box-shadow:var(--sh-1); } .level-table{ min-width:760px; } .level-table th,.level-table td{ padding:16px 18px; text-align:left; border-bottom:1px solid var(--line-soft); font-size:14.5px; vertical-align:top; } .level-table thead th{ background:var(--ink); color:#fff; font-size:13px; font-weight:700; letter-spacing:.02em; border-bottom:0; position:sticky; top:0; } .level-table thead th:first-child{ border-radius:var(--r) 0 0 0; } .level-table thead th:last-child{ border-radius:0 var(--r) 0 0; } .level-table tbody tr:last-child td{ border-bottom:0; } .level-table tbody tr:hover{ background:var(--bg-softer); } .level-table .lv{ font-weight:800; color:var(--accent); white-space:nowrap; } .level-table .lv small{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-4); letter-spacing:.04em; } .level-table td b{ font-weight:700; } .level-table td p{ font-size:13.5px; color:var(--ink-3); margin-top:4px; } /* ---------- 14. Teachers ---------- */ .teachers{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .teacher{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 24px; transition:transform .22s ease, box-shadow .22s ease; } .teacher:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); } .t-head{ display:flex; align-items:center; gap:15px; margin-bottom:18px; } .t-avatar{ width:62px; height:62px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:22px; font-weight:900; color:#fff; letter-spacing:-.04em; background:linear-gradient(140deg,var(--a1),var(--a2)); } .t-name{ font-size:18px; font-weight:800; letter-spacing:-.03em; } .t-name small{ font-size:12.5px; font-weight:600; color:var(--ink-4); margin-left:6px; letter-spacing:0; } .t-role{ font-size:13px; color:var(--accent); font-weight:700; margin-top:2px; } .teacher ul{ display:grid; gap:8px; margin-bottom:16px; } .teacher li{ display:flex; gap:8px; font-size:13.8px; color:var(--ink-2); line-height:1.6; } .teacher li::before{ content:"·"; font-weight:900; color:var(--ink-4); } .t-tags{ display:flex; flex-wrap:wrap; gap:6px; } .t-tags span{ font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:var(--r-pill); background:var(--bg-soft); color:var(--ink-2); } /* ---------- 15. Pricing ---------- */ /* 3개월 혜택 배너 */ .bene-band{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:linear-gradient(100deg,#0F1730,#22315F 60%,var(--accent-dark)); color:#fff; border-radius:var(--r-lg); padding:26px 32px; margin-bottom:32px; } .bene-band .bb-tag{ font-size:11.5px; font-weight:800; letter-spacing:.08em; padding:6px 13px; border-radius:var(--r-pill); background:var(--gold); color:#231A00; flex-shrink:0; } .bene-band .bb-txt{ flex:1; min-width:240px; } .bene-band .bb-txt b{ font-size:19px; font-weight:800; letter-spacing:-.03em; display:block; } .bene-band .bb-txt span{ font-size:14px; color:#B7C1DD; } .bene-band .bb-items{ display:flex; gap:10px; flex-wrap:wrap; } .bene-band .bb-items i{ font-style:normal; font-size:13.5px; font-weight:700; padding:9px 16px; border-radius:var(--r-pill); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24); } /* 언어 그룹별 요금 (메인) */ .plan-groups{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; } .pgroup{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); transition:transform .22s ease, box-shadow .22s ease; } .pgroup:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); } .pgroup-head{ display:flex; align-items:center; gap:14px; padding:26px 28px 24px; border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, #fff), #fff); } .pgroup-head .pg-stamps{ display:flex; gap:-6px; flex-shrink:0; } .pg-stamp{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:21px; font-weight:900; color:#fff; background:var(--c); box-shadow:0 8px 18px color-mix(in srgb, var(--c) 32%, transparent); } .pg-stamp + .pg-stamp{ margin-left:-12px; } .pg-stamp.jp{ font-family:var(--font-jp); } .pg-stamp.cn{ font-family:var(--font-cn); } .pgroup-head h3{ font-size:17px; font-weight:800; letter-spacing:-.03em; line-height:1.4; } .pgroup-head p{ font-size:13px; color:var(--ink-3); margin-top:3px; } .plans{ padding:6px 28px 24px; } .plan{ padding:20px 0; border-bottom:1px dashed var(--line); } .plan:last-child{ border-bottom:0; } .plan-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; } .plan-name b{ display:block; font-size:16.5px; font-weight:800; letter-spacing:-.03em; } .plan-name span{ font-size:12.5px; color:var(--ink-4); } .plan-price{ text-align:right; white-space:nowrap; } .plan-price b{ font-size:27px; font-weight:900; letter-spacing:-.05em; } .plan-price b::after{ content:"원"; font-size:15px; font-weight:700; margin-left:2px; } .plan-price span{ display:block; font-size:12px; color:var(--ink-4); } .plan-3m{ display:flex; align-items:center; gap:7px; margin-top:12px; font-size:12.8px; font-weight:600; color:var(--c); background:color-mix(in srgb, var(--c) 9%, #fff); border:1px solid color-mix(in srgb, var(--c) 22%, #fff); padding:9px 13px; border-radius:var(--r-sm); line-height:1.5; } .plan-3m em{ font-style:normal; font-weight:800; } .plan-3m .m3-tag{ font-size:10.5px; font-weight:800; letter-spacing:.04em; color:#fff; background:var(--c); padding:3px 8px; border-radius:var(--r-pill); flex-shrink:0; } .pgroup-foot{ padding:0 28px 26px; } .pgroup-foot .btn{ background:var(--c); color:#fff; box-shadow:none; } .pgroup-foot .btn:hover{ filter:brightness(.92); } /* 포함 사항 */ .plan-incl{ margin-top:32px; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 30px; } .plan-incl h4{ font-size:15px; font-weight:800; margin-bottom:16px; letter-spacing:-.02em; } .plan-incl ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px 24px; } .plan-incl li{ display:flex; gap:9px; font-size:14.2px; color:var(--ink-2); line-height:1.6; } .plan-incl li::before{ content:"✓"; color:var(--accent); font-weight:900; flex-shrink:0; } .price-note{ text-align:center; margin-top:24px; font-size:13.5px; color:var(--ink-4); line-height:1.9; } /* 언어 페이지용 2종 요금 카드 */ .plan-duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:860px; margin:0 auto; align-items:start; } .plan-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px 30px; box-shadow:var(--sh-1); transition:transform .22s ease, box-shadow .22s ease; } .plan-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); } .plan-card--pick{ border:2px solid var(--accent); box-shadow:var(--sh-3); } .plan-card--pick::before{ content:"집중 학습 추천"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:11.5px; font-weight:800; padding:5px 14px; border-radius:var(--r-pill); white-space:nowrap; } .plan-card .pc-badge{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--accent); background:var(--accent-soft); padding:5px 12px; border-radius:var(--r-pill); } .plan-card h3{ font-size:22px; font-weight:800; letter-spacing:-.035em; margin-top:14px; } .plan-card .pc-sub{ font-size:13.5px; color:var(--ink-3); margin-top:5px; } .plan-card .pc-amt{ margin:20px 0 4px; display:flex; align-items:baseline; gap:3px; } .plan-card .pc-amt b{ font-size:36px; font-weight:900; letter-spacing:-.05em; } .plan-card .pc-amt span{ font-size:15px; font-weight:700; color:var(--ink-2); } .plan-card .pc-per{ font-size:12.5px; color:var(--ink-4); } .plan-card ul{ display:grid; gap:10px; margin:22px 0 24px; padding-top:22px; border-top:1px solid var(--line-soft); } .plan-card li{ display:flex; gap:9px; font-size:14.2px; color:var(--ink-2); line-height:1.6; } .plan-card li::before{ content:"✓"; color:var(--accent); font-weight:900; flex-shrink:0; } /* ---------- 16. Reviews ---------- */ .reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .review{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; display:flex; flex-direction:column; } .review .stars{ color:var(--gold); font-size:15px; letter-spacing:2px; margin-bottom:12px; } .review h4{ font-size:16.5px; font-weight:800; letter-spacing:-.03em; margin-bottom:10px; line-height:1.5; } .review p{ font-size:14.3px; color:var(--ink-2); line-height:1.8; flex:1; } .review .r-by{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft); display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-3); } .review .r-by .r-av{ width:32px; height:32px; border-radius:50%; background:var(--bg-soft); display:grid; place-items:center; font-size:13px; font-weight:800; color:var(--ink-2); } .review .r-by b{ color:var(--ink); font-weight:700; } .r-lang{ margin-left:auto; font-size:11px; font-weight:800; padding:4px 9px; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-dark); } /* ---------- 17. Stats band ---------- */ .stats-band{ background:linear-gradient(115deg,#0A0F1F,#182452 60%,#2B3F8F); color:#fff; border-radius:var(--r-lg); padding:48px 40px; } .stats-band .sb-head{ text-align:center; margin-bottom:36px; } .stats-band .sb-head h2{ font-size:clamp(22px,2.8vw,30px); font-weight:800; letter-spacing:-.035em; } .stats-band .sb-head p{ margin-top:10px; color:#A9B4D4; font-size:15px; } .stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; } .stats-grid > div{ padding:18px 10px; border-radius:var(--r); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); } .stats-grid strong{ display:block; font-size:clamp(26px,3.4vw,38px); font-weight:900; letter-spacing:-.05em; line-height:1.15; } .stats-grid strong i{ font-style:normal; font-size:.6em; margin-left:2px; } .stats-grid span{ font-size:13.5px; color:#A9B4D4; } /* ---------- 18. FAQ ---------- */ .faq{ max-width:840px; margin:0 auto; border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; display:flex; align-items:flex-start; gap:14px; padding:22px 4px; text-align:left; font-size:16.5px; font-weight:700; letter-spacing:-.03em; line-height:1.55; } .faq-q .q-mark{ color:var(--accent); font-weight:900; font-size:17px; flex-shrink:0; } .faq-q .q-arrow{ margin-left:auto; width:9px; height:9px; flex-shrink:0; margin-top:7px; border-right:2px solid var(--ink-4); border-bottom:2px solid var(--ink-4); transform:rotate(45deg); transition:transform .25s ease; } .faq-item.is-open .faq-q{ color:var(--accent); } .faq-item.is-open .q-arrow{ transform:rotate(-135deg); border-color:var(--accent); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.4,0,.2,1); } .faq-a > div{ padding:0 4px 24px 32px; font-size:14.8px; color:var(--ink-3); line-height:1.85; } .faq-a b{ color:var(--ink-2); } /* ---------- 19. Apply section ---------- */ .apply{ background:linear-gradient(160deg,#0A0F1F 0%,#141E3F 55%,#1E2C63 100%); color:#fff; } .apply-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:center; } .apply-copy h2{ font-size:clamp(26px,3.4vw,40px); font-weight:900; letter-spacing:-.04em; line-height:1.3; } .apply-copy > p{ margin-top:18px; color:#B3BDD9; font-size:16px; line-height:1.8; } .apply-list{ margin-top:32px; display:grid; gap:14px; } .apply-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:#DDE3F5; line-height:1.6; } .apply-list li b{ color:#fff; } .apply-list .a-ico{ width:26px; height:26px; border-radius:8px; background:rgba(255,255,255,.14); display:grid; place-items:center; font-size:13px; flex-shrink:0; margin-top:1px; } .apply-tel{ margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .apply-tel .at-n{ font-size:30px; font-weight:900; letter-spacing:-.03em; } .apply-tel .at-t{ font-size:13px; color:#98A2BF; line-height:1.5; } .apply-card{ background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:36px 34px; box-shadow:0 30px 80px rgba(3,7,18,.55); } .apply-card h3{ font-size:22px; font-weight:800; letter-spacing:-.035em; margin-bottom:6px; } .apply-card > p{ font-size:14px; color:var(--ink-3); margin-bottom:24px; } .f-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } /* ---------- 20. CTA band ---------- */ .cta-band{ background:var(--accent); color:#fff; padding:56px 0; } .cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; } .cta-band h2{ font-size:clamp(21px,2.6vw,30px); font-weight:800; letter-spacing:-.035em; line-height:1.4; } .cta-band p{ margin-top:8px; font-size:15px; opacity:.86; } .cta-band .btn--ghost{ border-color:transparent; } /* ---------- 21. Footer ---------- */ .site-footer{ background:#080D1A; color:#7C879F; padding:56px 0 40px; font-size:13.5px; } .f-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); } .f-brand .brand-en{ color:#fff; font-size:18px; } .f-brand .brand-kr{ color:#7C879F; } .f-brand p{ margin-top:14px; line-height:1.8; max-width:340px; } .f-links{ display:flex; gap:56px; flex-wrap:wrap; } .f-links h4{ color:#fff; font-size:14px; font-weight:700; margin-bottom:14px; } .f-links li{ margin-bottom:9px; } .f-links a:hover{ color:#fff; } .f-bot{ padding-top:26px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:flex-end; } .f-bot address{ font-style:normal; line-height:1.9; } .f-bot address b{ color:#B9C2D6; font-weight:600; } .f-legal{ display:flex; gap:16px; margin-bottom:10px; } .f-legal a{ color:#9AA5BD; } .f-legal a:hover{ color:#fff; } .f-copy{ font-size:12.5px; color:#5C6679; } /* ---------- 22. Floating bar / to-top ---------- */ .floatbar{ position:fixed; left:0; right:0; bottom:0; z-index:150; background:rgba(10,15,31,.95); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.1); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); display:none; gap:10px; align-items:center; } .floatbar .fb-txt{ color:#fff; font-size:13.5px; font-weight:700; line-height:1.35; flex:1; } .floatbar .fb-txt small{ display:block; font-weight:500; color:#9AA5BD; font-size:11.5px; } .floatbar .btn{ height:46px; padding:0 18px; font-size:14.5px; } .to-top{ position:fixed; right:22px; bottom:26px; z-index:140; width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:var(--sh-2); display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s; } .to-top.is-on{ opacity:1; visibility:visible; transform:translateY(0); } .to-top::before{ content:""; width:10px; height:10px; margin-top:4px; border-left:2.2px solid var(--ink-2); border-top:2.2px solid var(--ink-2); transform:rotate(45deg); } /* ---------- 23. Page hero (language pages) ---------- */ .page-hero{ position:relative; overflow:hidden; color:#fff; padding:66px 0 74px; background:linear-gradient(140deg,#0A0F1F 0%,#141C36 60%,var(--accent-dark) 165%); } .page-hero::after{ content:""; position:absolute; width:460px; height:460px; border-radius:50%; right:-140px; top:-160px; background:color-mix(in srgb, var(--accent) 46%, transparent); filter:blur(90px); } .ph-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; } .ph-stamp{ width:74px; height:74px; border-radius:22px; display:grid; place-items:center; background:var(--accent); color:#fff; font-size:34px; font-weight:900; margin-bottom:22px; box-shadow:0 14px 34px color-mix(in srgb, var(--accent) 40%, transparent); } .ph-stamp.jp{ font-family:var(--font-jp); } .ph-stamp.cn{ font-family:var(--font-cn); } .ph-crumb{ font-size:13px; color:#98A2BF; margin-bottom:18px; } .ph-crumb a:hover{ color:#fff; } .page-hero h1{ font-size:clamp(29px,4vw,46px); font-weight:900; line-height:1.26; letter-spacing:-.045em; } .page-hero h1 em{ font-style:normal; color:color-mix(in srgb, var(--accent) 60%, #fff); } .page-hero .ph-sub{ margin-top:18px; font-size:clamp(15px,1.7vw,17.5px); color:#BCC5DE; line-height:1.8; max-width:520px; } .ph-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; } .ph-chips span{ font-size:13px; font-weight:600; padding:7px 14px; border-radius:var(--r-pill); background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); color:#E7ECFF; } .ph-actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:32px; } .ph-panel{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); padding:28px 26px; backdrop-filter:blur(8px); } .ph-panel h3{ font-size:16px; font-weight:800; margin-bottom:18px; color:#fff; letter-spacing:-.02em; } .ph-panel li{ display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px dashed rgba(255,255,255,.14); font-size:14.5px; color:#C6CFE6; } .ph-panel li:last-child{ border-bottom:0; } .ph-panel li b{ color:#fff; font-weight:700; text-align:right; } /* ---------- 24. Target / 이런 분께 ---------- */ .target-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:900px; margin:0 auto; } .target{ display:flex; gap:15px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; transition:border-color .2s ease, transform .2s ease; } .target:hover{ border-color:var(--accent); transform:translateX(4px); } .target .tg-no{ width:28px; height:28px; border-radius:9px; background:var(--accent-soft); color:var(--accent-dark); display:grid; place-items:center; font-size:13px; font-weight:800; flex-shrink:0; } .target b{ display:block; font-size:16px; font-weight:700; letter-spacing:-.03em; } .target p{ font-size:13.8px; color:var(--ink-3); margin-top:5px; line-height:1.65; } /* ---------- 25. Sample lesson / 표현 카드 ---------- */ .phrase-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .phrase{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; border-left:4px solid var(--accent); } .phrase .ph-lv{ font-size:11.5px; font-weight:800; color:var(--accent); letter-spacing:.08em; margin-bottom:12px; display:block; } .phrase .ph-native{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.5; } .phrase.jp .ph-native{ font-family:var(--font-jp); } .phrase.cn .ph-native{ font-family:var(--font-cn); } .phrase .ph-read{ font-size:13px; color:var(--ink-4); margin-top:6px; } .phrase .ph-ko{ font-size:14.5px; color:var(--ink-2); margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); } /* ---------- 26. Reveal animation ---------- */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } .reveal.is-in{ opacity:1; transform:none; } .reveal[data-d="1"]{ transition-delay:.08s; } .reveal[data-d="2"]{ transition-delay:.16s; } .reveal[data-d="3"]{ transition-delay:.24s; } .reveal[data-d="4"]{ transition-delay:.32s; } .reveal[data-d="5"]{ transition-delay:.4s; } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } } /* ---------- 27. Responsive ---------- */ @media (max-width:1080px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } .quick-card{ max-width:520px; } .apply-grid{ grid-template-columns:1fr; gap:40px; } .ph-grid{ grid-template-columns:1fr; gap:36px; } .ph-panel{ max-width:560px; } .steps{ grid-template-columns:repeat(2,1fr); } .step:nth-child(2)::after{ display:none; } .header-tel{ display:none; } } @media (max-width:900px){ .sec{ padding:64px 0; } .lang-cards,.feature-grid,.teachers,.reviews,.phrase-grid{ grid-template-columns:1fr 1fr; } .plan-groups{ grid-template-columns:1fr; } .plan-incl ul{ grid-template-columns:1fr 1fr; } .stats-grid{ grid-template-columns:repeat(2,1fr); } .compare{ grid-template-columns:1fr; } .stats-band{ padding:36px 24px; } } @media (max-width:820px){ .gnb{ display:none; } .header-cta{ display:none; } .nav-toggle{ display:block; } .m-nav{ display:block; } body.nav-open{ overflow:hidden; } .floatbar{ display:flex; } body{ padding-bottom:74px; } .to-top{ bottom:88px; right:16px; } } @media (max-width:640px){ .sec{ padding:52px 0; } .sec-head{ margin-bottom:34px; } .lang-cards,.feature-grid,.teachers,.reviews,.phrase-grid,.steps,.target-grid,.plan-duo{ grid-template-columns:1fr; } .plan-incl ul{ grid-template-columns:1fr; } .plan-incl{ padding:24px 22px; } .bene-band{ padding:22px 20px; gap:16px; } .pgroup-head,.plans,.pgroup-foot{ padding-left:22px; padding-right:22px; } .plan-card{ padding:28px 24px; } .step:not(:last-child)::after{ display:none; } .step{ padding:48px 20px 24px; } .hero{ padding:52px 0 64px; } .hero-stats{ gap:24px 30px; } .quick-card,.apply-card{ padding:26px 22px; } .f-row{ grid-template-columns:1fr; } .pick{ grid-template-columns:1fr 1fr; } .pick--4{ grid-template-columns:1fr 1fr; } .topbar .wrap{ font-size:12px; gap:8px; } .topbar .tb-link{ display:none; } .f-links{ gap:32px; } .cta-band .wrap{ flex-direction:column; align-items:flex-start; } .stats-band{ padding:30px 18px; } .price--best::before{ font-size:11px; } } @media (max-width:400px){ .stats-grid{ grid-template-columns:1fr; } .floatbar .fb-txt{ display:none; } .floatbar .btn{ flex:1; } }