/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');


html {
  margin: 0;
  padding: 0;
  overflow-y: auto;  
  overflow-x: hidden;
  height: 100%;
  width: 100%;
  font-family: 'Spoqa Han Sans Neo', 'sans-serif'
}

body {
  margin: 0;
  padding: 0; 
  height: auto;
  width: 100%;
  position: relative;
  visibility: visible; 
}

body::before {
    content: "<1920 index.html>";
    display: none !important;
}

.wrapper {
  
  position: relative;
  margin: 0 auto;
  transform-origin: top center;
}


.loading-text {
    opacity: 0; 
}


#container, a, button, input {
  cursor: auto !important;
  color: #000;
}


html {
  touch-action: pan-x pan-y;
}




/* =================== FOOTER =================== */
#footer{
  width:100%;
  margin:0 auto;
  background:#000;             
  padding: 38px 0 108px;
  box-sizing:border-box;
  display: flex;
  align-content: center;
  align-items: center;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 16px;
  text-align:center;
  font-size:13px;
  line-height:1.8;
  color:#f3f3f3;
  letter-spacing: -0.4px;
}

.footer-inner p{
  margin:0;
}

.footer-inner .higlight{
  font-weight: 600 !important;
}

.ft-line1{
  margin-bottom:2px;
}

.ft-line2{
  margin-bottom:4px;
}

.ft-copy{
  color:#9a9a9a;
}

@media (max-width: 768px){
  .footer-inner{
    font-size:11px;
    line-height:1.6;
  }
}



.ft-fee-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;        /* 기존 글자 스타일 그대로 */
  color: inherit;
  cursor: pointer;
}


/* ===== QUICK INQUIRY BAR 251112===== */
.qbar{
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  z-index: 1200;
  background: #eed1af;
  box-shadow: -1px -7px 16px 0px rgb(0 0 0 / 7%);
  transition: all .35s ease;
}
.qbar::after{
  content:""; position:absolute; left:0; right:0; bottom:100%;
  height: 30px; pointer-events:none;
  background: radial-gradient(50% 80% at 50% 150%, rgba(0,0,0,.28), transparent 70%);
}
.qbar__inner{
  width: min(1380px, 94%);
  margin:0 auto;
  display:flex;
  align-items:center;
  height: 72px;
  justify-content: center;
  gap: 0; /* 내부 요소 간격 제거 */
  height: 72px; /* 높이 유지 */
  padding: 0; /* 패딩 제거 */
}

.qbar__action-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #1c1c1c;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.1px;
    width: 25%; /* 4개 버튼이 동일 너비로 나눠 갖도록 */
    height: 72px;
    transition: opacity .15s ease;
    gap: 10px;
}
.qbar__action-item:hover{ opacity: .8; }

