/* =========================================================
   VOTA ABOUT
   ========================================================= */

.about-page {
    --about-pink: #ff2b87;
    --about-pink-light: #fff1f7;
    --about-black: #080808;
    --about-dark: #111111;
    --about-gray: #777777;
    --about-border: #e9e9e9;
    --about-container: 1400px;

    overflow:hidden;
    background:#fff;
    color:#111;
}


/* =========================================================
   Common
   ========================================================= */

.about-container {
    width:calc(100% - 80px);
    max-width:var(--about-container);
    margin:0 auto;
}

.about-eyebrow {
    margin:0 0 24px;
    color:var(--about-pink);
    font-size:12px;
    line-height:1;
    font-weight:700;
    letter-spacing:3px;
}

.about-page h1,
.about-page h2,
.about-page p {
    word-break:keep-all;
}

.about-page img {
    max-width:100%;
}


/* =========================================================
   Button
   ========================================================= */

.about-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:22px;

    min-width:190px;
    height:58px;
    padding:0 26px;

    box-sizing:border-box;

    font-size:13px;
    font-weight:700;
    letter-spacing:.2px;

    text-decoration:none;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.about-button span {
    font-size:18px;
    line-height:1;
    transition:transform .3s ease;
}

.about-button:hover {
    transform:translateY(-3px);
}

.about-button:hover span {
    transform:translateX(5px);
}

.about-button-primary {
    background:var(--about-pink);
    color:#fff;
    border:1px solid var(--about-pink);
}

.about-button-primary:hover {
    background:#111;
    border-color:#111;
}

.about-button-outline {
    color:#111;
    border:1px solid rgba(0,0,0,.25);
    background:transparent;
}

.about-button-outline:hover {
    color:#fff;
    background:#111;
    border-color:#111;
}

.about-story-dark .about-button-outline,
.about-cta .about-button-outline {
    color:#fff;
    border-color:rgba(255,255,255,.4);
}

.about-story-dark .about-button-outline:hover,
.about-cta .about-button-outline:hover {
    color:#111;
    background:#fff;
    border-color:#fff;
}


/* =========================================================
   HERO
   ========================================================= */

.about-hero {
    position:relative;
    min-height:calc(100vh - 74px);
    overflow:hidden;
}

.about-hero-bg {
    position:absolute;
    inset:-5%;

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    transform:scale(1.05);

    transition:transform .1s linear;
}

.about-hero-overlay {
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.45) 38%,
            rgba(0,0,0,.05) 75%
        );
}

.about-hero-inner {
    position:relative;
    z-index:2;

    min-height:calc(100vh - 74px);

    display:flex;
    align-items:center;
}

.about-hero-copy {
    width:650px;
    padding:120px 0;
}

.about-hero .about-eyebrow {
    margin-bottom:28px;
}

.about-hero h1 {
    margin:0;

    font-size:clamp(48px, 5vw, 82px);
    line-height:1.08;
    font-weight:600;
    letter-spacing:-4px;
}

.about-hero h1 strong {
    color:var(--about-pink);
}

.about-hero-description {
    margin:38px 0 0;

    color:rgba(255,255,255,.72);

    font-size:16px;
    line-height:2;
}

.about-hero-buttons {
    display:flex;
    gap:12px;

    margin-top:45px;
}

.about-hero .about-button-outline {
    color:#fff;
    border-color:rgba(255,255,255,.35);
}

.about-scroll-indicator {
    position:absolute;
    bottom:45px;
    left:0;

    display:flex;
    align-items:center;
    gap:14px;

    color:rgba(255,255,255,.6);

    font-size:9px;
    letter-spacing:3px;
}

.about-scroll-indicator span {
    position:relative;

    display:block;

    width:42px;
    height:1px;

    background:rgba(255,255,255,.5);
}

.about-scroll-indicator span:after {
    content:"";

    position:absolute;
    left:0;
    top:0;

    width:14px;
    height:1px;

    background:var(--about-pink);

    animation:about-scroll-line 1.8s ease-in-out infinite;
}

@keyframes about-scroll-line {

    0% {
        transform:translateX(0);
        opacity:0;
    }

    30% {
        opacity:1;
    }

    70% {
        opacity:1;
    }

    100% {
        transform:translateX(28px);
        opacity:0;
    }

}


/* =========================================================
   INTRO
   ========================================================= */
.about-intro {
    position:relative;

    padding:160px 0 170px;

    background:#faf8fa;

    overflow:hidden;
}


