.video_wrap{position: relative; width: 100%; max-height: 970px; overflow: hidden; background: url(/images/video_bg.jpg) no-repeat; background-size: cover; background-color: #0b1730✅ 로딩 중 바탕 */}
.video_wrap iframe{position: absolute; top: 0; left:0; width: 100%; height: 100%;}

#video01{position: relative; height: 0; padding-top:56.25%;}


/* =========================
   PC FULLPAGE SNAP FEEL
========================= */
@media (min-width: 1025px){
  .snap-target,
  .story-snap-target{
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }

  .main1,
  .main-story-page,
  #main4{
    scroll-margin-top: 0;
  }

  .video_wrap{
    max-height: none;
    height: 100vh;
  }

  #video01{
    height: 100vh;
    padding-top: 0;
  }

  #video01 iframe{
    width: 100vw;
    height: 56.25vw;
    min-width: 177.78vh;
    min-height: 100vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #main4.main4_regist{
    min-height: 100vh;
    height: 100vh;
  }

  #main4 .main4-sticky{
    min-height: 100vh;
    height: 100vh;
    aspect-ratio: auto;
  }

  #main4 .main4-sticky > form{
    min-height: 100vh;
    height: 100%;
  }
}

/* =========================
   MAIN STORY PAGE
========================= */
.main-story-page{
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.main-story-page-bg,
.main-story-page-dim{
  position: absolute;
  inset: 0;
}


.main-story-page-copy{
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 2;
  width: min(1400px, calc(100% - 80px));
  box-sizing: border-box;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 28px));
  transition: opacity .7s ease, transform .7s ease;
}

.main-story-page-1 .main-story-page-copy{
  top: 50%;
}

.main-story-page-2 .main-story-page-copy{
  top: 55%;
}

.main-story-page-3 .main-story-page-copy{
  top: 50%;
}

.main-story-page.is-visible .main-story-page-copy{
  opacity: 1;
  transform: translate(-50%, -50%);
}


.main-story-page-1 .main-story-page-bg{
  background: url('/images/main_image_section_bg_01.jpg') center center / cover no-repeat;
}

.main-story-page-2 .main-story-page-bg{
  background: url('/images/main_image_section_bg_02.jpg') center center / cover no-repeat;
}

.main-story-page-3 .main-story-page-bg{
  background: url('/images/main_feature_hangang.jpg') center center / cover no-repeat;
}


.main-story-page-1 .story-desc{
  margin-top: 10px;
}


.main-story-page-1 .story-water{
  margin-top: 18px;
}

.main-story-page-2 .story-desc2{
  margin: 0 0 30px;
}

.main-story-page-2 .story-kicker{
  margin: 0;
}

.main-story-page-2 .story-inline-desc{
  margin-top: 18px;
}

.main-story-page-copy--dark h2{
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-size: 50px;
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -0.04em;
  color: #195495;
}

.main-story-page-copy--dark h2 strong{
  font-weight: 700;
}

.main-story-page-copy--dark p{
  margin: 28px 0 0;
  font-family: "Pretendard", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: #111111;
}

.story-kicker{
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #fff;
}

.story-desc,
.story-inline-desc{
  font-family: "Pretendard", sans-serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #fff;
}

.story-desc2{
  font-size: 50px;
  color: #fff;
}
.story-water {
  font-family: "Pretendard", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #fff;
}

.hanja{
  display: inline-block;
}

.main-story-page-copy--calligraphy .story-kicker-image {
  display: block;
  margin-bottom: 22px;
}

.main-story-page-copy--calligraphy .story-kicker-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* 필요하면 캘리 이미지 크기 고정 */
.main-story-page-1 .story-kicker-image img {
  width: 650px;
  max-width: 100%;
}

.main-story-page-1 .story-desc {
  margin-top: 0;
}

.mo-br {
  display: none;
}

@media all and (max-width: 1024px) {
  .mo-br {
    display: block;
  }
}