/* 아이콘 스타일 정의 (배경 이미지 사용을 가정) */
.qbar__action-icon{
    display: block;
    width: 30px;
    height: 30px;
    /* margin-bottom: 4px; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 모바일 환경에서는 폰트 아이콘 크기 조정 */
@media (max-width: 768px){
    .qbar__action-item{
        font-size: 13px;
        height: 60px; /* 모바일 높이 조정 */
    }
    .qbar__action-icon{
        width: 24px;
        height: 24px;
        margin-bottom: 2px;
    }
    .qbar__action-icon::before{
        font-size: 24px;
    }
    /* body 패딩도 모바일 높이에 맞게 조정 */
    body.has-qbar{ padding-bottom: 60px; }
}

.qbar__actions--fixed{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1470px; /* 컨테이너 최대 너비 지정 */
    /* gap: 230px; */
}

.qbar__brand{
  position: relative;
  display: inline-block;
  width: var(--brand-w, auto);
  white-space: nowrap;
  color:#fff;
  font-weight:500;
  letter-spacing:-.01em;
  font-size: 21px;
}
.qbar__brand-text{
  display: inline-block;
  transform: translateY(0); opacity:1;
  transition: opacity .22s ease, transform .22s ease;
}
.qbar__brand-text.is-out{ opacity:0; transform: translateY(-16%); }
.qbar__brand-text.is-in{  opacity:1; transform: translateY(0); }

.qbar__brand-text i {
  margin-right: 6px;
  font-size: 0.9em;
  vertical-align: middle;
  color: #fff; 
}

/* ===== 폼 기본 (PC 기준) ===== */
.qbar__form{
  display:flex;
  align-items:center;
  gap:12px;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
  width:100%;
}
.qbar__input{
  height: 42px;
  border:0;
  border-radius: 21px;
  background:#fff;
  color:#0E1A2B;
  padding: 0 16px;
  font: 600 14px/42px 'Noto Sans KR', sans-serif;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) inset;
  width: 100%;
  flex-grow: 1;
}
.qbar__input::placeholder{ color:#8FA0B3; font-weight:500; }

.qbar__agree{
  color:#fff;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.qbar__agree input{
  width:16px;
  height:16px;
  accent-color:#111;
}
.qbar__agree-more{
  color:#fff;
  opacity:.8;
  text-decoration:none;
  background:none;
  border:0;
  cursor:pointer;
}
.qbar__agree-more:hover{ text-decoration:underline; }

.qbar__submit-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.qbar__submit{
  height: 42px;
  padding: 0 20px;
  border:0;
  border-radius: 21px;
  background:#111;
  color:#fff;
  font-weight:800;
  white-space:nowrap;
  cursor:pointer;
  font-size:18px;
  transition: transform .15s ease, opacity .15s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family: 'NanumSquareNeo', sans-serif;
}
.qbar__submit:hover{ transform: translateY(-1px); }
.qbar__submit:active{ transform: translateY(0); opacity:.9; }
.qbar__submit.is-loading{ pointer-events:none; opacity:.85; }
.qbar__submit.is-success{ background:#0a7f3f; }

body.has-qbar{ padding-bottom: 84px; }

@media (max-width: 1024px){
  .qbar__inner{
    height:auto;
    padding:10px 0;
    align-items:flex-start;
  }
  .qbar__form{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 42px;
  }
  .qbar__agree{
    grid-column: 1 / -1;
  }
  .qbar__submit{
    grid-column: 1 / -1;
    width:100%;
  }
  body.has-qbar{ padding-bottom: 110px; }
}

.qbar__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  transition:transform .25s ease;
}
.qbar__badge img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.qbar__badge:hover{ transform:scale(1.05); }

.qbar__agreeBtn{
  height:42px;
  border-radius:21px;
  border:0;
  padding:0 16px;
  font:600 14px/42px 'Noto Sans KR',sans-serif;
  background:#fff;
  color:#0E1A2B;
  box-shadow:0 6px 16px rgba(0,0,0,.08) inset;
  cursor:pointer;
  white-space:nowrap;
  transition:background .25s ease,color .25s ease,transform .15s ease;
}
.qbar__agreeBtn:hover{ transform:translateY(-1px); }
.qbar__agreeBtn:active{ transform:translateY(0); }

.qbar__agreeBtn.is-on{
  background: #2086c8;
  color:#fff;
  box-shadow:none;
}

.qbar__agree-more{
  color:#fff;
  opacity:.9;
  background:none;
  border:0;
  cursor:pointer;
}
.qbar__agree-more:hover{ text-decoration:underline; }

.vh{
  position:absolute!important;
  width:1px; height:1px; margin:-1px;
  clip:rect(0 0 0 0); overflow:hidden;
  border:0; padding:0;
}

.qbar.qbar--medical .qbar__agreeBtn{
  position: relative;
  border: 1.5px solid transparent;
}
.qbar.qbar--medical .qbar__agreeBtn.is-on{
  background: #2086c8 !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
.qbar.qbar--medical .qbar__agreeBtn.is-on::after,
.qbar .qbar__agreeBtn.is-on::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:2px solid #fff;
  border-radius:inherit;
  pointer-events:none;
}

.qbar.hide-at-bottom{
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: all .35s ease;
}

.qbar__toggle-mobile{
  display:none;
}
.qbar__close-mobile{
  display:none;
}

/* ============  (≤900px) ============ */
@media (max-width: 900px){
  #quickInquiryBar .qbar__agree-more {
    display: none !important;
  }
  /* 모바일에서 동의 / 빠른상담 버튼 가로 길이 맞추기 */
  #quickInquiryBar .qbar__agreeBtn,
  #quickInquiryBar .qbar__submit {
    width: 100%;
    justify-content: center;  
  }
  #quickInquiryBar .qbar__input {
    padding-left: 20px !important;   
  }
  #quickInquiryBar .qbar__input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .qbar__inner{
    width: min(1270px, 92%);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 10px 0;
    align-items: center;
    justify-content: center;
  }

  .qbar__brand{
    font-size: 20px;
  }

  .qbar__toggle-mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
    padding:0 16px;
    height:42px;
    border-radius:66px;
    border:0;
    background:#111;
    color:#fff;
    font-weight:600;
    font-size:17px;
    cursor:pointer;
    width: 100%;
  }


  .qbar__form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .qbar__input {
    flex: 0 0 100%;
    max-width: none;
    padding: 0 16px !important;
  }

  .qbar__agreeBtn {
    flex: 0 0 calc(50% - 4px);
  }

  .qbar__submit-wrap {
    flex: 0 0 calc(50% - 4px);
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .qbar__submit {
    width: auto;
    min-width: 0;
    padding: 0 18px;
    font-size: 16px;
  }

  .qbar__agree-more {
    flex: 0 0 100%;
    text-align: left;
    font-size: 12px;
    margin-top: 2px;
  }

  .qbar__submit-wrap .qbar__badge {
    display: none;
  }
  .qbar.qbar--mobile-closed .qbar__form{
    display:none;
  }

  .qbar.qbar--mobile-open .qbar__brand,
  .qbar.qbar--mobile-open .qbar__toggle-mobile{
    display:none;
  }
  .qbar.qbar--mobile-open .qbar__form{
    display: flex;
    align-content: center;
    align-items: center;
    padding: 20px 0;
    justify-content: center;
  }

  .qbar.qbar--mobile-open .qbar__close-mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    right: 2px;
    top: 10px;
    /* width:28px; */
    /* height:28px; */
    border-radius:50%;
    border:0;
    background: #2086c800;
    color:#fff;
    font-size: 28px;
    line-height:1;
    cursor:pointer;
  }
  .qbar__close-mobile:active{
    opacity:.8;
  }
}