.about-intro .about-container {
    width:calc(100% - 80px);
    max-width:1100px;

    margin:0 auto;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:0;
}
/* 실제 콘텐츠 영역 */

.about-intro-content {
    display:grid;

    grid-template-columns:minmax(0, 1fr) minmax(280px, 420px);

    gap:70px;

    align-items:end;

    max-width:1100px;
    margin:0 auto;
}

.about-intro-copy {
    width:100%;
    max-width:900px;

    margin:0;

    text-align:center;
}

.about-intro-copy .about-eyebrow {
    margin:0 0 28px;

    color:#ff2b87;

    font-size:11px;
    font-weight:600;

    letter-spacing:4px;
}


.about-intro-copy h2 {
    margin:0;

    font-size:clamp(54px, 6vw, 86px);
    line-height:1.08;

    font-weight:600;

    letter-spacing:-5px;
}


.about-intro-copy h2 strong {
    color:#ff2b87;
}


.about-intro-copy > p:last-child {
    max-width:680px;

    margin:35px auto 0;

    color:#777;

    font-size:15px;
    line-height:1.9;
}



.about-intro .about-container {
    max-width:1100px;
}

/* description */

.about-intro-copy > p {
    width:100%;
    max-width:680px;

    margin:35px auto 0;

    text-align:center;

    color:#777;
    font-size:15px;
    line-height:1.9;
}

.about-intro-copy > p:last-child {


    color:#777;
    font-size:16px;
    line-height:1.9;
}


.about-intro-keywords {
    width:100%;
    max-width:620px;

    margin:48px auto 0;

    display:flex;
    flex-direction:row;

    align-items:center;
    justify-content:center;

    gap:10px;
}

.about-intro-keywords a,
.about-intro-keywords span {
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:130px;
    height:52px;

    padding:0 22px;

    border:1px solid #dedede;

    background:rgba(255,255,255,.5);

    color:#222;

    font-size:10px;
    font-weight:600;

    letter-spacing:2px;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.about-intro-keywords span {
    flex:1;

    display:flex;
    align-items:center;
    justify-content:center;

    height:52px;

    border:1px solid #dedede;

    background:rgba(255,255,255,.65);

    color:#222;

    font-size:10px;
    font-weight:600;

    letter-spacing:2px;

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.about-intro-keywords span:hover {
    color:#fff;

    background:#ff2b87;

    border-color:#ff2b87;

    transform:translateY(-4px);
}


.about-intro-keywords a:hover,
.about-intro-keywords span:hover {
    border-color:#ff2b87;

    background:#ff2b87;

    color:#fff;

    transform:translateY(-4px);
}


/* =========================================================
   STORY
   ========================================================= */

.about-story {
    position:relative;

    min-height:900px;

    padding:150px 0;

    box-sizing:border-box;
}

.about-story-light {
    background:#fff;
    color:#111;
}

.about-story-dark {
    background:var(--about-black);
    color:#fff;
}

.about-story-inner {
    min-height:600px;

    display:grid;
    grid-template-columns:80px minmax(320px, .9fr) minmax(500px, 1.1fr);
    gap:20px;

    align-items:center;
}

.about-story-dark .about-story-inner {
    grid-template-columns:minmax(500px,1.1fr) 80px minmax(320px,.9fr);
}


/* =========================================================
   Story Number
   ========================================================= */

.about-story-number {
    align-self:start;

    padding-top:6px;

    color:#d5d5d5;

    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
}

.about-story-dark .about-story-number {
    color:#444;
}


/* =========================================================
   Story Copy
   ========================================================= */

.about-story-copy {
    max-width:570px;
}

.about-story-copy h2 {
    margin:0;

    font-size:clamp(42px,4.2vw,66px);
    line-height:1.12;
    font-weight:500;
    letter-spacing:-3.5px;
}

.about-story-copy h2 strong {
    color:var(--about-pink);
}

.about-story-copy > p:not(.about-eyebrow) {
    margin:30px 0 0;

    color:#777;

    font-size:15px;
    line-height:1.9;
}

.about-story-dark .about-story-copy > p:not(.about-eyebrow) {
    color:#aaa;
}

.about-highlight {
    display:block;

    margin-top:35px;

    color:#111;

    font-size:15px;
    line-height:1.7;
}

.about-story-dark .about-highlight {
    color:#fff;
}

.about-text-link {
    display:inline-flex;
    align-items:center;
    gap:18px;

    margin-top:42px;

    color:#111;

    font-size:12px;
    font-weight:700;
    text-decoration:none;
    letter-spacing:.3px;

    border-bottom:1px solid #111;
    padding-bottom:8px;

    transition:
        color .3s ease,
        border-color .3s ease,
        gap .3s ease;
}

.about-text-link span {
    font-size:17px;
}

.about-text-link:hover {
    color:var(--about-pink);
    border-color:var(--about-pink);
    gap:25px;
}

.about-story-dark .about-text-link {
    color:#fff;
    border-color:#fff;
}

.about-story-dark .about-text-link:hover {
    color:var(--about-pink);
    border-color:var(--about-pink);
}


/* =========================================================
   Story Image
   ========================================================= */

.about-story-image {
    position:relative;
}

.about-image-wrap {
    position:relative;

    overflow:hidden;

    width:100%;

    aspect-ratio:1.08 / 1;

    background:#eee;
}

.about-image-wrap:after {
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,43,135,.12),
            transparent 45%
        );

    opacity:0;

    transition:opacity .5s ease;
}