/* =========================
   MAIN4 (Registration) - Responsive Rebuild
   목표:
   1) 기존 main4 구조(배경 + 박스 + 입력2개 + 우측 버튼 + 하단 동의문구) 유지
   2) 타이틀은 중앙
   3) 작은 글자 Pretendard, 큰 글자 Nanum Myeongjo Bold
   4) 라운드 전부 제거
========================= */

/* =========================
   MAIN4 PINNED REGISTER
========================= */

#main4.main4_regist{
  position: relative;
  width: 100%;
  min-width: 0 !important;
  height: auto;
  padding: 0 !important;
  background: #0d1f3a !important;
  overflow: visible;
}

#main4 .main4-sticky{
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 720;
  background: url('/images/register_bg.png') no-repeat center/cover;
  z-index: 8;
}

#main4 .main4-sticky > form{
  width: min(1200px, calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}



/* 폼 박스 */
#main4.main4_regist .regist{
  position: relative;
  left: auto !important;
  top: auto !important;
  opacity: 1 !important;

  width: 100%;
  padding: 12px 24px 14px;

  /* 라운드 제거 */
  border-radius: 0 !important;
}

/* 타이틀: 가운데 정렬 */
#main4.main4_regist .regist .tx{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  text-align: center !important;
  margin-bottom: clamp(18px, 2.2vw, 30px);
  letter-spacing: 0;
}

/* 작은 글자: Pretendard Regular */
#main4.main4_regist .regist .tx h4{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 20px);
  text-transform: uppercase;
  margin: 0 0 8px 0;
  color: #FFE180;
  opacity: .85;
}

/* 큰 글자: Nanum Myeongjo Bold */
#main4.main4_regist .regist .tx p{
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 37px);
  margin: 0;
  color: #fff;
}

/* ===== 입력 2개 + 우측 버튼 “기존 구조”를 반응형 그리드로 재현 =====
   기존: 라벨(150) / 입력(410) / 버튼(150x140) 느낌 :contentReference[oaicite:3]{index=3}
*/
#main4.main4_regist .reg-fields{
  display: grid;
  grid-template-columns: 150px minmax(360px, 480px) 150px; /* 라벨 / 입력 / 버튼 */
  column-gap: 20px;
  row-gap: 12px;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* dl을 “라벨+입력” 2열로 깔끔히 */
#main4.main4_regist .reg-fields dl{
  display: contents; /* dt/dd를 그리드 셀로 사용 */
  margin: 0;
}

/* 라벨 */
#main4.main4_regist .reg-fields dt{
  text-align: right;
  margin: 0;
}
#main4.main4_regist .reg-fields dt span{
  font-family: var(--font-body);
  font-weight: 400;

  font-size: 15px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);

  position: relative;
  display: inline-block;
}

/* 기존 * 표시 유지(구조만 동일하게) */
#main4.main4_regist .reg-fields dt span:before{
  content: "•";
  color: #E4BB35;
  display: inline-block;
  margin-right: 6px;
}

/* 입력 */
#main4.main4_regist .reg-fields dd{
  margin: 0;
}
#main4.main4_regist .reg-fields input[type="text"],
#main4.main4_regist .reg-fields input[type="tel"]{
  width: 100%;
  height: 62px;              /* ✔ 기존 유지 */
  padding: 0 18px;           /* ✔ 살짝 여유 */
  box-sizing: border-box;

  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;        /* ❗ 0 제거 → 카드화 핵심 */
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);

  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  color: #000;

  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
#main4.main4_regist .reg-fields input:focus{
  outline: none;
  border-color: rgba(201,188,169,0.8); /* 브랜드 골드 */
  box-shadow: 0 16px 32px rgba(0,0,0,0.16);
}


#main4.main4_regist .reg-fields input[type="text"],
#main4.main4_regist .reg-fields input[type="tel"]{
  box-shadow:
    0 6px 18px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,0.35) inset; /* 윗면 하이라이트 */
}
#main4.main4_regist .reg-fields input:focus{
  box-shadow:
    0 10px 26px rgba(0,0,0,0.14),
    0 1px 0 rgba(255,255,255,0.45) inset;
}

