*{margin: 0; padding: 0; position: relative; word-break:keep-all;}
html{overflow-y: scroll; font-size: 14px;}
html.on{overflow: hidden;}
body{
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-style: normal;
  overflow-x: hidden;
}
.inner{width: 1400px; margin: 0 auto; padding:0;}
section{width: 100%; overflow: hidden;}
li{list-style: none;}
i{font-style: normal;}
a{text-decoration: none;}

.pc-br {
    /* 이 요소가 PC에서 <br>처럼 작동하게 합니다. */
    display: block; 
}
.menu{display: none;}
.main_menu{position: fixed; top:0; left: 0; right: 0; width: 100%; min-width: 1300px; height:100px; color: #fff; transition: .3s; z-index: 9999; display: flex; justify-content: center;
transition: transform 0.4 ease-in-out, background 0.3;/*부드러운 움직임*/ background: rgba(0,0,0,0.1);/* 기본 투명도 */}


/* =========================
   HEADER NEW
========================= */
.main_menu{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  min-width: 1300px;
  height: 100px;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 260px 0 320px;
  background: transparent;
  transition: background .25s ease, box-shadow .25s ease;
}

/* 기본 hover 또는 오픈 시 상단도 흰색 */
.main_menu.is-open,
.main_menu.is-scrolled{
  background: #fff;
}

.main_menu.is-scrolled{
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* 드롭다운 전체 영역 배경 */
.main_menu::after{
  content: "";
  position: absolute;
  left: 0;
  top: 100px;
  width: 100%;
  height: 0;
  background: #F8F8F8;
  opacity: 0;
  pointer-events: none;
  transition: height .25s ease, opacity .25s ease;
  z-index: 0;
}

/* hover 시 전체 드롭다운 배경 오픈 */
.main_menu.is-open::after{
  height: 280px; /* 필요하면 280까지 늘려도 됨 */
  opacity: 1;
}

.main_menu > ul{
  display: flex;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 100px;
  overflow: visible;
  z-index: 2;
}

.main_menu > ul > li{
  width: 220px;
  position: relative;
  z-index: 2;
}

/* hover한 칼럼 전체 배경 */
.main_menu.is-open > ul > li:hover{
  background: #fff;
  height: 380px; /* 100 + dropdown 영역까지 포함 */
}

/* 1depth */
.main_menu > ul > li > a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  transition: color .25s ease;
}

/* 오픈 또는 스크롤 시 1depth 검정 */
.main_menu.is-open > ul > li > a,
.main_menu.is-scrolled > ul > li > a{
  color: #111111;
}

/* 2depth 기본 */
.main_menu > ul > li > ul{
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  padding: 24px 0 28px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 2;
}

/* 헤더 오픈 시 전체 submenu 모두 노출 */
.main_menu.is-open > ul > li > ul{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* hover한 칼럼만 상단 파란선 */
.main_menu.is-open > ul > li:hover > ul::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #195495;
}

/* 2depth text */
.main_menu > ul > li > ul > li > a{
  display: block;
  padding: 10px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: #555555;
  transition: color .2s ease;
}

.main_menu > ul > li > ul > li > a:hover{
  color: #111111;
}

/* 로고 */
.logo{
  position: absolute;
  left: 90px;
  top: 0;
  width: 250px;
  height: 100px;
  display: flex;
  align-items: center;
  z-index: 3;
}

.logo > div{
  display: none !important;
}

.logo > a{
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 60%;
  display: block;
  background: url('/images/logo.png') no-repeat left center;
  background-size: contain;
  transition: background-image .25s ease;
}

/* hover/open/scroll 시 컬러 로고 */
.main_menu.is-open .logo > a,
.main_menu.is-scrolled .logo > a{
  background-image: url('/images/logo_on.png');
}