.about-image-wrap:hover:after {
    opacity:1;
}

.about-image-wrap img {
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1);
}

.about-image-wrap:hover img {
    transform:scale(1.06);
}

.about-image-label {
    position:absolute;
    left:28px;
    bottom:26px;

    z-index:2;

    color:#fff;

    font-size:10px;
    line-height:1.7;
    font-weight:700;
    letter-spacing:3px;

    text-shadow:0 2px 10px rgba(0,0,0,.3);
}


/* =========================================================
   Floating Cards
   ========================================================= */

.about-floating-card,
.about-growth-card {
    position:absolute;
    z-index:3;

    background:rgba(255,255,255,.95);

    box-shadow:
        0 20px 50px rgba(0,0,0,.18);

    backdrop-filter:blur(10px);

    animation:about-floating 4s ease-in-out infinite;
}

.about-floating-card {
    bottom:35px;

    min-width:170px;

    padding:22px 25px;
}

.about-floating-card span,
.about-growth-card span {
    display:block;

    margin-bottom:7px;

    color:var(--about-pink);

    font-size:9px;
    font-weight:700;
    letter-spacing:2px;
}

.about-floating-card strong {
    display:block;

    color:#111;

    font-size:20px;
    letter-spacing:-.5px;
}

@keyframes about-floating {

    0%,
    100% {
        transform:translateY(0);
    }

    50% {
        transform:translateY(-10px);
    }

}

.about-growth-card {
    right:28px;
    bottom:28px;

    min-width:155px;

    padding:20px 23px;
}

.about-growth-card strong {
    display:block;

    color:#111;

    font-size:28px;
    letter-spacing:-1px;
}

.about-growth-card small {
    display:block;

    margin-top:5px;

    color:#999;

    font-size:8px;
    letter-spacing:2px;
}


/* =========================================================
   MARQUEE
   ========================================================= */

.about-marquee {
    overflow:hidden;

    padding:35px 0;

    background:var(--about-pink);

    color:#fff;

    white-space:nowrap;
}

.about-marquee-track {
    display:flex;
    align-items:center;

    width:max-content;

    animation:
        about-marquee 24s linear infinite;
}

.about-marquee-track span {
    padding:0 30px;

    font-size:18px;
    font-weight:700;
    letter-spacing:4px;
}

.about-marquee-track i {
    font-style:normal;

    font-size:18px;
}

@keyframes about-marquee {

    from {
        transform:translateX(0);
    }

    to {
        transform:translateX(-50%);
    }

}

/* =========================================================
   ABOUT ARENA
   ========================================================= */

.about-arena {
    position:relative;
    overflow:hidden;

    padding:180px 0 190px;

    background:#090909;
    color:#fff;
}

.about-arena-bg {
    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(255,43,135,.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(255,43,135,.05),
            transparent 30%
        );
}


/* =========================================================
   Container
   ========================================================= */

.about-arena-inner {
    position:relative;
    z-index:1;

    max-width:1280px;
    margin:0 auto;
    padding:0 60px;

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, .85fr);

    grid-template-rows:auto auto;

    column-gap:100px;
    row-gap:80px;
}


/* =========================================================
   Heading
   ========================================================= */

.about-arena-heading {
    align-self:center;

    max-width:600px;

    margin:0;

    text-align:left;
}

.about-arena-heading h2 {
    margin:0;

    font-size:clamp(52px, 5.2vw, 82px);
    line-height:1.05;

    font-weight:500;

    letter-spacing:-5px;
}

