/* 03. The experience that becomes closer in an app */
.agency-widget--experience,
.agency-widget--experience *,
.agency-widget--experience *::before,
.agency-widget--experience *::after {box-sizing: border-box;}

.agency-widget--experience {
    --agency-experience-ink: #191f28;
    --agency-experience-soft: #4e5968;
    --agency-experience-muted: #718096;
    --agency-experience-line: #dfe5eb;
    --agency-experience-blue: var(--rb-main-color, #2167ff);
    --agency-experience-width: var(--rb-main-width, 1200px);
    padding: 146px 0 138px;
    overflow: hidden;
    color: var(--agency-experience-ink);
    background: #f3f5f7;
    font-family: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.agency-widget--experience h2,
.agency-widget--experience h3,
.agency-widget--experience p {margin: 0;}
.agency-widget--experience .agency-shell {width: min(var(--agency-experience-width), calc(100% - 48px)); margin: 0 auto;}

.agency-widget--experience .agency-experience__heading {display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(270px, .66fr); align-items: end; gap: clamp(40px, 6vw, 100px);}
.agency-widget--experience .agency-section-index {margin: 0;}
.agency-widget--experience h2 {max-width: 765px; margin-top: 19px; color: var(--agency-experience-ink); font-size: clamp(38px, 4.15vw, 56px); font-weight: 800; letter-spacing: -.078em; line-height: 1.14; word-break: keep-all;}
.agency-widget--experience h2 em {color: var(--agency-experience-blue); font-style: normal;}
.agency-widget--experience .agency-experience__heading > p {max-width: 390px; margin-bottom: 4px; color: var(--agency-experience-soft); font-size: 16px; font-weight: 500; letter-spacing: -.035em; line-height: 1.75; word-break: keep-all;}

.agency-widget--experience .agency-experience__list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 68px 0 0; padding: 0; border-top: 1px solid var(--agency-experience-line); border-bottom: 1px solid var(--agency-experience-line); list-style: none;}
.agency-widget--experience .agency-experience__list li {position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 366px; padding: 28px 29px 24px; border-left: 1px solid var(--agency-experience-line);}
.agency-widget--experience .agency-experience__list li:first-child {border-left: 0;}
.agency-widget--experience .agency-experience__index {display: block; color: var(--agency-experience-blue); font-size: 9px; font-weight: 800; letter-spacing: .105em; line-height: 1;}
.agency-widget--experience .agency-experience__word {display: block; margin-top: 52px; color: #c6ccd3; font-size: clamp(43px, 4.35vw, 61px); font-weight: 800; letter-spacing: -.105em; line-height: .86; word-break: break-all;}
.agency-widget--experience .agency-experience__list li:nth-child(2) .agency-experience__word {color: var(--agency-experience-blue);}
.agency-widget--experience .agency-experience__list li > div {margin-top: auto;}
.agency-widget--experience .agency-experience__list h3 {color: var(--agency-experience-ink); font-size: 24px; font-weight: 800; letter-spacing: -.065em; line-height: 1.23; word-break: keep-all;}
.agency-widget--experience .agency-experience__list p {max-width: 290px; margin-top: 12px; color: var(--agency-experience-muted); font-size: 14px; font-weight: 500; letter-spacing: -.025em; line-height: 1.62; word-break: keep-all;}
.agency-widget--experience .agency-experience__list small {display: block; margin-top: 25px; padding-top: 13px; border-top: 1px solid var(--agency-experience-line); color: #7d8998; font-size: 8px; font-weight: 800; letter-spacing: .085em; line-height: 1.3;}

.agency-widget--experience .agency-experience__footnote {display: flex; align-items: flex-start; gap: 25px; margin-top: 23px; color: var(--agency-experience-ink);}
.agency-widget--experience .agency-experience__footnote span {flex: 0 0 auto; color: var(--agency-experience-blue); font-size: 9px; font-weight: 800; letter-spacing: .105em; line-height: 1.55;}
.agency-widget--experience .agency-experience__footnote strong {font-size: 15px; font-weight: 700; letter-spacing: -.04em; line-height: 1.55; word-break: keep-all;}

.agency-widget--experience.is-motion-ready [data-agency-experience-reveal] {opacity: 0; transform: translateY(21px); transition: opacity .65s ease var(--agency-experience-delay, 0ms), transform .65s cubic-bezier(.2,.75,.2,1) var(--agency-experience-delay, 0ms);}
.agency-widget--experience.is-motion-ready [data-agency-experience-reveal].is-inview {opacity: 1; transform: translateY(0);}

@media (max-width: 1024px) {
    .agency-widget--experience {padding: 107px 0 101px;}
    .agency-widget--experience .agency-experience__heading {grid-template-columns: 1fr; gap: 23px;}
    .agency-widget--experience .agency-experience__heading > p {max-width: 590px; margin-bottom: 0;}
    .agency-widget--experience .agency-experience__list {margin-top: 51px;}
    .agency-widget--experience .agency-experience__list li {min-height: 330px; padding: 25px 22px 21px;}
    .agency-widget--experience .agency-experience__word {margin-top: 43px;}
}

@media (max-width: 640px) {
    .agency-widget--experience {padding: 79px 0 74px;}
    .agency-widget--experience .agency-shell {width: min(100% - 40px, 520px);}
    .agency-widget--experience h2 {font-size: 38px;}
    .agency-widget--experience .agency-experience__heading > p {font-size: 15px;}
    .agency-widget--experience .agency-experience__list {grid-template-columns: 1fr; margin-top: 38px;}
    .agency-widget--experience .agency-experience__list li {display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; min-height: 0; padding: 23px 0 21px; border-top: 1px solid var(--agency-experience-line); border-left: 0;}
    .agency-widget--experience .agency-experience__list li:first-child {border-top: 0;}
    .agency-widget--experience .agency-experience__index {grid-column: 1; grid-row: 1;}
    .agency-widget--experience .agency-experience__word {grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 44px; text-align: right;}
    .agency-widget--experience .agency-experience__list li > div {grid-column: 1 / -1; grid-row: 2; margin-top: 29px;}
    .agency-widget--experience .agency-experience__list h3 {font-size: 21px;}
    .agency-widget--experience .agency-experience__list p {max-width: 350px; margin-top: 8px; font-size: 13px;}
    .agency-widget--experience .agency-experience__list small {grid-column: 1 / -1; grid-row: 3; margin-top: 19px; padding-top: 10px; font-size: 7px;}
    .agency-widget--experience .agency-experience__footnote {display: grid; gap: 8px; margin-top: 18px;}
    .agency-widget--experience .agency-experience__footnote strong {font-size: 14px;}
}

@media (prefers-reduced-motion: reduce) {
    .agency-widget--experience *,
    .agency-widget--experience *::before,
    .agency-widget--experience *::after {scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;}
}