/* 전화번호 */
.header-phone{
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-decoration: none;
  color: #ffffff;
  font-family: "Pretendard", sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 2vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.phone-line{
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-phone .phone-ico{
  width: clamp(22px, 2vw, 34px);
  height: auto;
  display: block;
}

/* hover/open/scroll 시 전화번호 검정 */
.main_menu.is-open ~ .header-phone .phone-txt,
.main_menu.is-scrolled ~ .header-phone .phone-txt{
  color: #111111;
}

.main_menu.is-open ~ .header-phone .phone-ico,
.main_menu.is-scrolled ~ .header-phone .phone-ico{
  content: url('/images/phone_on.png');
}

/* 전화번호 */
.header-phone{
  position: fixed;
  top: 30px;
  right: 50px;
  z-index: 10000;
  font-family: "Pretendard", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.header-phone .phone-line{
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
}

.header-phone .phone-ico{
  width: 20px;
  height: auto;
  display: block;
}

/* 오픈/스크롤 시 전화번호 검정 */
.main_menu.is-open ~ .header-phone .phone-line,
.main_menu.is-scrolled ~ .header-phone .phone-line{
  color: #111111;
}

.main_menu.is-open ~ .header-phone .phone-ico,
.main_menu.is-scrolled ~ .header-phone .phone-ico{
  content: url('/images/phone_on.png');
}


.main_menu:hover .logo>div:nth-of-type(1){background-image: url(/images/logo.png) no-repeat;}

.main_menu{
  box-sizing: border-box;
  padding: 0 260px 0 320px; /* 오른쪽(연락처) / 왼쪽(로고) 공간 확보 */
}
.main_menu > ul{
  min-width: 0;   /* 기존 min-width:800px 영향 줄이기 */
  flex: 1;        /* 가운데 영역이 남는 폭 안에서만 쓰게 */
  justify-content: center;
}

/* ✅ 모바일 메뉴(.menu)에서도 로고 배경이 보이게 */
.menu .logo > div:nth-of-type(1){
  background: url(/images/logo.png) no-repeat;
  background-size: contain;
  background-position: left center;
}
.main_menu .walking-fix li:hover a {
    border-bottom: 1px #ccc solid !important;
}


/* 기본: PC에서는 숨김 */
.quick{
    display: none;
}

.quick{position: fixed; bottom: 50px; right: 0px; z-index: 9999;}
.quick ul{width: 170px; background: rgba(255,255,255,0.04);}
.quick ul li{display: flex; align-items: center; justify-content: center; text-align: center; color: #ffffff; font-size: 1rem; font-weight: 300; line-height: 1.1; word-spacing: -.1rem; width: 100%; height: 50px; background: #2b2b2b; cursor: pointer; border-right: 1px solid rgba(255,255,255,0.10);} 
.quick ul li:nth-of-type(1){border-top-left-radius: 20px;}
.quick ul li:nth-of-type(1):before{position: relative; content: ""; width: 20px; height: 20px; background: url(../images/quick_1.png) center / cover no-repeat;  margin-right: 12px;}

/* 입회 안내 (2번째 항목)에 하단 라운딩을 적용하고, 이전의 display: none; 설정을 제거합니다. */
.quick ul li:nth-of-type(2){background: #5f5f5f;} 
.quick ul li:nth-of-type(2):before{position: relative; content: ""; width: 20px; height: 20px; background: url(../images/quick_2.png) center / cover no-repeat;  margin-right: 12px;}
.quick ul li a{position: absolute; left: 0; top: 0; width: 100%; height:100%;}
/* 1. 하단 라운딩을 마지막 자식에 지정합니다. */
.quick ul li:last-child{ 
    border-bottom-left-radius: 20px; /* 입회 안내에 하단 라운딩 적용 */
    display: flex; /* 숨겨짐을 해제하고 기본 디스플레이 설정 유지 */
}
.quick ul li.quick-call::after,
.quick ul li.quick-reg::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.18);
}

.quick ul li > a span{
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

/* ✅ PC 기본 로고(hover 전) */
.main_menu .logo > div:nth-of-type(1){
  background-size: 75% auto;
  background-position: left center;
  /* 기존에 top으로 위치 잡고 싶으면 유지 */
  top:20px;
  }
/* 로고 박스 위치 조정 */
.logo {
    position: absolute; 
    left: 90px; 
    top: 20px; 
    display: flex; 
    height: 100px; /* 헤더 높이와 일치 */
    align-items: center; 
    cursor: pointer;
    width: 250px; /* 로고 가로 영역 확보 */
}

/* 겹침 방지: div 배경 제거 */
.logo > div {
    display: none !important;
}

/* 실제 로고 (a 태그 하나로만 제어) */
.logo > a {
    position: absolute; 
    top: 0; 
    left: 0;
    width: 85%; 
    height: 50%; 
    display: block; 
    /* 기본 로고 설정 */
    background: url('/images/logo.png') no-repeat left center;
    background-size: contain; 
    transition: background 0.3s ease;
}

/* 마우스 오버 시 컬러 로고로 변경 */
.main_menu:hover .logo > a {
    background-image: url('/images/logo_on.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain; /* 크기 유지 필수 */
}



/* .login > div:nth-of-type(1):before{position: relative; content: ""; display: block; width: 50px; height: 50px; background: #fff; margin: 0 auto; margin-bottom: 5px;}
.login > div:nth-of-type(2):before{position: relative; content: ""; display: block; width: 50px; height: 50px; background: #fff; margin: 0 auto; margin-bottom: 5px;} */


/* 상단 오른쪽 전화번호 (GNB 영역) */
.header-phone{
  position: absolute;
  top: 30px;      /* 기존 버튼과 동일 위치 */
  right: 50px;
  z-index: 99999;

  display: flex;
  flex-direction: column;     /* 🔥 핵심 */
  align-items: flex-start;    /* 왼쪽 정렬 */
  gap: 0;

  text-decoration: none;
  color: #ffffff;

  /* Pretendard ExtraBold 느낌 */
  font-family: "Pretendard", sans-serif;
  font-weight: 800;

  font-size: clamp(1.8rem, 2vw, 1.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  position: fixed;
}

.phone-line{
  display: flex;
  align-items: center;
  gap: 12px;    /* 기존 header-phone gap 역할 */
}

.header-phone .phone-ico{
  width: clamp(22px, 2.0vw, 34px);
  height: auto;
  display: block;
}

.header-phone a{
  color:#FFFFFF;
}

.main_menu:hover ~ .header-phone .phone-txt,
.main_menu:hover .header-phone {
    color: #000 !important;
}

.main_menu:hover ~ .header-phone .phone-ico,
.main_menu:hover .header-phone .phone-ico {
    content: url('/images/phone_on.png'); /* ✅ CSS에서 이미지 강제 교체 */
}

.footer{color: #ffffff6e; font-size: 1.1rem; background: #1e1e1e; font-weight: 300;}
.footer .inner{padding: 50px 40px;}
.footer .inner > div{display: flex; justify-content: space-between; align-items: center;}
.footer .inner > div > div:nth-of-type(2) p{font-size: 1.8rem; font-weight: 700; line-height: 1.05; color: #fff; margin-right: 10px; top: -27px;}
.footer .inner > div > div:nth-of-type(2) p span{font-size: 1.1rem; display: block; font-weight: 300; margin-bottom:10px;}
.footer .inner > p{font-size: 2rem; font-weight: 500; letter-spacing: -.05rem; color: #fff; margin-bottom: 30px; border-bottom: 1px solid #ffffff42; padding-bottom: 30px;}
.footer .inner > ul{display: flex; width: 100%; margin-bottom: 50px;}
.footer .inner > ul li{padding: 0 30px; border-right: 1px solid #fff; text-align: center; cursor: pointer;}
.footer .inner > ul li:first-child{padding-left: 0; padding-right: 30px;}
.footer .inner > ul li:last-child{border: 0;}

.footer .inner > div:nth-of-type(1){margin-bottom: 70px; color: #fff; display: none;}
.footer .inner > div:nth-of-type(1)>p{font-size: 2rem; font-weight: 600;}
.footer .inner > div:nth-of-type(2)>div:nth-of-type(1)>p{font-weight: 200; font-size: 1rem; color: #FFF; line-height: 1.8;}
.footer .inner > div:nth-of-type(2)>div:nth-of-type(1)>p:nth-of-type(1){font-size: 1.1rem; color: #f7f7f7; margin-bottom: 12px; line-height: 1.4;}
/* 안내문 영역만 어둡게 */
.footer .inner > div:nth-of-type(2) > div:nth-of-type(1) > p:nth-of-type(n+5):not(:last-of-type){
  color: rgba(255,255,255,0.38);
}

/* 마지막 안내문과 copyright 간격 */
.footer .inner > div:nth-of-type(2) > div:nth-of-type(1) > p:nth-last-of-type(2){
  margin-bottom: 18px;
}
/* 푸터 로고 이미지 */
.footer-logo{
  width: 190px;      /* ← 로고 가로 크기 (취향에 따라 조절) */
  height: auto;
  display: block;
  margin-right: 10px;
  margin-bottom: 20px;
}


.footer input{width: 22%; height: 50px; background: transparent; border: 0; border-bottom: solid 1px #ffffffab; font-size: 1.4rem; color: #fff;}
.footer .contact{width: 220px;}
.footer .checkbox{display: flex; align-items: center;}
.footer .checkbox input{width: 35px; height: 20px;}
.footer .contact_btn{width: 180px; height: 50px; font-size: 1.2rem; font-weight: 500; cursor: pointer; border-radius: 15px; background: #1b4229; display: flex; align-items: center; justify-content: center;}

.footer .fs{position: absolute; overflow: hidden; color: #ffffffcb; transition: .5s; width: 175px; height: 30px; letter-spacing: .05rem; padding-top: 10px; cursor: pointer; top: 40px; font-size: 1rem; border: 1px solid #818181; text-align: center;}
.footer .fs:hover{padding-bottom: 40px;}
.footer .fs li{margin-top: 15px; font-weight: 400; background: #fff; width: 100%; height: 40px;}
.footer .fs li a{color: rgb(53, 53, 53);  top: 8px;}

.call-link {
    color: inherit;
    text-decoration: none;
}

.yourbiz-link {
    /* 텍스트 색상을 흰색으로 지정 */
    color: #fff !important ; 
    /* 링크 밑줄도 제거하고 싶다면 추가 */
    text-decoration: none; 
    font-weight: 600;
}

/* 마우스 오버 시 색상이 변하는 것을 방지하고 싶다면 추가 */
.yourbiz-link:hover, 
.yourbiz-link:visited,
.yourbiz-link:active {
    color: #fff !important;
}

[data-aos=fade-up] {transform: translate3d(0,50px,0)}
[data-aos=fade-left] {transform: translate3d(50px,0,0)}
[data-aos=fade-right] {transform: translate3d(-50px,0,0)}

.img_tx{position: absolute; right: 10px; bottom: 10px; color: #fff; opacity: .8; font-size: .9rem; font-weight: 300; height: auto !important;}
.sub2_1 .img_tx{right: 20px; bottom: 20px;}
.sub2_3 .img_tx{right: 20px; bottom: 20px;}


.menu{z-index: 99999; transition: .5s; position: absolute; top: 0; width: 100%;}
.menu .m_menu2.on{width: 80%;}
.menu .m_menu2>div{width: 100%; font-size: 1.25rem; margin-top: 26%;}
.menu .m_menu2>div>div{min-width: 250px; line-height: 3.1; text-align: right; padding-right: 8%; border-bottom: 1px solid rgba(255,255,255,0.14); color: #FFFFFF;}
.menu .m_menu2>div>div a{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.menu .m_menu{position: absolute; top: 57px; right: 60px; cursor: pointer; display: none;}

.menu .m_menu.on{position: fixed;}
.menu .m_menu.on span{transform: rotate(45deg); background: #fff;}

.menu .m_menu2{position: fixed; right: 0; top: 0; width: 0%; height: 100vh; background: #123A66; overflow: hidden; overflow-y: scroll; transition: .5s;}
.menu .m_menu{width: 50px; height: 50px; top: 35px; right: 20px; display: block;}

.menu .menu_content{width: 100%; display: none; background: #F8F8F8;}
.menu .menu_content li{background: #F8F8F8; line-height: 3.5; font-size: 1.1rem; color:#111111; min-width: 250px; text-align: right; padding-right: 10%; border-bottom: 1px solid #EEEEEE;}
.menu .menu_content li a{position: absolute; display: block; width: 100%; height: 100%; top: 0; color:#111111;}
.menu .m_menu_list {  background:#123A66; color:#fff;}
.menu .m_menu_list.open{background: #195495; color: #fff;}
.menu .m_menu_list::before{position: absolute; display: block; content: ">"; color: #fff; left: 10%; font-weight: 600; transition: .5s;}
.menu .m_menu_list.open::before{color: #fff; transform: rotate(90deg);}


/* ✅ 내가 누른 세부메뉴만 */
.menu .menu_content li.active{
  background:#EAF2FA;
}

.menu .menu_content li.active a{
  color: #195495;
  font-weight: 600;
}

/* =========================
   햄버거 버튼 (3줄 → X 전환, 최신 방식)
========================= */

/* 기본 3줄 */
.menu .m_menu span{
  display: block;
  width: 34px;
  height: 3px;
  background: #ffffff;
  margin-bottom: 6px;
  transition: transform .35s ease, opacity .25s ease;
}

/* 마지막 줄 여백 제거 */
.menu .m_menu span:last-child{
  margin-bottom: 0;
}

/* 메뉴 열렸을 때 (X 모양) */
.menu .m_menu.on span:nth-of-type(1){
  transform: translateY(9px) rotate(45deg);
}

.menu .m_menu.on span:nth-of-type(2){
  opacity: 0;
}

.menu .m_menu.on span:nth-of-type(3){
  transform: translateY(-9px) rotate(-45deg);
}

/* floating-register 기본은 숨김 (모바일 잔상 방지) */
.floating-register{
  display: none;
}