.about-arena-heading h2 strong {
    color:#ff2b87;
}

.about-arena-heading > p:last-child {
    max-width:520px;

    margin:34px 0 0;

    color:#8d8d8d;

    font-size:15px;
    line-height:1.9;
}


/* =========================================================
   Image
   ========================================================= */

.about-arena-image {
    grid-column:2;
    grid-row:1;

    width:100%;
    max-width:620px;

    margin:0 0 0 auto;

    overflow:hidden;
}

.about-arena-image img {
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        opacity .6s ease;
}

.about-arena-image:hover img {
    transform:scale(1.02);
}


/* =========================================================
   Flow
   ========================================================= */

.about-arena-flow {
    grid-column:2;
    grid-row:2;

    width:100%;
    max-width:620px;

    margin:0 0 0 auto;

    display:flex;
    align-items:center;

    justify-content:space-between;
}

.about-flow-item {
    flex:0 0 auto;

    min-width:85px;

    text-align:center;
}

.about-flow-item span {
    display:block;

    margin-bottom:13px;

    color:#ff2b87;

    font-size:10px;
    font-weight:600;

    letter-spacing:2px;
}

.about-flow-item strong {
    display:block;

    color:#fff;

    font-size:14px;
    font-weight:500;

    letter-spacing:2px;
}

.about-flow-item small {
    display:block;

    margin-top:8px;

    color:#666;

    font-size:10px;
    line-height:1.5;
}

.about-flow-line {
    flex:1;

    height:1px;

    max-width:55px;

    margin:0 12px;

    background:#333;
}


/* =========================================================
   Description
   ========================================================= */

.about-arena-description {
    grid-column:1;
    grid-row:2;

    align-self:start;

    max-width:560px;

    margin:0;

    text-align:left;
}

.about-arena-description p {
    margin:8px 0;

    color:#777;

    font-size:14px;
    line-height:1.9;
}

.about-arena-description p:first-child {
    margin-bottom:20px;

    color:#fff;

    font-size:18px;
    line-height:1.6;

    letter-spacing:1px;
}

.about-arena-description strong {
    color:#ff2b87;
}

/* =========================================================
   CTA
   ========================================================= */

.about-cta {
    position:relative;

    min-height:780px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:#090909;
    color:#fff;
}

.about-cta-bg {
    position:absolute;
    inset:0;

    background-position:center;
    background-size:cover;

    transition:transform 1.5s ease;
}

.about-cta:hover .about-cta-bg {
    transform:scale(1.04);
}

.about-cta-overlay {
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.9),
            rgba(0,0,0,.5),
            rgba(0,0,0,.25)
        );
}

.about-cta-inner {
    position:relative;
    z-index:2;

    padding:140px 0;
}

.about-cta h2 {
    margin:0;

    font-size:clamp(52px,7vw,105px);
    line-height:.98;
    font-weight:600;
    letter-spacing:-6px;
}

.about-cta h2 strong {
    color:var(--about-pink);
}

.about-cta-inner > p:not(.about-eyebrow) {
    margin:35px 0 0;

    color:rgba(255,255,255,.7);

    font-size:15px;
    line-height:1.9;
}

.about-cta-buttons {
    display:flex;
    gap:12px;

    margin-top:45px;
}


/* =========================================================
   Reveal
   ========================================================= */

.reveal {
    opacity:0;

    transform:
        translateY(50px);

    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.2,.7,.2,1);
}

.reveal.is-visible {
    opacity:1;

    transform:
        translateY(0);
}

.about-story-image.reveal {
    transform:
        translateY(60px)
        scale(.97);
}

.about-story-image.reveal.is-visible {
    transform:
        translateY(0)
        scale(1);
}

.about-story-number.reveal {
    transition-delay:.05s;
}

.about-story-copy.reveal {
    transition-delay:.12s;
}

.about-story-image.reveal {
    transition-delay:.2s;
}

.about-arena-flow.reveal {
    transition-delay:.2s;
}

