/* Fluttering Penguins: a 1:1 recreation of the design (1214×1295). Desktop is a design-pixel stage scaled to the
   window; geometry, colours and text positions are generated by build.mjs from the recreation project
   (projects/penguins). Below 900px it is a normal responsive page. */
@font-face { font-family: "Pretendard"; font-weight: 400; src: url(fonts/Pretendard-Regular.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 500; src: url(fonts/Pretendard-Medium.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 600; src: url(fonts/Pretendard-SemiBold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 700; src: url(fonts/Pretendard-Bold.woff2) format("woff2"); font-display: swap; }
:root { --s: 1; --ink: #14305f; --blue: #255397; --muted: #5b6577; color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #fefefe; }
body { font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
i { font-style: normal; }
dd { margin: 0; }

/* ---------- desktop stage (design px) ---------- */
@media (min-width: 900px) {
  html { background: #fefefe; }
  body { width: calc(1214px * var(--s)); margin: 0 auto; }
  .stage { position: relative; width: 1214px; height: 1295px; transform: scale(var(--s)); transform-origin: 0 0; margin-bottom: calc(1295px * (var(--s) - 1)); overflow: hidden; }
  .t, .shape, .rule, .ghost, .lang, .px > * { position: absolute; }
  .t { white-space: nowrap; line-height: 1; display: block; }
  .px > * { left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); }
  .mi, .mlogo, .circ img, .story .photo { display: none; }
  .lang select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .px { position: absolute; inset: 0; pointer-events: none; }
  .px svg { overflow: visible; }
  a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

  /* code mode: live text and the traced icons */
  .px-text, .px-r { display: none; }
  /* pixel mode (default): traced text outlines over transparent live text; small elements as original pixels */
  .pixel .px-text { display: block; }
  .pixel .t { color: transparent !important; }
  .pixel .px-r.r-auto { display: block; }
  .pixel .px-v.has-r { display: none; }
  /* max: every element as its original-pixel cutout (parts are inside their parent's cutout) */
  .max .px-r { display: block; }
  .max .px-v, .max .px-r.part { display: none; }
  .max .px-r.fill { display: block; }
  .bare .t { visibility: hidden; }
  /* exact: the original as layers; links and the select stay live on top, transparent */
  .exact .px, .exact .rule { visibility: hidden; }
  .exact .shape { background: transparent !important; border-color: transparent !important; }
}
/* generated by build.mjs */
@media (min-width: 900px) {
.stage{background:url(assets/plate.webp?v=78a761a6) 0 0/1214px 1295px no-repeat}
.shape[data-n="nav_btn"]{--ox:943.25px;--oy:9.5px;left:943.25px;top:9.5px;width:117.75px;height:34.75px;border-radius:17.5px;background:#255397;}
.shape[data-n="nav_underline"]{--ox:406.625px;--oy:53.375px;left:406.625px;top:53.375px;width:43px;height:1.75px;border-radius:1px;background:#5D81B1;}
.shape[data-n="hero_btn"]{--ox:89.75px;--oy:375.25px;left:89.75px;top:375.25px;width:150.25px;height:44.75px;border-radius:23px;background:#FDFDFE;}
.shape[data-n="story_btn"]{--ox:607.25px;--oy:1246.5px;left:607.25px;top:1246.5px;width:152.125px;height:36.625px;border-radius:19px;background:#FCFDFD;border:1px solid #6381B1;}
.shape[data-n="mis_circle_1"]{--ox:168.25px;--oy:683.75px;left:168.25px;top:683.75px;width:59px;height:59px;border-radius:50%;background:#D2E8FD;}
.shape[data-n="mis_circle_2"]{--ox:444.375px;--oy:683.875px;left:444.375px;top:683.875px;width:59.125px;height:59.125px;border-radius:50%;background:#D3F4E5;}
.shape[data-n="mis_circle_3"]{--ox:714.625px;--oy:683.875px;left:714.625px;top:683.875px;width:59px;height:59px;border-radius:50%;background:#E4E3FD;}
.shape[data-n="mis_circle_4"]{--ox:990.5px;--oy:684.125px;left:990.5px;top:684.125px;width:58.875px;height:58.875px;border-radius:50%;background:#FEEBC7;}
.shape[data-n="stat_circle_1"]{--ox:83.375px;--oy:990.25px;left:83.375px;top:990.25px;width:46.25px;height:46.25px;border-radius:50%;background:#CDE6FD;}
.shape[data-n="stat_circle_2"]{--ox:264.25px;--oy:990.25px;left:264.25px;top:990.25px;width:46.125px;height:46.125px;border-radius:50%;background:#D3F5E6;}
.shape[data-n="stat_circle_3"]{--ox:443.5px;--oy:990.125px;left:443.5px;top:990.125px;width:46.25px;height:46.25px;border-radius:50%;background:#DCDDFD;}
.shape[data-n="stat_circle_4"]{--ox:625.125px;--oy:990.25px;left:625.125px;top:990.25px;width:46.25px;height:46.25px;border-radius:50%;background:#FBE1FC;}
.rule[data-n="col_divider_1"]{left:336px;top:694px;width:1px;height:133px;background:#F5F6F9}
.rule[data-n="col_divider_2"]{left:607px;top:694px;width:1px;height:133px;background:#F6F7F9}
.rule[data-n="col_divider_3"]{left:880px;top:694px;width:1px;height:133px;background:#F6F8FA}
.ghost{left:254.25px;top:374.75px;width:140.5px;height:45.5px;border-radius:22.75px;--ox:254.25px;--oy:374.75px}
.px .fillb{display:block}.exact .px-shapes{visibility:hidden}
.lang{left:1077px;top:9px;width:63px;height:36px;--ox:1077px;--oy:9px}
.t[data-n="tx_logo"]{left:calc(121px - var(--ox, 0px));top:calc(19.157px - var(--oy, 0px));font:700 15.84px/1 Pretendard, sans-serif;letter-spacing:0.156px;color:#1A315B}
.t[data-n="tx_nav_home"]{left:calc(423px - var(--ox, 0px));top:calc(20.885px - var(--oy, 0px));font:500 13px/1 Pretendard, sans-serif;letter-spacing:0px;color:#5776A8}
.t[data-n="tx_nav_about"]{left:calc(474px - var(--ox, 0px));top:calc(20.885px - var(--oy, 0px));font:500 13px/1 Pretendard, sans-serif;letter-spacing:0px;color:#687691}
.t[data-n="tx_nav_biz"]{left:calc(535px - var(--ox, 0px));top:calc(20.885px - var(--oy, 0px));font:500 13px/1 Pretendard, sans-serif;letter-spacing:0px;color:#637493}
.t[data-n="tx_nav_support"]{left:calc(597px - var(--ox, 0px));top:calc(20.885px - var(--oy, 0px));font:500 13px/1 Pretendard, sans-serif;letter-spacing:0.267px;color:#6D7C96}
.t[data-n="tx_nav_news"]{left:calc(682px - var(--ox, 0px));top:calc(20.885px - var(--oy, 0px));font:500 13px/1 Pretendard, sans-serif;letter-spacing:0px;color:#667794}
.t[data-n="tx_navbtn"]{left:calc(971px - var(--ox, 0px));top:calc(19.978px - var(--oy, 0px));font:600 14.061px/1 Pretendard, sans-serif;letter-spacing:-0.934px;color:#D6DFEB}
.t[data-n="tx_lang"]{left:calc(1084px - var(--ox, 0px));top:calc(20.885px - var(--oy, 0px));font:400 13px/1 Pretendard, sans-serif;letter-spacing:2.98px;color:#7F8CA3}
.t[data-n="tx_hero_eyebrow"]{left:calc(90px - var(--ox, 0px));top:calc(134.18px - var(--oy, 0px));font:400 13.824px/1 Pretendard, sans-serif;letter-spacing:0.343px;color:#BFDBE7}
.t[data-n="tx_head_1"]{left:calc(90px - var(--ox, 0px));top:calc(161.634px - var(--oy, 0px));font:700 44.872px/1 Pretendard, sans-serif;letter-spacing:-3.577px;color:#F9FAFC}
.t[data-n="tx_head_2"]{left:calc(89px - var(--ox, 0px));top:calc(235.117px - var(--oy, 0px));font:700 32.612px/1 Pretendard, sans-serif;letter-spacing:5.047px;color:#F7F9FB}
.t[data-n="tx_head_3"]{left:calc(90px - var(--ox, 0px));top:calc(277.117px - var(--oy, 0px));font:700 32.612px/1 Pretendard, sans-serif;letter-spacing:-3.58px;color:#F9FBFC}
.t[data-n="tx_hero_p1"]{left:calc(90px - var(--ox, 0px));top:calc(308.396px - var(--oy, 0px));font:400 18.251px/1 Pretendard, sans-serif;letter-spacing:-2.779px;color:#DBE6F2}
.t[data-n="tx_hero_p2"]{left:calc(90px - var(--ox, 0px));top:calc(337.196px - var(--oy, 0px));font:400 14.976px/1 Pretendard, sans-serif;letter-spacing:-0.43px;color:#D2DDEC}
.t[data-n="tx_btn1"]{left:calc(127px - var(--ox, 0px));top:calc(390.175px - var(--oy, 0px));font:600 15px/1 Pretendard, sans-serif;letter-spacing:0.8px;color:#3B62A2}
.t[data-n="tx_btn2"]{left:calc(275px - var(--ox, 0px));top:calc(387.396px - var(--oy, 0px));font:600 18.251px/1 Pretendard, sans-serif;letter-spacing:-1.795px;color:#E3EAF3}
.t[data-n="tx_mis_eyebrow"]{left:calc(571px - var(--ox, 0px));top:calc(561.828px - var(--oy, 0px));font:600 11.898px/1 Pretendard, sans-serif;letter-spacing:-0.484px;color:#76A1D7}
.t[data-n="tx_mis_title"]{left:calc(537px - var(--ox, 0px));top:calc(580.659px - var(--oy, 0px));font:700 24.96px/1 Pretendard, sans-serif;letter-spacing:0.006px;color:#18325F}
.t[data-n="tx_mis_p1"]{left:calc(407px - var(--ox, 0px));top:calc(621.919px - var(--oy, 0px));font:400 12.96px/1 Pretendard, sans-serif;letter-spacing:-0.387px;color:#8C98AD}
.t[data-n="tx_mis_p2"]{left:calc(550px - var(--ox, 0px));top:calc(670.937px - var(--oy, 0px));font:400 12.94px/1 Pretendard, sans-serif;letter-spacing:-2.67px;color:#939DB2}
.t[data-n="tx_col1_title"]{left:calc(168px - var(--ox, 0px));top:calc(758.32px - var(--oy, 0px));font:700 16px/1 Pretendard, sans-serif;letter-spacing:-0.2px;color:#223A63}
.t[data-n="tx_col2_title"]{left:calc(429px - var(--ox, 0px));top:calc(757.773px - var(--oy, 0px));font:700 16.64px/1 Pretendard, sans-serif;letter-spacing:-0.743px;color:#233963}
.t[data-n="tx_col3_title"]{left:calc(702px - var(--ox, 0px));top:calc(758.32px - var(--oy, 0px));font:700 16px/1 Pretendard, sans-serif;letter-spacing:-0.4px;color:#223861}
.t[data-n="tx_col4_title"]{left:calc(969px - var(--ox, 0px));top:calc(759.393px - var(--oy, 0px));font:700 14.746px/1 Pretendard, sans-serif;letter-spacing:0.4px;color:#1B315B}
.t[data-n="tx_col1_l1"]{left:calc(101px - var(--ox, 0px));top:calc(790.885px - var(--oy, 0px));font:400 13px/1 Pretendard, sans-serif;letter-spacing:-0.28px;color:#8A93A8}
.t[data-n="tx_col2_l1"]{left:calc(392px - var(--ox, 0px));top:calc(791.997px - var(--oy, 0px));font:400 14.039px/1 Pretendard, sans-serif;letter-spacing:-1.303px;color:#8C97AB}
.t[data-n="tx_col3_l1"]{left:calc(686px - var(--ox, 0px));top:calc(790.885px - var(--oy, 0px));font:400 13px/1 Pretendard, sans-serif;letter-spacing:-0.4px;color:#8F98AC}
.t[data-n="tx_col4_l1"]{left:calc(913px - var(--ox, 0px));top:calc(790.885px - var(--oy, 0px));font:400 13px/1 Pretendard, sans-serif;letter-spacing:-0.348px;color:#919CAF}
.t[data-n="tx_col1_l2"]{left:calc(118px - var(--ox, 0px));top:calc(811.998px - var(--oy, 0px));font:400 14.037px/1 Pretendard, sans-serif;letter-spacing:-1.105px;color:#969FB2}
.t[data-n="tx_col2_l2"]{left:calc(392px - var(--ox, 0px));top:calc(811.998px - var(--oy, 0px));font:400 14.037px/1 Pretendard, sans-serif;letter-spacing:-1.178px;color:#919BAF}
.t[data-n="tx_col3_l2"]{left:calc(663px - var(--ox, 0px));top:calc(810.518px - var(--oy, 0px));font:400 14.599px/1 Pretendard, sans-serif;letter-spacing:-1.591px;color:#919BB0}
.t[data-n="tx_col4_l2"]{left:calc(931px - var(--ox, 0px));top:calc(811.998px - var(--oy, 0px));font:400 14.037px/1 Pretendard, sans-serif;letter-spacing:-1.144px;color:#919AAF}
.t[data-n="tx_imp_eyebrow"]{left:calc(83px - var(--ox, 0px));top:calc(901.844px - var(--oy, 0px));font:600 11.878px/1 Pretendard, sans-serif;letter-spacing:-0.343px;color:#6D9DD7}
.t[data-n="tx_imp_title"]{left:calc(83px - var(--ox, 0px));top:calc(918.428px - var(--oy, 0px));font:700 22.891px/1 Pretendard, sans-serif;letter-spacing:-1.089px;color:#183260}
.t[data-n="tx_imp_p"]{left:calc(83px - var(--ox, 0px));top:calc(974.756px - var(--oy, 0px));font:400 11.981px/1 Pretendard, sans-serif;letter-spacing:0.728px;color:#8596B1}
.t[data-n="tx_stat1_num"]{left:calc(140px - var(--ox, 0px));top:calc(996.584px - var(--oy, 0px));font:700 19.2px/1 Pretendard, sans-serif;letter-spacing:0.107px;color:#1B3769}
.t[data-n="tx_stat2_num"]{left:calc(320px - var(--ox, 0px));top:calc(996.584px - var(--oy, 0px));font:700 19.2px/1 Pretendard, sans-serif;letter-spacing:0.44px;color:#1C3766}
.t[data-n="tx_stat3_num"]{left:calc(499px - var(--ox, 0px));top:calc(996.584px - var(--oy, 0px));font:700 19.2px/1 Pretendard, sans-serif;letter-spacing:0.267px;color:#193568}
.t[data-n="tx_stat4_num"]{left:calc(681px - var(--ox, 0px));top:calc(997.216px - var(--oy, 0px));font:700 20.8px/1 Pretendard, sans-serif;letter-spacing:-1.24px;color:#1E3D70}
.t[data-n="tx_stat1_label"]{left:calc(139px - var(--ox, 0px));top:calc(1045.938px - var(--oy, 0px));font:400 10.598px/1 Pretendard, sans-serif;letter-spacing:0.731px;color:#8C9BB4}
.t[data-n="tx_stat2_label"]{left:calc(321px - var(--ox, 0px));top:calc(1024.791px - var(--oy, 0px));font:400 11.94px/1 Pretendard, sans-serif;letter-spacing:-0.534px;color:#8B9CB3}
.t[data-n="tx_stat3_label"]{left:calc(499px - var(--ox, 0px));top:calc(1045.938px - var(--oy, 0px));font:400 10.598px/1 Pretendard, sans-serif;letter-spacing:-0.49px;color:#8897B3}
.t[data-n="tx_stat4_label"]{left:calc(682px - var(--ox, 0px));top:calc(1024.791px - var(--oy, 0px));font:400 11.94px/1 Pretendard, sans-serif;letter-spacing:-0.555px;color:#8699B4}
.t[data-n="tx_story_eyebrow"]{left:calc(607px - var(--ox, 0px));top:calc(1117.023px - var(--oy, 0px));font:600 10.5px/1 Pretendard, sans-serif;letter-spacing:-0.2px;color:#6F9DD4}
.t[data-n="tx_story_title"]{left:calc(607px - var(--ox, 0px));top:calc(1136.335px - var(--oy, 0px));font:700 23px/1 Pretendard, sans-serif;letter-spacing:0.053px;color:#19325F}
.t[data-n="tx_story_p1"]{left:calc(607px - var(--ox, 0px));top:calc(1172.03px - var(--oy, 0px));font:400 14px/1 Pretendard, sans-serif;letter-spacing:-0.649px;color:#8E99AE}
.t[data-n="tx_story_p2"]{left:calc(472px - var(--ox, 0px));top:calc(1238.968px - var(--oy, 0px));font:400 12.902px/1 Pretendard, sans-serif;letter-spacing:2.081px;color:#939DB0}
.t[data-n="tx_story_p3"]{left:calc(648px - var(--ox, 0px));top:calc(1213.986px - var(--oy, 0px));font:400 12.881px/1 Pretendard, sans-serif;letter-spacing:-1.025px;color:#94A0B4}
.t[data-n="tx_story_btn"]{left:calc(627px - var(--ox, 0px));top:calc(1258.313px - var(--oy, 0px));font:600 12.5px/1 Pretendard, sans-serif;letter-spacing:-0.622px;color:#5979AB}
.exact .stage{background:url(exact/07_story.webp?v=d700b33d) 0 0/1214px 1295px no-repeat,
    url(exact/06_story_photo.webp?v=2aa69faa) 0 0/1214px 1295px no-repeat,
    url(exact/05_impact.webp?v=489d43e7) 0 0/1214px 1295px no-repeat,
    url(exact/04_mission.webp?v=b463914f) 0 0/1214px 1295px no-repeat,
    url(exact/03_hero_photo.webp?v=c10c65a8) 0 0/1214px 1295px no-repeat,
    url(exact/02_hero_copy.webp?v=1919e0cf) 0 0/1214px 1295px no-repeat,
    url(exact/01_navigation.webp?v=62dbebf6) 0 0/1214px 1295px no-repeat,
    url(exact/00_background.webp?v=78a761a6) 0 0/1214px 1295px no-repeat}
}
@media (max-width: 899px) {
.circ[data-n="mis_circle_1"]{background:#D2E8FD}
.circ[data-n="mis_circle_2"]{background:#D3F4E5}
.circ[data-n="mis_circle_3"]{background:#E4E3FD}
.circ[data-n="mis_circle_4"]{background:#FEEBC7}
.circ[data-n="stat_circle_1"]{background:#CDE6FD}
.circ[data-n="stat_circle_2"]{background:#D3F5E6}
.circ[data-n="stat_circle_3"]{background:#DCDDFD}
.circ[data-n="stat_circle_4"]{background:#FBE1FC}
}

/* ---------- small screens: a normal responsive layout ---------- */
@media (max-width: 899px) {
  .px, .rule, .lang select { display: none; }
  .stage { background: none !important; }
  .t { color: inherit; }
  .nav { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #eef0f4; position: sticky; top: 0; z-index: 2; flex-wrap: wrap; }
  .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; margin-right: auto; }
  .mlogo { width: 26px; height: auto; }
  .menu { order: 3; width: 100%; display: flex; gap: 20px; font-size: 14px; font-weight: 500; overflow-x: auto; }
  .menu [aria-current] { color: var(--blue); box-shadow: inset 0 -2px var(--blue); padding-bottom: 6px; }
  .menu .shape { display: none; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 99px; font-weight: 600; font-size: 14px; height: 44px; padding: 0 20px; }
  .navbtn { background: var(--blue) !important; color: #fff; height: 36px; padding: 0 14px; font-size: 13px; }
  .lang { font-size: 13px; color: var(--muted); }
  .hero { background: linear-gradient(180deg, rgba(38,74,128,.72), rgba(38,74,128,.35) 48%, rgba(38,74,128,0) 64%), #7fa3c9 url(assets/hero-m.webp) 66% 100% / auto 100% no-repeat; color: #fff; padding: 40px 16px 340px; }
  .hero .eyebrow { font-size: 14px; color: #e4eefb; }
  .head { font-size: 32px; line-height: 1.25; margin: 12px 0 16px; font-weight: 700; }
  .head .t { display: inline; }
  .intro { font-size: 15px; line-height: 1.6; max-width: 34em; }
  .ctas { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
  .hero .shape { background: #fff !important; color: var(--blue); }
  .ghost { border: 1px solid rgba(255,255,255,.9); background: rgba(40,80,140,.35); color: #fff; }
  .mission { padding: 48px 16px; text-align: center; }
  .eyebrow { font-size: 12px; font-weight: 600; color: #3f6fb7; letter-spacing: .02em; }
  h2 { font-size: 24px; font-weight: 700; margin: 6px 0 10px; }
  .lead { font-size: 14px; line-height: 1.6; color: var(--muted); }
  .lead .t, .cols p .t { display: inline; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; margin-top: 32px; }
  .circ { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px; }
  .circ img { width: 30px; height: auto; }
  h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
  .cols p { font-size: 13px; line-height: 1.6; color: var(--muted); }
  .impact { margin: 0 16px; padding: 28px 20px; border-radius: 14px; background: linear-gradient(180deg, #eef5fd, #f6f9fe); }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin-top: 22px; }
  .stats > div { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; align-items: center; }
  .stats .circ { grid-row: span 2; width: 44px; height: 44px; margin: 0; }
  .stats .circ img { width: 24px; }
  .num { font-size: 19px; font-weight: 700; }
  .stats dt { font-size: 12px; color: var(--muted); }
  .story { padding: 40px 16px 56px; }
  .story .photo { width: 100%; height: auto; border-radius: 12px; margin-bottom: 24px; display: block; }
  .story .lead .t { display: block; }
  .outline { margin-top: 20px; border: 1px solid #6381b1; color: var(--blue); height: 40px; }
}