/* 우측 버튼: 세로로 큰 버튼(고급스러운 카드 톤) */
#main4.main4_regist .bt-regist{
  grid-column: 3;
  grid-row: 1 / span 2;                 /* 두 줄(이름/연락처)을 세로로 덮음 */
  width: 150px;
  height: 100%;
  min-height: calc(62px * 2 + 12px);    /* 입력2개 + gap */
  text-decoration: none;

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

  /* ✅ 고급감 포인트 */
  background: linear-gradient(135deg, #175394 0%, #1c6cae 100%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;                  /* ✅ 라운드 적용 */
  box-shadow: 0 18px 34px rgba(9,31,91,0.35);
  position: relative;
  overflow: hidden;

  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* ✅ 버튼 윗면 하이라이트(은은하게) */
#main4.main4_regist .bt-regist::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.18),
    rgba(255,255,255,0.00) 55%
  );
  pointer-events: none;
  opacity: 0.9;
}

/* ✅ 호버(PC) */
@media (hover:hover){
  #main4.main4_regist .bt-regist:hover{
    transform: translateY(-2px);
    box-shadow: 0 26px 52px rgba(9,31,91,0.45);
    filter: brightness(1.02);
  }
}

/* ✅ 클릭/탭(활성) */
#main4.main4_regist .bt-regist:active{
  transform: translateY(0px);
  box-shadow: 0 14px 30px rgba(9,31,91,0.35);
}

/* ✅ 텍스트 */
#main4.main4_regist .bt-regist span{
  position: relative;  /* ::before 위로 나오게 */
  z-index: 1;

  font-family: var(--font-body);
  font-weight: 500;    /* 400보다 살짝 단단하게 */
  font-size: 18px;     /* 20 → 18 추천(고급스럽게 덜 과함) */
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #fff;
}

/* 동의/안내: 폼 아래 자연스럽게 */
#main4.main4_regist .agree-box{
  margin-top: 18px;
  padding-top: 16px;
}

/* 동의줄: Pretendard */
#main4.main4_regist .agree-line{
  margin: 0 0 10px 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;  /* 기존 동의 문구 크기 유지 :contentReference[oaicite:6]{index=6} */
  color: #fff;
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* 체크박스는 기본형 사용(구조 안정) */
#main4.main4_regist .agree-line input[type="checkbox"]{
  width: 16px;
  height: 16px;
  display: inline-block !important;
}

#main4.main4_regist .agree-line .privacy{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  padding-bottom: 2px;
}

/* 안내 문구 */
#main4.main4_regist .agree-box ul{
  margin: 0;
  padding-left: 16px;
}
#main4.main4_regist .agree-box ul li{
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px; /* 기존 유지 :contentReference[oaicite:7]{index=7} */
  color: #fff;
  opacity: .7;
  letter-spacing: -0.02em;
  line-height: 1.55;
}

#main4.main4_regist .bt-regist .btn-register-text{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

#main4.main4_regist .bt-regist .btn-register-text > span{
  display: block;
}

/* =========================
   MAIN4 - 개인정보 동의 라인
========================= */

#main4 .agree-box{
  margin-top: 28px;
}

/* 체크라인 전체 */
#main4 .agree-line{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* 기존 체크박스 숨김 */
#main4 .agree-line input{
  position: absolute;
  opacity: 0;
}

/* 커스텀 체크박스 */
#main4 .agree-line .chk{
  width: 18px;
  height: 18px;
  border: 1px solid #fff;
  position: relative;
  flex-shrink: 0;
}

/* 체크 표시 */
#main4 .agree-line input:checked + .chk::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* 동의 문구(“~에 동의합니다.”) 글자 키우기 */
#main4 .agree-text{
  font-size: 18px;   /* 원하는 만큼 키우기 */
  color:#fff;
}