.about-arena-description.reveal {
    transition-delay:.35s;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:1100px) {

    .about-container {
        width:calc(100% - 50px);
    }

    .about-story-inner,
    .about-story-dark .about-story-inner {
        grid-template-columns:55px minmax(280px,.9fr) minmax(400px,1.1fr);
        gap:20px;
    }

    .about-story-dark .about-story-inner {
        grid-template-columns:minmax(400px,1.1fr) 55px minmax(280px,.9fr);
    }

    .about-story {
        min-height:800px;
        padding:110px 0;
    }

    .about-intro {
        padding:140px 0;
    }

}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width:800px) {

    .about-container {
        width:calc(100% - 40px);
    }


    /* Hero */

    .about-hero,
    .about-hero-inner {
        min-height:720px;
    }

    .about-hero-bg {
        background-position:60% center;
    }

    .about-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.82),
                rgba(0,0,0,.35)
            );
    }

    .about-hero-copy {
        width:100%;
        padding:100px 0;
    }

    .about-hero h1 {
        font-size:clamp(42px,9vw,65px);
        letter-spacing:-3px;
    }

    .about-hero-description {
        font-size:14px;
    }


    /* Intro */

    .about-intro {
        padding:110px 0;
    }

    .about-intro .about-container {
        display:block;
    }

    .about-intro-keywords {
        margin-top:55px;
    }


    /* Story */

    .about-story {
        min-height:auto;

        padding:100px 0;
    }

    .about-story-inner,
    .about-story-dark .about-story-inner {
        display:grid;

        grid-template-columns:1fr;
        gap:55px;
    }

    .about-story-dark .about-story-inner {
        display:flex;
        flex-direction:column;
    }

    .about-story-number {
        order:-1;

        align-self:auto;
    }

    .about-story-dark .about-story-number {
        order:-1;
    }

    .about-story-copy {
        max-width:none;
    }

    .about-story-copy h2 {
        font-size:clamp(38px,8vw,56px);
    }

    .about-story-image {
        width:100%;
    }

    .about-image-wrap {
        aspect-ratio:1 / 1;
    }


    /* Arena */

    .about-arena {
        padding:120px 0;
    }

    .about-arena-heading {
        margin-bottom:50px;
    }

    .about-arena-flow {
        flex-wrap:wrap;
        gap:35px 0;

        margin-top:65px;
    }

    .about-flow-item {
        flex:0 0 50%;
    }

    .about-flow-line {
        display:none;
    }


    /* CTA */

    .about-cta {
        min-height:650px;
    }

    .about-cta-inner {
        padding:100px 0;
    }

    .about-cta h2 {
        font-size:clamp(48px,11vw,75px);
        letter-spacing:-4px;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width:520px) {

    .about-container {
        width:calc(100% - 32px);
    }


    .about-eyebrow {
        margin-bottom:18px;

        font-size:10px;
        letter-spacing:2.5px;
    }


    /* Hero */

    .about-hero,
    .about-hero-inner {
        min-height:650px;
    }

    .about-hero-copy {
        padding:80px 0;
    }

    .about-hero h1 {
        font-size:40px;
        line-height:1.12;
        letter-spacing:-2.5px;
    }

    .about-hero-description {
        margin-top:28px;

        font-size:13px;
        line-height:1.8;
    }

    .about-hero-description br {
        display:none;
    }

    .about-hero-buttons {
        flex-direction:column;

        align-items:stretch;

        margin-top:35px;
    }

    .about-button {
        width:100%;
        height:54px;
    }

    .about-scroll-indicator {
        bottom:25px;
    }


    /* Intro */

    .about-intro {
        padding:90px 0;
    }

    .about-intro-copy h2 {
        font-size:40px;
        letter-spacing:-2.5px;
    }

    .about-intro-copy > p:last-child {
        font-size:14px;
    }

    .about-intro-keywords {
        gap:8px;
    }

    .about-intro-keywords span {
        min-width:calc(50% - 4px);
        height:48px;
    }


    /* Story */

    .about-story {
        padding:85px 0;
    }

    .about-story-inner,
    .about-story-dark .about-story-inner {
        gap:42px;
    }

    .about-story-copy h2 {
        font-size:37px;
        letter-spacing:-2.3px;
    }

    .about-story-copy > p:not(.about-eyebrow) {
        margin-top:24px;

        font-size:14px;
        line-height:1.85;
    }

    .about-highlight {
        margin-top:28px;

        font-size:14px;
    }

    .about-text-link {
        margin-top:32px;
    }

    .about-image-wrap {
        aspect-ratio:4 / 4.5;
    }

    .about-image-label {
        left:20px;
        bottom:20px;

        font-size:8px;
        letter-spacing:2px;
    }

    .about-floating-card {
        right:12px;
        bottom:18px;

        min-width:140px;

        padding:17px 18px;
    }

    .about-floating-card strong {
        font-size:17px;
    }

    .about-growth-card {
        right:15px;
        bottom:15px;

        min-width:130px;

        padding:16px 18px;
    }

    .about-growth-card strong {
        font-size:23px;
    }


    /* Marquee */

    .about-marquee {
        padding:25px 0;
    }

    .about-marquee-track span {
        padding:0 20px;

        font-size:13px;
        letter-spacing:2px;
    }


    /* Arena */

    .about-arena {
        padding:90px 0;
    }

    .about-arena-heading h2 {
        font-size:42px;
        letter-spacing:-2.5px;
    }

    .about-arena-heading > p:last-child {
        font-size:13px;
    }

    .about-arena-image {
        width:calc(100% + 32px);
        margin-left:-16px;
    }

    .about-arena-flow {
        margin-top:50px;
    }

    .about-flow-item {
        flex:0 0 50%;
    }

    .about-flow-item strong {
        font-size:12px;
    }

    .about-flow-item small {
        font-size:10px;
    }

    .about-arena-description {
        margin-top:60px;
    }

    .about-arena-description p {
        font-size:12px;
    }


    /* CTA */

    .about-cta {
        min-height:620px;
    }

    .about-cta-bg {
        background-position:60% center;
    }

    .about-cta-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.9),
                rgba(0,0,0,.45)
            );
    }

    .about-cta-inner {
        padding:90px 0;
    }

    .about-cta h2 {
        font-size:46px;
        letter-spacing:-3px;
    }

    .about-cta-inner > p:not(.about-eyebrow) {
        font-size:13px;
    }

    .about-cta-buttons {
        flex-direction:column;

        align-items:stretch;

        margin-top:35px;
    }

}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion:reduce) {

    .reveal {
        opacity:1;
        transform:none;
        transition:none;
    }

    .about-marquee-track {
        animation:none;
    }

    .about-floating-card,
    .about-growth-card {
        animation:none;
    }

    .about-button,
    .about-image-wrap img {
        transition:none;
    }

}


