/* ABOUT — Figma node 365:1259, canonical page styles. */
:root {
  --about-navy: var(--y-color-text-about);
  --about-blue: var(--y-color-text-about-accent);
  --about-cream: var(--y-color-surface-warm);
  --about-white: #ffffff;
  --about-gray: var(--y-palette-muted);
}
.about_main { width:100%; overflow-x:clip; }
.about_main img { display:block; max-width:none; }
.about_body {
  margin:0;
  font-family:"Pretendard",sans-serif;
  font-size:var(--type-body);
  font-weight:300;
  line-height:1.5;
  letter-spacing:-.01em;
}
.about_body_lines .i18n-line { display:block; white-space:nowrap; }
.i18n-spacer { display:block; height:26px; }
.center_lines { text-align:center; }

/* Hero */
.about_hero {
  position:relative;
  width:100%;
  height:1100px;
  overflow:hidden;
}
.about_hero_img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.about_hero_shade {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.2));
  pointer-events:none;
}
.about_hero_title {
  position:absolute;
  left:24.583333%;
  top:73.090909%;
  margin:0;
  color:var(--about-cream);
  font-family:"Playfair",serif;
  font-size:min(128px,6.666667vw);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-2px;
  white-space:nowrap;
}

/* ABOUT YURIU */
.phillosophy {
  position:relative;
  min-height:1120px;
  padding:124px var(--y-layout-page-gutter);
  overflow:hidden;
  box-sizing:border-box;
  color:var(--about-cream);
  background:#aab4ba;
}
.phillosophy_bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  pointer-events:none;
}
.phillosophy_container {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:100px;
  width:100%;
  max-width:1381px;
  min-height:905px;
  margin:0 auto;
}
.phillosophy_img {
  flex:0 0 602px;
  width:602px;
  height:689px;
  overflow:hidden;
}
.phillosophy_img img { width:100%; height:100%; object-fit:cover; }
.phillosophy_copy { flex:0 0 679px; width:679px; }
.phillosophy_copy h2 {
  margin:0 0 var(--y-layout-heading-copy-gap);
  font-family:"Playfair",serif;
  font-size:var(--type-section);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.045em;
  white-space:nowrap;
}
.phillosophy_copy .about_body { width:739px; color:var(--about-cream); }