/* ============ PC 전용 (≥901px) ============ */
@media (min-width: 901px){
  .qbar__form{
    display:flex !important;
  }
  .qbar__toggle-mobile,
  .qbar__close-mobile{
    display:none !important;
  }
}


/* ===== HEADER ===== */
.mhd{position:sticky; top:0; left:0; right:0; z-index:900; background:#fff;}
.mhd__inner{width: min(1360px,94%);margin:0 auto;height: 92px;display:flex;align-items:center;justify-content:space-between;}
.mhd__logo img{height: 47px;display:block;}
.mhd__nav a{margin-left:28px;font-size: 18px;color:#111;text-decoration:none;font-weight: 420;}
.mhd__nav a:hover{opacity:.75}

/* ===== HEADER : MOBILE TOGGLE ===== */

.mhd__toggle{
  display:none;              
  width:32px;
  height:32px;
  margin-left:auto;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
}

.mhd__toggle span{
  display:block;
  height:2px;
  margin:6px 0;
  background:#111;
  border-radius:1px;
  transition:transform .2s ease, opacity .2s ease;
}

@media (max-width: 900px){

  .mhd__inner{
    height:60px;
  }

  .mhd__toggle{
    display:block;
  }

  .mhd__nav{
    position:fixed;
    left:0;
    right:0;
    top:60px;                 
    background:#fff;
    padding:16px 20px 24px;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    z-index:899;
  }

  .mhd__nav a{
    margin:10px 0;
    font-size:15px;
  }

  .mhd.mhd--open .mhd__nav{
    display:flex;
  }

  .mhd.mhd--open .mhd__toggle span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }
  .mhd.mhd--open .mhd__toggle span:nth-child(2){
    opacity:0;
  }
  .mhd.mhd--open .mhd__toggle span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }
}


@media(max-width:360px){
  .qbar__brand {
    font-size: 16px;
  }
  .qbar__toggle-mobile{
    font-size:14px;
  }
}


/* ============================================
   🔧 삼성(안드로이드)에서 가로 스크롤 방지용
   width:100vw → 100%로 강제 변환
=============================================== */
@media (max-width: 900px){

  [style*="100vw"],
  .hero,
  .c1,
  .c2,
  .c3,
  .c4,
  .c5,
  .c6,
  .c7,
  .c8,
  .c9,
  .c10,
  .qbar,
  #quickInquiryBar {
      width: 100% !important;
      max-width: 100% !important;
  }

  /* 패딩이 있는 100vw 요소 대비 */
  section[id^="c"]{
      overflow-x: hidden;
  }
}