/* '개인정보 취급방침' 밑줄을 흰색으로 */
#main4 .agree-text a.privacy{
  color:#fff !important;
  text-decoration: underline !important;
  text-decoration-color:#fff !important;  /* ✅ 밑줄 흰색 */
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  border-bottom: 0 !important; /* 기존 border-bottom 방식 있으면 제거 */
}

/* 오버레이 배경 */
.pu_bg{
  display:none;
  position: fixed;
  left:0; top:0; right:0; bottom:0;
  background: rgba(0,0,0,.65);
  z-index: 9998;
}

/* 팝업 */
.pop-privacy{
  display:none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, calc(100% - 40px));
  max-height: min(80vh, 720px);
  background: #fff;
  z-index: 9999;
  border-radius: 0; /* 라운드 제거 */
  overflow: hidden;
}

/* 내부 스크롤 영역 */
.pop-privacy .pu_txt_area{
  padding: 30px;
  overflow: auto;
  max-height: calc(80vh - 60px);
}

/* 닫기 버튼 */
.pop-privacy .bt_close{
  position:absolute;
  right: 16px;
  top: 14px;
  color:#000;
  text-decoration:none;
  font-size: 18px;
}

/* 개인정보 취급방침 팝업 우선순위 정리 */
.pu_bg{
  z-index: 9998;
}

.pop-privacy{
  z-index: 9999;
}

.pop-privacy .bt_close{
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 10000;   /* ✅ 제일 위로 */
  cursor: pointer;
}

/* ===== 이용약관(개인정보 이용약관) 페이지 스타일 ===== */
.tbox{
  width: min(980px, calc(100% - 80px));
  margin: 0 auto;
  padding: 80px 0 90px;
  box-sizing: border-box;
  color: #111;
}

/* 제목 위 작은 브랜드 */
.term-brand{
  margin: 0 0 14px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .18em;
  opacity: .55;
  text-transform: uppercase;
}

/* 메인 제목 */
.tbox h1{
  margin: 0 0 22px;
  text-align: center;
  font-size: 44px;
  line-height: 1.1;
  font-weight: 800;
}

/* 서문 */
.tbox > p{
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.8;
}

/* 섹션 제목(dt) */
.tbox dl dt{
  margin: 26px 0 10px;
  font-size: 20px;
  font-weight: 800;
  color: #091F5B; /* 캡처처럼 포인트 톤(원하면 수정) */
}

/* 내용(dd) */
.tbox dl dd{
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
}

/* dd 안 p (예: [정보관리 책임자]) */
.tbox dl dd p{
  margin: 10px 0 10px;
  font-weight: 700;
}

/* 목록 */
.tbox dl dd ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.tbox dl dd ul li{
  margin: 6px 0;
}

/* pt10/pb10 클래스가 기존에 쓰이고 있으니 안전하게 유지 */
.pt10{ padding-top: 10px; }
.pb10{ padding-bottom: 10px; }

/* 이용약관 닫기 버튼 크게 */
.pop-privacy .bt_close{
  font-size: 28px;        /* ← X 크기 (24~32 추천) */
  font-weight: 400;
  width: 44px;            /* ← 클릭 영역 */
  height: 44px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
}

/* ================================
   Floating Register Badge
================================ */
.floating-register.badge-type{
  position: fixed;
  right: 36px;
  bottom: 36px;
  width: 128px;
  height: 128px;
  z-index: 9999;
  text-decoration: none;
  display: block;
}

.floating-register.badge-type .badge-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.38);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  backdrop-filter: blur(2px);
}

.floating-register.badge-type .badge-core{
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #114987 0%, #195495 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  box-shadow: 0 18px 34px rgba(17,73,135,0.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.floating-register.badge-type .badge-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.floating-register.badge-type .badge-icon img{
  display: block;
  width: 20px;
  height: auto;
}

.floating-register.badge-type .badge-title{
  display: block;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.02em;
  word-break: keep-all;
}