/* OUR STANDARD */
.fomular {
  width:100%;
  padding:124px var(--y-layout-page-gutter);
  box-sizing:border-box;
  background:#fff;
  color:var(--about-navy);
}
.fomular_wrap { display:flex; flex-direction:column; align-items:center; gap:124px; width:100%; }
.fomular_intro { width:816px; text-align:center; }
.fomular_intro h2 {
  margin:0 0 var(--y-layout-heading-copy-gap);
  color:var(--about-blue);
  font-family:"Playfair",serif;
  font-size:var(--type-section);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.045em;
}
.fomular_intro .about_body { width:739px; margin:0 auto; color:#000; }
.fomular_contents { width:100%; padding-inline:var(--y-layout-page-gutter); box-sizing:border-box; }
.fomular_item {
  display:flex;
  align-items:stretch;
  gap:72px;
  width:100%;
  min-height:420px;
  background:#fff;
}
.fomular_img { flex:0 0 816px; width:816px; height:420px; overflow:hidden; background:var(--about-cream); }
.fomular_03 .fomular_img { width:817px; flex-basis:817px; height:436px; }
.fomular_img img { width:100%; height:100%; object-fit:cover; object-position:center; }
.fomular_01 .fomular_img img { object-position:center bottom; }
.fomular_02 .fomular_img img { height:342.86%; transform:translateY(-45.28%); }
.fomular_03 .fomular_img img { height:343.83%; transform:translateY(-35.47%); }
.fomular_copy {
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  gap:22px;
  padding-block:124px;
  box-sizing:border-box;
}
.fomular_02 .fomular_copy { align-items:flex-end; text-align:right; }
.fomular_copy h3 {
  width:100%;
  margin:0;
  color:var(--about-navy);
  font-family:"Pretendard",sans-serif;
  font-size:var(--type-feature);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.03em;
}
.fomular_copy .about_body { width:100%; color:var(--about-navy); }

/* WITH CARE FOR EVERY SKIN — sticky pass-through animation from the supplied reference. */
.promise_sticky {
  display:flex;
  align-items:center;
  justify-content:center;
}

.promise_title_wrap {
  text-align:center;
}
.promise_title_wrap em { font-family:"Playfair",serif; font-size:129.84px; font-weight:300; font-style:italic; }
.promise_img,
.promise_float_img { position:absolute; overflow:hidden; }
.promise_img img,
.promise_float_img img { width:100%; height:100%; object-fit:cover; }
.promise_float_img {
  z-index:2;
  opacity:0;
  transform-origin:center center;
  will-change:transform;
}
.promise_editorial {
  margin:0 0 30px;
}
.promise_subcopy { margin:0; }

/* OUR VALUE */
.value {
  position:relative;
  width:100%;
  height:1025px;
  padding:124px var(--y-layout-page-gutter);
  overflow:hidden;
  box-sizing:border-box;
  color:#fff;
}
.value_bg_wrap { position:absolute; inset:0; }
/* A soft shade on the copy side keeps the white title and copy readable
   over the bright ice photo. */
.value_bg_wrap::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg, rgba(34,36,38,.38) 0%, rgba(34,36,38,.18) 45%, rgba(34,36,38,0) 75%); pointer-events:none; }
.value_bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  opacity:0;
  transition:opacity 420ms ease;
}
.value_bg.is_active { opacity:1; }
.value_container {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
}
.value_intro { flex:0 0 816px; width:816px; align-self:stretch; }
.value_intro h2 {
  margin:0 0 var(--y-layout-heading-copy-gap);
  text-transform:uppercase;
  color:var(--about-cream);
  font-family:"Playfair",serif;
  font-size:var(--type-section);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.045em;
}
.value_intro .about_body { width:760px; color:#fff; }
.value_cards {
  display:flex;
  flex:1 1 auto;
  min-width:0;
  height:100%;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:12px;
}
.value_card {
  display:flex;
  width:770px;
  height:180px;
  padding:30px;
  box-sizing:border-box;
  flex-direction:column;
  justify-content:center;
  gap:20px;
  background:rgba(136,131,124,.5);
  color:rgba(255,255,255,.88);
  box-shadow:0 14px 42px rgba(20,35,55,.10);
  transition:background-color 260ms ease,color 260ms ease,opacity 260ms ease;
}
.value_card.is_active {
  background:var(--about-cream);
  color:var(--about-navy);
}
.value_card h3 { margin:0; font-family:"Pretendard",sans-serif; font-size:20px; font-weight:400; line-height:1.3; letter-spacing:-.2px; }
.value_card_copy { margin:0; font-family:"Pretendard",sans-serif; font-size:14px; font-weight:400; line-height:1.2; }
.value_card_copy .i18n-line { display:block; }

@media (max-width:1919px) and (min-width:1025px) {
  .about_hero { height:min(1100px,57.2917vw); min-height:760px; }
  .phillosophy { min-height:840px; }
  .phillosophy_container { max-width:1040px; min-height:640px; gap:72px; }
  .phillosophy_img { flex-basis:450px; width:450px; height:515px; }
  .phillosophy_copy { flex-basis:510px; width:510px; }
  .phillosophy_copy .about_body,.fomular_intro .about_body { width:100%; }
  .fomular_contents { padding-inline:0; max-width:1328px; }
  .fomular_item { gap:56px; min-height:330px; }
  .fomular_img { flex-basis:620px; width:620px; height:330px; }
  .fomular_03 .fomular_img { flex-basis:620px; width:620px; height:342px; }
  .fomular_copy { padding-block:80px; }
  .promise { height:600vh; padding:0; }
  .promise_sticky { height:100vh; }

  .promise_title_wrap p { font-size:78px; line-height:70px; letter-spacing:-3px; }
  .promise_title_wrap em { font-size:96px; }
  .promise_img_main { z-index:4; left:50%; top:150px; width:255px; height:374px; transform:translateX(-50%); }
  .promise_img_left { left:2%; top:90px; width:260px; height:152px; }
  .promise_img_top_right { left:auto; right:5%; top:-80px; width:244px; height:220px; }
  .promise_img_bottom_left { left:25%; top:470px; width:143px; height:209px; }
  .promise_img_bottom_right { left:auto; right:20%; top:520px; width:211px; height:210px; }
  .promise_article_wrap { top:545px; }
  .promise_editorial { font-size:22px; }
  .value { height:800px; }
  .value_intro { flex-basis:46%; width:46%; }
  .value_intro .about_body { width:95%; }
  .value_card { width:min(100%,580px); height:145px; padding:24px; }
}

@media (max-width:1024px) {
  .about_body_lines .i18n-line { white-space:normal; }
  .about_hero { height:760px; }
  .about_hero_title { left:50%; top:auto; bottom:90px; transform:translateX(-50%); font-size:clamp(52px,9vw,82px); }
  .phillosophy { min-height:0; }
  .phillosophy_container { flex-direction:column; gap:54px; min-height:0; max-width:720px; }
  .phillosophy_img { width:min(100%,520px); height:auto; aspect-ratio:602/689; flex-basis:auto; }
  .phillosophy_copy { width:100%; flex-basis:auto; }
  .phillosophy_copy .about_body,.fomular_intro,.fomular_intro .about_body { width:100%; }
  .fomular_contents { padding:0; }
  .fomular_item,.fomular_02 { flex-direction:column; gap:30px; margin-bottom:72px; min-height:0; }
  .fomular_02 .fomular_img { order:1; }
  .fomular_02 .fomular_copy { order:2; align-items:flex-start; text-align:left; }
  .fomular_img,.fomular_03 .fomular_img { width:100%; height:auto; aspect-ratio:816/420; flex-basis:auto; }
  .fomular_copy { padding:0; }
  .promise { height:430vh; padding:0; }
  .promise_sticky { height:100vh; }

  .promise_title_wrap p { font-size:54px; line-height:50px; letter-spacing:-2px; }
  .promise_title_wrap em { font-size:66px; }
  .promise_img_main { z-index:4; left:50%; top:145px; width:220px; height:322px; transform:translateX(-50%); }
  .promise_img_left { left:0; top:105px; width:185px; height:108px; }
  .promise_img_top_right { left:auto; right:0; top:-50px; width:170px; height:153px; }
  .promise_img_bottom_left { left:15%; top:450px; width:110px; height:161px; }
  .promise_img_bottom_right { left:auto; right:12%; top:460px; width:155px; height:154px; }
  .promise_article_wrap { top:500px; width:min(100%,620px); }
  .promise_editorial { font-size:20px; }
  .promise_subcopy { white-space:normal; }
  .value { height:auto; min-height:920px; }
  .value_container { flex-direction:column; gap:64px; align-items:stretch; }
  .value_intro { width:100%; flex-basis:auto; }
  .value_intro .about_body { width:100%; }
  .value_cards { align-items:stretch; }
  .value_card { width:100%; }
}

@media (max-width:600px) {
  .about_hero { height:620px; }
  .about_hero_title { bottom:64px; font-size:44px; }
  .promise { height:430vh; }
  .promise_title_wrap p { font-size:39px; line-height:38px; letter-spacing:-1.4px; }
  .promise_title_wrap em { font-size:47px; }
  .promise_img_main { z-index:4; top:125px; width:180px; height:264px; }
  .promise_img_left { width:125px; height:73px; }
  .promise_img_top_right { width:125px; height:113px; }
  .promise_img_bottom_left { left:4%; top:390px; width:84px; height:123px; }
  .promise_img_bottom_right { right:3%; top:410px; width:112px; height:111px; }
  .promise_article_wrap { top:465px; }
  .promise_editorial { font-size:18px; }
  .value_card { height:auto; min-height:160px; }
}

@media (prefers-reduced-motion:reduce) {
  .promise { height:auto; min-height:1168px; padding:124px var(--y-layout-page-gutter); }
  .promise_sticky { position:relative; height:auto; min-height:920px; overflow:visible; }
  .promise_float_img, .promise.is_scroll_ready .promise_float_img { opacity:1; transform:none; will-change:auto; }
  .value_bg { transition:none; animation:none; }
}
/* === Promise section reference-layout fix (2026-09-08) === */
.promise {
  position: relative;
  width: 100%;
  height: 600vh;
  padding: 0;
  overflow: clip;
  box-sizing: border-box;
  background: #f3f3f1;
  color: var(--about-navy);
}

.promise_sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #f3f3f1;
}

