@charset "utf-8";

/* ==========================================================================
   인트로(브랜드 선택) 페이지
   ========================================================================== */

.intro-page {margin:0; padding:0; overflow:hidden;}

.intro {position:relative; display:flex; width:100%; height:100vh; min-height:48rem; overflow:hidden;}

.intro-side {position:relative; flex:1 1 50%; width:50%; height:100%; display:block; text-decoration:none; outline:none;}
.intro-side--original {background:var(--primary02);}
.intro-side--renewal  {background:var(--primary01);}

.intro-content {position:absolute; inset:0; opacity:0; transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);}
.intro-content--in-left  {transform:translateX(-8rem);}
.intro-content--in-right {transform:translateX(8rem);}

.is-play .intro-content {opacity:1; transform:translateX(0);}
.is-play .intro-content--in-right {transition-delay:.1s;}

.intro-logo {position:absolute; left:50%; transform:translateX(-50%);}
.intro-logo--stack {top:31.25%; width:18.75%; display:flex; flex-direction:column; align-items:center; gap:.625vw;} /* 300,180 /960, gap 약 12px @1920 */

.intro-logo-line {display:block; width:100%; height:auto;}
.intro-logo-line--top    {aspect-ratio:180/70.869;}
.intro-logo-line--bottom {aspect-ratio:178.743/70.9771;}

.intro-logo--single {top:35.8333%; width:36.4583%; height:auto; aspect-ratio:350/66;} /* 344,350 /960 */

.intro-textbox {position:absolute; top:65.4167%; box-sizing:border-box; border-top:1px solid var(--text100); text-align:center;} /* 628/960 */
.intro-textbox--left  {left:33.2292%; width:33.5417%; padding-top:5.3168%;} /* 319,322 /960, 30/322 */
.intro-textbox--right {left:32.7083%; width:34.5833%; padding-top:5.0361%;} /* 314,332 /960, 30/332 */

.intro-label {display:block; font-family:var(--font-family01); font-weight:700; font-size:2.6042vw; line-height:1.22; color:var(--text100); white-space:nowrap;} /* 50/1920 */

.intro-badge {position:relative; display:inline-flex; align-items:center; justify-content:center; width:33.1325%; margin-top:.3646vw;} /* 110/332(textbox--right 기준), gap 약 7px @1920 - RENEWAL 텍스트 바로 아래 흐름으로 배치 */
.intro-badge-bg {display:block; width:100%; height:auto; aspect-ratio:110/50;}
.intro-badge-text {position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); font-family:var(--font-family01); font-weight:800; font-style:italic; font-size:1.1458vw; color:var(--primary01); white-space:nowrap;} /* 22/1920 */

.intro-arrow {position:absolute; top:50%; width:4.1667%; aspect-ratio:40/73; opacity:0; transition:opacity .3s ease, transform .3s ease;} /* 40/960 */
.intro-arrow img {display:block; width:100%; height:100%;}

.intro-arrow--left  {left:15.625%;  transform:translateY(-50%) translateX(-.6vw);} /* 150/960 */
.intro-arrow--right {right:15.625%; transform:translateY(-50%) translateX(.6vw) scaleX(-1);}

.intro-side:hover .intro-arrow--left  {opacity:1; transform:translateY(-50%) translateX(0);}
.intro-side:hover .intro-arrow--right {opacity:1; transform:translateY(-50%) translateX(0) scaleX(-1);}

.intro-center {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:26.0417%; aspect-ratio:1/1; z-index:3; pointer-events:none; filter:drop-shadow(0 0 3rem rgba(0,0,0,.2));} /* 500/1920, .intro(1920x960) 기준 */

.intro-gimbap {width:100%; height:100%; border-radius:50%; overflow:hidden; animation:introGimbapSpin 14s linear infinite;}
.intro-gimbap img {display:block; width:100%; height:100%; object-fit:cover;}

  @keyframes introGimbapSpin {
    from {transform:rotate(0deg);}
    to   {transform:rotate(360deg);}
  }

  @media screen and (max-width:799px) {
    .intro {flex-direction:column; height:100vh; min-height:64rem;}
    .intro-side {width:100%; height:50%;}

    .intro-content {display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%;}

    .intro-logo,
    .intro-logo--stack,
    .intro-logo--single {position:static; left:auto; top:auto; transform:none; margin:0 auto;}
    .intro-logo--stack {width:15rem;}
    .intro-logo--single {width:24rem;}

    .intro-textbox {position:static; left:auto; top:auto; width:20rem; margin-top:2rem; padding-top:1.6rem;}
    .intro-label {font-size:2.6rem;}

    .intro-badge {width:8rem; margin-top:1rem;}
    .intro-badge-text {font-size:1.3rem;}

    .intro-arrow {width:2rem;}
    .intro-arrow--left  {left:1.6rem;}
    .intro-arrow--right {right:1.6rem;}

    .intro-center {width:15rem;}
  }

  @media screen and (max-width:599px) {
    .intro-logo--stack {width:12rem;}
    .intro-logo--single {width:20rem;}
    .intro-textbox {width:17rem;}
    .intro-label {font-size:2.2rem;}
    .intro-center {width:12rem;}
  }