#kr-hero.sec_home_hero{padding:72px 32px 78px;overflow:hidden;background:#fff;>.wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:64px;width:100%;max-width:1360px;margin:0 auto}.eyebrow{margin-bottom:22px;color:#0865dc;font-size:14px;font-weight:800;letter-spacing:.06em}h1.ttl {margin: 0; color: #102543; font-size: 64px; font-weight: 900; line-height: 1.22em; letter-spacing: -.06em; span {color: #0966de;}} .lead {max-width: 540px; margin-top: 30px; color: #49617e; font-size: 18px; line-height: 1.85em;} .actions {display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 34px; a {text-decoration: none;} .btn_primary {display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 13px 24px; border-radius: 7px; color: #fff; background: #0967de; box-shadow: 0 10px 23px #0a62cc26; font-size: 15px; font-weight: 800; transition: background .2s ease,transform .2s ease; &:hover {background: #074daa; transform: translateY(-2px);}} .btn_text {color: #0c61c6; font-size: 15px; font-weight: 800; &:hover {text-decoration: underline;}}} .stats {display: flex; flex-wrap: wrap; gap: 22px; margin: 38px 0 0; padding: 0; list-style: none; li {display: flex; align-items: baseline; gap: 6px; color: #6a7c94; font-size: 12px;} strong {color: #1265ce; font-family: var(--kr-font-accent); font-size: 24px; font-weight: 800;}} .visual {min-width: 0;} .app_window {overflow: hidden; border: 1px solid #d2dfef; border-radius: 16px; background: #f6f9fd; box-shadow: 0 30px 60px #153c7530;} .window_bar {display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; border-bottom: 1px solid #dae4f1; color: #152d50; background: #fff; font-size: 14px; .window_mark {width: 20px; height: 20px; border-radius: 5px; background: #0967de;} .window_label {margin-left: auto; color: #8293a9; font-size: 11px;}} .app_layout {display: grid; grid-template-columns: 130px minmax(0,1fr); min-height: 370px;} .app_side {display: flex; flex-direction: column; gap: 10px; padding: 26px 13px; border-right: 1px solid #e2eaf5; background: #f7faff; color: #758aa6; font-size: 11px; span {padding: 10px 8px;} .side_active {border-radius: 6px; color: #0a63d1; background: #e2efff; font-weight: 800;}} .app_main {min-width: 0; padding: 26px;} .app_eyebrow {color: #0d67d5; font-size: 11px; font-weight: 800;} h2.app_title {margin: 6px 0 18px; color: #102643; font-size: 21px; font-weight: 900;} .video-thumb {position: relative; display: grid; place-items: center; min-height: 245px; overflow: hidden; border-radius: 10px; background: radial-gradient(circle at 70% 18%,#53a8ff,#126dd5 48%,#0b367d); color: #fff; isolation: isolate; &.has-thumb::after {content: ""; position: absolute; z-index: -1; inset: 0; background: #072a6090;} .video-thumb-img {position: absolute; z-index: -2; width: 100%; height: 100%; object-fit: cover;} .video-badge {position: absolute; top: 16px; left: 16px; padding: 5px 9px; border-radius: 4px; background: #ffffff2a; font-size: 10px; font-weight: 800;} .video-play {display: grid; place-items: center; width: 64px; height: 64px; border: 0; border-radius: 50%; color: #0866df; background: #fff; box-shadow: 0 10px 20px #05286340; cursor: pointer; font-size: 21px; svg path {fill: #0866df;}} .video-meta {position: absolute; right: 18px; bottom: 15px; left: 18px; display: flex; align-items: end; justify-content: space-between; gap: 10px;} .video-title {color: #fff; font-size: 16px; font-weight: 900; line-height: 1.4em;} .video-time {color: #e5f2ff; font-size: 11px;}} .app_progress {display: flex; justify-content: space-between; margin-top: 17px; color: #607896; font-size: 11px;} .progress_track {height: 6px; margin-top: 7px; border-radius: 6px; background: #dce8f5; span {display: block; width: 28%; height: 100%; border-radius: inherit; background: #1372e5;}} @media (max-width: 1200px) {> .wrap {gap: 36px;} h1.ttl {font-size: 56px;}} @media (max-width: 1000px) {> .wrap {gap: 25px;} h1.ttl {font-size: 48px;} .lead {font-size: 16px;} .app_layout {grid-template-columns: 100px minmax(0,1fr);} .app_main {padding: 20px;}} @media (max-width: 800px) {> .wrap {grid-template-columns: 1fr; max-width: 640px;} h1.ttl {font-size: 44px;}} @media (max-width: 600px) {padding: 56px 20px 68px; h1.ttl {font-size: 40px;} .stats {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; li {display: grid; gap: 0;} strong {font-size: 22px;}} .app_layout {grid-template-columns: 85px minmax(0,1fr); min-height: 0;} .app_side {padding: 18px 6px; font-size: 9px;} .app_main {padding: 14px;} h2.app_title {font-size: 16px;} .video-thumb {min-height: 175px;}} @media (max-width: 400px) {h1.ttl {font-size: 36px;} .actions .btn_primary {width: 100%;} .app_side {display: none;} .app_layout {display: block;}}}#kr-hero.sec_home_hero{padding:70px 32px 78px;>.wrap{max-width:1376px;grid-template-columns:minmax(450px,.82fr) minmax(0,1.18fr);gap:35px}.eyebrow{margin-bottom:17px;color:#0868df;font-size:15px}h1.ttl {font-size: 62px; line-height: 1.25em; span {white-space: nowrap;}} .lead {margin-top: 32px; font-size: 17px;} .visual {position: relative; margin-right: -100px; @media (max-width: 600px) {margin-right: 0; .glow {inset: -15px 10px -15px;} .laptop {padding: 0; transform: none; filter: drop-shadow(0 18px 20px #123c6b25);} .screen {aspect-ratio: auto; padding: 0; border: 1px solid #d2dfef; border-radius: 12px; background: #fff;} .base {display: none;} .app_window {height: auto;} .window_bar {min-height: 44px; padding: 0 14px; font-size: 12px;} .app_layout {display: block;} .app_side,.lesson_side {display: none;} .app_main {overflow: visible; padding: 16px;} .app_eyebrow {display: block; font-size: 10px;} h2.app_title {margin: 6px 0 13px; font-size: 16px;} .video-card {display: block; flex: none;} .video-thumb {aspect-ratio: 4 / 3;} .app_progress {display: flex; margin-top: 12px; font-size: 10px;}}} .glow {position: absolute; inset: -34px -10px -35px 20px; border-radius: 50%; background: radial-gradient(ellipse,#c6e2ff,#e7f5ff 50%,transparent 75%); filter: blur(8px);} .laptop {position: relative; padding: 0 8px; transform: perspective(1300px) rotateY(-7deg) rotateX(3deg); filter: drop-shadow(0 25px 18px #123c6b31);} .screen {aspect-ratio: 16 / 10; padding: 11px 11px 9px; overflow: hidden; border: 2px solid #182330; border-radius: 15px 15px 5px 5px; background: #1b2530;} .base {height: 16px; margin: 0 -24px; border-radius: 2px 2px 35px 35px; background: linear-gradient(#9aa7b1,#333d47 40%,#d7dde1 53%,#57636e 78%,#29343f); box-shadow: 0 7px 7px #132b4540;} .app_window {display: flex; flex-direction: column; height: 100%; border: 0; border-radius: 4px; box-shadow: none;} .window_bar {min-height: 38px; padding: 0 12px; font-size: 11px; .window_mark {display: grid; place-items: center; width: 18px; height: 18px; font-size: 9px; color: #fff;}} .app_layout {flex: 1; grid-template-columns: minmax(90px,.8fr) minmax(0,2.6fr) minmax(100px,1fr); min-height: 0;} .app_side {gap: 5px; padding: 21px 8px; font-size: 9px; span {padding: 8px 4px; white-space: nowrap;}} .app_main {display: flex; flex-direction: column; overflow: hidden; padding: 18px 14px 12px;} .app_eyebrow {font-size: 9px;} h2.app_title {margin: 5px 0 10px; font-size: 15px;} .video-card {display: flex; flex: 1; min-height: 0;} .video-thumb {flex: 1; min-height: 0; border-radius: 4px; background: linear-gradient(110deg,#101b2bd9,#1a2b487a),url(/images/lp-screen-3-video.webp) center / cover; .video-thumb-img {display: none;} &.has-thumb::after {display: none;} .video-play {width: 55px; height: 55px; color: #fff; background: #086adf; svg path {fill: #fff;}} .video-title {font-size: 11px;} .video-time {font-size: 9px;}} .app_progress {margin-top: 8px; font-size: 9px;} .progress_track {display: none;} .lesson_side {display: flex; flex-direction: column; gap: 5px; padding: 16px 7px; border-left: 1px solid #e7edf5; color: #6d819d; background: #fff; font-size: 9px; strong {margin-bottom: 6px; color: #213858; font-size: 10px;} span {padding: 8px 4px; border-radius: 4px;} .now {color: #075fd1; background: #e7f1ff; font-weight: 800;}} @media (max-width: 1200px) {h1.ttl {font-size: 54px;} .visual {margin-right: -60px;}} @media (max-width: 1000px) {> .wrap {grid-template-columns: minmax(400px,.82fr) minmax(0,1.18fr);} h1.ttl {font-size: 46px;} .lead {font-size: 15px;} .lesson_side {display: none;} .app_layout {grid-template-columns: minmax(80px,.7fr) minmax(0,2.5fr);}} @media (max-width: 800px) {> .wrap {grid-template-columns: 1fr; gap: 48px;} .visual {margin-right: 0;}} @media (max-width: 600px) {padding: 52px 20px 58px; h1.ttl {font-size: 40px;} .lead {margin-top: 22px; font-size: 15px;}} @media (max-width: 400px) {h1.ttl {font-size: 36px;}} h1.ttl {@media (max-width: 350px) {font-size: 32px;}}}.sec_home_guides{padding:88px 32px 80px;background:#eaf5ff;>.wrap{width:100%;max-width:1300px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:70px}.kicker{margin-bottom:16px;color:#0868df;font-size:15px;font-weight:800}h2.ttl {margin: 0; color: #0a2444; font-size: 43px; font-weight: 900; line-height: 1.34em; letter-spacing: -.04em;} .intro {max-width: 510px; margin-top: 26px; color: #526987; font-size: 16px; line-height: 1.8em;} .btn {display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 54px; margin-top: 29px; padding: 12px 22px; border-radius: 5px; color: #fff; background: #0969df; box-shadow: 0 7px 15px #005bd529; font-size: 15px; font-weight: 800; text-decoration: none;} .right {min-width: 0;} .guide_grid {display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px;} .guide_card {overflow: hidden; border: 1px solid #d9e8f8; border-radius: 9px; color: #102b4d; background: #fff; box-shadow: 0 6px 18px #1f527c0c; text-decoration: none; .photo {display: block; width: 100%; height: auto; aspect-ratio: 1.88; object-fit: cover; transition: transform .3s ease;} &:hover .photo {transform: scale(1.08);} .card_body {display: grid; gap: 10px; padding: 18px 18px 20px;} strong {font-size: 19px; font-weight: 900;} .tags {display: flex; flex-wrap: wrap; gap: 6px; small {padding: 4px 7px; border-radius: 3px; color: #0868dc; background: #eaf3ff; font-size: 11px; font-weight: 800;}} .detail {color: #61758e; font-size: 12px; line-height: 1.7em;} .arrow {justify-self: end; color: #0969dc; font-size: 19px;}} .guide_next {display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 17px 18px; border: 1px solid #e1ebf6; border-radius: 7px; background: #fff; color: #526c87; font-size: 12px; > span:first-child {display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 7px; color: #0868dc; background: #e9f3ff; font-size: 22px;} strong {color: #172f52; font-size: 13px; white-space: nowrap;}} @media (max-width: 1200px) {> .wrap {gap: 42px;} h2.ttl {font-size: 37px;}} @media (max-width: 900px) {> .wrap {grid-template-columns: 1fr; gap: 35px;} .left {max-width: 650px;}} @media (max-width: 600px) {padding: 64px 20px; h2.ttl {font-size: 32px;} .guide_grid {grid-template-columns: 1fr;} .guide_next {flex-wrap: wrap;}}}.sec_home_flow{padding:80px 32px;background:#fff;>.wrap{width:100%;max-width:1300px;margin:0 auto}.head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:28px;h2.ttl {margin: 0; color: #0a2444; font-size: 34px; font-weight: 900;} p {color: #647b97; font-size: 14px;}}.main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr);align-items:stretch;gap:32px}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;li {display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 16px 23px; border-radius: 7px; background: #f3f8ff; text-align: center;} .num {display: grid; place-items: center; width: 38px; height: 38px; margin-top: -14px; border-radius: 50%; color: #fff; background: #096be1; box-shadow: 0 5px 11px #096be135; font-size: 17px; font-weight: 900;} .icon {display: grid; place-items: center; width: 70px; height: 70px; margin: 17px 0 9px; border-radius: 50%; color: #126de3; background: #e6f1ff; font-size: 33px;} strong {color: #132d50; font-size: 15px; font-weight: 900;} p {margin-top: 11px; color: #70849e; font-size: 12px; line-height: 1.65em;}}.intro_video{position:relative;display:grid;align-items:center;overflow:hidden;aspect-ratio:16 / 10;border-radius:8px;color:#fff;background:#dce9f5;text-decoration:none;.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6);transition:transform .3s ease}&:hover .photo{transform:scale(1.08)}.play{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;margin:0 auto;border-radius:50%;background:#076de5;box-shadow:0 8px 20px #00274a50;font-size:22px}.caption{position:relative;z-index:1;align-self:end;padding:12px 16px;background:#08284493;font-size:13px;font-weight:800}}@media (max-width: 1000px){.main{grid-template-columns:1fr}.intro_video{width:100%;max-width:600px}}@media (max-width: 600px){padding:64px 20px;.head{display:block;h2.ttl {font-size: 28px;} p {margin-top: 9px;}}.steps{gap:8px;li {padding: 0 7px 16px;} .icon {width: 55px; height: 55px; font-size: 25px;} strong {font-size: 12px;}}}@media (max-width: 400px){.steps{grid-template-columns:1fr;gap:27px;li {min-height: 160px;}}}}.sec_home_curriculum{padding:84px 32px;background:#eaf5ff;>.wrap{width:100%;max-width:1300px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:60px}.kicker{margin-bottom:16px;color:#0868df;font-size:15px;font-weight:800}h2.ttl {margin: 0; color: #0a2444; font-size: 39px; font-weight: 900; line-height: 1.35em;} .intro {max-width: 520px; margin-top: 22px; color: #526987; font-size: 16px; line-height: 1.8em;} .btn {display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 53px; margin-top: 28px; padding: 12px 22px; border-radius: 5px; color: #fff; background: #0969df; box-shadow: 0 7px 15px #005bd529; font-size: 15px; font-weight: 800; text-decoration: none;} .right {min-width: 0;} .lesson_mock {display: flex; flex-direction: column; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid #d8e7f6; border-radius: 8px; background: #fff; box-shadow: 0 18px 40px #27609720;} .mock_head {display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #e5edf5; color: #173253; font-size: 10px; .mock_logo {display: grid; place-items: center; width: 17px; height: 17px; border-radius: 4px; color: #fff; background: #086bdd; font-size: 9px;} > span:last-child {margin-left: auto; color: #9aaac0;}} .mock_body {flex: 1; display: grid; grid-template-columns: minmax(90px,.7fr) minmax(0,2.5fr) minmax(120px,1fr); min-height: 0;} .mock_nav {display: flex; flex-direction: column; gap: 12px; padding: 20px 10px; border-right: 1px solid #e5edf5; color: #7b8ea6; background: #f6f9fd; font-size: 10px; span {padding: 7px 4px;} .active {border-radius: 4px; color: #0969dc; background: #e5f0ff; font-weight: 800;}} .mock_main {display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 20px 17px 14px; color: #172d4e; small {color: #0a68d7; font-size: 9px;} strong {margin: 4px 0 10px; font-size: 15px;} .mock_movie {display: grid; place-items: center; flex: 1; min-height: 0; border-radius: 4px; background: linear-gradient(#0b1a29a1,#0b1a29a1),url(/images/lp-screen-3-video.webp) center / cover; span {display: grid; place-items: center; width: 57px; height: 57px; border-radius: 50%; color: #fff; background: #096be1; font-size: 20px;}} .mock_time {margin-top: 7px; color: #8ca0b7; font-size: 9px;}} .mock_lessons {display: flex; flex-direction: column; gap: 10px; padding: 20px 9px; border-left: 1px solid #e5edf5; color: #758aa4; font-size: 9px; strong {margin-bottom: 5px; color: #253d5a; font-size: 10px;} span {padding: 8px 5px;} .active {border-radius: 4px; color: #0868df; background: #eaf3ff; font-weight: 800;}} @media (max-width: 1100px) {> .wrap {gap: 35px;} h2.ttl {font-size: 34px;}} @media (max-width: 850px) {> .wrap {grid-template-columns: 1fr;}} @media (max-width: 600px) {padding: 66px 20px; h2.ttl {font-size: 30px;} .mock_body {grid-template-columns: 1fr;} .mock_nav,.mock_lessons {display: none;} .mock_main {padding: 12px;}}}.sec_home_live{padding:84px 32px;background:#fff;>.wrap{width:100%;max-width:1300px;margin:0 auto;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:center;gap:80px}.kicker{margin-bottom:16px;color:#0868df;font-size:15px;font-weight:800}h2.ttl {margin: 0; color: #0a2444; font-size: 40px; font-weight: 900;} .intro {max-width: 500px; margin-top: 23px; color: #526987; font-size: 16px; line-height: 1.8em;} .btn {display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 53px; margin-top: 28px; padding: 12px 22px; border-radius: 5px; color: #fff; background: #0969df; box-shadow: 0 7px 15px #005bd529; font-size: 15px; font-weight: 800; text-decoration: none;} .right {min-width: 0; img {display: block; width: 100%; height: auto;}} @media (max-width: 900px) {> .wrap {grid-template-columns: 1fr; gap: 20px;} .right {max-width: 650px;}} @media (max-width: 600px) {padding: 66px 20px; h2.ttl {font-size: 32px;}}}.sec_home_notes{padding:80px 32px;background:#eaf5ff;>.wrap{width:100%;max-width:1300px;margin:0 auto}.head{display:flex;align-items:start;justify-content:space-between;gap:30px;margin-bottom:31px;>a{margin-top:10px;color:#0969df;font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}}.kicker{margin-bottom:14px;color:#0868df;font-size:15px;font-weight:800}h2.ttl {margin: 0; color: #0a2444; font-size: 40px; font-weight: 900;} .intro {max-width: 570px; margin-top: 14px; color: #526987; font-size: 15px; line-height: 1.8em;} .note_grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px;} .note_card {display: flex; flex-direction: column; overflow: hidden; min-height: 340px; border: 1px solid #dfeaf5; border-radius: 7px; color: #102746; background: #fff; text-decoration: none; .photo {display: block; width: 100%; height: auto; aspect-ratio: 2.05; object-fit: cover; transition: transform .3s ease;} &:hover .photo {transform: scale(1.08);} .note_body {display: flex; flex-direction: column; gap: 11px; padding: 17px 18px 21px; small {align-self: start; padding: 4px 8px; border-radius: 3px; color: #0868de; background: #eaf3ff; font-size: 11px; font-weight: 800;} strong {font-size: 18px; font-weight: 900; line-height: 1.5em;} > span {margin-top: auto; color: #7990ab; font-size: 11px;}}} .note_wait {opacity: .78;} @media (max-width: 800px) {.note_grid {grid-template-columns: repeat(2,minmax(0,1fr));}} @media (max-width: 600px) {padding: 66px 20px; .head {display: block; > a {display: inline-block; margin-top: 16px;}} h2.ttl {font-size: 32px;} .note_grid {grid-template-columns: 1fr;} .note_card {min-height: 0;}}}.sec_home_stats{padding:72px 32px 82px;background:#fff;>.wrap{width:100%;max-width:1300px;margin:0 auto}.kicker{margin-bottom:13px;color:#0868df;font-size:15px;font-weight:800}h2.ttl {margin: 0 0 30px; color: #0a2444; font-size: 28px; font-weight: 900;} .stat_grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px;} .stat_card {display: flex; align-items: center; gap: 19px; min-height: 112px; padding: 19px; border: 1px solid #e3edf7; border-radius: 8px; box-shadow: 0 5px 15px #15558d0a; .icon {display: grid; place-items: center; flex: 0 0 60px; height: 60px; border-radius: 50%; color: #116fe6; background: #e9f4ff; font-size: 28px;} div {display: grid; gap: 8px;} strong {color: #243a59; font-size: 14px;} div > span {color: #5c7390; font-size: 12px; b {color: #0b68dc; font-size: 19px;}}} @media (max-width: 800px) {.stat_grid {grid-template-columns: 1fr;}} @media (max-width: 600px) {padding: 64px 20px; h2.ttl {font-size: 24px;}}}.sec_home_pricing{padding:72px 32px;background:#eaf5ff;>.wrap{width:100%;max-width:1300px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:65px}.kicker{margin-bottom:14px;color:#0868df;font-size:15px;font-weight:800}h2.ttl {margin: 0; color: #0a2444; font-size: 40px; font-weight: 900;} .intro {max-width: 540px; margin-top: 21px; color: #526987; font-size: 16px; line-height: 1.8em;} .right {display: grid; gap: 24px;} .all_link {justify-self: end; color: #0969df; font-size: 13px; font-weight: 800; text-decoration: none;} .price_box {display: flex; align-items: center; gap: 21px; padding: 26px; border-radius: 7px; background: #dceeff; .icon {display: grid; place-items: center; flex: 0 0 60px; height: 60px; color: #0a6cde; font-size: 40px;} strong {color: #17365c; font-size: 17px;} p {margin-top: 6px; color: #5e7897; font-size: 12px; line-height: 1.65em;}} @media (max-width: 800px) {> .wrap {grid-template-columns: 1fr; gap: 25px;} .all_link {justify-self: start;}} @media (max-width: 600px) {padding: 64px 20px; h2.ttl {font-size: 32px;}}}.sec_home_faq{padding:72px 32px 90px;background:#fff;>.wrap{width:100%;max-width:1300px;margin:0 auto}.head{display:flex;justify-content:space-between;gap:30px;margin-bottom:28px;h2.ttl {margin: 0; color: #0a2444; font-size: 36px; font-weight: 900;} p {margin-top: 10px; color: #647b97; font-size: 14px;} a {align-self: start; margin-top: 10px; color: #0969df; font-size: 13px; font-weight: 800; text-decoration: none;}}.faq_list{display:grid;gap:10px;details {border: 1px solid #dce7f3; border-radius: 5px; background: #fff;} summary {padding: 16px 20px; color: #1e3657; font-size: 15px; font-weight: 800; cursor: pointer; list-style: none; &::after {content: "+"; float: right; color: #416b9e; font-size: 19px;}} details[open] summary::after {content: "\2212";} details p {padding: 0 20px 17px; color: #536c88; font-size: 14px; line-height: 1.8em;}}@media (max-width: 600px){padding:64px 20px;.head{display:block;h2.ttl {font-size: 30px;} a {display: inline-block; margin-top: 16px;}}}}body:has(#kr-home-guides) #kr-header .header-inner{max-width:1380px;padding-top:11px;padding-bottom:11px}body:has(#kr-home-guides) #kr-header .action-cta{padding:9px 16px;border:1px solid #8ab9ff;border-radius:6px;color:#0968dd;background:#fff;box-shadow:none}body:has(#kr-home-guides) #kr-footer{padding:42px 32px 35px;border-top:1px solid #e5edf6;color:#526987;background:#fff;.footer-inner{max-width:1300px}.footer-top{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:35px;padding-bottom:25px;border-bottom-color:#e5edf6}.brand-logo,.nav-heading{color:#153051}.brand-desc,.nav-list a,.footer-copyright{color:#7186a0}.footer-nav{grid-template-columns:repeat(3,minmax(0,1fr))}.footer-bottom{flex-direction:row;justify-content:space-between;gap:16px}.footer-stats{display:none}.social-link{color:#446c9b;background:#edf5ff}@media (max-width: 900px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-wrap:wrap}}@media (max-width: 600px){padding:40px 20px;.footer-nav{grid-template-columns:repeat(2,1fr)}}}#kr-lesson-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:24px;-webkit-overflow-scrolling:touch}#kr-lesson-modal[hidden]{display:none}#kr-lesson-modal .modal-backdrop{position:absolute;inset:0;background:rgba(13,23,50,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:kr-modal-fade .2s ease-out both}#kr-lesson-modal .modal-window{position:relative;width:100%;max-width:880px;max-height:calc(100vh - 48px);background:#ffffff;border-radius:18px;box-shadow:0 30px 80px #0d173259;overflow:hidden;display:flex;flex-direction:column;animation:kr-modal-pop .24s cubic-bezier(.2,.9,.3,1.1) both}#kr-lesson-modal .modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:#1f2a44;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:0 4px 14px #0d17322e;transition:transform .12s ease,background .12s ease}#kr-lesson-modal .modal-close:hover{background:#ffffff;transform:scale(1.05)}#kr-lesson-modal .modal-close:focus-visible{outline:2px solid #4A7FE5;outline-offset:2px}#kr-lesson-modal .modal-stage{position:relative;width:100%;background:#0d1732;flex-shrink:0}#kr-lesson-modal .modal-video{position:relative;width:100%;aspect-ratio:16 / 9;background:linear-gradient(135deg,#1a2950 0%,#0d1732 100%);overflow:hidden}#kr-lesson-modal[data-state=slides] .modal-video,#kr-lesson-modal[data-state=error] .modal-video{aspect-ratio:auto;overflow:visible}#kr-lesson-modal .modal-video:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(74,127,229,.25) 0%,transparent 50%),radial-gradient(circle at 70% 70%,rgba(232,91,151,.15) 0%,transparent 50%);pointer-events:none}#kr-lesson-modal .modal-video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#ffffffeb;text-align:center;padding:24px}#kr-lesson-modal .placeholder-icon{display:inline-flex;width:64px;height:64px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;margin-bottom:8px}#kr-lesson-modal .placeholder-text{font-size:16px;font-weight:700;margin:0;letter-spacing:.04em}#kr-lesson-modal .placeholder-sub{font-size:12px;margin:0;color:#fff9}#kr-lesson-modal .modal-info{padding:24px 28px 28px;overflow-y:auto}#kr-lesson-modal .modal-eyebrow{display:inline-block;margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;background:linear-gradient(135deg,#4A7FE5,#6E7FFF);padding:4px 10px;border-radius:999px}#kr-lesson-modal .modal-eyebrow[hidden]{display:none}#kr-lesson-modal .modal-title{font-family:var(--kr-font-accent, inherit);font-size:22px;font-weight:700;line-height:1.4;color:#1f2a44;margin:0 0 12px}#kr-lesson-modal .modal-meta{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13px;color:#5a6585}#kr-lesson-modal .modal-meta-item{display:inline-flex;align-items:center;position:relative}#kr-lesson-modal .modal-meta-item[hidden]{display:none}#kr-lesson-modal .modal-meta-item+.modal-meta-item:before{content:"\30fb";margin-right:6px;color:#aab1c6}#kr-lesson-modal .modal-desc{font-size:14px;line-height:1.7;color:#4a5675;margin:0 0 18px}#kr-lesson-modal .modal-desc[hidden]{display:none}#kr-lesson-modal .modal-guide{margin:0 0 16px;border:1px solid #e2e6f1;border-radius:10px;background:#f7f9fd;overflow:hidden}#kr-lesson-modal .modal-guide[hidden]{display:none}#kr-lesson-modal .modal-guide-summary{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;list-style:none;font-size:13px;font-weight:700;color:#1f2a44;user-select:none;transition:background .12s ease}#kr-lesson-modal .modal-guide-summary::-webkit-details-marker{display:none}#kr-lesson-modal .modal-guide-summary:hover{background:#eef2fa}#kr-lesson-modal .modal-guide-summary-icon{color:#4a7fe5;transition:transform .2s ease;flex-shrink:0}#kr-lesson-modal .modal-guide[open] .modal-guide-summary-icon{transform:rotate(180deg)}#kr-lesson-modal .modal-guide-body{padding:4px 16px 14px;font-size:14px;line-height:1.75;color:#2c3654;border-top:1px solid #e2e6f1;background:#ffffff;max-height:380px;overflow-y:auto}#kr-lesson-modal .modal-guide-body h2{font-size:16px;font-weight:700;color:#1f2a44;margin:16px 0 8px}#kr-lesson-modal .modal-guide-body h3{font-size:14px;font-weight:700;color:#1f2a44;margin:14px 0 6px}#kr-lesson-modal .modal-guide-body p{margin:0 0 10px}#kr-lesson-modal .modal-guide-body ul,#kr-lesson-modal .modal-guide-body ol{margin:0 0 10px;padding-left:20px}#kr-lesson-modal .modal-guide-body li{margin:4px 0}#kr-lesson-modal .modal-guide-body code{background:#f0f3fa;color:#4a7fe5;padding:2px 6px;border-radius:4px;font-size:13px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}#kr-lesson-modal .modal-guide-body pre{background:#1f2a44;color:#f5f7fb;padding:12px 14px;border-radius:8px;overflow-x:auto;font-size:12.5px;margin:8px 0 12px}#kr-lesson-modal .modal-guide-body pre code{background:transparent;color:inherit;padding:0}#kr-lesson-modal .modal-guide-body a{color:#4a7fe5;text-decoration:underline}#kr-lesson-modal .modal-guide-body strong{font-weight:700;color:#1f2a44}#kr-lesson-modal .modal-actions{display:flex;flex-wrap:wrap;gap:12px}#kr-lesson-modal .modal-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:linear-gradient(135deg,#4A7FE5 0%,#6E7FFF 100%);color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 8px 22px #4a7fe552;transition:transform .12s ease,box-shadow .12s ease}#kr-lesson-modal .modal-cta[hidden]{display:none}#kr-lesson-modal .modal-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px #4a7fe56b}#kr-lesson-modal .modal-cta:focus-visible{outline:2px solid #ffffff;outline-offset:2px}#kr-lesson-modal .modal-cta--secondary{background:#ffffff;color:#4a7fe5;border:1.5px solid #4A7FE5;box-shadow:0 4px 12px #4a7fe524}#kr-lesson-modal .modal-cta--secondary:hover{background:rgba(74,127,229,.06);box-shadow:0 8px 20px #4a7fe533}@keyframes kr-modal-fade{0%{opacity:0}to{opacity:1}}@keyframes kr-modal-pop{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 720px){#kr-lesson-modal{padding:12px}#kr-lesson-modal .modal-window{max-height:calc(100vh - 24px);border-radius:14px}#kr-lesson-modal .modal-info{padding:18px 20px 22px}#kr-lesson-modal .modal-title{font-size:18px}}@media (prefers-reduced-motion: reduce){#kr-lesson-modal .modal-backdrop,#kr-lesson-modal .modal-window{animation:none}}#kr-lesson-modal .modal-video-placeholder[hidden],#kr-lesson-modal .modal-slides[hidden],#kr-lesson-modal .modal-video-player[hidden],#kr-lesson-modal .modal-video-error[hidden]{display:none}#kr-lesson-modal .modal-video-player{position:absolute;inset:0;width:100%;height:100%;max-height:60vh;object-fit:contain;background:#000;display:block}#kr-lesson-modal .modal-slides{position:relative;width:100%;background:#0d1732;display:flex;flex-direction:column}#kr-lesson-modal .modal-slides-stage{position:relative;width:100%;aspect-ratio:16 / 9;max-height:56vh;overflow:hidden;background:#000}#kr-lesson-modal .modal-slides-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d1732;display:block}#kr-lesson-modal .modal-slides-image[hidden]{display:none}#kr-lesson-modal .modal-slides-figure{position:absolute;top:50%;left:50%;border:0;transform-origin:center center;background:#fff}#kr-lesson-modal .modal-slides-controls{display:flex;align-items:center;gap:8px;padding:10px 16px;background:rgba(0,0,0,.5);position:relative;z-index:1}#kr-lesson-modal .modal-slides-btn{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}#kr-lesson-modal .modal-slides-btn:hover{background:rgba(255,255,255,.2);border-color:#ffffff80}#kr-lesson-modal .modal-slides-btn--play{background:rgba(74,158,255,.85);border-color:#4a9eff}#kr-lesson-modal .modal-slides-btn--play:hover{background:rgba(74,158,255,1)}#kr-lesson-modal .modal-slides-counter{margin-left:auto;color:#ffffffd9;font-size:.84rem;font-variant-numeric:tabular-nums}#kr-lesson-modal .modal-video-error{padding:40px 24px;text-align:center;color:#b3bdd6;background:#f5f7fb}#kr-lesson-modal .modal-video-error .placeholder-text{color:#ff6b6b;font-weight:600}@media (max-width: 600px){#kr-lesson-modal .modal-slides-stage{max-height:48vh}}