@media (hover:hover){
  .floating-register.badge-type:hover .badge-core{
    transform: scale(1.04);
    box-shadow: 0 22px 42px rgba(17,73,135,0.42);
    background: linear-gradient(135deg, #15549c 0%, #1e63b0 100%);
  }
}

.floating-register.badge-type:active .badge-core{
  transform: scale(0.98);
}



/* =========================
   RAPPORT MIA - POPUPS
========================= */
.rm-popups{
  position: fixed;
  left: 100px;      /* ✅ 요청: 왼쪽 여백 100px */
  top: 200px;       /* 필요시 조절 */
  z-index: 9999;
  display: flex;    /* ✅ PC에서 가로 나열 */
  gap: 25px;        
  pointer-events: none; /* 바깥은 클릭 막고, 팝업만 클릭되게 */
}

.rm-pop{
  width: 350px;
  max-width: 380px;
  font-size: 0;
  opacity: 0;
  transform: translateY(-12px);
  animation: rmFadeIn .8s ease both;
  pointer-events: auto;
  position: relative;
}

.rm-pop.is-active{ opacity: 1; }

@keyframes rmFadeIn{
  to { opacity: 1; transform: translateY(0); }
}

.rm-pop__inner{
  position: relative;
}

.rm-pop__img{
  width: 100%;
  display: block;
}

.rm-pop__link{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 18%; /* 버튼 영역 높이 (필요시 조절) */
}

/* 닫기 버튼 */
.rm-pop__close{
  position: absolute;
  top: -46px;
  right: 0;
  width: 46px;
  height: 46px;
  background: #fff;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.rm-pop__close span{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 2px;
  background: #000;
  transform-origin: center;
}

.rm-pop__close span:nth-child(1){
  transform: translate(-50%, -50%) rotate(45deg);
}
.rm-pop__close span:nth-child(2){
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* =========================
   SITE INTRO
========================= */
html.intro-lock,
body.intro-lock{
  overflow: hidden !important;
  height: 100dvh !important;
  overscroll-behavior: none !important;
  scrollbar-width: none; /* Firefox */
}

html.intro-lock::-webkit-scrollbar,
body.intro-lock::-webkit-scrollbar{
  display: none; /* Chrome/Safari */
}

body.intro-lock{
  position: fixed;
  inset: 0;
  width: 100%;
}

#siteIntro{
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: #f4f4f4;
  overflow: hidden;
}

.site-intro__scene{
  position: absolute;
  inset: 0;
}

/* -------------------------
   SCENE 1
------------------------- */
.site-intro__scene--one{
  display: flex;
  align-items: center;
  justify-content: center;
  animation: introSceneOneOut .22s ease 4.42s forwards;
}

.site-intro__group{
  position: relative;
  width: 340px;
  max-width: calc(100vw - 80px);
  height: 340px;
}

.site-intro__text{
  position: absolute;
  left: 50%;
  bottom: calc(50% + 126px);
  transform: translateX(-50%);
  width: 250px;
  text-align: center;
  z-index: 3;
  animation: introTextFadeOut .18s ease 2.18s forwards;
}

.site-intro__line{
  display: block;
  width: 100%;
  margin: 0 auto;
  color: #195495;
  font-family: "Pretendard", sans-serif;
  line-height: 1.2;
  letter-spacing: -0.03em;
  opacity: 0;
  transform: translateY(8px);
}

.site-intro__line--top{
  width: 250px;
  margin: 0 auto;
  font-size: 26px;
  white-space: nowrap;
  font-weight: 500;
  animation: introTextIn .7s ease .95s forwards;
}

.site-intro__line--sub{
  width: 242px;
  margin: 7px auto 0;
  font-size: 17px;
  font-weight: 400;
  white-space: nowrap;
  animation: introTextIn .7s ease 1.45s forwards;
}

.site-intro__mark-wrap{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230px;
  transform: translate(-50%, -50%);
  z-index: 2;
  isolation: isolate;
}

.site-intro__mark-wrap::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.78);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(70,130,200,0.10) 0%,
    rgba(70,130,200,0.05) 34%,
    rgba(70,130,200,0) 72%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation:
    introGlowIn 0.9s ease forwards 0.18s,
    introGlowExpand 1.35s ease-in forwards 2.25s;
}

