#hd_wrapper { position:fixed; left:0; right:0; top:0px; flex-direction: column; align-items: flex-start; justify-content:center;  }
/* #hd_wrapper.active { border-bottom:2px solid #ddd; } */
#hd_wrapper .top_gnb,
#hd_wrapper .top_gnb.top { 
  flex-direction: column; 
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  justify-content: flex-start;
}

#hd_wrapper .top_gnb li { 
  width:100%; 
  text-align: left; 
  font-size: 16px;
  border: none;
  margin: 0;
  padding: 0;
  /* width: 200px; */
}

#hd_wrapper .top_gnb li a {
  display: block;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  line-height: 1.4;
  font-weight: normal;
}

#top_gnb_wrap { 
    background:#fff; 
    width:100%; 
    position:fixed; 
    left:-100%; 
    top:0;
    height:100vh; 
    transition: all .3s;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden; /* 전체 컨테이너는 overflow hidden */
}

#top_gnb_wrap.active { 
    left:0;
}

/* 메뉴 스크롤 컨테이너 */
#top_gnb_wrap .top_gnb,
#top_gnb_wrap .top_gnb.top {
    display: flex;
    flex-direction: column;
    padding: 0px 0 0 0; /* 로고 영역만큼 상단 패딩 */
    margin: 0;
    justify-content: flex-start;
    align-items: stretch;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 스크롤 시에도 폰트 크기 유지 */
#top_gnb_wrap.active .top_gnb li,
#top_gnb_wrap.active .top_gnb li a {
    font-size: 16px !important;
    line-height: 1.4 !important;
    transform: none !important;
    transition: none !important;
}

/* 로고를 상단에 고정 */
/* 모바일 메뉴의 로고 숨기기 */
li.mobile-logo {
    display: none !important;
}

/* 햄버거 메뉴가 열렸을 때 로고 위치 조정 */
#hd_wrapper .logo.active {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 15px 20px;
    background: #fff;
    z-index: 100;
    border-bottom: 1px solid #eee;
}

#hd_wrapper .logo.active {
    background: #fff;
}

/* active 상태일 때는 JavaScript에서 색상 처리 */

#top_gnb_wrap.active #hd_wrapper .logo a {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    text-decoration: none;
    padding-right: 50px;
}

#top_gnb_wrap.active #hd_wrapper .logo a b {
    color: #000;
}

#top_gnb_wrap.active #hd_wrapper .logo a span {
    color: #fff;
    background: darkslateblue;
    padding: 3px;
    transform: rotate(10deg);
    margin-left: 5px;
    display: inline-block;
}

#top_gnb_wrap.active #hd_wrapper .logo .desc {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #666;
}

/* 햄버거 메뉴 열렸을 때 상단 패딩 추가 */
#top_gnb_wrap.active {
    padding-top: 70px;
}

/* #top_gnb_wrap.index { top:-21px;} */


/* #wrapper.wrapper_index { margin:0px 0 0 0;} */

/* #wrapper { margin:85px 0 0 0;} */


/* .logo .desc { display:block;  } */

#hd_wrapper .top_gnb.active,
#hd_wrapper .nav_icon.active { display:flex; }

#hd_wrapper .nav_icon { 
  flex-direction: row;
  display:none; 
  margin:12px 0;
  justify-content: center;

}

.index_maintenance > div { flex-direction: column; }
/* .index_maintenance .qa { width:85%; margin:0 auto; } */
.index_maintenance > div > div { width: 100%;}
.index_maintenance .right { margin-top:30px; border-top:1px solid #fff; padding-top:30px;}

.index_maintenance ul { width: 100%;}


#hd_wrapper .nav_icon li:first-child { background-color: #ffe500;  }
#hd_wrapper .nav_icon li:first-child em { color:#333;}


.nav_icon li { 
  text-align: left; 
  padding: 0 10px; 
  margin: 0 10px;
  border-radius: 10px;
  background: #00c73c;  
  flex: 0 0 150px;
  max-width: 150px;
}


.nav_icon li em { font-style: normal; vertical-align: middle; color:#fff; font-size:0.875rem; }

#top_gnb_wrap .m_nav_icon_title {
  
  font-size:1.25rem; 
  margin:30px 0; 
  position: relative; 
  display: block; 
  text-align:center;
}
#top_gnb_wrap .m_nav_icon_title:after { 
  content: ''; 
  position: absolute; 
  width:30px; 
  height:2px; 
  background:orange; 
  left:50%; 
  transform:translateX(-50%);
  bottom: -10px; 
 }

