/* default */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&family=Song+Myung&display=swap');

:root {
    /* point color */
    --point-color-1: #dc000c;
    /* fonts */
    --body-font: 'Noto Sans KR';
    --entype1: 'Song Myung';
    --entype2: 'Montserrat';
}
/* removed empty rule */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
body,th,td,input,select,textarea,button {line-height:1.7;font-family:var(--body-font), Arial, Helvetica, serif , sans-serif;color:#272727}
body {font-size:10px}
body,body * {box-sizing:border-box;}
/* Prevent any horizontal scroll on the page */
html, body { max-width: 100%; overflow-x: hidden; font-size: clamp(10px, 0.925vmin, 14.81px);}
/* 반응형 쿼리 부분 */
@media only screen and (min-device-width: 300px) {
    html {
        font-size: 9px;
    } /* 62.5% */
}

a {text-decoration: none; }

body {
	font-size:1.8rem;
	color: #181818;
	background:#fff;
	line-height:1.7;
	overflow-x: hidden; /* prevent horizontal scrollbar */
	overflow-y: auto;
	height:100%;
	-moz-osx-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-ms-overflow-style: none;
    word-break: keep-all;
}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 기본 레이아웃 */
.wrap {overflow-x: hidden;}


/* 상단 헤더 */
.header {transition: all .1s ease; position: fixed; top: 0; left: 0; z-index: 101; width: 100%; min-width:251px; background: #fff; height: 80px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);}
.header .header-inner {display: flex; justify-content: space-between; align-items: center; flex-flow: row wrap; height: 100%;}

.header .header-logo {margin: 0 4rem; display: flex; justify-content: center; align-items: center; gap: 1rem;}
.header .header-logo .logo {width: 100%;}
.header .header-logo .logo img {width: 100%; max-height: 5rem; display: block;}
.header .header-logo .logo span {font-size: 1.4rem; font-weight: 500;}
.header .header-gnb {display: inline-block; margin-right: 5rem;}
.header .header-gnb .gnb-depth-1 {display: flex; text-align: center;}
.header .header-gnb .depth-1 {position: relative;}
.header .header-gnb .depth-1 > .depth-1-link {display: flex; align-items: center; height: 80px; font-size: 2rem; padding: 0 4rem; font-weight: 600; color: #333;}
.header .header-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal;}
.header .header-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: -3px; bottom: -10px; background-color: #fff; width: 0; height: 2px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1;}
.header .header-gnb .depth-1.current > a > span::before {content: ""; display: block; width:calc(100% + 6px);}
/* 클릭된(활성) 메뉴의 텍스트 색상을 노란색으로 표시 */
.header .header-gnb .depth-1 > .depth-1-link.active,
.header .header-gnb .depth-1 > .depth-1-link.active > span { color: var(--point-color-1); }
.header .header-gnb .depth-1 .depth-item {background-color: #fff; position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); width: 20rem; height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: all 0.3s; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.08);}
.header .header-gnb .depth-1.current .depth-item {visibility: visible; opacity: 1; transition: all 0.5s;}
.header .header-gnb .depth-1 .depth-item .gnb-depth-2 {padding: 10px 0; visibility: hidden; opacity: 0; transition: all 0.3s;}
.header .header-gnb .depth-1 .depth-item .gnb-depth-2 .depth-2 {}
.header .header-gnb .depth-1.current .depth-item .gnb-depth-2 {visibility: visible; opacity: 1; transition: all 0.5s;}
.header .header-gnb .depth-2 > .depth-2-link {display: block; padding: 8px 0; font-size: 17px; color: #333; transition: color 0.1s;}
.header .header-gnb .depth-2 > .depth-2-link:hover,
.header .header-gnb .depth-2 > .depth-2-link:focus {color: #000; font-weight: 600;}

.header .mobile-gnb {display: none;}
html.not-scroll,
body.not-scroll {overflow: hidden; height: 100%;}
.header .mobile-gnb .sidebar-btn {position: relative; width: 8rem; height: 8rem; z-index: 1; border:0; background: none; cursor: pointer;}
.header .mobile-gnb .sidebar-btn span {display: block; position: absolute; left: 2rem; width: 3.4rem; height: 2px; background-color: #fff; border-radius:2px;}
.header .mobile-gnb .sidebar-btn span:nth-child(1) {top: 2.4rem;}
.header .mobile-gnb .sidebar-btn span:nth-child(2) {top: 3.7rem; transition: opacity 0s 0.15s; width: 2.4rem;}
.header .mobile-gnb .sidebar-btn span:nth-child(3) {top: 4.9rem;}
.header .mobile-gnb .sidebar-btn span:nth-child(1), .header .mobile-gnb .sidebar-btn span:nth-child(3) {transition: top 0.15s 0.15s, transform 0.15s, width 0.15s, left 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(2) {opacity: 0; transition: opacity 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1), .header .mobile-gnb.open .sidebar-btn span:nth-child(3) {top: 3.8rem; width: 3.4rem; transition: top 0.15s, transform 0.15s 0.15s, width 0.15s 0.15s, left 0.15s 0.15s;}
.header .mobile-gnb.open .sidebar-btn span:nth-child(1) {left: 1.8rem; transform: rotate(45deg);}
.header .mobile-gnb.open .sidebar-btn span:nth-child(3) {left: 1.8rem; transform: rotate(-45deg);}
.header .mobile-gnb .sidebar-wrap {position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background-color: rgba(0,0,0,0); visibility: hidden; opacity: 0; transition: background-color 0.3s ease, opacity 0.3s ease;}
.header .mobile-gnb.open .sidebar-wrap {visibility: visible; opacity: 1; background-color: rgba(0,0,0,0.55);}
.header .mobile-gnb .sidebar-wrap .sidebar {position: absolute; top: 0; right: 0; width: 100%; max-width: 40rem; padding-top: 9rem; height: calc(100vh - 0rem); background-color: #fff; transform: translateX(100%); transition: transform 0.5s ease; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.header .mobile-gnb.open .sidebar-wrap .sidebar {transform: translateX(0); background-color: rgba(255, 255, 255, 1); box-shadow: -4px 16px 21px rgba(0, 0, 0, 0.05);}
.header .mobile-gnb .gnb-depth-1 {height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.header .mobile-gnb .depth-1 > .depth-1-link {display: flex; align-items: center; position: relative; border-bottom: 1px solid #f7f7f7; padding: 0 3rem 0 5rem; height: 8rem; font-size: 2.2rem; font-weight: 400; cursor: pointer;}
.header .mobile-gnb .depth-1 > .depth-1-link:not(:only-child)::before {content: "▼"; display: block; position: absolute; top: 50%; right: 3.8rem; transform: translateY(-50%); font-size: 10px; color: #333;}
.header .mobile-gnb .depth-1.open > .depth-1-link:not(:only-child)::before {content: '▲';}
.header .mobile-gnb .depth-1 > .depth-1-link > span {position: relative; display: block; line-height: normal; color: #333;}
.header .mobile-gnb .depth-1 > .depth-1-link > span::before {content: ""; display: block; position: absolute; left: -2px; bottom: 0; width: 0; height: 9px; transition: all 0.5s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); z-index: -1; background-color: rgba(255,255,255,0.1);}
.header .mobile-gnb .depth-1.open > .depth-1-link > span::before {width:calc(100% + 4px);}
.header .mobile-gnb .gnb-depth-2 {max-height: 0; overflow: hidden; padding: 0; background-color: rgba(0,0,0,0.04); text-align: left; box-sizing: content-box; transition: all 0.35s ease-in-out;}
.header .mobile-gnb .depth-1.open .gnb-depth-2 {padding: 10px 0;}
.header .mobile-gnb .depth-2 > .depth-2-link {display: block; visibility: hidden; opacity: 0; padding: 7px 5rem; font-size: 1.8rem; font-weight: 500; color: #333; transition: all 0.35s;}
.header .mobile-gnb .depth-2 > .depth-2-link:hover {color: #000; font-weight: 600;}
.header .mobile-gnb .depth-2 > .depth-2-link.active {color: #000; font-weight: bold;} /* 현재 페이지 활성화 되어있음을 알리는 active 클래스 */
.header .mobile-gnb .depth-1.open .depth-2 > .depth-2-link {visibility: visible; opacity: 1;}

 /* 모바일 / 사이드바에서 클릭된 1차 메뉴 텍스트 색상 */
.header .mobile-gnb .depth-1 > .depth-1-link.active,
.header .mobile-gnb .depth-1 > .depth-1-link.active > span { color: #000; }

@media (max-width:1676px) {
  .header {position: fixed; width: 100%; overflow: visible; background: #fff; border-bottom: 0;}      
  .header .header-gnb {display: none;}
  .header .mobile-gnb {display: flex; justify-content: center; align-items: center;}    
  .header .mobile-gnb .sidebar-btn span {background-color: #000;}
  
}

@media (max-width:500px) {
  html.not-scroll 
  .header .mobile-gnb .sidebar-wrap .sidebar {max-width: 100%;}
  .header .mobile-gnb .depth-1 > .depth-1-link {padding: 0 3rem 0 3rem;}
  .header .header-logo {margin: 0 2rem;}
  .header .header-logo .logo {flex-direction: column; align-items: flex-end; gap: 0.1rem;}
}
/* 상단 헤더 End */
	
/* --- 비디오 풀가로(좌우) 보이도록 조정 (기존 규칙 대체) --- */
/*
.re_mvideo { width: 100%; height: 100vh; position: relative; overflow: hidden; background: #000; }
.re_mvideo__wrap { position: absolute; inset: 0; display: block; overflow: hidden; }

/* 공통: 중앙에서 크롭되도록 위치 조정 */
.re_mvideo__iframe,
.re_mvideo__video,
.re_mposter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  z-index: 0;
}

/* 수정: MP4 비디오가 항상 화면을 가로(full-width)로 덮도록 보장 */
.re_mvideo__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* 화면을 꽉 채우도록 너비/높이 기준 설정 */
  width: 100vw;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;

  /* 종횡비 유지하며 잘라서 채우기 */
  object-fit: cover;
  -o-object-fit: cover;
  object-position: center center;

  z-index: 1;
  display: none; /* script.js 에서 재생 시 display:block 으로 설정됨 */
  pointer-events: none; /* 텍스트 클릭 등 인터랙션 방해 방지 */
  background: transparent;
}

/* 포스터는 background cover */
.re_mposter {
  background-size: cover;
  background-position: center;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
}

/* YouTube iframe: 화면 비율에 따라 크기 기준을 선택하여 항상 좌우가 꽉 차도록 처리
   - 기본(세로가 기준인 경우): 높이 기반으로 16:9 유지 (width = 100vh * 16/9)
   - 화면이 16:9보다 넓은 경우(가로가 더 긴 경우): 너비 기반으로 100vw 유지 */
.re_mvideo__iframe {
  /* 기본: 높이 기준으로 16:9 유지 */
  width: calc(100vh * 16 / 9);
  height: 100vh;
  min-width: 100vw; /* 만약 계산된 width가 화면보다 작으면 최소 가로폭 보장 */
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* 화면이 16:9보다 넓으면 너비 기준으로 맞춤 (좌우가 무조건 채워짐) */
@media (min-aspect-ratio: 16/9) {
  .re_mvideo__iframe {
    width: 100vw;
    height: calc(100vw * 9 / 16);
    min-height: 100vh; /* 필요시 세로도 보장하도록 여유둠 */
  }
}

/* (선택) 세로가 긴 화면에서는 높이 기준으로 채움 */
@media (max-aspect-ratio: 16/9) {
  .re_mvideo__video {
    width: auto;
    height: 100vh;
    min-width: 100vw;
  }
}

/* .m_atext를 항상 중앙 정렬하도록 수정 (애니메이션, 폰트 크기 유지) */
.re_mvideo .m_atext {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: rgba(255,255,255,0.5);
	z-index: 2;
	font-family: var(--entype1);
	width: 100%;
	display: block;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.re_mvideo .m_atext p {
	font-size: 12rem;	
	font-weight: 900;
	line-height: 82%;
}

.re_mvideo .m_atext span {
	font-size: 3.8rem;
    margin-top: 2rem;
}

/* .m_atext 텍스트: 페이드인 -> 3초 유지 -> 페이드아웃 (포지션/폰트 유지) */
.re_mvideo .m_atext p,
.re_mvideo .m_atext span {
  opacity: 0;
  animation: mAtextFadeInOut 4.2s ease-in-out forwards; /* 0.6s in / 3s hold / 0.6s out */
}

/* 키프레임: 0.6s 페이드인, 3.0s 유지, 0.6s 페이드아웃 (총 4.2s) */
@keyframes mAtextFadeInOut {
  0% {
    opacity: 0;
  }
  14.2857% { /* 0.6 / 4.2 */
    opacity: 1;
  }
  85.7143% { /* (0.6 + 3.0) / 4.2 */
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (max-width:940px) {
    .re_mvideo .m_atext p {
        font-size: 6rem;
    }
    .re_mvideo .m_atext span {
        font-size: 2.4rem;
    }
}

.minfo {
    width: 100%;
    height: 100vh;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    background: transparent linear-gradient(120deg, #EB2323 0%, #D835D8 46%, #10279B 100%) 0% 0% no-repeat padding-box;
}
.minfo .info_a {
    width: 55%;
    height: 100%;
    position: relative;
}
.minfo .info_a .count1 {
    width: 100%;
    height: 100vh;
    max-width: 45rem;
    max-height: 45rem;
    border-radius: 18rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 6%;
    right: 15%;
    transform: translate(10%, -4%);
    z-index: 2;
}        
.minfo .info_a .count1 p {
    font-size: 3.2rem;
    color: #BFBFBF;
    font-weight: 700;
    line-height: 100%;
}
.minfo .info_a .count1 span {
    font-size: 17rem;
    font-family: var(--entype2);
    color: #fff;
    font-weight: 700;
    line-height: 100%;
}
.minfo .info_a .count2 {
    width: 100%;
    height: 100vh;
    max-width: 45rem;
    max-height: 45rem;
    border-radius: 18rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 36%;
    right: 50%;
    transform: translate(32%, 0);
    z-index: 3;
}

.minfo .info_a .count2 p {
    font-size: 3.2rem;
    color: #BFBFBF;
    font-weight: 700;
    line-height: 100%;
}

.minfo .info_a .count2 span {
    font-size: 15rem;
    font-family: var(--entype2);
    color: #fff;
    font-weight: 700;
    line-height: 100%;
}
.minfo .info_a .count3 {
    width: 100%;
    height: 100vh;
    max-width: 40rem;
    max-height: 40rem;
    border-radius: 16rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 54%;
    right: 6%;
    transform: translate(0, 4%);
    z-index: 4;
}

.minfo .info_a .count3 p {
    font-size: 3.2rem;
    color: #BFBFBF;
    font-weight: 700;
    line-height: 100%;
}

.minfo .info_a .count3 span {
    font-size: 12rem;
    font-family: var(--entype2);
    color: #fff;
    font-weight: 700;
    line-height: 100%;
}
.minfo .info_b {
    width: 45%;
}
.minfo .info_b .info_b_txt {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}
.minfo .info_b .info_b_txt p {
    font-size: 4.8rem;
    color: #fff;
    line-height: 140%;
    font-weight: 700;
}
.minfo .info_b .info_b_txt span {
    font-size: 2rem;
    color: #B5B5B5;
    line-height: 160%;
    font-weight: 400;
    word-break: keep-all;
    padding-right: 10rem;
    width: 100%;
    max-width: 72rem;
}
.minfo .info_b .info_b_txt i {
    font-size: 2rem;
    color: #B5B5B5;
    line-height: 160%;
    font-weight: 400;
}
    /* 폰트/내용 위에 놓인 작은 반투명 오버레이(선택) — 필요하면 활성화 */
.minfo .overlay-dim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.12);
    z-index: 1; /* 콘텐츠 위, 배경 아래 */
    pointer-events: none;
}

/* .minfo .info_a .count1/2/3 -> 배경 흐림(backdrop blur) 효과 적용
(파일 끝부분 또는 기존 .countN 정의 뒤에 추가하여 우선 적용) */
.minfo .info_a .count1,
.minfo .info_a .count2,
.minfo .info_a .count3 {
    overflow: hidden; /* 블러 레이어가 부모 밖으로 튀어나오지 않도록 */
    z-index: 1;
    /* 약한 반투명 배경(fallback) — backdrop-filter 지원 안되는 브라우저용 */
    background: rgba(255,255,255,0.03);
    /* 기존 border-radius 유지(원래 값이 18rem이면 그대로 사용) */
}

/* 내부 컨텐츠가 블러 레이어보다 위에 보이도록 설정 */
.minfo .info_a .count1 > *,
.minfo .info_a .count2 > *,
.minfo .info_a .count3 > * {
    position: relative;
    z-index: 2;
}

/* 실제 블러 처리: ::before에 backdrop-filter 적용 (Safari 지원 위한 -webkit- 접두사 포함) */
.minfo .info_a .count1::before,
.minfo .info_a .count2::before,
.minfo .info_a .count3::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    pointer-events: none;
    /* 약간의 색조를 주어 블러가 더 도드라지게 함 */
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* 모서리 부모와 일치시키기 */
    border-radius: inherit;
    z-index: 1; /* 내부 컨텐츠( z-index:2 ) 아래 */
    mix-blend-mode: normal;
    opacity: 1;
}

/* 폴백: backdrop-filter 미지원 시 대비되는 반투명 색상을 추가로 적용 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .minfo .info_a .count1::before,
    .minfo .info_a .count2::before,
    .minfo .info_a .count3::before {
        background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
        filter: blur(4px); /* 단순 blur 필터 (요소 자체를 블러 처리, 일부 브라우저에서 작동) */
    }
}
/* 추가: .minfo 배경에 색상이 불규칙하게 움직이는 애니메이션 효과 */
/* 기존 레이아웃/텍스트는 그대로 두고 배경만 시각적으로 움직이게 함 */
.minfo {
    position: relative;
    overflow: hidden;
    background: #050505; /* 기본 베이스 컬러 (필요시 조정) */
    z-index: 0;
}

/* 콘텐츠가 배경 위에 항상 보이도록 레이어 조정 */
.minfo > * {
  position: relative;
  z-index: 2;
}

/* 흐르는 컬러 블롭(불규칙한 움직임) :before / :after 2레이어 사용 */
.minfo::before,
.minfo::after {
    content: "";
    position: absolute;
    inset: -10%; /* 바깥으로 확장시켜 자연스럽게 잘림 처리 */
    pointer-events: none;
    filter: blur(120px) saturate(100%);
    opacity: 0.9;
    mix-blend-mode: lighten; /* 배경색과 자연스럽게 섞이도록 */
    transition: opacity .3s ease;
}

/* 첫번째 레이어: 따뜻한 톤 블롭 */
.minfo::before {
  background:
    radial-gradient(30% 30% at 20% 30%, rgba(255,120,90,0.95) 0%, rgba(255,120,90,0.25) 20%, transparent 40%),
    radial-gradient(25% 25% at 80% 70%, rgba(255,200,120,0.85) 0%, rgba(255,200,120,0.12) 25%, transparent 45%);
  animation: minfoMove1 18s ease-in-out infinite;
}

/* 두번째 레이어: 차가운/보색 계열 블롭 — 움직임/속도 다르게 적용 */
.minfo::after {
  background:
    radial-gradient(28% 28% at 70% 20%, rgba(80,180,255,0.92) 0%, rgba(80,180,255,0.18) 22%, transparent 48%),
    radial-gradient(20% 20% at 40% 80%, rgba(120,90,255,0.88) 0%, rgba(120,90,255,0.10) 30%, transparent 55%);
  animation: minfoMove2 24s cubic-bezier(.25,.46,.45,.94) infinite;
  opacity: 0.85;
  filter: blur(140px) saturate(140%) hue-rotate(10deg);
}



/* 키프레임 — 불규칙해 보이게 여러 중간값 사용 */
@keyframes minfoMove1 {
  0%   { transform: translate3d(0,0,0) scale(1); }
  12%  { transform: translate3d(6%, -4%, 0) scale(1.03); }
  27%  { transform: translate3d(-8%, 6%, 0) scale(0.98); }
  44%  { transform: translate3d(4%, 10%, 0) scale(2.02); }
  61%  { transform: translate3d(-6%, -8%, 0) scale(0.99); }
  78%  { transform: translate3d(8%, 4%, 0) scale(1.04); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

@keyframes minfoMove2 {
  0%   { transform: translate3d(0,0,0) scale(1); }
  10%  { transform: translate3d(-5%, 6%, 0) scale(1.02); }
  30%  { transform: translate3d(10%, -8%, 0) scale(0.97); }
  53%  { transform: translate3d(-7%, 12%, 0) scale(1.03); }
  70%  { transform: translate3d(6%, -10%, 0) scale(0.98); }
  90%  { transform: translate3d(-4%, 4%, 0) scale(1.01); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* .minfo .info_b .info_b_txt 하위 요소: 초기 상태와 in-view 트리거용 클래스 */
.minfo .info_b .info_b_txt > * {
  opacity: 0;
  transform: translateX(30px);
  will-change: transform, opacity;
  transition: transform 900ms cubic-bezier(.22,.8,.14,1), opacity 900ms cubic-bezier(.22,.8,.14,1);
}

/* 뷰포트에 들어왔을 때 적용되는 클래스 */
.minfo .info_b .info_b_txt > *.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 스태거 효과(순차적으로 등장) - JS에서 지연을 주므로 CSS는 동일하게 유지 */
/* 접근성: 사용자가 애니메이션을 줄이도록 설정한 경우 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce) {
  .minfo .info_b .info_b_txt > * {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

@media (max-width:1480px) {
    .minfo .info_a .count1 {
        max-width: 40rem;
        max-height: 40rem;
        border-radius: 16rem;
    }
    .minfo .info_a .count1 span {
        font-size: 14rem;
    }
    .minfo .info_a .count2 {
        max-width: 40rem;
        max-height: 40rem;
        border-radius: 16rem;        
    }
    .minfo .info_a .count2 span {
        font-size: 14rem;
    }
    .minfo .info_a .count3 {
        max-width: 35rem;
        max-height: 34rem;
        border-radius: 14rem;
        transform: translate(0, 25%);
    }
    .minfo .info_a .count3 span {
        font-size: 10rem;
    }
}
@media (max-width:1180px) {
    .minfo {
        flex-direction: column;
        padding: 5rem;
    }
    .minfo .info_a {
        width: 100%
    }
    .minfo .info_b {
        width: 100%
    }
    .minfo .info_a .count1 {
        left: 0;
        transform: translate(0, 0);
    }
    .minfo .info_a .count2 {
        left: 50%;
        transform: translate(-50%, 0);

    }
    .minfo .info_a .count3 {
        left: 100%;
        transform: translate(-100%, 0);
    }
    .minfo .info_a .count1,
    .minfo .info_a .count2,
    .minfo .info_a .count3 {
        top: 0;
        right: auto;
        max-width: 30rem;
        max-height: 30rem;
        border-radius: 12rem;
    }
    .minfo .info_a .count1 span,
    .minfo .info_a .count2 span,
    .minfo .info_a .count3 span {
        font-size: 10rem;
    }
}

/* Equal width layout at <=1180px: counts fill the row equally */
@media (max-width:1180px) {
    .minfo .info_a {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0 !important; /* 3등분으로 꽉 차게 */
        position: relative !important;
        width: 100% !important;
    }
    .minfo .info_a .count1,
    .minfo .info_a .count2,
    .minfo .info_a .count3 {
        position: static !important;   /* reset absolute layout */
        top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
        transform: none !important;
        flex: 0 0 33.3333% !important;
        width: 33.3333% !important;
        min-width: 0 !important;
        height: auto !important;         /* aspect-ratio로 높이 결정 */
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: 1 / 1 !important;  /* keep perfect circle */
        border-radius: 50% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    .minfo .info_b .info_b_txt p {font-size: 3.8rem;}
}
@media (max-width:800px) {
    .minfo .info_b .info_b_txt p {
        font-size: 3.4rem;
    }
    .minfo .info_b .info_b_txt span {
        padding-right: 0;
    }
    .minfo .info_b .info_b_txt {
        gap: 1.5rem;
    }
    .minfo .info_a .count1,
    .minfo .info_a .count2,
    .minfo .info_a .count3 {
        top:5rem;
        max-width: 20rem;
        max-height: 20rem;
        border-radius: 12rem;
    }
    .minfo .info_a .count1 span,
    .minfo .info_a .count2 span,
    .minfo .info_a .count3 span {
        font-size: 6rem;
    }
    .minfo .info_a .count1 p,
    .minfo .info_a .count2 p,
    .minfo .info_a .count3 p {
        font-size: 1.8rem;
    }    
}
}
@media (max-width:550px) {
    .minfo {
        padding: 4rem;
    }
    .minfo .info_b .info_b_txt p {
        font-size: 2.8rem;
    }
    .minfo .info_a .count1,
    .minfo .info_a .count2,
    .minfo .info_a .count3 {
        top: 5rem;
        max-width: 12rem;
        max-height: 12rem;
        border-radius: 4rem;
    }
    .minfo .info_a .count1 span,
    .minfo .info_a .count2 span,
    .minfo .info_a .count3 span {
        font-size: 3rem;
        line-height: 140%;
    }

    .minfo .info_a .count1 p,
    .minfo .info_a .count2 p,
    .minfo .info_a .count3 p {
        font-size: 1.2rem;
        line-height: 140%;
    }
}

/* Works 섹션 */
.works_wrap {
    width: 100%;
    height: 100vh;
    background: transparent linear-gradient(120deg, #242424 0%, #3b3b3b 46%, #242424 100%) 0% 0% no-repeat padding-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}
/* 변경: 가로 스크롤 허용, 모바일 터치 스무스 스크롤, 터치 제스처 제어 */
.works_wrap .wks_list {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    touch-action: pan-y; /* 세로 스크롤 기본 허용, 가로 드래그는 JS가 처리 */
    cursor: grab;
}

/* 드래깅 중 스타일 */
.works_wrap .wks_list.dragging {
    cursor: grabbing;
    user-select: none;
}

/* 스크롤바 숨김 (선택적) */
.works_wrap .wks_list::-webkit-scrollbar { height: 0; display: none; }
.works_wrap .wks_list { -ms-overflow-style: none; scrollbar-width: none; }

.wleft {
    justify-content: flex-start;
}
.wright {
    flex-direction: row-reverse;
}
.works_wrap .wks_list .list_thum {
    box-sizing: border-box;
    flex: 0 0 36rem; /* shrink:0, grow:0, basis:42.8rem -> 지정한 가로폭을 유지 */
    height: 21rem;
    overflow: hidden;
    border-radius: 1.5rem;
    cursor: pointer;
    background-size: cover;
}
.works_wrap .wks_list .list_thum .ov_txt {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.5rem;
    transition: background 0.3s;
    opacity: 0;
    transition: all .3s ease;
}
.works_wrap .wks_list .list_thum:hover .ov_txt {
    opacity: 1;    
}
.works_wrap .wks_list .list_thum .ov_txt p {
    font-size: 2.2rem;
    color: #fff;
    font-weight: 400;
    line-height: 140%;
    text-align: center;
}
.works_wrap .wks_list .list_thum .ov_txt a {
    border: 1px solid #fff;
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 3rem;
    padding: 0.4rem 3rem;
}
.lthm1 {
    background: url('images/m_thum01.jpg') no-repeat center center;
}
.lthm2 {
    background: url('images/m_thum02.jpg') no-repeat center center;
}
.lthm3 {
    background: url('images/m_thum03.jpg') no-repeat center center;
}
.lthm4 {
    background: url('images/m_thum01.jpg') no-repeat center center;
}

.mtitle {
    color: #fff;
    text-align: center;
    margin-bottom: 4rem;
}
.mtitle p {
    font-family: var(--entype2);
    font-size: 7rem;    
    font-weight: 900;
    line-height: 140%;
}
.mtitle span {
    font-size: 2.2rem;
    font-weight: 400;
}
.m_more_bt {
    display: block;
    margin: 0 auto;
    border: 1px solid #fff;
    background-color: rgba(255,255,255,0.1);
    color: #fff;
    border-radius: 3rem;
    padding: 1.2rem 4rem;
    font-size: 1.8rem;
    cursor: pointer;
    margin-top: 4rem;
    transition: all 0.5s;
}
.m_more_bt:hover {
    background-color: rgba(255,255,255,0.9);
    color: #000;
}

/* .mtitle: 오른쪽 -> 왼쪽 등장 애니메이션을 위한 초기/트리거 상태 */
.mtitle > * {
  opacity: 0;
  transform: translateX(30px); /* 오른쪽에서 출발 */
  will-change: transform, opacity;
  transition: transform 900ms cubic-bezier(.22,.8,.14,1), opacity 900ms cubic-bezier(.22,.8,.14,1);
}

.mtitle > *.is-visible {
  opacity: 1;
  transform: translateX(0); /* 제자리로 이동 (오른쪽->왼쪽 애니메이션 완성) */
}

/* 접근성: 애니메이션 줄이기 요청 시 즉시 표시 */
@media (prefers-reduced-motion: reduce) {
  .mtitle > * {
    transition: none;
    transform: none;
    opacity: 1;
  }
}
@media (max-width:800px) {
    .mtitle p {
        font-size: 4.5rem;
        margin-top: 9rem;
    }
    .mtitle span {
        font-size: 1.8rem;        
        word-break: keep-all;
    }
    .mtitle {
        margin-bottom: 2rem;
        padding: 0 2rem;
    }
    .m_more_bt {
        margin-top: 2rem;
    }
    .works_wrap {
        gap: 2rem;
    }
    .works_wrap .wks_list {
        gap: 2rem;
    }
    .works_wrap .wks_list .list_thum {
        flex: 0 0 24rem;
        height: 14rem;
    }
}
@media (max-width:400px) {
    .re_mvideo .m_atext p {
        font-size: 4rem;
    }
    .m_more_bt {
        font-size: 1.6rem;
        padding: 0.8rem 4rem
    }
}

/* Works 섹션 End */

.minfo .info_a .count1,
.minfo .info_a .count2,
.minfo .info_a .count3 {
  width: 450px !important;
  height: 450px !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 10rem !important;
}

/* Lock base positions (prevent media queries from shifting them) */
.minfo .info_a .count1 {
  top: 5% !important;
  right: 15% !important;
  left: auto !important;
  transform: translate(10%, -2%) !important;
}
.minfo .info_a .count2 {
  top: 36% !important;
  right: 50% !important;
  left: auto !important;
  transform: translate(32%, 0) !important;
}
.minfo .info_a .count3 {
  top: 54% !important;
  right: 6% !important;
  left: auto !important;
  transform: translate(0, 4%) !important;
  width: 400px !important;  /* count3 slightly smaller per base */
  height: 400px !important;
}

/* Mobile layout: place counts in a horizontal row at top, info_b below */
@media (max-width: 1180px) {
  .minfo { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: 2rem 4.5rem; }
  .minfo .info_a { width: 100% !important; height: auto !important; position: relative !important; display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 1.2rem !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  .minfo .info_a .count1,
  .minfo .info_a .count2,
  .minfo .info_a .count3 { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; width: 120px !important; height: 120px !important; border-radius: 50% !important; max-width: none !important; max-height: none !important; flex: 0 0 120px !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 !important; overflow: hidden !important; }
  /* ensure glow/blur (::before) fits the same size as the circle on mobile */
  .minfo .info_a .count1::before,
  .minfo .info_a .count2::before,
  .minfo .info_a .count3::before { inset: 0 !important; border-radius: 50% !important; }
  .minfo .info_a .count1 p,
  .minfo .info_a .count2 p,
  .minfo .info_a .count3 p { font-size: 1.2rem !important; }
  .minfo .info_a .count1 span,
  .minfo .info_a .count2 span,
  .minfo .info_a .count3 span { font-size: 3rem !important; }
  .minfo .info_b { width: 100% !important; margin-top: 1.5rem !important; }  
}
@media (max-width: 800px) {
  .minfo { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: 2rem 3rem; }
  .minfo .info_a { width: 100% !important; height: auto !important; position: relative !important; display: flex !important; flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; gap: 1.2rem !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
  .minfo .info_a .count1,
  .minfo .info_a .count2,
  .minfo .info_a .count3 { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; width: 120px !important; height: 120px !important; border-radius: 50% !important; max-width: none !important; max-height: none !important; flex: 0 0 120px !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 !important; overflow: hidden !important; }
  /* ensure glow/blur (::before) fits the same size as the circle on mobile */
  .minfo .info_a .count1::before,
  .minfo .info_a .count2::before,
  .minfo .info_a .count3::before { inset: 0 !important; border-radius: 50% !important; }
  .minfo .info_a .count1 p,
  .minfo .info_a .count2 p,
  .minfo .info_a .count3 p { font-size: 1.2rem !important; }
  .minfo .info_a .count1 span,
  .minfo .info_a .count2 span,
  .minfo .info_a .count3 span { font-size: 3rem !important; }
  .minfo .info_b { width: 100% !important; margin-top: 1.5rem !important; }
}
/* Modal overlay for WORKS popup */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;               /* 항상 flex, 애니메이션은 visibility/opacity로 */
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;                  /* 페이드 초기 상태 */
  visibility: hidden;          /* 보이지 않게 */
  pointer-events: none;        /* 클릭 차단 */
  transition: opacity 220ms ease;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.modal-content {
  width: 100%;
  max-width: 800px;
  height: auto;  
  background: rgba(0,0,0,0.9);
  color: #fff;
  border-radius: 1rem;
  overflow: auto;
  padding: 2rem 2rem;
  margin: 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.22,.8,.14,1), opacity 240ms cubic-bezier(.22,.8,.14,1);
  position: relative;
}
.modal-overlay.open .modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* mpop 내부 닫기 버튼, 팝업내부CSS */
.modal-content .mpop { position: relative; height: 100%; }
.modal-content .mpop .mpop_vdo {background:url(images/loading01.svg) no-repeat center center; background-size: 8rem;}
.modal-content .mpop .mpop_tx {font-size: 1.8rem; color: #fff; margin:1rem 0;}
.modal-content .mpop .mpop-close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  font-size: 2.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 160ms ease, transform 120ms ease;
}
.modal-content .mpop .mpop-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff;}
.modal-content .mpop .mpop-close:active { transform: scale(0.96); }
.modal-content .mpop .mpop-close:focus { outline: none; box-shadow: 0 0 0 3px rgba(0,0,0,0.15); }
.modal-content .mpop .mpop_bt {
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem 2.5rem;
    font-size: 1.6rem;
    color: #fff;
    border-radius: 3rem;
    text-align: center;
    width: 15rem;
    display: block;
    border: 1px solid #fff;
    transition: all 0.5s;
}
.modal-content .mpop .mpop_bt:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
}

.ai_step {
    width: 100%;
    height: 100vh;
}
.ai_step .ai_txt {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-direction: column;
    color: #fff;
    text-align: center;
    height: 100%;
    background-color: #000;
    position: relative;
    overflow: hidden;
}
.ai_step .aibg1 {}
.ai_step .aibg2 {}
.ai_step .aibg3 {}

/* Dim overlay for readability */
.ai_step .ai_txt::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
}
.ai_step .ai_txt > * { position: relative; z-index: 2; }
/* Local video background wrapper */
.ai_step .ai_txt .vid-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #000;
}
.ai_step .ai_txt .vid-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai_step .ai_txt span {font-size: 4.8rem; color: rgba(255, 255, 255, 0.64); font-family: var(--entype2); font-weight: 800; line-height: 100%;}
.ai_step .ai_txt p {font-size: 4.8rem; color: #fff; font-weight: 800; line-height: 120%;}
.ai_step .ai_txt i {font-size: 2rem; color: #fff; font-weight: 400; line-height: 160%;}
.ai_step .ai_txt a {font-size: 1.8rem; color: #fff; padding: 0.8rem 2rem 0.8rem 2rem; width: 100%; max-width: 24.5rem; background: rgba(0,0,0,0.5); border-radius: 3rem; margin-top: 2rem; transition: all 0.3s;}
.ai_step .ai_txt a:hover {background: rgba(255, 255, 255, 0.9); color: #000;}

/* ai_txt children appear animation (like WORKS text) */
.ai_step .ai_txt > span,
.ai_step .ai_txt > p,
.ai_step .ai_txt > i,
.ai_step .ai_txt > a {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}
.ai_step .ai_txt > span.is-visible,
.ai_step .ai_txt > p.is-visible,
.ai_step .ai_txt > i.is-visible,
.ai_step .ai_txt > a.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 800px) {
    .ai_step .ai_txt span {font-size: 3.4rem;}
    .ai_step .ai_txt p {font-size: 3.4rem;}
    .ai_step .ai_txt i {padding :0 2rem;}
}

/* in_tx_wrap children appear animation */
.m_cont_wrap .mcon_txt .in_tx_wrap > *,
.m_cont_wrap .mcon_txt .in_tx_wrap .in_txt > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}
.m_cont_wrap .mcon_txt .in_tx_wrap > *.is-visible,
.m_cont_wrap .mcon_txt .in_tx_wrap .in_txt > *.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.m_cont_wrap {
    width: 100%;
    height: 100vh;
    background: transparent linear-gradient(120deg, #392626 0%, #552525 46%, #290505 100%) 0% 0% no-repeat padding-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    overflow: hidden;
}
/* Slow rotating gradient background */
.m_cont_wrap::before {
    content: "";
    position: absolute;
    inset: -15%;
    background: linear-gradient(120deg, #392626 0%, #552525 46%, #290505 100%);
    transform-origin: center center;
    animation: mcon-bg-rotate 100s linear infinite;
    z-index: 0;
}
.m_cont_wrap > * { position: relative; z-index: 1; }
@keyframes mcon-bg-rotate {
  from { transform: rotate(0deg) scale(1.1); }
  to   { transform: rotate(360deg) scale(2.1); }
}
@media (prefers-reduced-motion: reduce) {
  .m_cont_wrap::before { animation: none; }
}
.m_cont_wrap .mcon_txt {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.m_cont_wrap .mcon_txt .in_tx_wrap {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 4rem;
    color: #fff;
    padding: 0 10rem;
}
.m_cont_wrap .mcon_txt .in_tx_wrap a {
    display: block;
    width: 100%;
    max-width: 18rem;
    text-align: center;
    margin: 0;
    border: 1px solid #fff;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 3rem;
    padding: 1.2rem 4rem;
    font-size: 1.8rem;
    cursor: pointer;
    margin-top: 2rem;
    transition: all 0.5s;
}
.m_cont_wrap .mcon_txt .in_tx_wrap  a:hover {
    background-color: rgba(255,255,255,0.9);
    color: #000;
}
.m_cont_wrap .mcon_txt .in_tx_wrap .mtitle2 {
    font-family: var(--entype2);
    font-size: 7rem;
    font-weight: 900;
    line-height: 140%;    
}
.m_cont_wrap .mcon_txt .in_tx_wrap .in_txt {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.m_cont_wrap .mcon_txt .in_tx_wrap .in_txt p {
    font-family: var(--entype2);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 100%;

}
.m_cont_wrap .mcon_txt .in_tx_wrap .in_txt span {
    font-size: 2.2rem;
    font-weight: 400;
    color: #C8C8C8;
    line-height: 140%;
}
.m_cont_wrap .mcon_map {
    background-color: #3f3f3f;
    width: 100%;
    max-width: 100rem;
    height: 100vh;
    max-height: 63rem;
    border-top-left-radius: 8rem;
    border-bottom-left-radius: 8rem;
    overflow: hidden;
}
.m_cont_wrap .mcon_map .root_daum_roughmap { width: 100% !important; height: 100% !important; }
.m_cont_wrap .mcon_map .root_daum_roughmap > div { width: 100% !important; height: 100% !important; }
.m_cont_wrap .mcon_map .root_daum_roughmap .wrap_map { width: 100% !important; height: 100% !important; }
@media (max-width: 800px) {
    .m_cont_wrap {flex-direction: column; justify-content: center; gap: 5rem;}
    .m_cont_wrap .mcon_txt {justify-content: flex-start;}
    .m_cont_wrap .mcon_txt .in_tx_wrap {padding: 0 3rem; gap: 2rem;}
    .m_cont_wrap .mcon_txt .in_tx_wrap .mtitle2 {font-size: 4.5rem;}
    .m_cont_wrap .mcon_txt .in_tx_wrap .in_txt {gap: 1rem;}
    .m_cont_wrap .mcon_map {width: 94%; border-radius: 3rem; max-height: 30%;}
}

.patn_wrap {
    width: 100%; 
    height: 100vh; 
    background: transparent linear-gradient(134deg, #2E0E0E 0%, #25244D 46%, #060d21 100%) 0% 0% no-repeat padding-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    gap: 3rem;
}
.patn_wrap .p_line_wp {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
    overflow: hidden; /* hide flowing lines overflow */
}
.patn_wrap .p_line_wp .pline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: nowrap;
    width: max-content; /* allow horizontal flow width */
    will-change: transform;
}
.patn_wrap .p_line_wp .pline .ptn_logo {
    width: 20rem;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 1rem;
}
.patn_wrap .p_line_wp .pline .ptn_logo img {width: 100%; max-width: 140px;}

/* left line moves left->right, right line moves right->left */
.patn_wrap .p_line_wp .pleft { animation: marquee-ltr 25s linear infinite; }
.patn_wrap .p_line_wp .pright { animation: marquee-rtl 25s linear infinite; }

@keyframes marquee-rtl {
  0%   { transform: translateX(var(--marquee-start, 0)); }
  100% { transform: translateX(calc(var(--marquee-start, 0) - var(--marquee-distance, 0px))); }
}
@keyframes marquee-ltr {
  0%   { transform: translateX(var(--marquee-start, 0)); }
  100% { transform: translateX(calc(var(--marquee-start, 0) + var(--marquee-distance, 0px))); }
}

@media (prefers-reduced-motion: reduce) {
  .patn_wrap .p_line_wp .pleft,
  .patn_wrap .p_line_wp .pright { animation: none; }
}

@media (max-width: 800px) {
    .patn_wrap .p_line_wp {gap: 2rem;}
    .patn_wrap .p_line_wp .pline {gap: 2rem;}
    .patn_wrap .p_line_wp .pline .ptn_logo {width: 10rem; height: 10rem;}    
    .patn_wrap .p_line_wp .pline .ptn_logo img {width: 50px;}
}


/* GNB제외 리뉴얼 메인 시작 */
.re_mview {width: 100%; height: 100vh; position: relative; overflow: hidden; border:0px solid red;}
.re_mview__track {display: flex; height: 100%; width: 100%; will-change: transform; transform: translateX(0); transition: transform .6s ease; backface-visibility: hidden;}
.re_mview .m_img {flex: 0 0 100%; position: relative;}
.re_mview .rm_bt_area {position: absolute; right: 20rem; bottom: 10rem; z-index: 110; display: flex; justify-content: center; align-items: center; gap: 0.2rem;}
.re_mview .rm_bt_area .rm_bt {width: 5rem; height: 5rem; border: 2px solid #fff; background: none; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s;}
.re_mview .rm_bt_area .rm_bt img {filter: brightness(0) invert(1); max-width: 2rem;}
.re_mview .rm_bt_area .rm_bt:hover {background: #fff;}
.re_mview .rm_bt_area .rm_bt:hover img {filter: brightness(0) invert(0);}
.re_mview .m_upimg {width: 55rem; height: 35rem; position: absolute; left: 20rem; bottom: 10rem; z-index: 9; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3); border-radius: 2rem; overflow: hidden; will-change: transform, opacity; background-size: cover;}
.m_ubg1 {background: url(images/mup_img01.jpg) no-repeat center center;}
.m_ubg2 {background: url(images/mup_img02.jpg) no-repeat center center;}
.re_mview .v_txt {position: absolute; left: 82rem; bottom: 16rem; z-index: 10; font-size: 3rem; color: #ffffff; font-weight: 600; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
.re_mview .v_txt span {line-height: 140%;}
.re_mview .v_txt p {font-size: 4rem; color: #e9ec07; font-weight: 800; line-height: 140%;}
.re_mview .v_txt i {line-height: 140%; font-size: 4rem;}
.re_mview .v_txt > * {opacity: 0; transform: translateX(40px); transition: transform .6s ease, opacity .6s ease; will-change: transform, opacity;}
.re_mview .v_txt > *.is-visible {opacity: 1; transform: translateX(0);}
.re_mview .m_img .m_upimg { opacity: 0; transform: translateY(30px); transition: transform .7s ease, opacity .7s ease; }
.re_mview .m_img.is-active .m_upimg { opacity: 1; transform: translateY(0); }
.re_mview .m_img {width: 100%; height: 100vh; background-size: cover;}
.m_ibg1 {background: url(images/m_img01.jpg) no-repeat center center;}
.m_ibg2 {background: url(images/m_img02.jpg) no-repeat center center;}
.re_mview .m_video_wrap {position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 1; pointer-events: none;}
.re_mview .m_video_wrap iframe,
.re_mview .m_video_wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  min-width: 100vw;   /* 기본도 크게 잡아 상하/좌우 여백 제거 */
  min-height: 100vh;
  transform: translate(-50%, -50%);
  object-fit: cover;
  max-width: none;
  max-height: none;
  border: 0;
  pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
  .re_mview .m_video_wrap iframe,
  .re_mview .m_video_wrap video {width: 100vw; height: calc(100vw * 9 / 16); min-height: 100vh;}
}
@media (max-aspect-ratio: 16/9) {
  .re_mview .m_video_wrap iframe,
  .re_mview .m_video_wrap video {width: auto; height: 100vh; min-width: 100vw;}
}
@media (max-width: 768px) {
  .re_mview .m_video_wrap iframe,
  .re_mview .m_video_wrap video {
    min-width: 200vw;
    min-height: 200vh;
    width: 200vw;
    height: 200vh;
  }
}
@media (max-width: 1160px) {
  .re_mview .m_video_wrap iframe,
  .re_mview .m_video_wrap video {
    width: 200vw;
    height: 200vh;
    min-width: 200vw;
    min-height: 200vh;
  }
}
@media (max-width: 500px) {
  .re_mview .m_video_wrap iframe,
  .re_mview .m_video_wrap video {
    width: 350vw;
    height: 350vh;
    min-width: 350vw;
    min-height: 350vh;
  }
}

/* 유리창 반사광이 좌상단 -> 우하단으로 2초마다 스윕 */
.re_mview .m_upimg {
  position: absolute;
  overflow: hidden;
}

.re_mview .m_upimg::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0) 58%
  );
  animation: m_upimg_shine 2s linear infinite;
  mix-blend-mode: screen; /* 선택: 더 밝은 유리 느낌 */
}

@keyframes m_upimg_shine {
  0%   { transform: translate(-30%, -30%); opacity: 0; }
  10%  { opacity: 0.9; }
  40%  { opacity: 0.6; }
  100% { transform: translate(30%, 30%); opacity: 0; }
}

@media (max-width: 1360px) {
    .re_mview .m_upimg {left: 10rem; width: 47rem; height: 30rem;}
    .re_mview .rm_bt_area {right: 10rem;}
    .re_mview .v_txt {left: 62rem;}
}
@media (max-width: 1000px) {
    .re_mview .m_upimg {bottom: 30rem; width: 34rem; height: 21rem;}
    .re_mview .v_txt {left: 10rem; bottom: 10rem;}
}
@media (max-width: 600px) {
    .re_mview .m_upimg {left: 4rem;}
    .re_mview .rm_bt_area {right: 4rem;}
    .re_mview .v_txt {left: 4rem; bottom: 14rem;}
    .re_mview .v_txt span,
    .re_mview .v_txt p,
    .re_mview .v_txt i {font-size: 2.8rem;}
}

.re_step01 {width: 100%; height: 100vh; max-height: 80rem; display: flex; justify-content: center; align-items: center; gap: 10rem; padding: 0 5rem;}
.re_step01 .st1_txt {width: 100%; max-width: 50rem; height: 100%; font-size: 2.4rem; text-align: center; font-weight: 400; 
  position: relative; 
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10rem;
  background: rgba(255,255,255,0.08);  
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
}
.re_step01 .st1_txt::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 45rem; height: 45rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgb(221 221 221 / 35%) 0%, rgb(229 229 229 / 60%) 80%, rgb(159 159 159 / 8%) 60%, rgb(135 135 135 / 0%) 70%);
  filter: blur(18px); z-index: 0; pointer-events: none;
}
.re_step01 .st1_txt > * { position: relative; z-index: 1; }
.re_step01 .st1_txt span {}
.re_step01 .st1_txt p {color: var(--point-color-1); font-family: var(--entype1); font-weight: 800; font-size: 3.8rem; 
animation: none; line-height: 120%;
  transform-origin: center bottom;
  will-change: transform, opacity;}
@keyframes st1TxtRollUp {
  0%   { opacity: 0; transform: translateY(20px) rotate(0deg); }
  20%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  80%  { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-20px) rotate(0deg); }
}
.re_step01 .st1_txt i {line-height: 140%; margin-top: 1rem; display: block;}
.re_step01 .st2_txt {display: flex; flex-direction: column; justify-content: center; gap: 1rem; font-size: 3.8rem; font-weight: 700; line-height: 140%;}
.re_step01 .st2_txt span {letter-spacing: -1px;}
.re_step01 .st2_txt span i {color: var(--point-color-1); font-weight: 800;}
.re_step01 .st2_txt p {}
.re_step01 .st2_txt .tx_rdus1 {max-width: 60rem; margin:1rem 0; background: var(--point-color-1); color: #fff; font-size: 2rem; border-radius: 5rem; text-align: center; position: relative; overflow: hidden; line-height: 140%; padding: 1rem 3rem;}
.re_step01 .st2_txt .tx_rdus1::after {content:""; position:absolute; inset: -20% -40%; /* taller+wider for nicer angle */
  background: linear-gradient(120deg,
    rgba(233,236,7,0) 0%, rgba(233,236,7,0) 40%,
    rgba(233,236,7,0.7) 50%,
    rgba(233,236,7,0) 60%, rgba(233,236,7,0) 100%);
  transform: translateX(-120%); will-change: transform, opacity; pointer-events: none;
  mix-blend-mode: screen; /* optional: brighten effect */
  animation: txShineSweep 2.4s linear infinite;
}
@keyframes txShineSweep { to { transform: translateX(120%); } }
.re_step01 .st2_txt .tx_bt_area {display: flex; gap: 3rem; margin-top: 2rem;}
.re_step01 .st2_txt .tx_bt_area .txbx1 {width: 100%; height: 23rem; border:3px solid var(--point-color-1); padding: 2rem 2.5rem; position: relative; display: flex; flex-direction: column; gap: 1rem; 
  box-shadow: inset 0 0 0 0 var(--point-color-1);
  transition: box-shadow .25s ease;
  will-change: box-shadow;
}
.re_step01 .st2_txt .tx_bt_area .txbx1 p {font-size: 2rem; color: var(--point-color-1); line-height: 140%; margin-bottom: 1rem;}
.re_step01 .st2_txt .tx_bt_area .txbx1 .icon_tx1 {font-size: 1.6rem; color: #333; font-weight: 400; display: flex; align-items: flex-start; gap: 1rem; line-height: 140%;}
.re_step01 .st2_txt .tx_bt_area .txbx1 .icon_tx1 img {width: 2rem; margin-top: 0.25rem;}
.re_step01 .st2_txt .tx_bt_area .txbx1 .tx_bt_arr {position: absolute; right: 2rem; bottom: 2rem; z-index: 10; width: 3rem;}
.re_step01 .st2_txt .tx_bt_area .txbx1:hover { box-shadow: inset 0 0 0 5px var(--point-color-1); }

@media (max-width: 1586px) {
    .re_step01 {flex-direction: column; max-height: none; height: auto; gap: 16rem; padding: 15rem 4rem 10rem 4rem;}
    .re_step01 .st2_txt .tx_bt_area {flex-direction: column; gap: 2rem;}
    .re_step01 .st2_txt .tx_bt_area .txbx1 {height: auto;}
}

@media (max-width: 1240px) {
    .re_step01 {}
    .re_step01 .st2_txt {width: 100%;}
}
@media (max-width: 600px) {
    .re_step01 .st2_txt {font-size: 2.8rem;}
}

.re_step02 {width: 100%; height: auto; padding: 10rem 14rem; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4rem; background: url('/pages/images/rem_bg.jpg') no-repeat center center; background-size: cover;}
.re_step02 .area_6btwp {width: 100%; display: flex; justify-content: center; align-items: center; gap: 4rem; max-width: 1680px;}
.re_step02 .area_6btwp .in_6bt {width: 100%; height: 100vh; max-height: 20rem; background: #fff; display: flex; justify-content: center; align-items: center; padding: 3rem; 
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 0 var(--point-color-1); transition: box-shadow .25s ease; will-change: box-shadow;}
.re_step02 .area_6btwp .in_6bt:hover { box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 5px var(--point-color-1); }
.re_step02 .area_6btwp .in_6bt .bt6_img {width: 9rem; margin-right: 2rem;}
.re_step02 .area_6btwp .in_6bt .in_6txt {display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 60rem;}
.re_step02 .area_6btwp .in_6bt .in_6txt p {font-size: 2.2rem; font-weight: 700; letter-spacing: -1px; line-height: 140%; color: #333;}
.re_step02 .area_6btwp .in_6bt .in_6txt span {font-size: 1.8rem; font-weight: 400; line-height: 140%; color: #333;}
.re_step02 .area_6btwp .in_6bt .in_6more {font-size: 1.4rem; color: #fff; background: #d1d1d1; border-radius: 3rem; padding: 0.4rem 2rem; transition: background-color .25s ease, color .25s ease; will-change: background-color, color;}
.re_step02 .area_6btwp .in_6bt:hover .in_6more { background: var(--point-color-1); }
@media (max-width: 1920px) {
    .re_step02 {padding: 10rem;}
}
@media (max-width: 1610px) {
    .re_step02 .area_6btwp {width: 100%; flex-direction: column; gap: 2rem;}
    .re_step02 .area_6btwp .in_6bt {max-width: 100%; gap: 2rem;}
    .re_step02 .area_6btwp .in_6bt .bt6_img {margin-right: 0; width: 6rem;}
}
@media (max-width: 1240px) {
    .re_step02 {padding:10rem 4rem;}
}
@media (max-width: 560px) {
    .re_step02 .area_6btwp .in_6bt {flex-direction: column; gap: 1rem; align-items: flex-start; max-height: 26rem;}
}
.re_step03 {width: 100%; padding: 10rem 14rem; display: flex; justify-content: center; align-items: center;}
.mre_bt {width: 100%; max-width: 1680px; padding: 4rem 6rem; background: #f6f6f6; box-shadow: 12px 12px 0 rgba(0, 0, 0, 0.1); display: flex; justify-content: space-between; align-items: center;}
.mre_bt .mre_inner {display: flex; justify-content: center; align-items: center; gap: 3rem; color: #333;}
.mre_bt .mre_inner .mre_img {width: 100%; max-width: 20rem; border-radius: 10rem;}
.mre_bt .mre_inner .mre_bttx {}
.mre_bt .mre_inner .mre_bttx span {font-size: 1.4rem; font-weight: 500; line-height: 140%; display: block;}
.mre_bt .mre_inner .mre_bttx p {font-size: 3.4rem; font-weight: 700; line-height: 140%;}
.mre_bt .mre_inner .mre_bttx i {font-size: 1.8rem; font-weight: 400; line-height: 140%; display: block; margin-top: 2rem;}
.mre_bt .mre_arr {width: 5rem; height: 5rem; min-width: 5rem; background: #fff; border-radius: 3rem; display: flex; justify-content: center; align-items: center; transition: all 0.3s;}
.mre_bt:hover .mre_arr {background: var(--point-color-1);}
.mre_bt:hover .mre_arr_img {filter:brightness(0) invert(1);}
@media (max-width: 1920px) {
    .re_step03 {padding: 10rem;}
}
@media (max-width: 1240px) {
    .re_step03 {padding: 10rem 4rem;}
    .mre_bt {flex-direction: column; gap: 3rem; padding: 4rem 4rem;}
}
@media (max-width: 720px) {
    .mre_bt .mre_inner .mre_img {display: none;}
}

.re_step04 {width: 100%; padding: 10rem 14rem; background: #f6f6f6; display: flex; justify-content: center; align-items: center;}
.re_step04 .re_s04in {width: 100%; max-width: 1680px; display: flex; justify-content: center; align-items: center; gap: 5rem;}
.re_step04 .re_s04in .bn3_item {width: 100%; background: #fff;}
.re_step04 .re_s04in .bn3_item a {position:relative;}
.re_step04 .re_s04in .bn3_item a .bn3_more {position:absolute; left:6rem; bottom:6rem; z-index:10; font-size:1.4rem; color:#fff; padding:1.2rem 3rem; font-weight:500; border:1px solid #fff; border-radius:3rem; transition: all 0.3s;}
.re_step04 .re_s04in .bn3_item a:hover .bn3_more {background:#fff; color:#333;}
.re_step04 .re_s04in .bn3_item img {width: 100%;}
@media (max-width: 1920px) {
    .re_step04 {padding: 10rem;}
}
@media (max-width: 1240px) {
    .re_step04 {padding:10rem 4rem;}
}
@media (max-width: 1000px) {
    .re_step04 .re_s04in {flex-direction: column; gap: 2rem;}
}
@media (max-width: 630px) {
	.re_step04 .re_s04in .bn3_item a .bn3_more {left:3rem; bottom:3rem; padding:1rem 3rem;}
}

.re_step05 {width: 100%; padding: 10rem 14rem; display: flex; justify-content: center; align-items: center;}
.re_step05 .re_s05in {width: 100%; max-width: 1680px; display: flex; justify-content: space-around; align-items: flex-start; gap: 5rem;}
.re_step05 .re_s05in .in05a {width: 100%; font-size: 3.8rem; font-weight: 700; line-height: 160%;}
.re_step05 .re_s05in .in05a { position: relative; }
/* in05a reveal background animation */
.re_step05 .re_s05in .in05a .in_txpoint {
  display: inline;
  background-image: linear-gradient(0deg, var(--point-color-1, #dc000c), var(--point-color-1, #dc000c));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: left center;
  transition: background-size .9s ease, color .25s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.re_step05 .re_s05in .in05a.is-visible .in_txpoint {
  background-size: 100% 100%;
  color: #fff;
}
.re_step05 .re_s05in .in05b {width: 100%; display: flex; flex-direction: column; gap: 2rem;}
.re_step05 .re_s05in .in05b .mre_aco {cursor: pointer;}
.re_step05 .re_s05in .in05b .mre_aco .aco_title {display: flex; align-items: center; justify-content: space-between; padding: 2rem 0; gap: 2rem;}
.re_step05 .re_s05in .in05b .mre_aco .aco_title span {font-size: 1.8rem; font-weight: 400; line-height: 100%;}
.re_step05 .re_s05in .in05b .mre_aco .aco_title b {font-size: 2.4rem; font-weight: 500; line-height: 120%;}
.re_step05 .re_s05in .in05b .mre_aco .aco_title i {}
.re_step05 .re_s05in .in05b .mre_aco .aco_title i img {width: 2rem;}
.re_step05 .re_s05in .in05b .mre_aco .aco_txt {border-bottom: 1px solid #b1b1b1; max-height: 0; overflow: hidden; padding: 0 3rem; opacity: 0; transition: max-height .35s ease, padding .25s ease, opacity .25s ease;}
.re_step05 .re_s05in .in05b .mre_aco.is-open .aco_txt {max-height: 1000px; padding: 5rem 3rem; opacity: 1;}
.re_step05 .re_s05in .in05b .mre_aco.is-open .aco_title i {transform: none;} 
@media (max-width: 1920px) {
    .re_step05 {padding: 10rem;}
}
@media (max-width: 1240px) {
    .re_step05 {padding:10rem 4rem;}
}
@media (max-width: 700px) {
    .re_step05 .re_s05in {flex-direction: column; gap: 8rem;}
    .re_step05 .re_s05in .in05a {line-height: 140%;}
}
.re_step06 {width: 100%; padding: 10rem 14rem; background: #000; display: flex; justify-content: center; align-items: center;}
.re_step06 .re_s06in {width: 100%; max-width: 1680px; display: flex; justify-content: space-around; align-items: flex-start; gap: 5rem;}
.re_step06 .re_s06in .in06a {width: 100%; max-width: 60rem; display: flex; flex-direction: column; gap: 3rem; color: #fff; align-self: stretch;}
.re_step06 .re_s06in .in06a a { margin-top: auto; }
.re_step06 .re_s06in .in06a span {font-size: 4.8rem; font-weight: 700; line-height: 160%; font-family: var(--entype2);}
.re_step06 .re_s06in .in06b {width: 100%;}
@media (max-width: 1920px) {
    .re_step06 {padding: 10rem;}
}
@media (max-width: 1240px) {
    .re_step06 {padding:10rem 4rem;}
    .re_step06 .re_s06in {flex-direction: column; gap: 4rem;}
}
@media (max-width: 960px) {  
    .re_step06 .re_s06in .in06a span {line-height: 120%;}
}
.re_step07 {width: 100%; padding: 10rem 14rem; display: flex; justify-content: center; align-items: center;background: #242424;}
.re_step07 .re_s07in {width: 100%; max-width: 1680px; display: flex; justify-content: center; align-items: center; gap: 5rem;}
.re_step07 .re_s07in .in07a {width: 100%; max-width: 60rem; display: flex; flex-direction: column; gap: 3rem; color: #fff; align-self: stretch;}
.re_step07 .re_s07in .in07a a { margin-top: auto; }
.re_step07 .re_s07in .in07a span {font-size: 4.8rem; font-weight: 700; line-height: 140%; font-family: var(--entype2);}
.re_step07 .re_s07in .in07a span p {color: #fad804;}
.re_step07 .re_s07in .in07b {width: 100%; display: flex; justify-content: center; align-items: center; gap: 2.4rem; perspective: 1200px; perspective-origin: 60% 50%; padding: 2rem;}
.re_step07 .re_s07in .in07b .in07card {flex: 0 0 28rem; transform-style: preserve-3d; transition: transform .2s ease, box-shadow .3s ease; border-radius: 0.8rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.35); will-change: transform; --tiltY: 0deg; --tx: 0px; --tz: 0; --baseRY: -18deg; --baseRX: 1deg; --baseRZ: 0deg; transform: translateX(var(--tx)) translateZ(var(--tz)) rotateY(var(--baseRY)) rotateX(var(--baseRX)) rotateZ(var(--baseRZ)) rotateY(var(--tiltY));} 
.re_step07 .re_s07in .in07b .in07card img {display: block; width: 100%; height: 100%; object-fit: cover;}

/* 3D staggered tilt layout (desktop) */
.re_step07 .re_s07in .in07b .in07card:nth-child(1) { --tx: -34px; --tz: 0; z-index: 4; }
.re_step07 .re_s07in .in07b .in07card:nth-child(2) { --tx: -34px; --tz: 0; z-index: 3; }
.re_step07 .re_s07in .in07b .in07card:nth-child(3) { --tx: -34px; --tz: 0; z-index: 2; }
.re_step07 .re_s07in .in07b .in07card:nth-child(4) { --tx: -34px; --tz: 0; z-index: 1; }

/* Optional hover pop for depth */
.re_step07 .re_s07in .in07b .in07card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.5); }

/* Responsive: stack without tilt on small screens */
@media (max-width: 1920px) {
    .re_step07 {padding: 10rem;}
}
@media (max-width: 1640px) {
    .re_step07 .re_s07in .in07b .in07card {
        flex: 0 0 18rem;    
    }
}
@media (max-width: 1240px) {
    .re_step07 {padding:10rem 4rem;}
    .re_step07 .re_s07in {flex-direction: column; gap: 4rem;}
}
@media (max-width: 960px) {
  .re_step07 .re_s07in .in07b {gap: 1.2rem; perspective: none; padding: 0; }
  .re_step07 .re_s07in .in07b .in07card { flex: 1 1 auto; transform: none !important; translate: none; rotate: none;}
  .re_step07 .re_s07in .in07a span {line-height: 120%;}
}
@media (max-width: 440px) {
    .re_step07 .re_s07in .in07b {flex-direction: column;}
}
.re_step08 {width: 100%; padding: 10rem 14rem; display: flex; justify-content: center; align-items: center; background: #ffffff;}
.re_step08 .re_s08in {width: 100%; max-width: 1680px; display: flex; justify-content: space-around; align-items: flex-start; gap: 5rem;}
.re_step08 .re_s08in .in08a {width: 100%; max-width: 60rem; display: flex; flex-direction: column; gap: 3rem; color: #333; align-self: stretch;}
.re_step08 .re_s08in .in08a a { margin-top: auto; }
.re_step08 .re_s08in .in08a span {font-size: 4.8rem; font-weight: 700; line-height: 160%; font-family: var(--entype2);}
.re_step08 .re_s08in .in08b {width: 100%;}
@media (max-width: 1920px) {
    .re_step08 {padding: 10rem;}
}
@media (max-width: 1240px) {
    .re_step08 {padding:10rem 4rem;}
    .re_step08 .re_s08in {flex-direction: column; gap: 4rem;}
}
@media (max-width: 960px) {  
    .re_step08 .re_s08in .in08a span {line-height: 120%;}
}
.re_step09 {width: 100%; padding: 8rem 14rem; background: #ECEBE8; overflow: hidden;}
.re_step09 .mre_ptn_wp {display: flex; justify-content: flex-start; align-items: center; gap: 10rem; flex-wrap: nowrap; width: max-content; will-change: transform; animation: marquee-ltr 25s linear infinite;}
.re_step09 .mre_ptn_wp img {width: 100%; max-width: 20rem;}
@media (max-width: 1920px) {
    .re_step09 {padding: 10rem;}
}
@media (max-width: 1240px) {
    .re_step09 {padding:7rem 4rem;}
    .re_step09 .mre_ptn_wp {gap: 6rem;}
	.re_step09 .mre_ptn_wp img {max-width: 16rem;}
}

.re_bt_ty1 {width: 100%; max-width: 28rem; font-size: 2rem; color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; position: relative;}
.re_bt_ty1:hover {color: #fff;}
.re_bt_ty1::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #fff; transition: width .35s ease; }
.re_bt_ty1:hover::after, .re_bt_ty1:focus-visible::after { width: 100%; }
.re_bt_ty1 img {filter: brightness(0) invert(1);}

.re_bt_ty2 {width: 100%; max-width: 28rem; font-size: 2rem; color: #333; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; position: relative;}
.re_bt_ty2:hover {color: #333;}
.re_bt_ty2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #333; transition: width .35s ease; }
.re_bt_ty2:hover::after, .re_bt_ty1:focus-visible::after { width: 100%; }
.re_bt_ty2 img {filter: brightness(0) invert(0);}

.re_footer {background: #000;  padding: 8rem 14rem; display: flex; justify-content: space-between; align-items: center;}
.re_footer .re_ftin {width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 2rem;}
.re_footer .re_ftin .re_ftxt1 {font-size: 2rem; color: #fff; line-height: 180%; font-weight: 500;}
.re_footer .re_ftin .re_ftxt1 p {margin-bottom: 2rem;}
.re_footer .re_ftin .re_ftxt2 {font-size: 1.4rem; color: #9c9c9c; line-height: 100%; display: flex; justify-content: flex-start; align-items: center; gap: 1rem;}
.re_footer .re_ftin .re_ftxt2 a {color: #9c9c9c; background: #181818; border-radius: 3rem; padding: 0.4rem 1.4rem;}
.re_footer .re_ftin .re_ftxt2 a:hover {background: #525252; color: #f7f7f7;}
.re_footer .re_ftrt {width: 100%; max-width: 300px; display: flex; justify-content: center; align-items: flex-end; flex-direction: column; color: #fff;}
.re_footer .re_ftrt span {font-size: 2rem; font-weight: 600;}
.re_footer .re_ftrt p {font-size: 4rem; font-weight: 600; font-family: var(--entype2); line-height: 140%;}
.re_footer .re_ftrt .fsns {margin-top: 2rem; display: flex; justify-content: center; align-items: center; gap: 2rem;}
.re_footer .re_ftrt .fsns a {width: 30px; display: inline-block;}
.re_footer .re_ftrt .fsns a img {width: 100%; filter: brightness(0) invert(1);}
.re_footer .re_ftrt .fsns a:hover img {filter: invert(72%) sepia(0%) saturate(75%) hue-rotate(191deg) brightness(88%) contrast(73%);}
@media (max-width: 1920px) {
    .re_footer {padding: 10rem;}    
}
@media (max-width: 1240px) {
    .re_footer {padding: 10rem 4rem;}    
}
@media (max-width: 906px) {
    .re_footer {flex-direction: column; gap: 5rem;}
    .re_footer .re_ftin {max-width: 100%;}
    .re_footer .re_ftrt {max-width: 100%; align-items: flex-start;}
}

/* sub renewal css */
.re_sara1_01 {
    width: 100%;
    height: 100vh;
    background: url(/pages/images/sub_bg01.jpg) no-repeat center center;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.re_sara1_01::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/pages/images/sub_bg01.jpg) no-repeat center center;
    background-size: cover;
    transform-origin: center;
    transform: scale(1);
    z-index: 0;
}

.re_sara1_01.is-zooming::after {
    animation: reSaraBgZoom 10s ease-in-out forwards;
}

.re_sara1_01::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* 50% black overlay */
    pointer-events: none;
    z-index: 1;
}

@keyframes reSaraBgZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.4);
    }
}
.re_sara1_01 .re_stx_ti1 {position: absolute; left: 20rem; top: 50%; z-index: 10; transform: translate(0, -50%);}
.re_sara1_01 .re_stx_ti1 p {font-size: 3.8rem; color: #fff; font-weight: 500; line-height: 140%; margin-right: 2rem;}
.re_sara1_01 .re_stx_ti1 p b {font-size: 7.4rem; margin-right: 2rem; font-weight: 800;}
.re_sara1_01 .re_stx_ti1 i {font-size: 2.4rem; color: #fff; font-weight: 500; line-height: 140%; margin-top: 2rem; display: block;}

.re_sara1_02 {padding: 10rem;}
.re_sara1_02>div {width: 100%; font-size: 2.8rem; color: #333; font-weight: 600; line-height: 180%;}
.re_sara1_02>div:nth-child(4) {margin-top: 3rem;}

[data-text-seq] {
    position: relative;
}

[data-text-seq] > * {
    opacity: 0;
    transform: translate3d(5rem, 0, 0);
    will-change: opacity, transform;
}

[data-text-seq].is-text-active > * {
    animation: reTextSeqSlide var(--text-seq-duration, 0.9s) ease-out forwards;
    animation-delay: var(--text-seq-delay, 0s);
}

@keyframes reTextSeqSlide {
    from {
        opacity: 0;
        transform: translate3d(5rem, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.re_sara1_03 {width: 100%; height: 100vh; padding: 0 10rem; display: flex; justify-content: center; align-items: center; gap: 10rem;}
.re_sara1_03 .re_s03a {width: 100%; max-width: 66rem; height: 100%; background: url(/pages/images/sub_bg02.jpg) no-repeat center center; background-size: cover;}
.re_sara1_03 .re_s03b {width: 100%; max-width: 80rem; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 3rem;}
.re_sara1_03 .re_s03b .re_s03b1 {font-size: 2.8rem; color: #333; font-weight: 600; line-height: 160%;}
.re_sara1_03 .re_s03b .re_s03b2 {font-size: 2rem; color: #555; font-weight: 500; line-height: 160%;}
.re_sara1_03 .re_s03b .re_s03b2>div:nth-child(2),
.re_sara1_03 .re_s03b .re_s03b2>div:nth-child(3),
.re_sara1_03 .re_s03b .re_s03b2>div:nth-child(4) {margin-top: 2rem;}
.re_sara1_04 {width: 100%; height: 100vh; padding: 10rem;}
.re_sara1_04 .re_s04in {width: 100%; height: 100%; background: url(/pages/images/sub_bg03.jpg) no-repeat center center; background-size: cover;}

@media (max-width: 1000px) {
    .re_sara1_01 .re_stx_ti1 {left: 10rem;}
    .re_sara1_03 {flex-direction: column; gap: 5rem;}
    .re_sara1_03 .re_s03a {max-width: 100%;}
}
@media (max-width: 600px) {
    .re_sara1_01 .re_stx_ti1 {width: 80%; left: 50%; transform: translate(-50%, -50%);}
    .re_sara1_01 .re_stx_ti1 p {display: flex; flex-direction: column; gap: 2rem;}
    .re_sara1_02 {padding: 10rem 4rem;}
    .re_sara1_02>div {font-size: 2.4rem; line-height: 160%;}
    .re_sara1_03 {height: auto; padding: 0 4rem;}
    .re_sara1_03 .re_s03a {height: 50rem;}   
    .re_sara1_03 .re_s03b .re_s03b1 {font-size: 2.4rem;}
    .re_sara1_04 {padding: 10rem 4rem;}
}

.re_sara1_05 {padding: 10rem;} 
.org-chart {margin: 0 auto; position: relative;}
.org-root { display:flex; justify-content:center; margin-bottom:40px; position:relative; }
.org-root::after { content:''; position:absolute; bottom:-40px; left:50%; transform:translateX(-50%); width:1px; height:40px; background:#9e9e9e; }
.node { border-radius:4px; padding:14px 28px; font-weight:600; text-align:center; border:1px solid #d9d9d9; background:#fff; box-shadow:0 8px 16px rgba(0,0,0,0.08); }
.node-root { background:#c8322b; border:none; color:#fff; font-size:1.8rem; box-shadow:0 12px 24px rgba(200,50,43,0.3); }
.org-sections { display:flex; flex-wrap:wrap; justify-content:center; gap:60px; position:relative; padding-top:40px; }
.org-sections::before { content:''; position:absolute; top:0; left:24.2%; right:24.2%; height:1px; background:#9e9e9e; }
.org-section { flex:1 1 560px; position:relative; padding-top:30px; }
.org-section::before { content:''; position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:1px; height:70px; background:#9e9e9e; }
.section-header { position:relative; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; padding-bottom:26px; }
.section-header::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:1px; height:26px; background:#9e9e9e; }
.section-title { background:#4a4a4a; color:#fff; padding:12px 36px; border-radius:4px; letter-spacing:-0.02em; font-weight:600; min-width:202px; }
.section-subtitle { background:#666; color:#fff; padding:10px 24px; border-radius:4px; font-size:1.8rem; }
.team-grid { 
    display:flex; 
    justify-content:center; 
    gap:24px; 
    margin-top:0; 
    position:relative; 
    padding-top:26px; 
    /* default gap for the horizontal connector line */
    --team-line-gap: 11.5%;
}
.team-grid::before { content:''; position:absolute; top:0; left:var(--team-line-gap); right:var(--team-line-gap); height:1px; background:#9e9e9e; }
.org-section.design .team-grid { --team-line-gap: 11.5%; }      /* 4개의 그룹 기준 */
.org-section.management .team-grid { --team-line-gap: 15.7%; } /* 3개의 그룹 기준 */
.team { flex:1 1 200px; background:#fafafa; border:1px solid #dcdcdc; border-radius:6px; padding:18px 14px; box-shadow:0 8px 18px rgba(0,0,0,0.06); position:relative; }
.team::before { content:''; position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:1px; height:26px; background:#9e9e9e; }
.team-name { background:#f0f0f0; border:1px solid #d2d2d2; border-radius:4px; text-align:center; font-weight:600; padding:8px 4px; margin-bottom:12px; }
.member-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.member-list li { border:1px solid #d9d9d9; border-radius:4px; padding:9px 6px; background:#fff; font-size:1.6rem; text-align:center; }

@media (max-width: 1328px) {
    .org-sections::before {display: none;} 
}

@media (max-width: 1024px) {
    .org-root {margin-bottom: 30px;}    
}

@media (max-width: 680px) {
    .re_sara1_05 {padding: 10rem 4rem;}
    .team-grid {flex-direction: column;}
    .org-sections {gap: 40px; padding-top: 0;}
    .team {flex: 1 1 100%;}
    .org-section::before,
    .section-header::after,
    .team-grid::before {display: none;}
    .section-header {padding-bottom: 0;}
    .org-root {margin-bottom: 0;}
}

.re_sara2_01 {width: 100%; height: auto; padding: 10rem; background: url(/pages/images/sub_bg04.jpg) no-repeat center center; background-size: cover; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4rem;}
.re_sara2_01 .re_s02in_wp {display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; width: 100%; max-width: 1680px;}
.re_sara2_01 .re_s02in_wp .re_s02in {padding: 3rem; background-color: rgba(255, 255, 255, 0.12); border-radius: 2rem; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 2rem; position: relative; overflow: hidden;}
.re_sara2_01 .re_s02in_wp .re_s02in::after {content: ""; position: absolute; top: -150%; left: -60%; width: 150%; height: 320%; background: linear-gradient(117deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0) 100%); transform: translate(-160%, -160%) rotate(20deg); opacity: 0; animation: reGlassDiagonalShine 8s ease-in-out infinite; pointer-events: none;}
.re_sara2_01 .re_s02in_wp .re_s02in:nth-child(1)::after {animation-delay: 0s;}
.re_sara2_01 .re_s02in_wp .re_s02in:nth-child(2)::after {animation-delay: 1s;}
.re_sara2_01 .re_s02in_wp .re_s02in:nth-child(3)::after {animation-delay: 2s;}
.re_sara2_01 .re_s02in_wp .re_s02in:nth-child(4)::after {animation-delay: 3s;}
.re_sara2_01 .re_s02in_wp .re_s02in:nth-child(5)::after {animation-delay: 4s;}
.re_sara2_01 .re_s02in_wp .re_s02in:nth-child(6)::after {animation-delay: 5s;}
@keyframes reGlassDiagonalShine {
    0% {transform: translate(-160%, -160%) rotate(20deg); opacity: 0;}
    5% {opacity: 0.8;}
    15% {transform: translate(160%, 160%) rotate(20deg); opacity: 0;}
    100% {transform: translate(160%, 160%) rotate(20deg); opacity: 0;}
}
.re_sara2_01 .re_s02in_wp .re_s02in .s02_icon {background-color: #fff; width: 8rem; height: 8rem; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.re_sara2_01 .re_s02in_wp .re_s02in .s02_icon img {width: 5rem;}
.re_sara2_01 .re_s02in_wp .re_s02in p {font-size: 2.8rem; color: #fff; font-weight: 600; line-height: 140%;}
.re_sara2_01 .re_s02in_wp .re_s02in span {font-size: 1.8rem; color: #ddd; font-weight: 400; line-height: 140%;}

.re_subtitle1 {width: 100%; max-width: 1680px; margin-top: 10rem; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem;}
.re_subtitle1 p {font-size: 3.2rem; color: #fff; font-weight: 600; line-height: 140%;}
.re_subtitle1 p span {position: relative; display: inline-block; padding: 0 0.6rem; z-index: 0; transition: color 0.4s ease;}
.re_subtitle1 p span::after {content: ""; position: absolute; inset: 0; background-color: var(--point-color-1); transform-origin: left center; transform: scaleX(0); transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); z-index: -1;}
.re_subtitle1 p span.is-highlighted {color: #fff;}
.re_subtitle1 p span.is-highlighted::after {transform: scaleX(1);}
.re_subtitle1 b {font-size: 1.8rem; color: #fff; line-height: 140%; font-weight: 400;}
.stbk {color: #333!important;}

@media (max-width: 1280px) {    
    .re_sara2_01 .re_s02in_wp {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 1000px) {
    .re_sara2_01 {padding: 10rem 4rem;}
}
@media (max-width: 680px) {
    .re_sara2_01 .re_s02in_wp {grid-template-columns: repeat(1, 1fr);}
}

.re_sara3_01 {width: 100%; height: auto; padding: 10rem; background: url(/pages/images/sub_bg05.jpg) no-repeat center center; background-size: cover; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4rem;}
.re_sara3_01 .re_s03in_wp {display: grid; grid-template-columns: repeat(5, 1fr); gap: 4rem; width: 100%; max-width: 1680px;}
.re_sara3_01 .re_s03in_wp .re_s03in {cursor: pointer;}
.re_sara3_01 .re_s03in_wp .re_s03in img {width: 100%; display: block; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);}
body.re-lightbox-open {overflow: hidden;}
.re_s03lightbox {position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.88); display: flex; justify-content: center; align-items: center; padding: 4rem; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 1200;}
.re_s03lightbox.is-open {opacity: 1; pointer-events: auto;}
.re_s03lightbox__inner {position: relative; width: min(90vw, 960px); display: flex; justify-content: center; align-items: center; gap: 2rem;}
.re_s03lightbox__img {width: 100%; border-radius: 2rem; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 300px;}
.re_s03lightbox__img img {max-width: 100%; max-height: 80vh; object-fit: contain;}
.re_s03lightbox__nav {width: 5rem; height: 5rem; border: 0; background-color: rgba(0, 0, 0, 0.4); color: #fff; font-size: 0; position: relative; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease;}
.re_s03lightbox__nav::after {content: ""; position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: none;}
.re_s03lightbox__nav--prev::before,
.re_s03lightbox__nav--next::before {content: ""; width: 1.6rem; height: 1.6rem; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(225deg);}
.re_s03lightbox__nav--next::before {transform: translate(-50%, -50%) rotate(45deg);}
.re_s03lightbox__nav:hover {background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.8);}
.re_s03lightbox__close {position: absolute; top: -4rem; right: -4rem; width: 3rem; height: 3rem; border: none; background: transparent; cursor: pointer;}
.re_s03lightbox__close::before,
.re_s03lightbox__close::after {content: ""; position: absolute; top: 50%; left: 50%; width: 3.4rem; height: 2px; background: rgba(255, 255, 255, 0.8);}
.re_s03lightbox__close::before {transform: translate(-50%, -50%) rotate(45deg);}
.re_s03lightbox__close::after {transform: translate(-50%, -50%) rotate(-45deg);}

@media (max-width: 1280px) {
    .re_sara3_01 .re_s03in_wp {grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 1000px) {
    .re_sara3_01 {padding: 10rem 4rem;}
    .re_sara3_01 .re_s03in_wp {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 680px) {
    .re_sara3_01 .re_s03in_wp {grid-template-columns: repeat(2, 1fr); gap: 2rem;}
}

.re_sara4_01 {width: 100%; height: auto; padding: 10rem; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4rem;}
.re_sara4_01 .re_s04in_wp {display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; width: 100%; max-width: 1680px;}
.re_sara4_01 .re_s04in_wp .re_s04in {position: relative;}
.re_sara4_01 .re_s04in_wp .re_s04in img {width: 100%; display: block; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);}
.re_sara4_01 .re_s04in_wp .re_s04in .re_s04in_sbj {position: absolute; left: 0; bottom: 0; width: 100%; padding: 2rem; background: transparent linear-gradient(180deg, #00000000 0%, #00000099 100%) 0% 0% no-repeat padding-box; display: flex; flex-direction: column; gap: 1rem;}
.re_sara4_01 .re_s04in_wp .re_s04in .re_s04in_sbj p {font-size: 2rem; color: #fff; font-weight: 400; line-height: 140%;}
.re_sara4_01 .re_s04in_wp .re_s04in .re_s04in_sbj span {font-size: 2.4rem; color: #fff; font-weight: 600; line-height: 140%;}

@media (max-width: 1280px) {
    .re_sara4_01 .re_s04in_wp {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 1000px) {
    .re_sara4_01 {padding: 10rem 4rem;}
    .re_sara4_01 .re_s04in_wp {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 680px) {
    .re_sara4_01 .re_s04in_wp {grid-template-columns: repeat(1, 1fr); gap: 2rem;}
}

.re_sara5_01 {width: 100%; height: auto; padding: 10rem; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 4rem;}
.re_sara5_01 .re_s05in_wp {width: 100%; max-width: 1680px;}
.re_sara5_01 .re_s05in_wp .re_s05in_txt {display: flex; flex-direction: column; margin: 4rem 0;}
.re_sara5_01 .re_s05in_wp .re_s05in_txt>div {width: 100%; font-size: 2.8rem; color: #333; font-weight: 600; line-height: 180%; opacity: 0; transform: translateX(80px); transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.9s ease; transition-delay: var(--re-s05-delay, 0s); will-change: transform, opacity;}
.re_sara5_01 .re_s05in_wp .re_s05in_txt>div.is-reveal-active {opacity: 1; transform: translateX(0);}
.re_sara5_01 .re_s05in_wp .re_s05in {}
.re_sara5_01 .re_s05sr_wp {width: 100%; max-width: 1680px;}
.re_s05sr_wp {width: 100%; margin-top: 6rem; display: flex; flex-direction: column; gap: 6rem;}
.re_s05sr_tabs {display: inline-flex; flex-wrap: wrap; gap: 1.2rem;}
.re_s05sr_tabs button {padding: 1.2rem 3.2rem; border: 1px solid #d4d4d4; background-color: #fdfdfd; font-size: 1.8rem; font-weight: 600; color: #6f6f6f; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.re_s05sr_tabs button.is-active {background-color: #111; color: #fff; border-color: #111;}
.re_s05sr_board {display: flex; width: 100%; gap: 4rem;}
.re_s05sr_sidebar {width: 28rem; border-right: 1px solid rgba(0, 0, 0, 0.08); padding-right: 3rem;}
.re_s05sr_branch-title {font-size: 2.6rem; font-weight: 700; color: #111; margin-bottom: 2.4rem;}
.re_s05sr_floor-list {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem;}
.re_s05sr_floor-list li {margin: 0; padding: 0;}
.re_s05sr_floor-list button {width: 100%; border: none; background: none; text-align: left; padding: 0.8rem 0; border-bottom: 1px solid #d9d9d9; display: flex; flex-direction: column; gap: 0.2rem; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; color: #8b8b8b;}
.re_s05sr_floor-list button .floor {font-size: 2.4rem; font-weight: 700; letter-spacing: 0.08em; font-family: var(--entype2);}
.re_s05sr_floor-list button .label {font-size: 2rem; font-weight: 400; line-height: 140%; margin-bottom: 2rem;}
.re_s05sr_floor-list button.is-active {color: #111; border-bottom-color: #333;}
.re_s05sr_gallery {flex: 1; display: flex; flex-direction: column; gap: 2.4rem; min-width: 0;}
.re_s05sr_floor-meta {display: flex; align-items: flex-end; gap: 1.6rem; padding-bottom: 1rem;}
.re_s05sr_floor-label {font-size: 2.6rem; font-weight: 700; color: #000; font-family: var(--entype2);}
.re_s05sr_floor-name {font-size: 2.6rem; font-weight: 700; color: #111;}
.re_s05sr_slider {position: relative; width: 100%; overflow: hidden; min-width: 0;}
.re_s05sr_slider-viewport {overflow: hidden; width: 100%; min-width: 0; touch-action: pan-y;}
.re_s05sr_slider-track {display: flex; transition: transform 0.6s ease; gap: 2rem;}
.re_s05sr_slide {flex: 0 0 auto; position: relative; cursor: pointer;}
.re_s05sr_slide img {width: 100%; height: 100%; display: block; object-fit: cover; min-height: 340px;}
.re_s05sr_slide.is-empty {display: flex; align-items: center; justify-content: center; background-color: #f4f4f4; min-height: 260px;}
.re_s05sr_slide.is-empty p {font-size: 1.6rem; color: #777;}
.re_s05sr_slider-nav {position: absolute; top: 50%; transform: translateY(-50%); width: 4.8rem; height: 4.8rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); background-color: rgba(0, 0, 0, 0.35); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 5;}
.re_s05sr_slider-nav img {width: 2.6rem; height: 2.6rem; pointer-events: none; filter: brightness(0) invert(1);}
.re_s05sr_slider-nav.is-prev {left: 1.2rem;}
.re_s05sr_slider-nav.is-next {right: 1.2rem;}
.re_s05sr_slider-nav:disabled {opacity: 0.35; cursor: not-allowed;}
.re_s05sr_slider-nav:hover {background-color: rgba(0, 0, 0, 0.5);}

@media (max-width: 1200px) {
    .re_s05sr_sidebar {width: 24rem;}
}
@media (max-width: 1000px) {
    .re_sara5_01 {padding: 10rem 4rem;}
    .re_s05sr_board {flex-direction: column; gap: 2rem;}
    .re_s05sr_sidebar {width: 100%; border-right: none; padding-right: 0; padding-bottom: 2rem;}
    .re_s05sr_floor-list {flex-direction: row; gap: 0; justify-content: space-between;}
    .re_s05sr_floor-list button {border-left: none; border-bottom: 1px solid #d9d9d9; flex: 1 1 calc(33.33% - 1rem); padding: 1rem 0;}
    .re_s05sr_floor-list button.is-active {border-bottom: 2px solid #333;}
    .re_s05sr_slider {border-radius: 1.2rem;}
    .re_s05sr_slider-viewport {border-radius: 1.2rem;}
    .re_s05sr_slider-nav {top: auto; bottom: 1.6rem; transform: none;}
    .re_s05sr_slider-nav.is-prev {left: 1.6rem;}
    .re_s05sr_slider-nav.is-next {right: 1.6rem;}
    .re_s05sr_floor-list button .label {display: none;}
    .re_s05sr_floor-list li {width: 100%;}
    .re_s05sr_floor-label {display: none;}
}
@media (max-width: 640px) {
    .re_s05sr_tabs button {flex: 1 1 calc(50% - 0.6rem); text-align: center;}
    .re_s05sr_floor-list button {flex: 1 1 calc(50% - 1rem);}
    .re_s05sr_floor-name {font-size: 2.4rem;}
    .re_s05sr_slider-nav {width: 4rem; height: 4rem;}
    .re_sara5_01 .re_s05in_wp .re_s05in_txt {margin: 0;}
    .re_sara5_01 .re_s05in_wp .re_s05in_txt>div {font-size: 2.4rem;}
    .re_s05sr_wp {margin-top: 1rem;}
}

.re_s05sr_lightbox {position: fixed; inset: 0; background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 1500;}
.re_s05sr_lightbox.is-open {opacity: 1; pointer-events: auto;}
.re_s05sr_lightbox__inner {position: relative; width: min(1200px, 90vw); max-height: 90vh; display: flex; justify-content: center; align-items: center;}
.re_s05sr_lightbox__img {width: 100%; background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; touch-action: pan-y;}
.re_s05sr_lightbox__img img {max-width: 100%; max-height: 90vh; object-fit: cover;}
.re_s05sr_lightbox__close {position: absolute; top: 1rem; right: 1rem; width: 3.6rem; height: 3.6rem; border: none; background: transparent; cursor: pointer;}
.re_s05sr_lightbox__close::before,
.re_s05sr_lightbox__close::after {content: ''; position: absolute; inset: 50% auto auto 50%; width: 3.6rem; height: 2px; background: rgba(255,255,255,0.9);}
.re_s05sr_lightbox__close::before {transform: translate(-50%, -50%) rotate(45deg);}
.re_s05sr_lightbox__close::after {transform: translate(-50%, -50%) rotate(-45deg);}
.re_s05sr_lightbox__nav.is-prev {left: 2rem;}
.re_s05sr_lightbox__nav.is-next {right: 2rem;}