.brand-story-page{
  --brand-black:#111;
  --brand-paper:#f7f7f3;
  --brand-mint:#158187;
  --brand-mint-on-dark:#50a1a5;
  --brand-navy:#0f1c2e;
  min-width:0;
  overflow-x:hidden;
  background:#fff;
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
.brand-story-page .site-header{z-index:50}
.brand-story-page .main-nav .is-current{color:#111;font-weight:800}
.brand-story-page main{display:block}
.brand-eyebrow,
.brand-section-heading>p,
.brand-manifesto>p,
.brand-standard>div>p,
.brand-final-cta>p{
  margin:0 0 22px;
  color:#6d6f6a;
  font-size:11px;
  font-weight:850;
  letter-spacing:.18em;
}

.brand-hero{
  width:min(1320px,calc(100% - 48px));
  min-height:760px;
  margin:0 auto;
  padding:50px 0 70px;
  display:grid;
  grid-template-columns:minmax(360px,.83fr) minmax(520px,1.17fr);
  align-items:center;
  gap:74px;
}
.brand-hero-copy{padding-left:max(0px,calc((100vw - 1320px)/4))}
.brand-hero h1{
  margin:0;
  font-size:clamp(72px,8vw,126px);
  font-weight:850;
  line-height:.88;
  letter-spacing:-.075em;
}
.brand-hero h1 strong{
  display:block;
  margin-top:20px;
  color:var(--brand-mint);
  font-weight:inherit;
}
.brand-hero-lead{
  margin:42px 0 0;
  color:#434541;
  font-size:clamp(17px,1.45vw,21px);
  font-weight:570;
  line-height:1.75;
  letter-spacing:-.025em;
}
.brand-scroll-link{
  display:inline-flex;
  align-items:center;
  gap:18px;
  margin-top:48px;
  padding-bottom:7px;
  border-bottom:1px solid #bfc0bc;
  font-size:13px;
  font-weight:750;
}
.brand-scroll-link span{color:var(--brand-mint);font-size:19px}
.brand-hero-photo{
  min-width:0;
  height:640px;
  margin:0;
  overflow:hidden;
  position:relative;
  background:#e8e8e2;
}
.brand-hero-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:85% center;
  filter:saturate(.84) contrast(.98);
}

.brand-manifesto{
  padding:150px max(24px,calc((100% - 1120px)/2));
  background:var(--brand-black);
  color:#fff;
}
.brand-manifesto>p{color:#8e918b}
.brand-manifesto h2{
  max-width:900px;
  margin:0;
  font-size:clamp(48px,6vw,82px);
  line-height:1.08;
  letter-spacing:-.06em;
}
.brand-manifesto-body{
  margin-top:80px;
  display:grid;
  grid-template-columns:240px 1fr;
  gap:64px;
  align-items:start;
}
.manifesto-line{
  height:1px;
  margin-top:15px;
  position:relative;
  background:#3d3e3b;
}
.manifesto-line:after{
  content:"";
  width:34%;
  height:3px;
  position:absolute;
  left:0;
  top:-1px;
  background:var(--brand-mint-on-dark);
}
.brand-manifesto-body p{
  max-width:740px;
  margin:0;
  color:#c9cac6;
  font-size:clamp(18px,2vw,25px);
  font-weight:520;
  line-height:1.78;
  letter-spacing:-.025em;
}

.brand-meaning{
  padding:150px max(24px,calc((100% - 1120px)/2));
}
.brand-section-heading>p{color:#777a74}
.brand-section-heading h2{
  margin:0;
  font-size:clamp(42px,5.3vw,72px);
  line-height:1.12;
  letter-spacing:-.055em;
}
.brand-section-heading h2 em{color:var(--brand-mint);font-style:normal}
.meaning-copy{
  max-width:840px;
  margin:54px 0 0 auto;
  color:#4d4f4a;
  font-size:clamp(18px,2vw,23px);
  line-height:1.82;
  letter-spacing:-.025em;
}

.brand-role{
  padding:150px max(24px,calc((100% - 1120px)/2));
  background:#f0f4f2;
}
.brand-role-intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:end;
  gap:90px;
}
.brand-role-intro>p{
  margin:0 0 4px;
  color:#575b56;
  font-size:18px;
  line-height:1.82;
  letter-spacing:-.02em;
}
.brand-role-problems{
  margin-top:74px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.brand-role-card{
  min-height:430px;
  padding:38px;
  display:flex;
  flex-direction:column;
  border:1px solid #d9ded9;
  background:#fff;
}
.brand-role-center{background:#e3ece9}
.brand-role-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand-role-card-top>span,
.brand-platform-position span,
.brand-collaboration>span{
  color:#737872;
  font-size:10px;
  font-weight:850;
  letter-spacing:.17em;
}
.brand-role-card-top>i{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f1f5f3;
  color:var(--brand-mint);
}
.brand-role-center .brand-role-card-top>i{background:#fff}
.brand-role-card-top .ui-icon{width:22px;height:22px}
.brand-role-label{
  margin:74px 0 14px;
  color:var(--brand-mint);
  font-size:12px;
  font-weight:800;
}
.brand-role-card h3{
  margin:0;
  font-size:clamp(29px,3vw,40px);
  line-height:1.24;
  letter-spacing:-.045em;
}
.brand-role-card>p:last-child{
  max-width:440px;
  margin:auto 0 0;
  color:#646963;
  font-size:15px;
  line-height:1.72;
}
.brand-platform-position{
  margin-top:20px;
  padding:44px 40px;
  display:grid;
  grid-template-columns:.66fr 1.25fr .9fr;
  align-items:start;
  gap:42px;
  background:var(--brand-navy);
  color:#fff;
}
.brand-platform-position>div{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-platform-position span{color:var(--brand-mint-on-dark)}
.brand-platform-position i{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1b2d43;
  color:var(--brand-mint-on-dark);
}
.brand-platform-position .ui-icon{width:17px;height:17px}
.brand-platform-position h3{
  margin:0;
  font-size:clamp(23px,2.5vw,34px);
  line-height:1.4;
  letter-spacing:-.035em;
}
.brand-platform-position>p{
  margin:2px 0 0;
  color:#b4bec8;
  font-size:14px;
  line-height:1.76;
}
.brand-collaboration{
  margin-top:20px;
  padding:38px 40px;
  display:grid;
  grid-template-columns:.55fr 1.35fr 50px;
  align-items:start;
  gap:44px;
  border:1px solid #d8ddd8;
  background:#fff;
}
.brand-collaboration>span{padding-top:8px;color:var(--brand-mint)}
.brand-collaboration h3{
  margin:0;
  font-size:clamp(23px,2.6vw,34px);
  line-height:1.4;
  letter-spacing:-.035em;
}
.brand-collaboration p{
  max-width:720px;
  margin:20px 0 0;
  color:#666a65;
  font-size:14px;
  line-height:1.78;
}
.brand-collaboration-link{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid #cbd1cc;
  border-radius:50%;
  color:var(--brand-mint);
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.brand-collaboration-link .ui-icon{width:20px;height:20px}
.brand-collaboration-link:hover,
.brand-collaboration-link:focus-visible{
  outline:0;
  border-color:var(--brand-navy);
  background:var(--brand-navy);
  color:#fff;
  transform:translateX(3px);
}

.daily-moments{
  padding:140px max(24px,calc((100% - 1200px)/2));
  background:var(--brand-paper);
}
.daily-moments-grid{
  margin-top:72px;
  display:grid;
  grid-template-columns:1.06fr .94fr;
  grid-template-rows:400px 350px;
  gap:24px;
}
.daily-moment{
  margin:0;
  overflow:hidden;
  position:relative;
  background:#ddd;
}
.daily-moment:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(7,8,8,.68));
}
.daily-moment img{width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(.98);transition:transform .7s ease}
.daily-moment:hover img{transform:scale(1.025)}
.daily-moment figcaption{
  position:absolute;
  z-index:1;
  right:30px;
  bottom:28px;
  left:30px;
  color:#fff;
}
.daily-moment figcaption b,.daily-moment figcaption span{display:block}
.daily-moment figcaption b{font-size:23px}
.daily-moment figcaption span{margin-top:8px;color:#e0e1dc;font-size:14px}
.daily-moment-commute{grid-row:1/3}
.daily-moment-commute img{object-position:center 48%}
.daily-moment-running img{object-position:center 43%}
.daily-moment-copy{
  padding:42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--brand-navy);
  color:#fff;
}
.daily-moment-copy>span{
  color:var(--brand-mint-on-dark);
  font-size:10px;
  font-weight:850;
  letter-spacing:.16em;
}
.daily-moment-copy blockquote{
  margin:28px 0 24px;
  font-size:clamp(20px,2.2vw,29px);
  font-weight:720;
  line-height:1.55;
  letter-spacing:-.035em;
}
.daily-moment-copy p{margin:0;color:#aeb8c3;font-size:14px;line-height:1.72}

.brand-journey{
  padding:150px max(24px,calc((100% - 1200px)/2));
  overflow:hidden;
  background:var(--brand-navy);
  color:#fff;
}
.brand-section-heading-light>p{color:var(--brand-mint-on-dark)}
.journey-flow{
  margin:88px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.journey-flow li{
  min-width:0;
  min-height:310px;
  padding:28px 30px;
  position:relative;
  border-top:1px solid #435062;
  border-right:1px solid #344255;
}
.journey-flow li:last-child{border-right:0}
.journey-flow li:before{
  content:"";
  width:9px;
  height:9px;
  border:5px solid var(--brand-navy);
  border-radius:50%;
  position:absolute;
  top:-10px;
  left:28px;
  background:var(--brand-mint-on-dark);
  box-shadow:0 0 0 1px #506075;
}
.journey-flow li>span{
  position:absolute;
  right:24px;
  top:21px;
  color:#627086;
  font-size:12px;
  font-weight:800;
}
.journey-flow li>i{
  width:52px;
  height:52px;
  margin-top:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#1a2a40;
  color:var(--brand-mint-on-dark);
  font-style:normal;
}
.journey-flow li>i .ui-icon{width:23px;height:23px}
.journey-flow h3{margin:31px 0 13px;font-size:25px}
.journey-flow p{max-width:200px;margin:0;color:#aab4c0;font-size:14px;line-height:1.7}
.journey-statement{
  margin:66px 0 0;
  text-align:center;
  color:#fff;
  font-size:clamp(25px,4vw,46px);
  font-weight:820;
  letter-spacing:-.04em;
}
.journey-statement b{margin:0 18px;color:var(--brand-mint-on-dark);font-weight:500}

.brand-symbol-section{
  padding:150px max(24px,calc((100% - 1120px)/2));
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  align-items:center;
  gap:90px;
}
.symbol-intro>p{
  max-width:450px;
  margin:34px 0 0;
  color:#62645f;
  font-size:17px;
  line-height:1.8;
}
.symbol-board{
  min-height:600px;
  padding:48px;
  position:relative;
  border-radius:50%;
  background:var(--brand-paper);
}
.symbol-board:before,
.symbol-board:after{
  content:"";
  border:1px solid #dedfda;
  border-radius:50%;
  position:absolute;
  inset:8%;
}
.symbol-board:after{inset:24%}
.symbol-center{
  width:170px;
  height:170px;
  border-radius:50%;
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:grid;
  align-content:center;
  justify-items:center;
  gap:14px;
  background:#fff;
  box-shadow:0 20px 50px rgba(17,17,17,.1);
}
.symbol-center .brand-mark{
  width:74px;
  height:74px;
  border-radius:20px;
}
.symbol-center .brand-mark:before{width:35px;height:35px;border-width:4px}
.symbol-center .brand-mark:after{width:11px;height:11px;border-width:4px}
.symbol-center .brand-mark span{width:51px;height:21px;border-width:4px}
.symbol-center>strong{font-size:18px;letter-spacing:.12em}
.symbol-point{
  width:235px;
  padding:20px;
  position:absolute;
  z-index:3;
  display:grid;
  grid-template-columns:34px 44px 1fr;
  gap:10px;
  align-items:start;
  border:1px solid #e2e3de;
  background:#fff;
  box-shadow:0 12px 32px rgba(17,17,17,.06);
}
.symbol-point>span{color:#989a94;font-size:10px;font-weight:800}
.symbol-point>b,
.symbol-point>i{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  margin-top:-7px;
  color:var(--brand-mint);
  font-size:30px;
  font-style:normal;
}
.symbol-point>i .ui-icon{width:30px;height:30px}
.symbol-point h3{margin:0 0 6px;font-size:15px}
.symbol-point p{margin:0;color:#787a75;font-size:11px;line-height:1.55}
.symbol-point-d{top:6%;left:-3%}
.symbol-point-pin{top:41%;right:-4%}
.symbol-point-path{bottom:4%;left:1%}
.path-glyph{position:relative}
.path-glyph:before{
  content:"";
  width:38px;
  height:18px;
  border:4px solid var(--brand-mint);
  border-top:0;
  border-left-color:transparent;
  border-radius:0 0 26px 26px;
  transform:rotate(-12deg);
}

.brand-colors{
  padding:140px max(24px,calc((100% - 1120px)/2));
  background:var(--brand-paper);
}
.color-cards{
  margin-top:72px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.color-card{
  min-height:440px;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.color-card>span{font-size:12px;font-weight:750;letter-spacing:.08em}
.color-card b{font-size:10px;letter-spacing:.16em}
.color-card h3{margin:12px 0;font-size:32px}
.color-card p{max-width:360px;margin:0;font-size:15px;line-height:1.7}
.color-card-mint{background:var(--brand-mint);color:#fff}
.color-card-mint p{color:#fff}
.color-card-navy{background:var(--brand-navy);color:#fff}
.color-card-navy p{color:#b8c1ca}

.brand-standard{
  padding:150px max(24px,calc((100% - 1120px)/2));
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
}
.brand-standard>div>p{color:#777a74}
.brand-standard h2{margin:0;font-size:clamp(38px,4vw,56px);line-height:1.2;letter-spacing:-.05em}
.brand-standard ul{margin:0;padding:0;list-style:none}
.brand-standard li{
  padding:30px 0;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:20px;
  border-top:1px solid #dfe0dc;
}
.brand-standard li:last-child{border-bottom:1px solid #dfe0dc}
.brand-standard li>span{color:var(--brand-mint);font-size:12px;font-weight:850}
.brand-standard li b{font-size:20px}
.brand-standard li p{margin:10px 0 0;color:#696b66;font-size:14px;line-height:1.7}

.brand-final-cta{
  padding:140px 24px;
  text-align:center;
  background:#f3f9f9;
}
.brand-final-cta>p{color:#106165}
.brand-final-cta h2{
  margin:0;
  font-size:clamp(38px,5vw,66px);
  line-height:1.2;
  letter-spacing:-.055em;
}
.brand-final-cta>div{margin-top:46px;display:flex;justify-content:center;gap:10px}
.brand-final-cta .button{min-width:170px}
.brand-final-cta .outline{background:transparent;border-color:#8ac0c3}

@media(max-width:1000px){
  .brand-hero{
    min-height:auto;
    grid-template-columns:1fr 1.1fr;
    gap:42px;
  }
  .brand-hero h1{font-size:76px}
  .brand-hero-photo{height:560px}
  .brand-role-intro{gap:54px}
  .brand-platform-position{grid-template-columns:.58fr 1.2fr 1fr;gap:28px}
  .brand-collaboration{grid-template-columns:.44fr 1.4fr 48px;gap:28px}
  .brand-symbol-section{grid-template-columns:1fr;gap:60px}
  .symbol-intro>p{max-width:700px}
  .symbol-board{width:min(620px,100%);margin:auto}
  .brand-standard{gap:60px}
}

@media(max-width:760px){
  .brand-story-page .header-actions .text-link{display:none}
  .brand-hero{
    width:100%;
    padding:48px 20px 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:54px;
  }
  .brand-hero-copy{padding:0}
  .brand-hero h1{font-size:clamp(62px,20vw,88px)}
  .brand-hero-lead br{display:none}
  .brand-scroll-link{margin-top:34px}
  .brand-hero-photo{height:470px;margin:0 -20px}
  .brand-manifesto,
  .brand-meaning,
  .brand-role,
  .daily-moments,
  .brand-journey,
  .brand-symbol-section,
  .brand-colors,
  .brand-standard{padding:96px 20px}
  .brand-manifesto h2,
  .brand-section-heading h2{font-size:clamp(38px,12vw,52px)}
  .brand-manifesto-body{margin-top:50px;grid-template-columns:1fr;gap:30px}
  .meaning-copy{margin-top:40px;font-size:17px}
  .brand-role-intro{grid-template-columns:1fr;gap:34px}
  .brand-role-intro>p{font-size:16px}
  .brand-role-problems{margin-top:52px;grid-template-columns:1fr}
  .brand-role-card{min-height:380px;padding:30px 26px}
  .brand-role-label{margin-top:52px}
  .brand-platform-position{
    padding:34px 26px;
    grid-template-columns:1fr;
    gap:25px;
  }
  .brand-platform-position h3 br{display:none}
  .brand-collaboration{
    padding:34px 26px;
    grid-template-columns:1fr;
    gap:24px;
  }
  .brand-collaboration>span{padding-top:0}
  .brand-collaboration-link{
    width:auto;
    height:48px;
    justify-self:stretch;
    border-radius:999px;
  }
  .brand-collaboration-link:before{
    content:"협업 제안 보내기";
    margin-right:10px;
    font-size:13px;
    font-weight:800;
  }
  .daily-moments-grid{margin-top:50px;grid-template-columns:1fr;grid-template-rows:none}
  .daily-moment{height:430px}
  .daily-moment-commute{grid-row:auto}
  .daily-moment-running{height:300px}
  .daily-moment-copy{min-height:330px;padding:30px 26px}
  .journey-flow{margin-top:56px;grid-template-columns:1fr}
  .journey-flow li{min-height:235px;padding-left:24px;border-right:0;border-top:0;border-left:1px solid #435062}
  .journey-flow li:before{top:28px;left:-10px}
  .journey-flow li>span{top:27px}
  .journey-flow li>i{margin-top:0}
  .journey-flow h3{margin-top:24px}
  .journey-statement{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:24px}
  .journey-statement b{margin:0 4px}
  .symbol-board{min-height:650px;padding:0;border-radius:30px}
  .symbol-board:before,.symbol-board:after{display:none}
  .symbol-center{top:42%;width:150px;height:150px}
  .symbol-point{width:210px;padding:17px;grid-template-columns:24px 38px 1fr}
  .symbol-point-d{top:4%;left:4%}
  .symbol-point-pin{top:auto;right:3%;bottom:5%}
  .symbol-point-path{bottom:27%;left:2%}
  .color-cards{margin-top:52px;grid-template-columns:1fr}
  .color-card{min-height:360px;padding:28px}
  .brand-standard{grid-template-columns:1fr;gap:50px}
  .brand-final-cta{padding:96px 20px}
  .brand-final-cta h2 br{display:none}
  .brand-final-cta>div{align-items:stretch;flex-direction:column}
  .brand-photo-credit{grid-column:1/-1}
}

@media(max-width:420px){
  .brand-story-page .site-header .button.primary{display:none}
  .brand-story-page .header-actions{display:none}
  .brand-hero h1{font-size:61px}
  .brand-hero-photo{height:410px}
  .brand-manifesto h2 br,
  .brand-section-heading h2 br,
  .brand-standard h2 br{display:none}
  .daily-moment{height:390px}
  .symbol-board{min-height:700px}
  .symbol-point{width:190px}
  .symbol-point-pin{right:1%}
}

@media(prefers-reduced-motion:reduce){
  .brand-story-page *{scroll-behavior:auto!important}
  .daily-moment img,
  .brand-collaboration-link{transition:none}
}