.about-intro {
    position:relative;
    padding:190px 0 180px;
    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(255,43,135,.06),
            transparent 35%
        ),
        #faf8fa;
}


@media (max-width:900px) {

    .about-arena {
        padding:130px 0 140px;
    }

    .about-arena-inner {
        display:flex;
        flex-direction:column;

        padding:0 30px;

        gap:60px;
    }

    .about-arena-heading {
        max-width:650px;
    }

    .about-arena-heading h2 {
        font-size:clamp(48px, 11vw, 70px);
    }

    .about-arena-image {
        width:100%;
        max-width:620px;

        margin:0 auto;
    }

    .about-arena-flow {
        width:100%;
        max-width:620px;

        margin:0 auto;
    }

    .about-arena-description {
        max-width:620px;

        margin:0 auto;
    }

}

@media (max-width: 600px) {

    .about-intro {
        padding:110px 0 120px;
    }

    .about-intro .about-container {
        width:calc(100% - 40px);
        max-width:none;
    }

    .about-intro-copy {
        width:100%;
    }

    .about-intro-copy h2 {
        font-size:48px;
        line-height:1.1;
        letter-spacing:-3px;
    }

    .about-intro-copy > p:last-child {
        width:100%;
        max-width:680px;
        margin:25px auto 0;

        text-align:center;

        font-size:14px;
        line-height:1.9;
    }


    /* =========================================
       Keywords
       ========================================= */

    .about-intro-keywords {
        width:100%;
        max-width:360px;

        margin:35px auto 0;

        display:flex;
        flex-wrap:wrap;

        justify-content:center;

        gap:8px;
    }


    .about-intro-keywords span {
        flex:0 0 calc(50% - 4px);

        width:auto;
        min-width:0;

        height:48px;

        padding:0;

        box-sizing:border-box;

        font-size:9px;
        letter-spacing:1.5px;
    }

}


.pc-only {
    display:block;
}

@media (max-width:600px) {
    .pc-only {
        display:none;
    }
}


/* =========================================================
   ABOUT INTERACTION
   ========================================================= */


/* ---------------------------------------------------------
   REVEAL
   --------------------------------------------------------- */

.about-page .reveal {
    opacity:0;
    transform:translateY(45px);
    transition:
        opacity .9s cubic-bezier(.22,.61,.36,1),
        transform .9s cubic-bezier(.22,.61,.36,1);
}

.about-page .reveal.is-visible {
    opacity:1;
    transform:translateY(0);
}


/* 순차 등장 */

.about-page .reveal:nth-child(1) {
    transition-delay:.05s;
}

.about-page .reveal:nth-child(2) {
    transition-delay:.15s;
}