/* style-rem.css의 .qbar__action-icon 정의 부분 */

.qbar__action-icon{
    display: block;
    width: 36px; /* 아이콘 너비 */
    height: 38px; /* 아이콘 높이 */
    /* margin-bottom: 4px; */
    
    /* 1. 개별 아이콘 파일을 사용하는 경우 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 개별 아이콘 경로 지정 */
.qbar__icon--call {
    background-image: url('../img/qbar/01.png');
}
.qbar__icon--naver-reserve {
    background-image: url('../img/qbar/02.png');
}
.qbar__icon--kakao {
    background-image: url('../img/qbar/03.png');
}
.qbar__icon--naver-blog {
    background-image: url('../img/qbar/04.png');
}

.qbar__icon--naver-review {
    background-image: url('../img/qbar/05.png');
}


/* 기본: 데스크탑에서는 줄바꿈 안됨 */
.mobile-br {
  display: none;
}

/* 모바일 전용 줄바꿈 */
@media screen and (max-width: 576px) {
  .mobile-br {
    display: block;
    width: 100%;
    height: 0;
  }
}

/* 모바일 전용 줄바꿈 */
@media screen and (max-width: 480px) {
  .mobile-br2 {
    display: block;
    width: 100%;
    height: 0;
  }
}


/* 모바일 전용 줄바꿈 */
@media screen and (max-width: 768px) {
  .mobile-br3 {
    display: block;
    width: 100%;
    height: 0;
  }
}

@media screen and (max-width: 400px) {
  .mobile-br4 {
    display: block;
    width: 100%;
    height: auto; 
  }
}


/* =========================================
   🔻 모바일에서는 qbar 아이콘만 보이도록
   (텍스트는 숨기고 아이콘만 노출)
   break-point는 필요에 따라 조절 가능
========================================= */
@media (max-width: 768px) {

  /* qbar 고정형 액션 영역 */
  .qbar__actions--fixed {
    justify-content: space-between;
    display: flex;
    align-content: space-between;
    gap: 0px;
  }

  /* 각 버튼 안 텍스트 숨기고 아이콘만 노출 */
  .qbar__actions--fixed .qbar__action-item {
    font-size: 9px;          /* 텍스트 안 보이게 */
    gap: 0;                /* 아이콘 옆 여백 제거 */
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
  }

  /* 아이콘은 그대로 보이도록 별도 사이즈 유지 */
  .qbar__actions--fixed .qbar__action-icon {
    width: 27px;
    height: 38px;
    /* 필요하면 여기서만 살짝 크기 줄이기 */
  }
  .mhd__logo img{height: 20px;}
}


/* ===================== HERO 텍스트 전환 보정 ===================== */

/* ===== HERO 텍스트 전환 보정 ===== */

/* 기본 상태: 항상 보이게 */
.hero__title,
.hero__desc{
  opacity: 1;
  transition: opacity .35s ease;
}

/* 전환 중: 텍스트는 완전히 숨김 */
.hero.is-switching .hero__title,
.hero.is-switching .hero__desc{
  opacity: 0;
}

/* 전환 완료: 새 텍스트가 다시 페이드인 */
.hero.is-switched .hero__title,
.hero.is-switched .hero__desc{
  opacity: 1;
}

.hero.is-switching .hero__title,
.hero.is-switching .hero__desc{
  opacity: 0;
  visibility: hidden;
}

.hero.is-switched .hero__title,
.hero.is-switched .hero__desc{
  opacity: 1;
  visibility: visible;
}


/* =========================================
   [모바일 전용] 가로 스크롤 최소화
   레이아웃 폭은 건드리지 않고, 넘치는 부분만 잘라냄
   ========================================= */
   @media (max-width: 767px) {

    /* 1) 페이지 전체에서 가로 스크롤 숨기기 (안전망) */

    /* 2) 문제되는 섹션들에서만 넘치는 부분 잘라내기 */
    .c1,
    .c4,
    .c5,
    .c6 {
      position: relative;
      overflow-x: hidden;   /* 세로 스크롤은 그대로, 가로만 숨김 */
    }
  

  }