.promise_design {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1100px;
  transform: translate3d(-50%, -50%, 0) scale(var(--promise-scale, 1));
  transform-origin: center;
}

.promise_design > .container {
  position: absolute;
  top: 11.272727%;
  left: 3.75%;
  width: 92.5%;
  height: 77.454545%;
}

.promise_txt_wrap {
  position: relative;
  z-index: 2;
  display: flex;
  width: 45.214%;
  height: 100%;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.promise_title_wrap {
  --promise-title-size: 105.84px;
  --promise-playfair-ratio: 1.2267573696;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, 0.3125vw, 6px);
  top: auto;
  left: auto;
  transform: none;
  width: auto;
  max-width: none;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--about-navy);
  pointer-events: none;
}

.promise_title_wrap p {
  margin: 0;
  color: var(--about-navy);
  font-family: "Pretendard", sans-serif;
  font-size: var(--promise-title-size);
  font-weight: 500;
  line-height: calc(var(--promise-title-size) * 0.88);
  letter-spacing: calc(var(--promise-title-size) * -0.045);
  text-align: center;
  white-space: nowrap;
}

.promise_title_wrap p span { font: inherit; }

.promise_title_wrap p em {
  color: inherit;
  font-family: "Playfair", serif;
  font-size: calc(var(--promise-title-size) * var(--promise-playfair-ratio));
  font-style: italic;
  font-weight: 300;
  line-height: inherit;
  letter-spacing: inherit;
}