.about-page .reveal:nth-child(3) {
    transition-delay:.25s;
}

.about-page .reveal:nth-child(4) {
    transition-delay:.35s;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.about-hero {
    position:relative;
    overflow:hidden;
}

.about-hero-media {
    position:absolute;
    inset:0;
    overflow:hidden;
}

.about-hero-image {
    width:100%;
    height:100%;

    object-fit:cover;

    transform:
        scale(1.02)
        translate3d(0,0,0);

    transform-origin:center center;

    will-change:transform;
}

.about-hero-overlay {
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.15) 0%,
            rgba(0,0,0,.08) 40%,
            rgba(0,0,0,.65) 100%
        );
}


/* ---------------------------------------------------------
   SCROLL INDICATOR
   --------------------------------------------------------- */

.about-scroll-indicator {
    position:absolute;

    left:40px;
    bottom:40px;

    display:flex;
    align-items:center;

    gap:14px;

    z-index:3;
}

.about-scroll-indicator span {
    width:36px;
    height:1px;

    background:#fff;

    position:relative;
    overflow:hidden;
}

.about-scroll-indicator span:after {
    content:"";

    position:absolute;

    left:-100%;
    top:0;

    width:100%;
    height:100%;

    background:#ff2d7d;

    animation:aboutScrollLine 2s ease-in-out infinite;
}

.about-scroll-indicator em {
    color:#fff;

    font-size:9px;
    font-style:normal;

    letter-spacing:3px;
}


@keyframes aboutScrollLine {

    0% {
        left:-100%;
    }

    50% {
        left:100%;
    }

    100% {
        left:100%;
    }

}


/* ---------------------------------------------------------
   INTRO KEYWORDS
   --------------------------------------------------------- */

.about-intro-keywords {
    position:relative;
}

.about-intro-keywords span {
    position:relative;

    cursor:pointer;

    transition:
        color .35s ease,
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;
}

.about-intro-keywords span:hover {
    color:#fff;

    background:#ff2d7d;

    border-color:#ff2d7d;

    transform:translateY(-5px);
}


/* hover된 keyword 외에는 살짝 죽이기 */

.about-intro-keywords:has(span:hover) span:not(:hover) {
    opacity:.35;
}


/* ---------------------------------------------------------
   STORY IMAGE
   --------------------------------------------------------- */

.about-story-image {
    perspective:1000px;
}

.about-image-wrap {
    position:relative;
    overflow:hidden;

    transform-style:preserve-3d;
}

.about-image-wrap img {
    width:100%;
    height:100%;

    display:block;

    transform:
        scale(1);

    transition:
        transform 1s cubic-bezier(.22,.61,.36,1);

    will-change:transform;
}


/* 이미지 hover */

.about-image-wrap:hover img {
    transform:scale(1.045);
}


/* 이미지 위에 은은한 빛 */

.about-image-wrap:after {
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 25%,
            rgba(255,255,255,.18) 50%,
            transparent 75%
        );

    transform:translateX(-120%);

    transition:transform .9s ease;

    pointer-events:none;
}

.about-image-wrap:hover:after {
    transform:translateX(120%);
}


/* ---------------------------------------------------------
   IMAGE LABEL
   --------------------------------------------------------- */

.about-image-label {
    transition:
        transform .5s ease,
        opacity .5s ease;
}

.about-image-wrap:hover .about-image-label {
    transform:translateY(-5px);
}


/* ---------------------------------------------------------
   CREATE FLOATING CARD
   --------------------------------------------------------- */

.about-floating-card {
    animation:
        aboutFloating 4s ease-in-out infinite;
}

@keyframes aboutFloating {

    0%,
    100% {
        transform:translateY(0);
    }

    50% {
        transform:translateY(-8px);
    }

}


/* ---------------------------------------------------------
   GROW CARD
   --------------------------------------------------------- */

.about-growth-card {
    animation:
        aboutGrowthFloating 4.5s ease-in-out infinite;
}

@keyframes aboutGrowthFloating {

    0%,
    100% {
        transform:translateY(0);
    }

    50% {
        transform:translateY(-10px);
    }

}


/* ---------------------------------------------------------
   GROW COUNTER
   --------------------------------------------------------- */

.growth-counter {
    display:inline-block;

    min-width:120px;

    font-variant-numeric:tabular-nums;

    transition:
        transform .3s ease;
}

.growth-counter.counting {
    transform:scale(1.05);
}


