/* RNSh4 palette sync · 2026-10-01 */
:root{--rnsh4-ink:#152033;--rnsh4-muted:#6b7788;--rnsh4-brand:#416a87;--rnsh4-brand-dark:#163f68;--rnsh4-mint:#25c9ba;--rnsh4-mint-deep:#0da99e;--rnsh4-blue:#258cf0;--rnsh4-line:#e7edf2;--rnsh4-soft:#f7fafb;}
/**
 * /rnsh/assets/css/104.css
 * 회사소개 > VISION
 */

.page-104 .vision104,
.page-104 .vision104 *{box-sizing:border-box}

.page-104 .vision104{
    --v-navy:#111b2d;
    --v-deep:#163f68;
    --v-blue:#416a87;
    --v-blue-mid:#6f8aa0;
    --v-blue-light:#b9cddd;
    --v-pale:#f4f9ff;
    --v-sand:#ffe6bd;
    --v-orange:#ffbc60;
    --v-line:#dbe7ef;
    --v-text:#416a87;
    background:#fff;
    color:var(--v-navy);
}

.page-104 .vision104 h2,
.page-104 .vision104 h3,
.page-104 .vision104 p{word-break:keep-all;overflow-wrap:normal;text-wrap:pretty}

.page-104 .vision104-eyebrow{
    margin:0 0 14px;
    color:var(--v-blue);
    font-size:12px;
    font-weight:800;
    line-height:1;
    letter-spacing:.14em;
}

/* Intro */
.page-104 .vision104-intro{
    padding:58px 0 86px;
    background:linear-gradient(180deg,#fff 0%,#f4f9ff 100%);
}

.page-104 .vision104-intro__grid{
    display:grid;
    grid-template-columns:minmax(0,.86fr) minmax(620px,1.14fr);
    gap:74px;
    align-items:center;
}

.page-104 .vision104-intro__copy{
    padding-left:8px;
}

.page-104 .vision104-intro__copy h2{
    max-width:560px;
    margin:0;
    color:var(--v-navy);
    font-size:clamp(42px,3.7vw,58px);
    font-weight:800;
    line-height:1.17;
    letter-spacing:-.045em;
}

.page-104 .vision104-lead{
    max-width:590px;
    margin:26px 0 0;
    color:var(--v-text);
    font-size:17px;
    font-weight:500;
    line-height:1.9;
    letter-spacing:-.015em;
}

.page-104 .vision104-intro__visual{
    min-width:0;
}

.page-104 .vision104-rings{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:420px;
    padding:34px 12px;
}

.page-104 .vision104-ring{
    position:relative;
    z-index:1;
    display:flex;
    flex:0 0 235px;
    width:235px;
    height:235px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:13px solid var(--v-blue);
    border-radius:50%;
    background:rgba(255,255,255,.94);
    box-shadow:0 22px 48px rgba(16,45,69,.07);
    text-align:center;
}

.page-104 .vision104-ring--people{
    margin-left:-25px;
    border-color:var(--v-orange);
    background:rgba(255,252,246,.97);
}

.page-104 .vision104-ring--growth{
    margin-left:-25px;
    border-color:var(--v-blue-mid);
    background:rgba(248,251,253,.97);
}

.page-104 .vision104-ring__icon{
    display:grid;
    width:48px;
    height:48px;
    margin-bottom:10px;
    place-items:center;
    border-radius:50%;
    background:#f1f6fa;
    color:var(--v-blue);
}

.page-104 .vision104-ring--people .vision104-ring__icon{
    background:#fff4e2;
    color:#d88b32;
}

.page-104 .vision104-ring--growth .vision104-ring__icon{
    background:#f4f9ff;
    color:#416a87;
}

.page-104 .vision104-ring__icon svg{
    width:27px;
    height:27px;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.page-104 .vision104-ring__en{
    display:block;
    margin-bottom:7px;
    color:#416a87;
    font-size:10px;
    font-weight:850;
    letter-spacing:.16em;
}

.page-104 .vision104-ring strong{
    color:var(--v-navy);
    font-size:21px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:-.03em;
}

.page-104 .vision104-plus{
    position:relative;
    z-index:3;
    display:grid;
    flex:0 0 34px;
    width:34px;
    height:34px;
    margin:0 -17px;
    place-items:center;
    border:4px solid #fff;
    border-radius:50%;
    background:var(--v-navy);
    color:#fff;
    font-size:18px;
    font-weight:800;
    box-shadow:0 8px 18px rgba(16,45,69,.12);
}

/* Statement */
.page-104 .vision104-statement{
    padding:72px 0 104px;
    background:#fff;
}

.page-104 .vision104-statement__panel{
    display:flex;
    min-height:170px;
    padding:38px 48px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:15px;
    border-radius:20px;
    background:var(--v-navy);
    color:#fff;
    text-align:center;
}

.page-104 .vision104-statement__en{
    margin:0;
    color:var(--v-orange);
    font-size:13px;
    font-weight:850;
    line-height:1.2;
    letter-spacing:.16em;
}

.page-104 .vision104-statement__ko{
    margin:0;
    color:#fff;
    font-size:clamp(24px,2.25vw,34px);
    font-weight:780;
    line-height:1.4;
    letter-spacing:-.035em;
}

@media(max-width:1180px){
    .page-104 .vision104-intro__grid{
        grid-template-columns:1fr;
        gap:36px;
    }
    .page-104 .vision104-intro__copy{
        max-width:760px;
        padding-left:0;
    }
    .page-104 .vision104-rings{
        min-height:360px;
        justify-content:flex-start;
    }
}

@media(max-width:820px){
    .page-104 .vision104-intro{padding:44px 0 64px}
    .page-104 .vision104-intro__copy h2{font-size:40px}
    .page-104 .vision104-lead{font-size:15px}

    .page-104 .vision104-rings{
        min-height:auto;
        padding:22px 0 0;
    }
    .page-104 .vision104-ring{
        flex-basis:190px;
        width:190px;
        height:190px;
        border-width:11px;
    }
    .page-104 .vision104-ring--people,
    .page-104 .vision104-ring--growth{margin-left:-20px}
    .page-104 .vision104-ring strong{font-size:18px}
    .page-104 .vision104-ring__icon{width:42px;height:42px}
    .page-104 .vision104-ring__icon svg{width:23px;height:23px}

}

@media(max-width:640px){
    .page-104 .vision104-intro{padding:34px 0 52px}
    .page-104 .vision104-intro__grid{gap:22px}
    .page-104 .vision104-intro__copy h2{
        font-size:32px;
        line-height:1.25;
    }
    .page-104 .vision104-lead{
        margin-top:20px;
        font-size:14px;
        line-height:1.78;
    }

    /* Mobile: SMART 위 / PEOPLE + GROWTH 아래의 삼각형 비전 배치 */
    .page-104 .vision104-rings{
        position:relative;
        display:grid;
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto auto;
        column-gap:8px;
        row-gap:0;
        width:100%;
        max-width:390px;
        margin:0 auto;
        padding:12px 0 0;
        justify-items:center;
        align-items:center;
    }
    .page-104 .vision104-ring{
        flex-basis:auto;
        width:clamp(146px,42vw,174px);
        height:clamp(146px,42vw,174px);
        border-width:9px;
        box-shadow:0 16px 34px rgba(16,45,69,.07);
    }
    .page-104 .vision104-ring--smart{
        grid-column:1 / 3;
        grid-row:1;
        justify-self:center;
        margin:0;
        z-index:2;
    }
    .page-104 .vision104-ring--people{
        grid-column:1;
        grid-row:2;
        justify-self:end;
        margin:-24px 0 0 0;
        z-index:1;
    }
    .page-104 .vision104-ring--growth{
        grid-column:2;
        grid-row:2;
        justify-self:start;
        margin:-24px 0 0 0;
        z-index:1;
    }
    .page-104 .vision104-ring__icon{
        width:38px;
        height:38px;
        margin-bottom:7px;
    }
    .page-104 .vision104-ring__icon svg{width:21px;height:21px}
    .page-104 .vision104-ring__en{
        margin-bottom:5px;
        font-size:8px;
    }
    .page-104 .vision104-ring strong{
        font-size:16px;
        line-height:1.32;
    }
    .page-104 .vision104-plus{
        position:absolute;
        top:52%;
        z-index:5;
        width:30px;
        height:30px;
        flex-basis:30px;
        margin:0;
        border-width:3px;
        font-size:16px;
        box-shadow:0 6px 14px rgba(16,45,69,.14);
        transform:translate(-50%,-50%);
    }
    /* SMART ↔ PEOPLE 연결점 */
    .page-104 .vision104-ring--smart + .vision104-plus{
        left:39%;
    }
    /* SMART ↔ GROWTH 연결점 */
    .page-104 .vision104-ring--people + .vision104-plus{
        left:61%;
    }

    .page-104 .vision104-statement{padding:52px 0 72px}
    .page-104 .vision104-statement__panel{
        min-height:150px;
        border-radius:16px;
        padding:30px 22px;
        gap:12px;
    }
    .page-104 .vision104-statement__en{font-size:11px}
    .page-104 .vision104-statement__ko{font-size:21px;line-height:1.5}
}

/* =========================================================
   PC VISION rings refinement
   - 3개 원의 묶음감 복원
   - 원은 살짝만 겹치고 +는 겹침 중심에 배치
   - 모바일(640px 이하) 삼각 배치는 기존 규칙 유지
   ========================================================= */
@media (min-width:821px){
    .page-104 .vision104-rings{
        gap:0;
    }

    .page-104 .vision104-ring{
        flex:0 0 235px;
        width:235px;
        height:235px;
    }

    .page-104 .vision104-ring--people,
    .page-104 .vision104-ring--growth{
        margin-left:-18px;
    }

    .page-104 .vision104-plus{
        flex:0 0 26px;
        width:26px;
        height:26px;
        margin:0 -13px;
        border-width:3px;
        font-size:14px;
        line-height:1;
        box-shadow:0 5px 12px rgba(16,45,69,.13);
        transform:translateX(-9px);
    }
}


/* =========================================================
   V23 — VISION COLOR SYNC
   메인/101/102/103과 동일한 웜 크림·로즈 계열로 통일한다.
   비전 3원 구조와 모바일 배치는 유지한다.
   ========================================================= */
.page-104 .vision104{
  --v-navy:#152033;
  --v-deep:#163f68;
  --v-blue:#416a87;
  --v-blue-mid:#0da99e;
  --v-blue-light:#e7edf2;
  --v-pale:#f7fafb;
  --v-sand:#f6e6cf;
  --v-orange:#c69026;
  --v-line:#edf6ff;
  --v-text:#6b7788;
  background:#ffffff;
  color:var(--v-navy);
}
.page-104 .vision104-eyebrow{color:#163f68}
.page-104 .vision104-intro{
  background:linear-gradient(180deg,#ffffff 0%,#fff8f6 100%);
}
.page-104 .vision104-intro__copy h2{color:#152033}
.page-104 .vision104-lead{color:#6b7788}

/* SMART / PEOPLE / GROWTH */
.page-104 .vision104-ring{
  border-color:#416a87;
  background:rgba(255,250,248,.96);
  box-shadow:0 22px 48px rgba(107,73,85,.08);
}
.page-104 .vision104-ring--people{
  border-color:#d0a052;
  background:rgba(255,250,241,.98);
}
.page-104 .vision104-ring--growth{
  border-color:#0da99e;
  background:rgba(242,248,244,.98);
}
.page-104 .vision104-ring__icon{
  background:#eefcf9;
  color:#416a87;
}
.page-104 .vision104-ring--people .vision104-ring__icon{
  background:#fbf2df;
  color:#b57c2f;
}
.page-104 .vision104-ring--growth .vision104-ring__icon{
  background:#eefcf9;
  color:#0da99e;
}
.page-104 .vision104-ring__en{color:#6f8aa0}
.page-104 .vision104-ring strong{color:#152033}
.page-104 .vision104-plus{
  background:#5f6f7f;
  box-shadow:0 8px 18px rgba(85,56,69,.13);
}

/* Vision statement */
.page-104 .vision104-statement{
  background:#ffffff;
}
.page-104 .vision104-statement__panel{
  background:linear-gradient(135deg,#5f6f7f 0%,#416a87 52%,#416a87 100%);
  box-shadow:0 18px 42px rgba(99,63,77,.13);
}
.page-104 .vision104-statement__en{color:#f3d8c7}
.page-104 .vision104-statement__ko{color:#fff}

/* 104 sub hero / local nav */
.page-104 .sub-hero{
  background:linear-gradient(120deg,#f7fafb 0%,#eefcf9 58%,#f6f7f3 100%);
  border-bottom:1px solid #e7edf2;
}
.page-104 .sub-breadcrumb{color:#6b7788}
.page-104 .sub-breadcrumb a:hover{color:#416a87}
.page-104 .sub-breadcrumb i{color:#b9cddd}
.page-104 .sub-breadcrumb strong{color:#416a87}
.page-104 .sub-hero__category{color:#163f68}
.page-104 .sub-hero h1{color:#152033}
.page-104 .sub-hero__desc{color:#6b7788}
.page-104 .local-nav{background:#f7fafb;border-bottom:1px solid #e7edf2}
.page-104 .local-nav a{color:#416a87;border-bottom-width:3px}
.page-104 .local-nav a:hover{color:#163f68}
.page-104 .local-nav a.is-active{color:#416a87;border-bottom-color:#416a87;font-weight:750}

/* Bottom consulting CTA / TOP */
.page-104 .footer-cta{
  position:relative;
  overflow:hidden;
  padding:76px 0;
  background:linear-gradient(118deg,#fff8f5 0%,#f7fafb 55%,#f6f4ef 100%);
  border-top:1px solid #edf6ff;
}
.page-104 .footer-cta .container{position:relative;z-index:1}
.page-104 .footer-cta p{color:#163f68;font-weight:800;letter-spacing:.13em}
.page-104 .footer-cta h2{color:#152033;font-weight:780;letter-spacing:-.05em}
.page-104 .footer-cta__actions a{
  min-height:58px;
  padding:0 30px;
  border-radius:12px;
  background:#416a87;
  color:#fff;
  border:1px solid #416a87;
  box-shadow:0 12px 28px rgba(142,70,91,.14);
  font-size:14px;
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.page-104 .footer-cta__actions a:hover,
.page-104 .footer-cta__actions a:focus-visible{
  background:#0da99e;
  border-color:#0da99e;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(142,70,91,.2);
}
.page-104 .top-button{
  background:#5f6f7f;
  border-color:rgba(255,255,255,.62);
  color:#fff;
  box-shadow:0 10px 28px rgba(72,48,59,.18);
}
.page-104 .top-button:hover,
.page-104 .top-button:focus-visible{background:#416a87;border-color:#416a87}

@media(max-width:640px){
  .page-104 .vision104-ring{box-shadow:0 16px 34px rgba(85,56,69,.08)}
  .page-104 .vision104-plus{box-shadow:0 6px 14px rgba(85,56,69,.14)}
}
@media(max-width:760px){
  .page-104 .footer-cta{padding:58px 0}
  .page-104 .footer-cta h2{font-size:clamp(28px,8vw,38px);line-height:1.35}
  .page-104 .footer-cta__actions a{width:100%;max-width:320px;justify-content:center;min-height:54px}
}