.site-intro__mark{
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  position: relative;
  z-index: 1;
  transform: translateZ(0) scale(0.9);
  transform-origin: center center;
  animation:
    introLogoIn .9s ease 0s forwards,
    introLogoExpand 2.05s cubic-bezier(.19,.78,.22,1) 2.22s forwards,
    introLogoFadeOut .42s ease-out 4.24s forwards;
}

/* -------------------------
   SCENE 2
------------------------- */
.site-intro__scene--two{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  opacity: 0;
  animation: introSceneTwoIn .25s ease 4.52s forwards;
}

.site-intro__final-images{
  position: relative;
  width: min(980px, calc(100vw - 80px));
  aspect-ratio: 760 / 180;
}

.site-intro__final-img{
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 10px));
}

.site-intro__final-img--01{
  animation:
    introFinalSvgIn .45s ease 4.58s forwards,
    introFinalSvgOut .20s ease 5.32s forwards;
}

.site-intro__final-img--02{
  animation:
    introFinalSvgIn02 .45s ease 5.48s forwards;
}

#siteIntro{
  transition: opacity .22s ease, visibility .22s ease;
}

#siteIntro.is-hidden{
  opacity: 0;
  visibility: hidden;
}

.site-intro__final-img--02-mo{
  display: none;
}


/* =========================
   KEYFRAMES
========================= */
@keyframes introLogoIn{
  0%{
    opacity: 0;
    transform: translateZ(0) scale(0.88);
    filter: blur(10px);
  }
  58%{
    opacity: 1;
    transform: translateZ(0) scale(1.02);
    filter: blur(0);
  }
  100%{
    opacity: 1;
    transform: translateZ(0) scale(1);
    filter: blur(0);
  }
}

@keyframes introTextIn{
  from{
    opacity: 0;
    transform: translateY(8px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* 핵심: 로고만 중앙 기준으로 크게 확대 */
@keyframes introLogoExpand{
  0%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100%{
    opacity: 1;
    transform: translateY(-10px) scale(8.7);
  }
}

@keyframes introLogoFadeOut{
  0%{
    opacity: 1;
    filter: blur(0);
  }
  100%{
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes introSceneOneOut{
  from{
    opacity: 1;
    visibility: visible;
  }
  to{
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes introSceneTwoIn{
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

@keyframes introFinalIn{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* 텍스트가 로고 확장 전에 사라지게 추가 */
@keyframes introTextFadeOut{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }

}

@keyframes introGlowIn{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
  100%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

@keyframes introGlowExpand{
  0%{
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(0.92);
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.35);
  }
}

@keyframes introFinalSvgIn{
  from{
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px));
  }
  to{
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes introFinalSvgIn02{
  from{
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px)) scale(1.5);
  }
  to{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes introFinalSvgOut{
  from{
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to{
    opacity: 0;
    transform: translate(-50%, calc(-50% - 6px));
  }
}

html.intro-lock .main_menu,
body.intro-lock .main_menu,
html.intro-lock .header-phone,
body.intro-lock .header-phone,
html.intro-lock .menu,
body.intro-lock .menu,
html.intro-lock .quick,
body.intro-lock .quick{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.site-intro__skip{
  position: absolute;
  right: 30px;
  bottom: 30px;
  z-index: 20;
  font-family: "Pretendard", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(17,73,135,0.68);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(17,73,135,0.28);
  cursor: pointer;
  padding: 0 0 2px 0;
}

.site-intro__skip:hover{
  color: rgba(17,73,135,1);
}

.main-story-page-3 .main-story-page-dim{
  background: transparent;
}