#hd_wrapper .hd_call { 
  display:flex; 
  position: absolute; 
  align-items:center;
  justify-content:center;  

  right: 60px; 
  top: 17px; 
  /* background: #eee;  */
  border-radius: 50%; 
  height: 35px;  
  width: 35px; 
}

#hd_wrapper .hd_call img { width:30px;}

/* 로고 스타일은 상단에서 통합 관리 */

.top_gnb > li > a { color:#000 !important; }

#wrapper .main_slide { height:300px;}

.main_slide > div > h2 { font-size: 5vw;}
.main_slide > div > h2 p { font-size: 4.5vw;}
.main_slide > div > h2 em { font-size: 6vw;}


.c_info_wrap { justify-content: initial; padding:0 16px; }

.c_info_wrap > div { 
  width:100%; 
  border:1px solid #ddd;
  border-radius:10px;
  /* max-width: initial; */  
  /* box-shadow: 9px 11px 20px rgba(0, 0, 0, 0.5); */
  /* box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.2); */
  margin-left:0;
}

#home_kind li img { height: auto ; }

.c_info_wrapx > div button {   font-family: 'Noto Sans KR',sans-serif; font-size: .875rem;  padding:10px 50px; border-radius:10px;}

.c_info_wrapx > div button.info_btn1 { 
  /* border: 2px solid #; */
  /* background:#ce6d39; */
  background:#519d9e;
  color: #fff;
}

.c_info_wrapx > div button.info_btn2 { 
  /* border: 2px solid #; */
  background:#ce6d39;
  /* background:#519d9e; */
  color: #fff;
}

.c_info_wrapx > div button.info_btn3 { 
  /* border: 2px solid #; */
  background:#6aafe6;
  /* background:#519d9e; */
  color: #fff;
}
.c_info_wrapx > div ~ div { margin:50px 0 0px 0; }


/* 고객센터 */
.contact-info {
    flex-direction: column;
    gap: 1rem;
}


/* .logo a span { display:inline; padding:0 0 0 10px;} */


#home_kind li { width: calc((100% / 2) - 10px);}

/* side_fix none */
/* #side_fix { display:none; } */

/* index 메인배너 모바일 버전 */
.stats-container {
  flex-direction: column;
  gap: 30px;
}

.features-container {
  flex-direction: column;
  gap: 15px;
}

.service-features {
  margin-top: 15px;
}

.service-features li {
  font-size: 0.95rem;
}



.main_banner > div { width:calc((100% / 2) - 5px);  }

.telnum { display:none; }

.menuToggle {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;  
    justify-content: center;
    align-items: center;
    z-index: 102;
  }
  
  .menuToggle::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-10px);
    box-shadow: 0 10px rgba(255, 255, 255, 0.8);
    transition: 0.5s;
  }
  
  .menuToggle::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(10px);
    transition: 0.5s;
  }
  
  .menuToggle.active::before {
    transform: translateY(0px) rotate(45deg);
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 rgba(255, 255, 255, 0.8);
  }
  
  .menuToggle.active::after {
    transform: translateY(0px) rotate(-45deg);
    background: rgba(0, 0, 0, 0.8);
  }


  .common_top_img { height: 300px;}
  .common_top_img .desc {
    width: 90%;    
  }

  .common_top_img .desc h4 {
    font-size:20px;
  }

  .common_top_img .desc h3 {
    font-size:44px;
  }
  .common_top_img .desc h3 span {
    font-size: 60px;
    


  }