html:has(.ks-home-stage) {
scrollbar-gutter: stable;
}
body .site-content .content-area:has(.ks-home-stage) {
overflow-x: visible;
}
.inside-article:has(.ks-home-stage) {
padding-top: 0;
}
body:has(.ks-home-stage) {
overflow-x: clip;
}
.ks-home-stage {
display: block;
position: relative;
width: 100vw;
margin: 0 0 0 calc(50% - 50vw);
}
body:has(.ks-home-stage) #chrome {
margin-bottom: 0;
}
@font-face {
font-family: KS Noto Home;
src: url(/assets/fonts/ks-home-noto-800.woff2) format("woff2");
font-weight: 800;
font-display: block;
}
.ks-home-stage .km {
--k-acc: #1B4FD8;
--k-up: #0B7A4B;
--k-warn: #A96905;
--k-navy: #071233;
--k-navy2: #0D2266;
--k-brand: #1B4FD8;
--k-ink: #0F141A;
--k-mut: #5B6475;
--k-line: #E1E6EF;
--k-mist: #F3F6FD;
--k-paper: #FBFAF7;
--k-ko:
"KS Noto Home",
"Noto Sans KR",
sans-serif;
--k-cond:
"Arial Narrow",
"Roboto Condensed",
"Helvetica Neue",
Arial,
sans-serif;
--k-spring: linear(0, .3 8%, .82 22%, 1.035 40%, 1.012 60%, .998 80%, 1);
--k-out: cubic-bezier(.2, .8, .2, 1);
--k-sh2: 0 1px 2px rgba(7, 18, 51, .08), 0 8px 24px rgba(7, 18, 51, .1);
--k-sh3:
0 1px 2px rgba(7, 18, 51, .1),
0 12px 28px rgba(7, 18, 51, .16),
0 32px 64px rgba(7, 18, 51, .18);
display: block;
overflow-x: clip;
color: var(--k-ink);
}
.ks-home-stage .km {
background: #fff;
}
.ks-home-stage .km *,
.ks-home-stage .km *:before,
.ks-home-stage .km *:after {
box-sizing: border-box;
}
.ks-home-stage .km [lang=ko] {
font-family: var(--k-ko);
}
.ks-home-stage .km-bk,
.ks-home-stage .km-ri b,
.ks-home-stage .km-part {
translate: 0 calc(var(--dy, 0) * 1em);
}
.ks-home-stage .km-sec.km-hero {
margin-top: 40px;
}
.ks-home-stage .km-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.ks-home-stage .km-sec.km-hero {
position: relative;
overflow: hidden;
color: #fff;
padding: 28px 0 16px;
background:
radial-gradient(
900px 520px at 78% 18%,
rgba(46, 98, 255, .45),
transparent 70%),
radial-gradient(
700px 500px at 0% 100%,
rgba(27, 79, 216, .35),
transparent 70%),
linear-gradient(
160deg,
var(--k-navy) 0%,
var(--k-navy2) 58%,
#163FB0 100%);
}
.ks-home-stage .km-hero-bg {
position: absolute;
inset: -10% 0 0;
pointer-events: none;
will-change: transform;
}
.ks-home-stage .km-hero-bg span {
position: absolute;
font: 800 560px/1 var(--k-ko);
color: #ffffff0a;
}
.ks-home-stage .km-hero-bg span:nth-child(1) {
left: -4%;
top: -6%;
}
.ks-home-stage .km-hero-bg span:nth-child(2) {
left: 30%;
top: 38%;
font-size: 300px;
color: #7ea0ff0f;
}
.ks-home-stage .km-hero-bg span:nth-child(3) {
right: 4%;
top: 52%;
font-size: 360px;
color: #7ea0ff0d;
}
.ks-home-stage .km-hero-bg span:nth-child(4) {
right: -6%;
top: -18%;
font-size: 460px;
}
.km-intro .ks-home-stage .km-hero-bg span {
animation: km-near 1.2s var(--k-out) both;
}
@keyframes km-near {
0% {
transform: scale(1.15);
}
to {
transform: none;
}
}
.ks-home-stage .km-spot {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity .3s;
background:
radial-gradient(
320px circle at var(--mx, 50%) var(--my, 50%),
rgba(140, 175, 255, .18),
transparent 70%);
}
.ks-home-stage .km-hero.is-lit .km-spot {
opacity: 1;
}
.ks-home-stage .km-hero-in {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 720px;
gap: 44px;
align-items: center;
}
.ks-home-stage .km-tag {
margin: 0 0 16px;
font: 700 12px/1.3 var(--k-cond);
letter-spacing: .22em;
text-transform: uppercase;
color: #a9c1ff;
display: flex;
align-items: center;
gap: 10px;
}
.ks-home-stage .km-tag:before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
}
.ks-home-stage [data-script=cjk] .km-tag {
letter-spacing: .08em;
}
.ks-home-stage .km-h1 {
margin: 0;
font-size: 46px;
line-height: 1.07;
font-weight: 800;
letter-spacing: -.022em;
color: #fff;
}
.ks-home-stage .km-w {
display: inline-block;
}
.km-motion .ks-home-stage .km-w {
animation: km-rise .8s var(--k-spring) both;
animation-delay: calc(var(--i) * 55ms);
}
@keyframes km-rise {
0% {
transform: translateY(.32em);
}
to {
transform: none;
}
}
.ks-home-stage .km-lede {
margin: 18px 0 0;
font-size: 17px;
line-height: 1.6;
color: #d3deff;
max-width: 34em;
}
.ks-home-stage .km-btns {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 26px 0 0;
}
.ks-home-stage .km-btn {
--tx: 0px;
--ty: 0px;
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 52px;
padding: 0 22px;
border-radius: 14px;
font-weight: 800;
font-size: 16px;
text-decoration: none;
transform: translate(var(--tx), var(--ty));
transition: transform .18s var(--k-out), box-shadow .12s;
}
.ks-home-stage .km-btn--main {
background: #fff;
color: var(--k-navy);
box-shadow: 0 4px #8ea8f2, 0 12px 28px #00000040;
}
.ks-home-stage .km-btn--main:active {
transform: translate(var(--tx), calc(var(--ty) + 3px)) scale(.98);
box-shadow: 0 1px #8ea8f2, 0 6px 14px #00000040;
transition-duration: .12s;
}
.ks-home-stage .km-btn--alt {
color: #fff;
border: 1.5px solid rgba(255, 255, 255, .42);
background: #ffffff0f;
}
.ks-home-stage .km-btn--alt:active {
transform: translate(var(--tx), var(--ty)) scale(.98);
}
.ks-home-stage .km-btn .km-arw {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ks-home-stage .km-btn--main:after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
105deg,
transparent 35%,
rgba(27, 79, 216, .18) 50%,
transparent 65%);
transform: translate(-120%);
}
.ks-home-stage .km-hero:has(.km-machine.is-rest) .km-btn--main:after {
animation: km-shine 1.1s .3s var(--k-out) 1 both;
}
@keyframes km-shine {
to {
transform: translate(120%);
}
}
.ks-home-stage .km-btn:focus-visible {
outline: 3px solid #9DB6FF;
outline-offset: 3px;
}
.ks-home-stage .km-trust {
list-style: none;
margin: 22px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
font-size: 14px;
color: #bccbf7;
}
.ks-home-stage .km-trust li {
display: inline-flex;
align-items: center;
gap: 7px;
}
.ks-home-stage .km-trust li:before {
content: "";
width: 14px;
height: 14px;
border-radius: 50%;
background: #6ee7b72e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%236EE7B7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.ks-home-stage .km-trust a {
color: inherit;
}
.ks-home-stage .km-hero .km-scene {
margin-top: 0;
}
.ks-home-stage .km-stage {
position: relative;
height: 540px;
border-radius: 30px;
background: #fff;
color: var(--k-ink);
box-shadow:
0 2px 4px #0000002e,
0 18px 40px #02081e59,
0 50px 100px #02081e59;
overflow: hidden;
isolation: isolate;
}
.ks-home-stage .km-machine {
height: 100%;
display: flex;
flex-direction: column;
gap: 14px;
padding: 20px 26px 18px;
}
.ks-home-stage .km-row1 {
display: flex;
align-items: center;
gap: 22px;
}
.ks-home-stage .km-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.ks-home-stage .km-typer .is-comp:after {
content: "";
position: absolute;
left: 4%;
right: 4%;
bottom: -.06em;
height: .045em;
min-height: 2px;
background: currentColor;
}
.ks-home-stage .km-caret {
width: 3px;
height: .9em;
background: var(--k-brand);
border-radius: 2px;
animation: km-blink 1.06s steps(1) infinite;
}
@keyframes km-blink {
50% {
opacity: 0;
}
}
.ks-home-stage .km-reels {
display: flex;
gap: 10px;
}
.ks-home-stage .km-reel {
--ih: 88px;
--wh: 148px;
width: 96px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.ks-home-stage .km-reel--L {
--c: var(--k-acc);
}
.ks-home-stage .km-reel--V {
--c: var(--k-up);
}
.ks-home-stage .km-reel--T {
--c: var(--k-warn);
}
.ks-home-stage .km-win {
position: relative;
width: 100%;
height: var(--wh);
border-radius: 20px;
overflow: hidden;
background: #fff;
border: 2px solid color-mix(in srgb, var(--c) 28%, #fff);
box-shadow: var(--k-sh2);
-webkit-mask-image:
linear-gradient(
transparent 0,
#000 22%,
#000 78%,
transparent 100%);
mask-image:
linear-gradient(
transparent 0,
#000 22%,
#000 78%,
transparent 100%);
}
.ks-home-stage .km-win:after {
content: "";
position: absolute;
left: 6px;
right: 6px;
top: calc(50% - var(--ih) / 2 + 4px);
height: calc(var(--ih) - 8px);
border-radius: 16px;
border: 3px solid var(--c);
background: color-mix(in srgb, var(--c) 7%, transparent);
pointer-events: none;
}
.ks-home-stage .km-strip {
will-change: transform;
transform: translate3d(0, calc((var(--p) + 2) * var(--ih) * -1 + (var(--wh) - var(--ih)) / 2), 0);
}
.ks-home-stage .km-ri {
height: var(--ih);
display: grid;
place-items: center;
}
.ks-home-stage .km-ri b {
font: 800 76px/1 var(--k-ko);
color: var(--c);
}
.ks-home-stage .km-none {
display: grid;
place-items: center;
width: 64%;
aspect-ratio: 1;
border: 3px dashed color-mix(in srgb, var(--c) 60%, #fff);
border-radius: 12px;
font-style: normal;
}
.ks-home-stage .km-none small {
font: 700 11px/1.1 system-ui, sans-serif;
color: var(--k-mut);
text-align: center;
text-transform: uppercase;
letter-spacing: .04em;
}
.ks-home-stage .km-reel.is-stop .km-win {
animation: km-click .34s var(--k-spring);
}
@keyframes km-click {
0% {
transform: scale(1);
}
35% {
transform: scale(1.05);
}
to {
transform: scale(1);
}
}
.ks-home-stage .km-reel-lab {
font: 600 12px/1.2 system-ui, sans-serif;
color: var(--k-mut);
text-align: center;
}
.ks-home-stage .km-reel-lab b {
color: var(--c);
}
.ks-home-stage .km-blocks {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
min-height: 0;
}
.ks-home-stage .km-block {
position: relative;
display: block;
height: 100%;
min-height: 0;
border-radius: 26px;
background:
linear-gradient(
180deg,
#f7f9ff,
#edf2fe);
border: 2px solid var(--k-line);
text-decoration: none;
color: var(--k-ink);
box-shadow: inset 0 1px #fff, var(--k-sh2);
transition: transform .18s var(--k-out), box-shadow .18s;
}
.ks-home-stage .km-block:hover {
transform: translateY(-4px);
box-shadow: inset 0 1px #fff, var(--k-sh3);
}
.ks-home-stage .km-bk {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font: 800 250px/1 var(--k-ko);
color: var(--k-ink);
opacity: 0;
transition: opacity 80ms linear;
}
.ks-home-stage .km-seek .km-bk {
transition: none;
}
.ks-home-stage .km-bk.is-cur {
opacity: 1;
}
.ks-home-stage .km-bk,
.ks-home-stage .km-reels,
.ks-home-stage .km-math {
pointer-events: none;
}
.ks-home-stage .km-block.is-dim .km-bk.is-cur {
opacity: .28;
}
.ks-home-stage .km-block.is-live {
border-color: color-mix(in srgb, var(--k-brand) 45%, #fff);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-brand) 12%, transparent), var(--k-sh2);
}
.ks-home-stage .km-block.is-done .km-bk.is-cur {
animation: km-pulse .5s var(--k-spring);
}
@keyframes km-pulse {
0% {
transform: scale(1);
}
40% {
transform: scale(1.06);
}
to {
transform: scale(1);
}
}
.ks-home-stage .km-math {
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
font: 700 15px/1.2 system-ui, sans-serif;
color: var(--k-mut);
}
.ks-home-stage .km-math small {
font-weight: 600;
font-size: 12px;
}
.ks-home-stage .km-parts {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ks-home-stage .km-parts b {
color: #a2abba;
font-weight: 400;
}
.ks-home-stage .km-part {
--c: var(--k-acc);
min-width: 40px;
height: 40px;
padding: 0 8px;
display: inline-grid;
place-items: center;
border-radius: 11px;
font: 800 24px/1 var(--k-ko);
font-style: normal;
color: var(--c);
background: #fff;
border: 2px solid color-mix(in srgb, var(--c) 25%, #fff);
transition:
background .2s,
color .2s,
border-color .2s;
}
.ks-home-stage .km-part--V {
--c: var(--k-up);
}
.ks-home-stage .km-part--T {
--c: var(--k-warn);
}
.ks-home-stage .km-part.is-on {
background: var(--c);
color: #fff;
border-color: var(--c);
}
.ks-home-stage .km-part.is-none {
border-style: dashed;
background: #fff;
}
.ks-home-stage .km-mul span {
color: var(--k-ink);
position: relative;
}
.ks-home-stage .km-mul .c-L sup {
color: var(--k-acc);
}
.ks-home-stage .km-mul .c-V sup {
color: var(--k-up);
}
.ks-home-stage .km-mul .c-T sup {
color: #8f5a04;
}
.ks-home-stage .km-mul sup {
font-size: 11px;
margin-left: 2px;
}
.ks-home-stage .km-mul > b {
color: var(--k-ink);
font-size: 17px;
}
.ks-home-stage .km-ctl {
margin: 0;
display: flex;
align-items: center;
gap: 10px 14px;
flex-wrap: wrap;
}
.ks-home-stage .km-pill {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 0 16px;
border-radius: 999px;
border: 1.5px solid var(--k-line);
background: #fff;
font: 700 14px/1 system-ui, sans-serif;
color: var(--k-ink);
cursor: pointer;
transition:
transform .12s,
background .2s,
opacity .2s;
}
.ks-home-stage .km-pill:active {
transform: scale(.98);
}
.ks-home-stage .km-pill[disabled] {
opacity: .45;
cursor: default;
}
.ks-home-stage .km-spin:not([disabled]) {
background: var(--k-brand);
color: #fff;
border-color: var(--k-brand);
}
.ks-home-stage .km-link .km-arw {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform .18s;
}
.ks-home-stage .km-wordline[hidden] {
display: none;
}
.ks-home-stage .km-wordline {
margin: 0;
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.ks-home-stage .km-wl {
padding: 6px 10px;
border-radius: 10px;
background: var(--k-mist);
font: 600 12px/1 system-ui, sans-serif;
color: var(--k-mut);
opacity: .35;
transition:
opacity .3s,
transform .3s var(--k-spring),
background .3s;
}
.ks-home-stage .km-wl b {
font-size: 14px;
color: var(--k-ink);
margin-right: 2px;
}
.ks-home-stage .km-wl.is-done,
.ks-home-stage .km-wl.is-cur {
opacity: 1;
}
.ks-home-stage .km-wl.is-cur {
background: #e4ebff;
transform: translateY(-2px);
}
.ks-home-stage .km-mot {
position: relative;
margin-top: 0;
height: 62vh;
min-height: 420px;
max-height: 640px;
overflow: hidden;
background: var(--k-navy);
color: #fff;
}
.ks-home-stage .km-mot[data-bg=paper] {
background: var(--k-paper);
color: var(--k-ink);
}
.ks-home-stage .km-mot[data-bg=brand] {
background: var(--k-brand);
color: #fff;
}
.ks-home-stage .km-mot-in {
position: absolute;
inset: 0;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.ks-home-stage .km-pa {
--rv: 1;
--ko: 1;
position: absolute;
inset: 0;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.ks-home-stage .km-pa.is-on {
display: flex;
}
.ks-home-stage .km-pa-w {
margin: 0;
font: 900 clamp(64px, 26vh, 230px)/.92 var(--k-cond);
font-stretch: condensed;
text-transform: uppercase;
letter-spacing: -.01em;
white-space: nowrap;
clip-path: inset(calc((1 - var(--rv)) * 100%) 0 0 0);
}
.ks-home-stage .km-pa--lead .km-pa-w {
font-size: clamp(40px, 13vh, 120px);
}
.ks-home-stage .km-pa--stack .km-pa-w {
font-size: clamp(48px, 17vh, 160px);
}
.ks-home-stage .km-pa-w--ko {
font: 800 clamp(96px, 34vh, 300px)/1 var(--k-ko);
text-transform: none;
}
.ks-home-stage [data-script=cjk] .km-pa-w,
.ks-home-stage [data-script=cjk] .km-pa-slam {
font-family: system-ui, sans-serif;
font-weight: 800;
text-transform: none;
}
.ks-home-stage .km-pa-head {
margin: 0 0 1.4vh;
font: 900 clamp(16px, 3.6vh, 30px)/1.2 var(--k-cond);
letter-spacing: .3em;
text-transform: uppercase;
opacity: .7;
}
.ks-home-stage .km-pa-tail i {
display: inline-block;
font-style: normal;
opacity: 0;
}
.ks-home-stage .km-pa-tail i.is-on {
opacity: 1;
}
.ks-home-stage .km-pa-tail i:last-child.is-on {
transform: rotate(12deg);
}
.ks-home-stage .km-nw {
white-space: nowrap;
}
.ks-home-stage .km-pa--end .km-pa-head {
font-size: clamp(12px, 2.6vh, 22px);
letter-spacing: .14em;
max-width: 60em;
}
.ks-home-stage .km-pa-ko {
margin: 1.8vh 0 0;
font: 800 clamp(28px, 7vh, 64px)/1 var(--k-ko);
color: #8fb0ff;
opacity: var(--ko);
translate: 0 calc((1 - var(--ko)) * 10px);
}
.ks-home-stage .km-mot[data-bg=paper] .km-pa-ko {
color: var(--k-brand);
}
.ks-home-stage .km-mot[data-bg=brand] .km-pa-ko {
color: #d6e2ff;
}
.ks-home-stage .km-pa-prev {
margin: 0 0 2vh;
font: 900 clamp(16px, 3.4vh, 30px)/1.2 var(--k-cond);
letter-spacing: .08em;
text-transform: uppercase;
opacity: .55;
}
.ks-home-stage .km-pa-note {
margin: 0;
max-width: 30em;
font: 600 clamp(16px, 3vh, 24px)/1.45 system-ui, sans-serif;
clip-path: inset(calc((1 - var(--rv)) * 100%) 0 0 0);
}
.ks-home-stage .km-pa-slam {
margin: 1.2vh 0 .6vh;
font: 900 clamp(34px, 9vh, 88px)/.95 var(--k-cond);
font-stretch: condensed;
text-transform: uppercase;
white-space: nowrap;
}
.ks-home-stage .km-typer {
margin: 0;
display: flex;
align-items: center;
gap: 6px;
font: 800 clamp(90px, 21vh, 190px)/1 var(--k-ko);
}
.ks-home-stage .km-typer span {
position: relative;
}
.ks-home-stage .km-typer .km-k--l {
color: #8fb0ff;
}
.ks-home-stage .km-typer .km-k--v {
color: #6ee7b7;
}
.ks-home-stage .km-typer .km-k--t {
color: #f5c97a;
}
.ks-home-stage .km-typer .km-caret {
height: .8em;
width: 6px;
background: #8fb0ff;
}
.ks-home-stage .km-pa-stats {
margin: 2vh 0 0;
font: 600 14px/1.3 system-ui, sans-serif;
color: #a9c1ff;
}
.km-still .ks-home-stage .km-caret {
animation: none;
}
.ks-home-stage .km-mot {
--km-hl-flash: #FF7A59;
--km-hl-settle: #8FB0FF;
}
.ks-home-stage .km-mot[data-bg=dn] {
background: #b93318;
color: #fff;
}
.ks-home-stage .km-mot[data-bg=dn] .km-pa-ko {
color: #fff;
}
.ks-home-stage .km-pa[data-hits] .km-pa-w {
position: relative;
clip-path: none;
}
.ks-home-stage .km-h {
display: inline-block;
transform-origin: 50% 90%;
}
.ks-home-stage .km-pa[data-big-ko] .km-pa-w {
font-size: clamp(24px, 6vh, 56px);
letter-spacing: .04em;
}
.ks-home-stage .km-pa[data-big-ko] .km-pa-ko {
display: inline-block;
margin-top: 2vh;
font-size: clamp(90px, 27vh, 260px);
color: #fff;
transform-origin: 50% 90%;
}
.ks-home-stage .km-rip {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
box-sizing: border-box;
border: 3px solid currentColor;
border-radius: 14px;
opacity: 0;
pointer-events: none;
}
.ks-home-stage .km-pa--end .km-rip {
color: var(--km-hl-flash);
}
.ks-home-stage .km-sl-caret {
display: inline-block;
position: relative;
width: 0;
height: .82em;
vertical-align: -.06em;
}
.ks-home-stage .km-sl-caret:after {
content: "";
position: absolute;
left: .05em;
top: 0;
bottom: 0;
width: .08em;
min-width: 3px;
background: currentColor;
border-radius: 2px;
}
.ks-home-stage .km-sl-rest {
visibility: hidden;
}
.ks-home-stage .km-typer-t {
display: inline-block;
transform-origin: 50% 85%;
}
.ks-home-stage .km-replay {
position: absolute;
right: 20px;
bottom: 18px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 14px;
border: 1.5px solid rgba(255, 255, 255, .35);
border-radius: 999px;
background: #ffffff14;
color: #dce5ff;
font: 700 13px/1 system-ui, sans-serif;
cursor: pointer;
}
.ks-home-stage .km-replay svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ks-home-stage .km-replay[hidden] {
display: none;
}
.ks-home-stage .km-sec.km-hero {
margin-top: 0;
}
.ks-home-stage .km-sub {
margin: 30px 0 0;
font-size: 20px;
line-height: 1.3;
font-weight: 800;
color: #fff;
text-wrap: balance;
}
.ks-home-stage .km-parts-key {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: grid;
gap: 6px;
font-size: 15px;
color: #d3deff;
}
.ks-home-stage .km-pk {
display: flex;
align-items: center;
gap: 10px;
}
.ks-home-stage .km-pk i {
width: 12px;
height: 12px;
border-radius: 4px;
background: var(--k-acc);
box-shadow: 0 0 0 2px #ffffff80;
}
.ks-home-stage .km-pk--V i {
background: var(--k-up);
}
.ks-home-stage .km-pk--T i {
background: var(--k-warn);
}
.ks-home-stage .km-sub-note {
margin: 10px 0 0;
font-size: 14px;
line-height: 1.5;
color: #a9c1ff;
}
.ks-home-stage .km-block.is-empty {
border-style: dashed;
background: transparent;
box-shadow: none;
}
@media (max-width: 1099px) {
.ks-home-stage .km-hero-in {
grid-template-columns: minmax(0, 1fr);
}
.ks-home-stage .km-stage {
max-width: 720px;
width: 100%;
margin: 0 auto;
}
}
@media (max-width: 719px) {
.ks-home-stage .km-wrap {
padding: 0 16px;
}
.ks-home-stage .km-sec.km-hero {
padding: 18px 0 14px;
}
.ks-home-stage .km-hero-in {
gap: 20px;
}
.ks-home-stage .km-tag {
margin-bottom: 8px;
font-size: 10px;
letter-spacing: .16em;
}
.ks-home-stage .km-btns {
margin-top: 14px;
}
.ks-home-stage .km-h1 {
font-size: 27px;
line-height: 1.1;
}
.ks-home-stage .km-lede {
font-size: 15px;
margin-top: 16px;
}
.ks-home-stage .km-btn {
min-height: 46px;
padding: 0 16px;
font-size: 15px;
}
.ks-home-stage .km-trust {
font-size: 13px;
margin-top: 14px;
}
.ks-home-stage .km-stage {
height: 452px;
border-radius: 22px;
}
.ks-home-stage .km-machine {
gap: 10px;
padding: 12px 12px 10px;
}
.ks-home-stage .km-row1 {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.ks-home-stage .km-reels {
gap: 8px;
}
.ks-home-stage .km-reel {
--ih: 72px;
--wh: 104px;
flex: 1;
width: auto;
gap: 4px;
}
.ks-home-stage .km-ri b {
font-size: 54px;
}
.ks-home-stage .km-reel-lab {
font-size: 10px;
}
.ks-home-stage .km-info {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.ks-home-stage .km-math {
gap: 4px;
font-size: 11px;
}
.ks-home-stage .km-math small {
display: none;
}
.ks-home-stage .km-mul {
white-space: nowrap;
}
.ks-home-stage .km-mul sup {
display: inline-block;
min-width: 3ch;
margin-left: 1px;
font-size: 10px;
}
.ks-home-stage .km-pa--end .km-pa-head {
letter-spacing: .06em;
padding: 0 12px;
}
.ks-home-stage .km-blocks {
gap: 10px;
}
.ks-home-stage .km-block {
border-radius: 20px;
}
.ks-home-stage .km-bk {
font-size: 146px;
}
.ks-home-stage .km-part {
min-width: 30px;
height: 30px;
font-size: 18px;
border-radius: 9px;
}
.ks-home-stage .km-pill {
min-height: 36px;
padding: 0 12px;
font-size: 13px;
}
.ks-home-stage .km-wl {
padding: 4px 6px;
font-size: 10px;
}
.ks-home-stage .km-wl b {
font-size: 12px;
}
.ks-home-stage .km-mot {
margin-top: 0;
height: 70vh;
min-height: 0;
}
.ks-home-stage .km-mot-in {
padding: 0 12px;
}
.ks-home-stage .km-pa-w {
font-size: 72px;
}
.ks-home-stage .km-pa--lead .km-pa-w {
font-size: 40px;
}
.ks-home-stage .km-pa--stack .km-pa-w {
font-size: 52px;
}
.ks-home-stage .km-pa-w--ko {
font-size: 120px;
}
.ks-home-stage .km-typer {
font-size: 96px;
}
.ks-home-stage .km-pa-slam {
font-size: 34px;
}
.ks-home-stage .km-pa-stats {
font-size: 12px;
}
.ks-home-stage .km-pa[data-big-ko] .km-pa-w {
font-size: 28px;
}
.ks-home-stage .km-pa[data-big-ko] .km-pa-ko {
font-size: 150px;
}
.ks-home-stage .km-sub {
font-size: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.ks-home-stage .km *,
.ks-home-stage .km *:before,
.ks-home-stage .km *:after {
animation: none !important;
transition: none !important;
}
}
.ks-home-stage .km-pa--note .km-pa-prev .km-nw {
display: inline-block;
}
.ks-home-stage .km-pa-note {
max-width: none;
font-size: clamp(18px, min(5.2vh, 6.2vw), 46px);
line-height: 1.3;
}
.ks-home-stage .km-note-l {
display: inline-block;
white-space: nowrap;
}
.ks-home-stage .km-note-y {
display: block;
margin-top: 1.6vh;
font: 900 clamp(52px, min(14vh, 22vw), 132px)/1 var(--k-cond);
letter-spacing: .02em;
color: var(--k-brand);
}
.ks-home-stage .km-mot[data-bg=navy] .km-note-y,
.ks-home-stage .km-mot[data-bg=brand] .km-note-y {
color: #fff;
}
.ks-home-stage .km-note-y {
font-variant-numeric: tabular-nums;
}
.ks-home-stage .km-mot {
margin-top: 0;
}
.ks-home-stage .km-pa--search .km-pa-w.km-sq {
font:
600 clamp(25px, 6.6vw, 62px)/1.2 system-ui,
-apple-system,
"Segoe UI",
Roboto,
Arial,
sans-serif;
text-transform: none;
letter-spacing: 0;
clip-path: none;
font-stretch: normal;
}
.ks-home-stage .km-sq-box {
display: inline-flex;
align-items: center;
gap: .45em;
background: #fff;
color: #202124;
border-radius: 999px;
padding: .42em .95em .42em .7em;
box-shadow: 0 .3em 1em #00000059;
}
.ks-home-stage .km-sq-ic {
width: .9em;
height: .9em;
color: #5f6368;
flex: none;
}
.ks-home-stage .km-sq-t {
white-space: pre;
}
.ks-home-stage .km-sq-rest {
visibility: hidden;
}
.ks-home-stage .km-sq-caret {
display: inline-block;
width: .07em;
height: 1.05em;
background: #1a73e8;
vertical-align: -.17em;
margin: 0 .02em;
}
.ks-home-stage .km-sq-q {
display: inline-block;
color: var(--km-hl-flash);
font-weight: 800;
transform-origin: 50% 85%;
visibility: hidden;
margin-left: -.1em;
font-size: 1.6em;
line-height: .8;
vertical-align: -.08em;
}
.ks-home-stage .km-pa-site {
color: var(--km-hl-flash);
font-weight: 800;
}
.ks-home-stage .km-answer {
margin: .6em 0 0;
max-width: 40em;
font-size: clamp(16px, 1.9vw, 19px);
line-height: 1.55;
}
.ks-home-stage #letters .km-say > b,
.ks-home-stage .km-pr-in,
.ks-home-stage .km-pr-block b,
.ks-home-stage .km-final-g b,
.ks-home-stage .km-fam-g > b,
.ks-home-stage .km-shape-tab b,
.ks-home-stage .km-cji-g,
.ks-home-stage .km-st-listen > b {
translate: 0 calc(var(--dy, 0) * 1em);
}
.ks-home-stage .km-nums {
list-style: none;
position: relative;
margin: 34px auto 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
}
.ks-home-stage .km-nums li + li {
border-left: 1px solid rgba(255, 255, 255, .14);
}
.ks-home-stage .km-nums a {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 18px;
color: inherit;
text-decoration: none;
transition: transform .18s var(--k-out);
}
.ks-home-stage .km-nums a:hover {
transform: translateY(-3px);
}
.ks-home-stage .km-num {
font: 800 34px/1 system-ui, sans-serif;
font-variant-numeric: tabular-nums;
letter-spacing: -.02em;
}
.ks-home-stage .km-nums span {
font-size: 13px;
line-height: 1.3;
color: #bccbf7;
}
.ks-home-stage .km-next {
margin: 22px 0 0;
}
.ks-home-stage .km-next a {
font-weight: 700;
font-size: 15px;
color: var(--k-brand);
text-decoration: none;
}
.ks-home-stage .km-next--hero a {
color: #a9c1ff;
}
@media (max-width: 1099px) {
.ks-home-stage .km-nums {
grid-template-columns: repeat(3, 1fr);
row-gap: 14px;
}
.ks-home-stage .km-nums li:nth-child(4) {
border-left: 0;
}
}
@media (max-width: 719px) {
.ks-home-stage .km-nums {
margin-top: 22px;
}
.ks-home-stage .km-nums a {
padding: 4px 8px;
}
.ks-home-stage .km-num {
font-size: 24px;
}
.ks-home-stage .km-nums span {
font-size: 11px;
}
}
.ks-home-stage .km-sec {
position: relative;
padding: 104px 0;
}
.ks-home-stage .km-head,
.ks-home-stage .km-head .km-lead {
max-width: none;
}
.ks-home-stage .km-head .km-lead {
max-width: none;
}
.ks-home-stage .km-lead {
text-wrap: pretty;
}
@media (max-width: 600px) {
.ks-home-stage .km-lead {
text-wrap: balance;
}
}
.ks-home-stage .km-h1,
.ks-home-stage .km-h2,
.ks-home-stage .km-dz-card h3,
.ks-home-stage .km-step h3 {
text-wrap: balance;
}
.ks-home-stage .km-h2 {
margin: 0;
font-size: clamp(30px, 3.6vw, 44px);
line-height: 1.08;
font-weight: 800;
letter-spacing: -.025em;
color: var(--k-ink);
border: 0;
padding: 0;
}
.ks-home-stage .km-h2:before,
.ks-home-stage .km-h2:after {
display: none !important;
}
.ks-home-stage .km-lead {
margin: 18px 0 0;
font-size: 18px;
line-height: 1.65;
color: var(--k-mut);
}
.ks-home-stage .km-scene {
margin-top: 44px;
}
.ks-home-stage .km-act {
margin: 40px 0 0;
}
.ks-home-stage .km-act .km-btn--main {
background: var(--k-brand);
color: #fff;
box-shadow: 0 4px #0e3299, 0 10px 24px #1b4fd847;
}
.ks-home-stage .km-act .km-btn--main:active {
box-shadow: 0 1px #0e3299, 0 4px 10px #1b4fd847;
}
.ks-home-stage .km-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
color: var(--k-brand);
text-decoration: none;
}
.ks-home-stage .km-note {
margin: 18px 0 0;
font-size: 13px;
color: var(--k-mut);
}
.ks-home-stage .km-sec .km-next a:after {
content: "";
}
.ks-home-stage .km-pre .km-head,
.ks-home-stage .km-pre .km-scene,
.ks-home-stage .km-pre .km-act {
opacity: 0;
transform: translateY(12px);
}
.ks-home-stage .km-sec .km-head,
.ks-home-stage .km-sec .km-scene,
.ks-home-stage .km-sec .km-act {
transition: opacity .6s var(--k-out), transform .6s var(--k-out);
}
.ks-home-stage .km-sec .km-scene {
transition-delay: .08s;
}
.ks-home-stage .km-sec .km-act {
transition-delay: .16s;
}
.ks-home-stage .km-zoom .km-scene {
margin: 0;
}
.ks-home-stage .km-zoom {
height: 200vh;
padding: 0;
background: var(--k-navy);
color: #fff;
}
.ks-home-stage .km-zoom-stick {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: grid;
place-items: center;
background:
radial-gradient(
800px 500px at 50% 40%,
rgba(46, 98, 255, .35),
transparent 70%),
var(--k-navy);
}
.ks-home-stage .km-kin {
position: relative;
width: 100%;
height: 46vh;
margin: 0;
display: grid;
place-items: center;
}
.ks-home-stage .km-kin-w {
position: absolute;
margin: 0;
display: none;
place-items: center;
white-space: nowrap;
}
.ks-home-stage .km-kin-w.is-on {
display: grid;
}
.ks-home-stage .km-kin-w > * {
grid-area: 1 / 1;
display: flex;
}
.ks-home-stage .km-kin-a {
--a: 0;
font: 900 clamp(64px, 15vw, 210px)/1 var(--k-cond);
font-stretch: condensed;
text-transform: uppercase;
letter-spacing: -.01em;
color: #ffffffc7;
gap: .02em;
}
.ks-home-stage [data-script=cjk] .km-kin-a {
font: 800 clamp(48px, 11vw, 160px)/1.05 system-ui, sans-serif;
text-transform: none;
}
.ks-home-stage .km-kin-k {
--b: 1;
font: 800 clamp(80px, 17vw, 240px)/1 var(--k-ko);
color: #7fa2ff;
gap: .04em;
}
.ks-home-stage .km-kin-a .km-kin-c {
display: inline-block;
clip-path: inset(calc((1 - var(--a)) * 100%) 0 0 0);
translate: 0 calc((1 - var(--a)) * .18em);
}
.ks-home-stage .km-kin-k .km-kin-c {
display: inline-block;
clip-path: inset(calc((1 - var(--b)) * 100%) 0 0 0);
translate: 0 calc((1 - var(--b)) * .18em);
}
.ks-home-stage .km-kin-w:first-child {
display: grid;
}
.ks-home-stage .km-kin-js .km-kin-w {
display: none;
}
.ks-home-stage .km-kin-js .km-kin-w.is-on {
display: grid;
}
.ks-home-stage .km-kin-zoom {
position: absolute;
margin: 0;
display: none;
place-items: center;
font: 800 clamp(96px, 20vw, 260px)/1 var(--k-ko);
white-space: nowrap;
transform-origin: 46% 54%;
}
.ks-home-stage .km-kin-zoom > span {
grid-area: 1 / 1;
}
.ks-home-stage .km-zooming .km-kin-zoom {
display: grid;
}
.ks-home-stage .km-zooming .km-kin-w {
display: none;
}
.ks-home-stage .km-kin-solid {
color: #fff;
}
@property --bx { syntax: ""; inherits: false; initial-value: 0px; }
.ks-home-stage .km-kin-pics {
color: transparent;
-webkit-background-clip: text;
background-clip: text;
opacity: 0;
background-color: #fff;
background-repeat: no-repeat;
background-size: 120px 120px;
background-image:
var(--pic0),
var(--pic1),
var(--pic2),
var(--pic3),
var(--pic4),
var(--pic5),
var(--pic0),
var(--pic1),
var(--pic2),
var(--pic3),
var(--pic4),
var(--pic5);
background-position:
calc(var(--bx) + 0px) 18%,
calc(var(--bx) + 120px) 70%,
calc(var(--bx) + 240px) 22%,
calc(var(--bx) + 360px) 76%,
calc(var(--bx) + 480px) 20%,
calc(var(--bx) + 600px) 72%,
calc(var(--bx) + 720px) 18%,
calc(var(--bx) + 840px) 70%,
calc(var(--bx) + 960px) 22%,
calc(var(--bx) + 1080px) 76%,
calc(var(--bx) + 1200px) 20%,
calc(var(--bx) + 1320px) 72%;
animation: km-pics 24s linear infinite;
}
@keyframes km-pics {
to {
--bx: -720px;
}
}
.ks-home-stage .km-zoom-cap {
position: absolute;
left: 0;
right: 0;
bottom: 9vh;
text-align: center;
padding: 0 20px;
}
.ks-home-stage .km-zoom-cap .km-h2 {
font-size: 22px;
font-weight: 700;
letter-spacing: -.01em;
color: #dce5ff;
max-width: 34em;
margin: 0 auto;
}
.ks-home-stage .km-zoom-cap .km-act {
margin: 14px 0 0;
}
.ks-home-stage .km-zoom-cap .km-link {
color: #a9c1ff;
}
.ks-home-stage .km-zoom-fade {
position: absolute;
inset: 0;
background: #f4f7ff;
opacity: 0;
pointer-events: none;
}
.ks-home-stage .km-zoom + .km-design {
padding-top: 40px;
}
.km-still .ks-home-stage .km-zoom {
height: auto;
}
.km-still .ks-home-stage .km-zoom-stick {
position: relative;
height: 70vh;
min-height: 460px;
}
.ks-home-stage .km-design {
background: #f4f7ff;
}
.ks-home-stage .km-dz {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.ks-home-stage .km-dz-card {
background: #fff;
border-radius: 26px;
padding: 30px;
box-shadow: var(--k-sh2);
border: 1px solid var(--k-line);
}
.ks-home-stage .km-dz-card--shape {
grid-column: 1 / -1;
}
.ks-home-stage .km-dz-card h3 {
margin: 0;
font-size: 24px;
font-weight: 800;
letter-spacing: -.015em;
}
.ks-home-stage .km-dz-card > p {
margin: 8px 0 0;
color: var(--k-mut);
font-size: 15px;
line-height: 1.6;
}
.ks-home-stage .km-shape {
display: grid;
grid-template-columns: 420px minmax(0, 1fr);
gap: 36px;
align-items: center;
margin-top: 20px;
}
.ks-home-stage .km-mouth {
width: 100%;
height: auto;
display: block;
background: var(--k-mist);
border-radius: 22px;
}
.ks-home-stage .km-mouth .m-head {
fill: none;
stroke: var(--k-ink);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.ks-home-stage .km-mouth .m-line {
fill: none;
stroke: #9aa4b5;
stroke-width: 2;
stroke-linecap: round;
}
.ks-home-stage .km-mouth .m-lips {
fill: none;
stroke: #9aa4b5;
stroke-width: 2.5;
stroke-linecap: round;
}
.ks-home-stage .km-mouth .m-teeth rect {
fill: #fff;
stroke: #9aa4b5;
stroke-width: 1.5;
}
.ks-home-stage .km-mouth .m-tongue {
fill: #e7eaf2;
stroke: #6b7486;
stroke-width: 2;
transition:
d .6s var(--k-spring),
fill .3s,
stroke .3s;
}
.ks-home-stage .km-mouth .m-throat {
fill: none;
stroke: #9aa4b5;
stroke-width: 2;
stroke-dasharray: 4 4;
}
.ks-home-stage .km-mouth .is-hl {
stroke: var(--k-acc) !important;
stroke-width: 4 !important;
stroke-dasharray: none !important;
}
.ks-home-stage .km-mouth .m-tongue.is-hl {
fill: color-mix(in srgb, var(--k-acc) 16%, #fff);
}
.ks-home-stage .km-mouth .m-teeth.is-hl rect {
stroke: var(--k-acc);
stroke-width: 3;
fill: color-mix(in srgb, var(--k-acc) 12%, #fff);
}
.ks-home-stage .km-mouth .m-lead {
fill: none;
stroke: var(--k-acc);
stroke-width: 2;
marker-end: url(#km-arrow);
}
.ks-home-stage .km-mouth .m-head,
.ks-home-stage .km-mouth .m-line,
.ks-home-stage .km-mouth .m-part,
.ks-home-stage .km-mouth .m-tongue {
opacity: .3;
transition: opacity .25s;
}
.ks-home-stage .km-mouth .is-hl,
.ks-home-stage .km-mouth .m-head {
opacity: 1;
}
.ks-home-stage .km-shape-fig {
position: relative;
}
.ks-home-stage .km-shape-over {
position: absolute;
width: 24%;
aspect-ratio: 1;
pointer-events: none;
opacity: 0;
}
.ks-home-stage .km-shape-over.is-on {
opacity: .95;
}
.ks-home-stage .km-shape-over svg {
width: 100%;
height: 100%;
}
.ks-home-stage .km-shape-hint {
margin: 0 0 12px;
font-size: 14px;
color: var(--k-mut);
}
.ks-home-stage .km-mouth .m-over {
opacity: 0;
}
.ks-home-stage .km-mouth .m-over path {
fill: transparent;
stroke: var(--k-acc);
stroke-width: 26;
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.ks-home-stage .km-mouth .m-over.is-on {
opacity: 1;
}
.ks-home-stage .km-mouth .m-over.is-on path {
animation: km-draw .8s var(--k-out) forwards, km-fillin .3s .8s forwards;
}
@keyframes km-draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes km-fillin {
to {
fill: #1b4fd8e6;
}
}
.km-still .ks-home-stage .km-mouth .m-over.is-on path {
stroke-dashoffset: 0;
fill: #1b4fd8e6;
}
.ks-home-stage .km-shape-tabs {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
.ks-home-stage .km-shape-tab {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 6px;
border-radius: 18px;
border: 2px solid var(--k-line);
background: #fff;
cursor: pointer;
transition:
transform .18s var(--k-out),
border-color .2s,
box-shadow .2s;
}
.ks-home-stage .km-shape-tab b {
font: 800 46px/1 var(--k-ko);
color: var(--k-ink);
}
.ks-home-stage .km-shape-tab span {
font: 600 12px/1.2 system-ui, sans-serif;
color: var(--k-mut);
text-align: center;
}
.ks-home-stage .km-shape-tab:hover {
transform: translateY(-4px);
box-shadow: var(--k-sh2);
}
.ks-home-stage .km-shape-tab.is-on {
border-color: var(--k-acc);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-acc) 14%, transparent);
}
.ks-home-stage .km-shape-tab.is-on b {
color: var(--k-acc);
}
.ks-home-stage .km-shape-cap {
margin: 22px 0 0;
font-size: 20px;
line-height: 1.5;
font-weight: 600;
min-height: 3em;
}
.ks-home-stage .km-shape-cap a {
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
margin-right: 8px;
border-radius: 12px;
background: var(--k-acc);
color: #fff;
font: 800 26px/1 var(--k-ko);
text-decoration: none;
vertical-align: middle;
}
.ks-home-stage .km-fam {
list-style: none;
margin: 22px 0 0;
padding: 0;
display: grid;
gap: 12px;
}
.ks-home-stage .km-fam-row {
display: flex;
align-items: center;
gap: 10px;
}
.ks-home-stage .km-fam-g {
position: relative;
display: grid;
place-items: center;
width: 66px;
height: 66px;
border-radius: 18px;
background: #fff;
border: 2px solid var(--k-line);
text-decoration: none;
box-shadow: var(--k-sh2);
transition: transform .18s var(--k-out);
}
.ks-home-stage .km-fam-g > b {
grid-area: 1 / 1;
font: 800 38px/1 var(--k-ko);
color: var(--k-ink);
}
.ks-home-stage .km-fam-g:hover {
transform: translateY(-4px) scale(1.06);
}
.ks-home-stage .km-fam-g:hover > b {
color: var(--k-acc);
}
.ks-home-stage .km-fam-prev {
opacity: 0;
}
.ks-home-stage .km-fam-plus {
display: inline-flex;
align-items: center;
gap: 4px;
font: 700 11px/1 system-ui, sans-serif;
color: var(--k-acc);
white-space: nowrap;
}
.ks-home-stage .km-fam-plus i {
width: 14px;
height: 3px;
border-radius: 2px;
background: var(--k-acc);
}
.ks-home-stage .km-js .km-pre .km-fam-g[style*="--k:1"] > b:first-child,
.ks-home-stage .km-js .km-pre .km-fam-g[style*="--k:2"] > b:first-child {
clip-path: inset(0 0 0 100%);
}
.ks-home-stage .km-js .km-pre .km-fam-prev {
opacity: 1;
color: #b5bdcb;
}
.ks-home-stage .km-js .km-pre .km-fam-plus {
opacity: 0;
transform: translate(-12px);
}
.ks-home-stage .km-fam-g > b:first-child {
transition: clip-path .4s var(--k-out);
transition-delay: calc(var(--ri) * .16s + var(--k) * .42s + .1s);
}
.ks-home-stage .km-fam-prev {
transition: opacity .3s;
transition-delay: calc(var(--ri) * .16s + var(--k) * .42s + .2s);
}
.ks-home-stage .km-fam-plus {
transition: opacity .3s, transform .4s var(--k-spring);
transition-delay: calc(var(--ri) * .16s + .26s);
}
.ks-home-stage .km-cji-key {
margin: 18px 0 0;
display: flex;
gap: 18px;
font: 600 13px/1 system-ui, sans-serif;
color: var(--k-mut);
}
.ks-home-stage .km-cji-key span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ks-home-stage .km-cji-key svg {
width: 26px;
height: 26px;
}
.ks-home-stage .cp {
fill: var(--k-up);
}
.ks-home-stage .km-cji-list {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.ks-home-stage .km-cji-list a {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 1;
border-radius: 20px;
background: var(--k-mist);
text-decoration: none;
transition: transform .18s var(--k-out);
}
.ks-home-stage .km-cji-list a:hover {
transform: translateY(-4px);
}
.ks-home-stage .km-cji-svg,
.ks-home-stage .km-cji-g {
grid-area: 1 / 1;
}
.ks-home-stage .km-cji-svg {
width: 74%;
height: 74%;
}
.ks-home-stage .km-cji-g {
font: 800 64px/1 var(--k-ko);
color: var(--k-up);
opacity: 0;
transition: opacity .35s;
transition-delay: calc(var(--i) * .22s + .75s);
}
.ks-home-stage .cji-p {
transition: transform .6s var(--k-spring), opacity .35s;
transition-delay: calc(var(--i) * .22s);
}
.ks-home-stage .km-is-in .cji-p {
opacity: 0;
transition-delay: calc(var(--i) * .22s), calc(var(--i) * .22s + .75s);
}
.ks-home-stage .km-is-in .km-cji-g {
opacity: 1;
}
.ks-home-stage .km-js .km-pre .cji-p {
transform: translate(var(--fx), var(--fy));
}
.km-still .ks-home-stage .km-cji-g {
opacity: 1;
}
.km-still .ks-home-stage .cji-p {
opacity: 0;
}
.ks-home-stage .km-mq {
overflow: hidden;
padding: 26px 0;
background: #fff;
border-block: 1px solid var(--k-line);
}
.ks-home-stage .km-mq-in {
display: flex;
gap: 40px;
width: max-content;
will-change: transform;
}
.ks-home-stage .km-mq span {
font: 900 96px/1 var(--k-cond);
font-stretch: condensed;
text-transform: uppercase;
color: #8a95aa;
transition: color .25s;
white-space: nowrap;
}
.ks-home-stage .km-mq .km-mq-k {
font: 800 92px/1 var(--k-ko);
color: #6f8de6;
}
.ks-home-stage .km-mq:hover .km-mq-k {
color: var(--k-brand);
}
.ks-home-stage .km-mq:hover .km-mq-a {
color: var(--k-ink);
}
.ks-home-stage .km-letters {
background: #fff;
}
.ks-home-stage .km-boards {
display: grid;
grid-template-columns: 7fr 6fr;
gap: 22px;
}
.ks-home-stage .km-board {
padding: 26px;
border-radius: 26px;
background: var(--k-mist);
}
.ks-home-stage .km-board-h {
margin: 0 0 14px;
font-weight: 800;
font-size: 18px;
}
.ks-home-stage .km-board-h b {
color: var(--k-mut);
font-weight: 700;
}
.ks-home-stage .km-grp + .km-grp {
margin-top: 18px;
}
.ks-home-stage .km-grp-h {
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 8px;
font: 700 12px/1 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--k-mut);
}
.ks-home-stage .km-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.ks-home-stage .km-dot--c {
background: var(--k-acc);
}
.ks-home-stage .km-dot--v {
background: var(--k-up);
}
.ks-home-stage .km-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.ks-home-stage .km-board--c .km-grid {
grid-template-columns: repeat(7, 1fr);
}
.ks-home-stage .km-board--v .km-grid {
grid-template-columns: repeat(6, 1fr);
}
.ks-home-stage .km-chip {
--c: var(--k-acc);
position: relative;
transition: opacity .2s, transform .45s var(--k-spring);
}
.ks-home-stage .km-chip--v {
--c: var(--k-up);
}
.ks-home-stage .km-say {
position: relative;
width: 100%;
aspect-ratio: 1;
display: grid;
place-items: center;
overflow: hidden;
border: 0;
border-radius: 18px;
background: #fff;
box-shadow: var(--k-sh2);
cursor: pointer;
transition: transform .18s var(--k-out), box-shadow .18s;
-webkit-tap-highlight-color: transparent;
}
.ks-home-stage .km-say > b {
font: 800 40px/1 var(--k-ko);
color: var(--k-ink);
transition: color .18s;
}
.ks-home-stage .km-say > svg {
position: absolute;
inset: 10%;
width: 80%;
height: 80%;
}
.ks-home-stage .km-say.is-rev > b {
opacity: 0;
}
.ks-home-stage .km-say:active {
transform: scale(.98);
transition-duration: .12s;
}
.ks-home-stage .km-say.is-pop {
animation: km-pop .5s var(--k-spring);
}
@keyframes km-pop {
0% {
transform: scale(.98);
}
45% {
transform: scale(1.12);
}
to {
transform: scale(1);
}
}
.ks-home-stage .km-ripple {
position: absolute;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
background: color-mix(in srgb, var(--c) 30%, transparent);
pointer-events: none;
animation: km-ripple .6s var(--k-out) forwards;
}
@keyframes km-ripple {
to {
transform: scale(9);
opacity: 0;
}
}
.ks-home-stage .km-say:focus-visible {
outline: 3px solid var(--c);
outline-offset: 3px;
}
.ks-home-stage .km-go {
position: absolute;
top: -6px;
right: -6px;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--c);
color: #fff;
box-shadow: 0 2px 6px #07123340;
transition: transform .18s var(--k-out);
z-index: 2;
}
.ks-home-stage .km-go .km-arw {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.ks-home-stage .km-go:hover,
.ks-home-stage .km-go:focus-visible {
transform: scale(1.15);
}
@media (hover: hover) and (pointer: fine) {
.ks-home-stage .km-chip:hover,
.ks-home-stage .km-chip:focus-within {
transform: translateY(-6px) scale(1.12);
z-index: 3;
}
.ks-home-stage .km-chip:hover .km-say,
.ks-home-stage .km-chip:focus-within .km-say {
box-shadow: var(--k-sh3);
}
.ks-home-stage .km-chip:hover .km-say > b,
.ks-home-stage .km-chip:focus-within .km-say > b {
color: var(--c);
}
.ks-home-stage .km-grid:has(.km-chip:hover) .km-chip:not(:hover),
.ks-home-stage .km-grid:has(.km-chip:focus-within) .km-chip:not(:focus-within) {
opacity: .55;
}
}
.ks-home-stage .km-chip:focus-within {
z-index: 3;
}
.ks-home-stage .km-chip:focus-within .km-say > b {
color: var(--c);
}
.ks-home-stage .km-js .km-pre .km-chip {
opacity: 0;
transform: translateY(12px);
}
.ks-home-stage .km-letters .km-chip {
transition-delay: calc(var(--n, 0) * 40ms);
}
.ks-home-stage .km-letters .km-chip:hover {
transition-delay: 0s;
}
.ks-home-stage .km-hint {
margin: 16px 0 0;
font-size: 14px;
color: var(--k-mut);
}
.ks-home-stage .km-read {
background:
linear-gradient(
180deg,
var(--k-navy),
var(--k-navy2));
color: #fff;
}
.ks-home-stage .km-read .km-h2 {
color: #fff;
}
.ks-home-stage .km-read .km-lead {
color: #c6d3fa;
}
.ks-home-stage .km-read .km-next a {
color: #a9c1ff;
}
.ks-home-stage .km-read .km-act .km-btn--main {
background: #fff;
color: var(--k-navy);
box-shadow: 0 4px #8ea8f2;
}
.ks-home-stage .km-cards {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
perspective: 1200px;
}
.ks-home-stage .km-card {
height: 210px;
}
.ks-home-stage .km-card-in {
position: relative;
height: 100%;
transform-style: preserve-3d;
transition: transform .4s var(--k-out);
transition-delay: calc(var(--i) * 0s);
}
.ks-home-stage .km-card.is-flipped .km-card-in {
transform: rotateY(180deg);
}
.ks-home-stage .km-face {
position: absolute;
inset: 0;
border-radius: 24px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
.ks-home-stage .km-face--front {
width: 100%;
border: 0;
background: #fff;
color: var(--k-ink);
cursor: pointer;
box-shadow: 0 2px 4px #0003, 0 16px 34px #02081e59;
}
.ks-home-stage .km-face--front b {
font: 800 56px/1 var(--k-ko);
}
.ks-home-stage .km-turn {
position: absolute;
right: 14px;
bottom: 12px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--k-mist);
display: grid;
place-items: center;
}
.ks-home-stage .km-turn svg {
width: 16px;
height: 16px;
fill: none;
stroke: var(--k-brand);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.ks-home-stage .km-face--back {
transform: rotateY(180deg);
background: #eef3ff;
color: var(--k-ink);
padding: 14px;
box-shadow: 0 16px 34px #02081e59;
}
.ks-home-stage .km-face--back img {
width: 72px;
height: 72px;
object-fit: contain;
}
.ks-home-stage .km-en {
margin: 0;
font-size: 24px;
font-weight: 800;
letter-spacing: -.01em;
}
.ks-home-stage .km-ko {
margin: 0;
font: 800 18px/1 var(--k-ko);
color: var(--k-mut);
}
.ks-home-stage .km-jamo {
margin: 4px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 10px;
}
.ks-home-stage .km-jsyl {
display: inline-flex;
gap: 3px;
padding: 3px;
border-radius: 11px;
background: #1b4fd812;
}
.ks-home-stage .km-jm {
min-width: 32px;
height: 32px;
display: grid;
place-items: center;
padding: 0 6px;
border-radius: 9px;
background: #fff;
border: 2px solid color-mix(in srgb, var(--k-acc) 30%, #fff);
font: 800 18px/1 var(--k-ko);
color: var(--k-acc);
text-decoration: none;
transition: transform .15s;
}
.ks-home-stage .km-jm--v {
color: var(--k-up);
border-color: color-mix(in srgb, var(--k-up) 30%, #fff);
}
.ks-home-stage .km-jm:hover {
transform: translateY(-2px);
}
.ks-home-stage .km-lesson {
background: #fff;
}
.ks-home-stage .km-steps {
--prog: 0;
list-style: none;
margin: 0;
padding: 0;
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.ks-home-stage .km-steps-line {
position: absolute;
left: 30px;
right: 30px;
top: 21px;
height: 3px;
background: var(--k-line);
border-radius: 2px;
}
.ks-home-stage .km-steps-line i {
position: absolute;
inset: 0;
transform-origin: 0 50%;
transform: scaleX(var(--prog));
background:
linear-gradient(
90deg,
var(--k-acc),
var(--k-up),
var(--k-warn));
border-radius: 2px;
}
.ks-home-stage .km-step {
position: relative;
display: flex;
flex-direction: column;
transition: transform .5s var(--k-spring), opacity .4s;
transition-delay: calc(var(--i) * .14s);
}
.ks-home-stage .km-js .km-pre .km-step {
opacity: 0;
transform: translateY(18px) scale(.96);
}
.ks-home-stage .km-step-n {
position: relative;
z-index: 1;
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--k-brand);
color: #fff;
font-weight: 800;
box-shadow: 0 0 0 6px #fff;
}
.ks-home-stage .km-st-fig {
position: relative;
margin-top: 18px;
height: 230px;
border-radius: 22px;
background: var(--k-mist);
display: grid;
place-items: center;
overflow: hidden;
}
.ks-home-stage .km-st-fig svg {
width: 200px;
height: 200px;
}
.ks-home-stage .km-step h3 {
margin: 16px 0 0;
font-size: 19px;
font-weight: 800;
}
.ks-home-stage .km-step p {
margin: 6px 0 0;
font-size: 15px;
line-height: 1.55;
color: var(--k-mut);
}
.ks-home-stage .km-st-listen {
grid-template-columns: auto auto;
gap: 18px;
}
.ks-home-stage .km-st-listen b {
font: 800 120px/1 var(--k-ko);
color: var(--k-acc);
}
.ks-home-stage .km-eqz {
display: flex;
align-items: center;
gap: 5px;
height: 80px;
}
.ks-home-stage .km-eqz i {
width: 7px;
height: 100%;
border-radius: 4px;
background: var(--k-acc);
transform: scaleY(.25);
opacity: .8;
}
.ks-home-stage .km-is-in .km-eqz i {
animation: km-eq 1.1s ease-in-out 3 alternate both;
}
.ks-home-stage .km-eqz i:nth-child(2) {
animation-delay: .12s !important;
}
.ks-home-stage .km-eqz i:nth-child(3) {
animation-delay: .24s !important;
}
.ks-home-stage .km-eqz i:nth-child(4) {
animation-delay: .06s !important;
}
.ks-home-stage .km-eqz i:nth-child(5) {
animation-delay: .3s !important;
}
.ks-home-stage .km-eqz i:nth-child(6) {
animation-delay: .18s !important;
}
.ks-home-stage .km-eqz i:nth-child(7) {
animation-delay: .36s !important;
}
@keyframes km-eq {
0% {
transform: scaleY(.25);
}
50% {
transform: scaleY(1);
}
to {
transform: scaleY(.45);
}
}
.ks-home-stage .km-st-trace svg {
width: 210px;
height: 210px;
}
.ks-home-stage .km-trace-pad {
position: absolute;
left: 50%;
top: 50%;
width: 210px;
height: 210px;
transform: translate(-50%, -50%);
touch-action: none;
cursor: crosshair;
}
.ks-home-stage .km-trace-clear {
position: absolute;
right: 10px;
bottom: 10px;
min-height: 32px;
padding: 0 12px;
font-size: 12px;
}
.ks-home-stage .km-st-print img {
width: 150px;
height: auto;
border-radius: 6px;
box-shadow: var(--k-sh3);
transform: rotate(-3deg);
transition: transform .3s var(--k-spring);
}
.ks-home-stage .km-st-print:hover img {
transform: rotate(0) translateY(-4px) scale(1.04);
}
.ks-home-stage .km-sheets {
background: #f4f7ff;
}
.ks-home-stage .km-fan {
--open: 1;
list-style: none;
margin: 0 auto;
padding: 0;
position: relative;
height: 470px;
max-width: 900px;
perspective: 1400px;
}
.ks-home-stage .km-fan li {
--rx: 0deg;
--ry: 0deg;
position: absolute;
left: 50%;
bottom: 0;
width: 280px;
margin-left: -140px;
transform-origin: 50% 120%;
transform: translate(calc((var(--i) - 2) * 150px * var(--open))) rotate(calc((var(--i) - 2) * 7deg * var(--open))) translateY(calc(var(--d) * 18px * var(--open)));
transition: transform .8s var(--k-spring);
z-index: calc(10 - var(--d));
}
.ks-home-stage .km-js .km-pre .km-fan {
--open: 0;
}
.ks-home-stage .km-fan a {
display: block;
border-radius: 10px;
transform: rotateX(var(--rx)) rotateY(var(--ry));
transition: transform .2s var(--k-out), box-shadow .2s;
box-shadow: var(--k-sh3);
}
.ks-home-stage .km-fan li:hover {
z-index: 20;
}
.ks-home-stage .km-fan li:hover a {
transform: translateY(-14px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.04);
}
.ks-home-stage .km-fan img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
background: #fff;
}
.ks-home-stage .km-practice {
background: #fff;
}
.ks-home-stage .km-pr {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.ks-home-stage .km-pr-cells {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 14px;
}
.ks-home-stage .km-pr-cell {
--c: var(--k-acc);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font: 600 12px/1.2 system-ui, sans-serif;
color: var(--k-mut);
}
.ks-home-stage .km-pr-cell--V {
--c: var(--k-up);
}
.ks-home-stage .km-pr-cell--T {
--c: var(--k-warn);
}
.ks-home-stage .km-pr-in {
width: 112px;
height: 112px;
display: grid;
place-items: center;
border-radius: 22px;
border: 3px solid var(--c);
background: color-mix(in srgb, var(--c) 6%, #fff);
font: 800 64px/1 var(--k-ko);
color: var(--c);
transition: transform .5s var(--k-spring), opacity .3s;
}
.ks-home-stage .km-pr-cell:nth-child(1) .km-pr-in {
transition-delay: .1s;
}
.ks-home-stage .km-pr-cell:nth-child(2) .km-pr-in {
transition-delay: .5s;
}
.ks-home-stage .km-pr-cell:nth-child(3) .km-pr-in {
transition-delay: .9s;
}
.ks-home-stage .km-pr-cell {
position: relative;
}
.ks-home-stage .km-pr-in.is-in {
animation: km-drop .35s var(--k-spring);
}
@keyframes km-drop {
0% {
transform: translateY(-30px) scale(.85);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
.ks-home-stage .km-pr-none {
position: absolute;
left: 50%;
top: 0;
translate: -50% 0;
box-sizing: border-box;
width: 112px;
height: 112px;
aspect-ratio: auto;
border-radius: 22px;
}
.ks-home-stage .km-pr-none[hidden] {
display: none;
}
.ks-home-stage .km-pr-block.is-done {
animation: km-pulse .5s var(--k-spring);
}
.ks-home-stage .km-pr-block.is-wait b {
opacity: .25;
}
.ks-home-stage .km-practice.is-try .km-act .km-btn {
box-shadow: 0 0 0 6px #1b4fd82e, 0 4px #0e3299;
}
.ks-home-stage .km-goal {
position: relative;
margin: 14px 0 0;
min-height: 1.6em;
font: 700 18px/1.5 system-ui, sans-serif;
color: #fff;
}
.ks-home-stage .km-goal-i {
position: absolute;
left: 0;
top: 0;
opacity: 0;
clip-path: inset(100% 0 0 0);
transition: clip-path .4s var(--k-out), opacity .2s;
}
.ks-home-stage .km-goal-i.is-on {
position: relative;
opacity: 1;
clip-path: inset(0 0 0 0);
}
.ks-home-stage .km-goal-i b {
color: #8fb0ff;
margin-left: 4px;
}
.ks-home-stage .km-goal-i {
width: max-content;
max-width: 100%;
}
.ks-home-stage .km-goal-i.is-on {
display: block;
}
.ks-home-stage .km-goal-i b {
white-space: nowrap;
padding-right: 1px;
}
.ks-home-stage .km-btn--ghost {
color: var(--k-brand);
border: 1.5px solid color-mix(in srgb, var(--k-brand) 40%, #fff);
background: #fff;
}
.ks-home-stage .km-sets {
position: relative;
}
.ks-home-stage .km-cards[hidden] {
display: none;
}
.ks-home-stage .km-pr .km-eq {
font: 300 48px/1 system-ui, sans-serif;
color: #9aa4b5;
}
.ks-home-stage .km-pr-block {
width: 180px;
height: 180px;
display: grid;
place-items: center;
border-radius: 28px;
background:
linear-gradient(
180deg,
#f7f9ff,
#edf2fe);
border: 2px solid var(--k-line);
text-decoration: none;
box-shadow: var(--k-sh2);
transition: transform .6s var(--k-spring), opacity .3s;
transition-delay: 1.3s;
}
.ks-home-stage .km-pr-block b {
font: 800 150px/1 var(--k-ko);
color: var(--k-ink);
}
.ks-home-stage .km-js .km-pre .km-pr-block {
opacity: 0;
transform: scale(.7);
}
.ks-home-stage .km-practice.km-is-in .km-act .km-btn {
animation: km-nudge .6s 1.9s var(--k-spring) 1 both;
}
@keyframes km-nudge {
40% {
transform: scale(1.05);
}
to {
transform: none;
}
}
.ks-home-stage .km-pictures {
background: #f4f7ff;
overflow: hidden;
}
.ks-home-stage .km-pics-mq {
overflow: hidden;
margin: 0 -24px;
-webkit-mask-image:
linear-gradient(
90deg,
transparent,
#000 6%,
#000 94%,
transparent);
mask-image:
linear-gradient(
90deg,
transparent,
#000 6%,
#000 94%,
transparent);
}
.ks-home-stage .km-pics-in {
list-style: none;
margin: 0;
padding: 12px 0;
display: flex;
gap: 16px;
width: max-content;
animation: km-marq 30s linear infinite;
}
.ks-home-stage .km-pics-mq:hover .km-pics-in,
.ks-home-stage .km-pics-mq.is-off .km-pics-in {
animation-play-state: paused;
}
.ks-home-stage .km-pic-big {
width: 104px;
height: 104px;
display: grid;
place-items: center;
border-radius: 18px;
background: color-mix(in srgb, var(--k-acc) 8%, #fff);
font: 800 64px/1 var(--k-ko);
color: var(--k-acc);
}
@keyframes km-marq {
to {
transform: translate(-50%);
}
}
.ks-home-stage .km-pics-in a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 150px;
padding: 14px 10px;
border-radius: 22px;
background: #fff;
box-shadow: var(--k-sh2);
text-decoration: none;
color: var(--k-ink);
transition: transform .18s var(--k-out);
}
.ks-home-stage .km-pics-in a:hover {
transform: translateY(-6px);
box-shadow: var(--k-sh3);
}
.ks-home-stage .km-pics-in img {
width: 104px;
height: 104px;
object-fit: contain;
}
.ks-home-stage .km-pics-in b {
font: 800 17px/1 var(--k-ko);
}
.ks-home-stage .km-pic-j {
position: absolute;
top: 10px;
left: 10px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 10px;
color: #fff;
font: 800 19px/1 var(--k-ko);
background: var(--k-acc);
}
.ks-home-stage .km-pic-j--v {
background: var(--k-up);
}
.ks-home-stage .km-final {
overflow: hidden;
color: #fff;
padding: 0 0 96px;
background:
radial-gradient(
800px 500px at 85% 20%,
rgba(46, 98, 255, .45),
transparent 70%),
linear-gradient(
160deg,
var(--k-navy),
var(--k-navy2) 60%,
#163FB0);
}
.ks-home-stage .km-mq--final {
background: transparent;
border: 0;
padding: 40px 0 56px;
opacity: .9;
}
.ks-home-stage .km-mq--final span {
color: #ffffff6b;
font-size: 120px;
}
.ks-home-stage .km-mq.km-mq--final .km-mq-k {
color: #8caaffa6;
font-size: 112px;
}
.ks-home-stage .km-mq.km-mq--final:hover .km-mq-a,
.ks-home-stage .km-mq.km-mq--final:hover .km-mq-k {
color: #fff;
}
.ks-home-stage .km-final-in {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 48px;
align-items: center;
}
.ks-home-stage .km-final .km-scene {
margin: 0;
}
.ks-home-stage .km-final-g {
width: 300px;
height: 300px;
display: grid;
place-items: center;
border-radius: 40px;
background: #ffffff0f;
border: 1px solid rgba(255, 255, 255, .14);
}
.ks-home-stage .km-final-g {
overflow: hidden;
}
.ks-home-stage .km-final-g b {
font: 800 230px/1 var(--k-ko);
color: #fff;
}
.ks-home-stage .km-final-roll {
display: block;
}
.ks-home-stage .km-final-roll.is-roll {
animation: km-froll .4s var(--k-out);
}
@keyframes km-froll {
0% {
transform: translateY(-60%);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
.ks-home-stage .km-final-step {
margin: 0 0 10px;
font: 700 14px/1.2 system-ui, sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
color: #a9c1ff;
}
.ks-home-stage .km-final-step span[lang=ko] {
text-transform: none;
}
@keyframes km-fillw {
to {
color: #fff;
}
}
.ks-home-stage .km-final .km-h2 {
color: #fff;
font-size: 56px;
}
.ks-home-stage .km-final .km-lead {
color: #c6d3fa;
}
.ks-home-stage .km-final .km-act {
margin-top: 28px;
}
.ks-home-stage .km-final .km-btn--main {
background: #fff;
color: var(--k-navy);
box-shadow: 0 4px #8ea8f2;
}
@media (max-width: 1099px) {
.ks-home-stage .km-shape {
grid-template-columns: 1fr;
}
.ks-home-stage .km-mouth {
max-width: 420px;
}
.ks-home-stage .km-dz,
.ks-home-stage .km-boards {
grid-template-columns: 1fr;
}
.ks-home-stage .km-steps {
grid-template-columns: repeat(2, 1fr);
}
.ks-home-stage .km-steps-line {
display: none;
}
}
@media (max-width: 719px) {
.ks-home-stage .km-sec {
padding: 64px 0;
}
.ks-home-stage .km-h2 {
font-size: 30px;
}
.ks-home-stage .km-lead {
font-size: 16px;
}
.ks-home-stage .km-scene {
margin-top: 28px;
}
.ks-home-stage .km-dz-card {
padding: 20px;
border-radius: 22px;
}
.ks-home-stage .km-shape-tabs {
gap: 6px;
}
.ks-home-stage .km-shape-tab {
padding: 10px 2px;
border-radius: 14px;
}
.ks-home-stage .km-shape-tab b {
font-size: 30px;
}
.ks-home-stage .km-shape-tab span {
font-size: 10px;
}
.ks-home-stage .km-shape-cap {
font-size: 16px;
}
.ks-home-stage .km-fam-g {
width: 50px;
height: 50px;
border-radius: 14px;
}
.ks-home-stage .km-fam-g > b {
font-size: 28px;
}
.ks-home-stage .km-fam-row {
gap: 6px;
}
.ks-home-stage .km-fam-plus {
font-size: 0;
}
.ks-home-stage .km-fam-plus i {
width: 12px;
}
.ks-home-stage .km-cji-list {
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.ks-home-stage .km-cji-g {
font-size: 40px;
}
.ks-home-stage .km-mq span {
font-size: 56px;
}
.ks-home-stage .km-mq .km-mq-k {
font-size: 54px;
}
.ks-home-stage .km-mq-in {
gap: 22px;
}
.ks-home-stage .km-board {
padding: 16px;
}
.ks-home-stage .km-board--c .km-grid,
.ks-home-stage .km-board--v .km-grid {
grid-template-columns: repeat(5, 1fr);
gap: 8px;
}
.ks-home-stage .km-say > b {
font-size: 30px;
}
.ks-home-stage .km-say {
border-radius: 14px;
}
.ks-home-stage .km-go {
width: 22px;
height: 22px;
top: -5px;
right: -5px;
}
.ks-home-stage .km-cards {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.ks-home-stage .km-card {
height: 196px;
}
.ks-home-stage .km-face--front b {
font-size: 36px;
}
.ks-home-stage .km-en {
font-size: 17px;
}
.ks-home-stage .km-face--back {
gap: 4px;
padding: 10px 6px;
}
.ks-home-stage .km-face--back img {
width: 40px;
height: 40px;
}
.ks-home-stage .km-jm {
min-width: 24px;
height: 26px;
padding: 0 4px;
font-size: 14px;
}
.ks-home-stage .km-jamo {
gap: 4px 6px;
}
.ks-home-stage .km-jsyl {
padding: 2px;
gap: 2px;
}
.ks-home-stage .km-steps {
grid-template-columns: 1fr;
}
.ks-home-stage .km-fan {
height: 330px;
}
.ks-home-stage .km-fan li {
width: 180px;
margin-left: -90px;
transform: translate(calc((var(--i) - 2) * 62px * var(--open))) rotate(calc((var(--i) - 2) * 7deg * var(--open))) translateY(calc(var(--d) * 12px * var(--open)));
}
.ks-home-stage .km-pr {
gap: 10px;
}
.ks-home-stage .km-pr-in {
width: 76px;
height: 76px;
font-size: 44px;
border-radius: 16px;
}
.ks-home-stage .km-pr .km-eq {
display: none;
}
.ks-home-stage .km-pr-block {
width: 120px;
height: 120px;
}
.ks-home-stage .km-pr-block b {
font-size: 96px;
}
.ks-home-stage .km-pr-cells {
gap: 8px;
}
.ks-home-stage .km-pr-none {
width: 76px;
height: 76px;
border-radius: 16px;
}
.ks-home-stage .km-pics-mq {
margin: 0 -16px;
}
.ks-home-stage .km-pics-in a {
width: 124px;
}
.ks-home-stage .km-pics-in img {
width: 84px;
height: 84px;
}
.ks-home-stage .km-final-in {
grid-template-columns: 1fr;
gap: 24px;
}
.ks-home-stage .km-final-g {
width: 160px;
height: 160px;
border-radius: 28px;
}
.ks-home-stage .km-final-g b {
font-size: 120px;
}
.ks-home-stage .km-final .km-h2 {
font-size: 38px;
}
.ks-home-stage .km-mq--final span {
font-size: 64px;
}
.ks-home-stage .km-mq.km-mq--final .km-mq-k {
font-size: 60px;
}
}
@media (max-width: 600px) {
.ks-home-stage .km-btns,
.ks-home-stage .km-act:has(.km-btn) {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.ks-home-stage .km-btn {
display: flex;
justify-content: center;
width: 100%;
}
}
.km-still .ks-home-stage .km-pre .km-head,
.km-still .ks-home-stage .km-pre .km-scene,
.km-still .ks-home-stage .km-pre .km-act {
opacity: 1;
transform: none;
}
.km-still .ks-home-stage .km-pics-in {
animation: none;
}
@media (max-width: 600px) {
.ks-home-stage .km-act:has(.km-btn) .km-btn--main:not(:last-child) {
margin-bottom: 4px;
}
}
.ks-home-stage .km-tag,
.ks-home-stage .km-reel-lab,
.ks-home-stage .km-reel-lab b,
.ks-home-stage .km-ri small,
.ks-home-stage .km-parts b,
.ks-home-stage .km-mul,
.ks-home-stage .km-mul .c-L,
.ks-home-stage .km-mul .c-V,
.ks-home-stage .km-mul .c-T,
.ks-home-stage .km-mul sup,
.ks-home-stage .km-wl,
.ks-home-stage .km-wl b,
.ks-home-stage .km-grp-h,
.ks-home-stage .km-grp-h b,
.ks-home-stage .km-shape-tab span,
.ks-home-stage .km-pill,
.ks-home-stage .km-pr-cell small,
.ks-home-stage .km-nums a span {
font-size: 13px;
}
@media (min-width: 720px) {
.ks-home-stage .km-fam-plus {
font-size: 13px;
}
}
.ks-home-stage .km-lede,
.ks-home-stage .km-trust li,
.ks-home-stage .km-parts-key li,
.ks-home-stage .km-sub-note,
.ks-home-stage .km-dz-card p,
.ks-home-stage .km-note,
.ks-home-stage .km-shape-hint,
.ks-home-stage .km-hint,
.ks-home-stage .km-step p,
.ks-home-stage .km-final-step {
font-size: 16px;
}
.ks-home-stage small,
.ks-home-stage sup {
font-size: 13px;
}
.ks-home-stage .km-math small {
font-size: 13px;
}
.ks-home-stage .km-pa-stats {
font-size: 16px;
}
.ks-home-stage .km-cji-list {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.ks-home-stage .km-cji-list a.km-cji-row {
aspect-ratio: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 8px;
min-height: 72px;
border-radius: 16px;
}
.ks-home-stage .km-cji-keys {
display: flex;
gap: 4px;
margin: 0;
}
.ks-home-stage .km-cji-keys kbd {
display: inline-grid;
place-items: center;
min-width: 28px;
height: 30px;
padding: 0 6px;
border: 1.5px solid var(--k-line);
border-bottom-width: 3px;
border-radius: 8px;
background: #fff;
font: 700 16px/1 var(--k-ko);
color: var(--k-ink);
transition: opacity .2s var(--k-out), transform .2s var(--k-out);
}
.ks-home-stage .km-cji-keys kbd:nth-child(2) {
transition-delay: .12s;
}
.ks-home-stage .km-cji-keys kbd:nth-child(3) {
transition-delay: .24s;
}
.ks-home-stage .km-cji-keys kbd:nth-child(4) {
transition-delay: .36s;
}
.ks-home-stage .km-cji-keys kbd:nth-child(5) {
transition-delay: .48s;
}
.ks-home-stage .km-cji-arw {
flex: none;
width: 20px;
height: 20px;
fill: none;
stroke: var(--k-mut);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: opacity .2s linear;
transition-delay: calc(var(--n,2) * .12s);
}
.ks-home-stage .km-cji-g {
grid-area: auto;
opacity: 1;
transition: opacity .25s var(--k-out), scale .25s var(--k-out);
transition-delay: calc(var(--n,2) * .12s + .2s);
font-size: 40px;
}
.km-js .ks-home-stage .km-pre .km-cji-keys kbd {
opacity: 0;
transform: translateY(8px);
}
.km-js .ks-home-stage .km-pre .km-cji-arw {
opacity: 0;
}
.km-js .ks-home-stage .km-pre .km-cji-g {
opacity: 0;
scale: .9;
}
@media (min-width: 601px) {
.ks-home-stage .km-cji-list a.km-cji-row {
gap: 12px;
padding: 16px 12px;
}
.ks-home-stage .km-cji-keys kbd {
min-width: 34px;
height: 36px;
font-size: 18px;
}
.ks-home-stage .km-cji-arw {
width: 24px;
height: 24px;
}
.ks-home-stage .km-cji-g {
font-size: 56px;
}
}
@media (prefers-reduced-motion: reduce) {
.km-js .ks-home-stage .km-pre .km-cji-keys kbd,
.km-js .ks-home-stage .km-pre .km-cji-arw,
.km-js .ks-home-stage .km-pre .km-cji-g {
opacity: 1;
transform: none;
scale: 1;
}
}
.ks-home-stage .km-cji-note {
margin: 14px 0 0;
font-size: 16px;
line-height: 1.5;
color: var(--k-mut);
}
.ks-home-stage .km-ri b {
scale: var(--is,1);
}
.ks-home-stage .km-br {
display: none;
}
@media (max-width: 600px) {
.ks-home-stage .km-br {
display: inline;
}
}