.promise_article_wrap {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
  left: auto;
  top: auto;
  transform: none;
  color: var(--about-navy);
}

.promise_article_wrap p {
  margin: 0;
  color: var(--about-navy);
  text-align: center;
}

.promise_editorial {
  width: 803px;
  max-width: 100%;
  font-family: "Playfair", serif;
  font-size: 28px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.34;
  letter-spacing: -0.56px;
}

.promise_subcopy {
  width: auto;
  max-width: 100%;
  font-family: "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.16px;
  white-space: normal;
}

.promise_img,
.promise_scroll_img,
.promise_float_img {
  position: absolute;
  overflow: hidden;
}

.promise_img_main {
  position: absolute;
  z-index: 4;
  top: 170px;
  left: 718px;
  width: 340px;
  height: 498px;
  transform: none;
  box-shadow: 0 28px 70px rgba(111, 107, 101, 0.32);
  overflow: hidden;
}

.promise_img_main > img,
.promise_scroll_img > img {
  display: block;
  width: 100%;
  height: 100%;
}

.promise_img_main > img,
.promise_scroll_img > img {
  object-fit: cover;
  object-position: center;
}

.promise_scroll_img {
  z-index: 1;
  transform-origin: center center;
  clip-path: inset(var(--promise-mask-top, 0%) var(--promise-mask-side, 0%) var(--promise-mask-bottom, 0%) var(--promise-mask-side, 0%));
  will-change: transform, clip-path;
}

.promise_float_img > img {
  transform: translate3d(0, var(--promise-inner-y, 0px), 0) scale(var(--promise-inner-scale, 1));
  transform-origin: center;
  will-change: transform;
}

.promise_img_top_right {
  top: -159px;
  left: 1359px;
  width: 331px;
  height: 485px;
}

.promise_img_left {
  top: -20px;
  left: -23px;
  width: 535px;
  height: 313px;
}

.promise_img_bottom_left {
  top: 534px;
  left: 158px;
  width: 445px;
  height: 401px;
}

.promise_img_bottom_right {
  top: 621px;
  left: 1160px;
  width: 482px;
  height: 479px;
}

.promise.is_scroll_ready .promise_float_img {
  opacity: 1;
  transform: translate3d(0, var(--promise-float-y, 125vh), 0) rotate(var(--promise-float-rotate, 0deg));
}

@media (max-width: 1919px) and (min-width: 1025px) {
  .promise {
    height: 520vh;
  }
}

@media (max-width: 1024px) {
  .promise {
    height: 240vh;
  }

  .promise_sticky {
    position: relative;
    height: 100%;
  }

  .promise_design {
    width: 100vw;
    height: auto;
    aspect-ratio: 1920 / 1100;
    transform: translate3d(-50%, -50%, 0);
  }

  .promise_title_wrap {
    --promise-title-size: clamp(42px, 8.2vw, 84px);
  }

  .promise_editorial {
    width: min(82vw, 700px);
    font-size: clamp(20px, 2.5vw, 28px);
  }

  .promise_subcopy {
    white-space: normal;
    width: min(84vw, 760px);
  }
}

@media (max-width: 768px) {
  .promise {
    height: 430vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promise_float_img,
  .promise.is_scroll_ready .promise_float_img {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
    will-change: auto;
  }

  .promise_float_img > img {
    transform: none;
    will-change: auto;
  }
}