/* ---------------------------------------------------------
   VOTE SECTION
   --------------------------------------------------------- */

.about-story-dark .about-image-wrap:before {
    content:"♥";

    position:absolute;

    left:50%;
    top:50%;

    z-index:3;

    color:#ff2d7d;

    font-size:30px;

    opacity:0;
    transform:
        translate(-50%,-50%)
        scale(.5);

    transition:
        opacity .4s ease,
        transform .4s ease;

    pointer-events:none;
}

.about-story-dark .about-image-wrap:hover:before {
    opacity:.95;

    transform:
        translate(-50%,-50%)
        scale(1);
}


/* ---------------------------------------------------------
   MARQUEE
   --------------------------------------------------------- */

.about-marquee {
    overflow:hidden;
}

.about-marquee-track {
    display:flex;

    width:max-content;

    animation:
        aboutMarquee 28s linear infinite;

    will-change:transform;
}

.about-marquee:hover .about-marquee-track {
    animation-play-state:paused;
}


@keyframes aboutMarquee {

    from {
        transform:translateX(0);
    }

    to {
        transform:translateX(-50%);
    }

}


/* ---------------------------------------------------------
   TEXT LINK
   --------------------------------------------------------- */

.about-text-link span {
    display:inline-block;

    transition:
        transform .35s ease;
}

.about-text-link:hover span {
    transform:translateX(7px);
}


/* =========================================================
   STORY TITLE UNDERLINE
   ========================================================= */

.about-story-copy h2 strong {
    background-image:
        linear-gradient(
            90deg,
            #ff2d7d,
            #ff2d7d
        );

    background-repeat:no-repeat;
    background-position:left bottom;

    /* 처음에는 밑줄 없음 */
    background-size:0 3px;

    transition:
        background-size 2.2s cubic-bezier(.22,.61,.36,1);

    transition-delay:.65s;
}


/* reveal 완료 후 밑줄 */

.about-story-copy.reveal.is-visible h2 strong {
    background-size:100% 3px;

}

/* ---------------------------------------------------------
   REDUCE MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce) {

    .about-page *,
    .about-page *:before,
    .about-page *:after {
        animation:none !important;
        transition:none !important;
    }

    .about-page .reveal {
        opacity:1;
        transform:none;
    }

}


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-hero {
    position:relative;
    min-height:calc(100vh - 74px);
    overflow:hidden;
}


/* 배경 */

.about-hero-media {
    position:absolute;
    inset:0;

    overflow:hidden;
}

.about-hero-image {
    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.02);

    transform-origin:center center;

    will-change:transform;
}

.about-hero-overlay {
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.58) 0%,
            rgba(0,0,0,.25) 45%,
            rgba(0,0,0,.08) 100%
        );
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.about-hero-content {
    position:relative;
    z-index:2;

    width:calc(100% - 80px);
    max-width:1400px;

    min-height:calc(100vh - 74px);

    margin:0 auto;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:flex-start;

    padding:80px 0;
    
    box-sizing:border-box;
}


/* eyebrow */

.about-hero-content .about-eyebrow {
    margin:0 0 24px;

    color:#ff2d7d;

    font-size:11px;
    font-weight:600;

    letter-spacing:4px;
}


/* title */

.about-hero-content h1 {
    margin:0;

    color:#fff;

    font-size:clamp(52px, 6vw, 96px);
    font-weight:700;

    line-height:1.02;
    letter-spacing:-4px;
}

.about-hero-content h1 strong {
    color:#ff2d7d;
    font-weight:700;
}


/* description */

.about-hero-description {
    margin:32px 0 0;

    color:rgba(255,255,255,.75);

    font-size:15px;
    line-height:1.8;
}


/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.about-scroll-indicator {
    position:absolute;

    left:40px;
    bottom:40px;

    z-index:3;

    display:flex;
    align-items:center;

    gap:14px;
}

.about-scroll-indicator span {
    position:relative;

    width:36px;
    height:1px;

    background:#fff;

    overflow:hidden;
}

.about-scroll-indicator span:after {
    content:"";

    position:absolute;

    left:-100%;
    top:0;

    width:100%;
    height:100%;

    background:#ff2d7d;

    animation:aboutScrollLine 2s ease-in-out infinite;
}

.about-scroll-indicator em {
    color:#fff;

    font-size:9px;
    font-style:normal;

    letter-spacing:3px;
}


@keyframes aboutScrollLine {

    0% {
        left:-100%;
    }

    50% {
        left:100%;
    }

    100% {
        left:100%;
    }

}