/* 기존 CSS들... */


/* ===================== */
/* 여기부터 반응형 CSS 추가 */
/* ===================== */

@media (max-width: 900px) {
   ...
}

/* =========================
   KAPS Mobile Responsive Patch
   for XE 1.4.x / CROM iXE2 layout
   Paste into: Layout Admin > CSS
   ========================= */

/* 0) 기본: 박스가 화면을 넘치지 않게 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 이미지/배너가 화면에 맞게 */
img, .slideShow img, .iXEvisualBox img {
  max-width: 100%;
  height: auto;
}

/* 혹시 테이블이 많은 구형 게시물 대비 */
table {
  max-width: 100%;
}
.iXEvisualBox, .iXEcontentBody, .iXEcontentBox {
  overflow-x: hidden;
}

/* =========================================
   1) 모바일 구간
   ========================================= */
@media (max-width: 900px) {

  /* 전체 컨테이너 폭을 화면에 맞춤 */
  #rootContainer,
  .iXEcontainer,
  .iXEbody,
  .menuLineBg,
  #menuBox,
  #footBox,
  .iXEcontentBox {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 상단 상자/정렬이 깨질 때 대비 */
  .topBox,
  .topMenuBox,
  .loginBox {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 로고 영역: 배경사진은 그대로 두되, 모바일에선 높이 자동/축소 */
  #logoBox {
    height: auto !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
    text-align: right;
  }

  /* 로고 이미지(우측 KAPS 로고) 크기 조정 */
  #logoBox img {
    width: 170px !important;   /* 필요하면 150~220 사이로 조절 */
    height: auto !important;
    margin: 0 !important;
  }

  /* 로고 좌/우 공지(미니공지) 영역은 모바일에서 공간 차지하면 숨김 */
  .logoLeftImg, .logoRightImg,
  .logoLeft, .logoRight {
    display: none !important;
  }

  /* 메뉴 줄: 한 줄 고정 메뉴는 모바일에서 줄바꿈 허용 */
  .ixeMenu {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 8px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
  }

  /* 홈 버튼 포함 메뉴 아이템이 너무 커지지 않게 */
  .ixeMenu > li {
    float: none !important;
    display: block !important;
  }

  /* 메뉴 링크를 “버튼”처럼 */
  .ixeMenu > li > div > a {
    display: block !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 10px !important;
    background: #fff !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  /* 2차 메뉴(드롭다운)는 모바일에서 hover가 잘 안 먹어서
     기본적으로 숨기고, 필요하면 아래 “확장형” 방식으로 바꾸는 게 좋아.
     일단은 기존대로 두되, 화면 밖으로 튀지 않게만 제한. */
  .subMenu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .subMenu li a {
    display: block !important;
    padding: 8px 10px !important;
  }

  /* 검색 영역: 있으면 아래로 내려가게 */
  .searchBox {
    width: 100% !important;
    box-sizing: border-box;
    padding: 8px 10px !important;
  }
  .searchForm input.inputTypeText {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important; /* 모바일에서 확대 방지 */
  }

  /* 메인 배너: 폭 100% */
  .slideShow {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }
  .slideShow .slides,
  .slideShow .slide {
    width: 100% !important;
  }

  /* 본문 영역: 좌측 메뉴가 있는 sub 레이아웃은 1열로 */
  .leftNavBox {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
  }
  .iXEcontentBody {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
  }

  /* 서브메뉴 박스 링크 터치 영역 확장 */
  .subMenuBox li a {
    display: block !important;
    padding: 10px 8px !important;
    font-size: 14px !important;
  }

  /* 푸터도 1열 */
  .footLeft, .footRight {
    float: none !important;
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 12px !important;
  }

  /* 맨 아래 TOP 버튼/앵커 너무 크면 */
  .iXEbtnTop {
    right: 10px !important;
  }
}

/* =========================================
   2) 더 작은 폰(600 이하)에서 추가 다이어트
   ========================================= */
@media (max-width: 600px) {
  .ixeMenu > li > div > a {
    font-size: 13px !important;
    padding: 7px 9px !important;
  }
  #logoBox img {
    width: 150px !important;
  }
}

/* =========================================
   3) 초소형(420 이하)에서 로고/메뉴 압축
   ========================================= */
@media (max-width: 420px) {
  #logoBox {
    padding: 8px 10px !important;
  }
  #logoBox img {
    width: 135px !important;
  }
  .ixeMenu {
    gap: 5px 6px !important;
  }
  .ixeMenu > li > div > a {
    padding: 6px 8px !important;
  }
}

/* ===== 모바일 상단 정리 ===== */
@media (max-width: 900px) {

  /* 상단 배경이미지 영역 정리 */
  #logoBox {
    background-size: cover !important;
    background-position: center center !important;
    height: 160px !important;
    text-align: center !important;
    padding-top: 20px !important;
  }

  /* 로고 가운데 정렬 */
  #logoBox img {
    display: block !important;
    margin: 0 auto !important;
  }

  /* 상단 메뉴 중앙 정렬 */
  .ixeMenu {
    justify-content: center !important;
  }

  /* SNS 아이콘 간격 넓히기 */
  .snsIcon img,
  .topIcon img,
  .iXEvisualBox img {
    margin: 6px !important;
  }

  /* 카카오, 유튜브, 블로그 아이콘 정렬 */
  .iXEvisualBox ul,
  .iXEvisualBox .iconBox {
    text-align: center !important;
  }

}

/* 기본 PC용 */
#logoBox.mainLogo{
  background: url('http://www.koreananimals.or.kr/images/front14-top.jpg') no-repeat;
  height: 312px;
  text-align: right;
  background-size: cover;
}

/* 모바일용 */
@media (max-width: 900px){

  #logoBox.mainLogo{
    height: 160px !important;
    text-align: center !important;
    padding: 16px 10px 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  #logoBox.mainLogo img{
    width: 180px !important;
    margin: 0 auto !important;
    display: block !important;
  }

}

/* 모바일: 2차 메뉴 항상 표시 */
@media (max-width: 900px){
  #menuBox .ixeMenu > li > div{ 
    display:block !important;
    position:static !important;
    height:auto !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    margin:6px 0 14px !important;
    padding:0 !important;
  }

  /* 2차 메뉴 링크 스타일(원하면 조정) */
  #menuBox .ixeMenu > li > div a{
    display:block !important;
    padding:10px 0 !important;
    text-align:center !important;
    font-size:14px !important;
  }
}
/* 메뉴를 항상 최상단에 보이게 */
#menuBox,
.ixeMenu,
.menuLeft {
  position: relative;
  z-index: 9999;
}

/* 메뉴 아래 위젯이 위로 올라오지 않게 */
#ixEbody,
.iXEcontentBox,
.snsWrap {
  position: relative;
  z-index: 1;
}

/* ===== 모바일에서 상단 메뉴가 2개만 보이는 문제 해결 ===== */
@media (max-width: 900px){

  /* 1차 메뉴를 가로 나열 + 줄바꿈 */
  #menuBox ul.ixeMenu{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  /* 1차 메뉴를 2열(필요하면 3열로 바꿀 수 있음) */
  #menuBox ul.ixeMenu > li{
    flex: 0 0 50% !important;   /* 2열 */
    width: 50% !important;
    box-sizing: border-box !important;
  }

  /* 1차 메뉴 링크 영역 */
  #menuBox ul.ixeMenu > li > div > a{
    display: block !important;
    text-align: center !important;
    padding: 12px 0 !important;
  }

  /* 모바일에서 hover 대신 탭(포커스)도 서브메뉴가 열리게 */
  #menuBox ul.ixeMenu2{
    display: none;
    position: static !important;   /* 화면 밖으로 튀는 것 방지 */
    width: 100% !important;
  }

  #menuBox ul.ixeMenu > li:hover ul.ixeMenu2,
  #menuBox ul.ixeMenu > li:focus-within ul.ixeMenu2{
    display: block !important;
  }
}



/* 메뉴 잘림 문제 해결 */
#menuBox .ixeMenu {
  height: auto !important;
  overflow: visible !important;
}

/* =========================
   모바일에서 2차메뉴(서브메뉴) 펼치기
   ========================= */

/* 모바일/태블릿 구간에서만 적용 */
@media (max-width: 900px){

  /* 1) 메뉴가 잘리는 원인(높이 고정/overflow hidden) 제거 */
  #menuBox ul.ixeMenu{
    height: auto !important;
    overflow: visible !important;
  }

  /* 2) 각 1차메뉴를 세로 버튼처럼 보이게 (이미 적용돼 있다면 유지됨) */
  #menuBox ul.ixeMenu > li{
    width: 100% !important;
    display: block !important;
    position: relative !important;
  }

  /* 1차메뉴 링크 영역 */
  #menuBox ul.ixeMenu > li > div:first-child > a{
    display: block !important;
    text-align: center !important;
  }

  /* 3) XE 메뉴 구조상 "2차메뉴"가 보통 li 안의 두번째 div에 들어감 */
  #menuBox ul.ixeMenu > li > div:nth-of-type(2){
    display: none;               /* 기본은 접어두기 */
    position: static !important; /* 겹쳐뜨리기 말고 아래로 밀리게 */
    width: 100% !important;
    margin: 6px 0 0 0 !important;
    padding: 6px 0 !important;
    background: #fff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
  }

  /* 4) 모바일에서 탭하면 포커스가 잡히면서(:focus-within) 서브메뉴 펼쳐짐 */
  #menuBox ul.ixeMenu > li:focus-within > div:nth-of-type(2){
    display: block !important;
  }

  /* 서브메뉴 링크 스타일 */
  #menuBox ul.ixeMenu > li > div:nth-of-type(2) a{
    display: block !important;
    padding: 12px 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    color: #333 !important;
    line-height: 1.3 !important;
  }

  /* 서브메뉴 구분선(옵션) */
  #menuBox ul.ixeMenu > li > div:nth-of-type(2) a + a{
    border-top: 1px solid #f0f0f0 !important;
  }
}

/* =========================
   2차메뉴(서브메뉴) PC/모바일 공통 보이기
   - PC: hover로 열림
   - Mobile: 탭(포커스)로 열림
   ========================= */

/* 2차메뉴(보통 li 안의 두번째 div) 기본은 숨김 */
#menuBox ul.ixeMenu > li > div:nth-of-type(2){
  display: none;
  z-index: 9999;
}

/* ===== PC(데스크탑): hover 시 보이기 ===== */
@media (min-width: 901px){
  #menuBox ul.ixeMenu > li{
    position: relative; /* 서브메뉴 absolute 기준 */
  }

  #menuBox ul.ixeMenu > li > div:nth-of-type(2){
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }

  /* 마우스 올리면 2차메뉴 표시 */
  #menuBox ul.ixeMenu > li:hover > div:nth-of-type(2){
    display: block !important;
  }

  /* 2차메뉴 링크 */
  #menuBox ul.ixeMenu > li > div:nth-of-type(2) a{
    display: block;
    padding: 10px 12px;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
  }
}

/* ===== Mobile/Tablet: 탭(포커스)로 열기 + 잘림 방지 ===== */
@media (max-width: 900px){
  #menuBox ul.ixeMenu{
    height: auto !important;
    overflow: visible !important;
  }

  #menuBox ul.ixeMenu > li{
    width: 100% !important;
    display: block !important;
    position: relative !important;
  }

  #menuBox ul.ixeMenu > li > div:nth-of-type(2){
    position: static !important;
    width: 100% !important;
    margin: 6px 0 0 0 !important;
    padding: 6px 0 !important;
    background: #fff !important;
    border: 1px solid #e6e6e6 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* 탭해서 포커스 잡히면 열림 */
  #menuBox ul.ixeMenu > li:focus-within > div:nth-of-type(2){
    display: block !important;
  }

  #menuBox ul.ixeMenu > li > div:nth-of-type(2) a{
    display: block !important;
    padding: 12px 10px !important;
    text-align: center !important;
    color: #333 !important;
    text-decoration: none !important;
  }
}

/* === PC 메뉴/서브메뉴 복구: 1번째 div(링크)는 보이게, 2번째 div(서브메뉴)만 제어 === */
@media (min-width: 901px){

  /* 메뉴 잘림 방지 */
  #menuBox, #menuBox *{ overflow: visible !important; }

  /* li 기준 */
  #menuBox ul.ixeMenu > li{ position: relative !important; }

  /* ✅ 1차메뉴(첫번째 div)는 무조건 보이게 */
  #menuBox ul.ixeMenu > li > div:first-of-type{
    display: block !important;
  }
  #menuBox ul.ixeMenu > li > div:first-of-type > a{
    display: inline-block !important;
  }

  /* ✅ 서브메뉴(두번째 div)만 기본 숨김 */
  #menuBox ul.ixeMenu > li > div:nth-of-type(2){
    display: none !important;
  }

  /* hover 시 서브메뉴 표시 */
  #menuBox ul.ixeMenu > li:hover > div:nth-of-type(2){
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 99999 !important;
    background: #fff !important;
    border: 1px solid #e6e6e6 !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
    min-width: 180px !important;
  }

  /* 서브메뉴 링크 모양 */
  #menuBox ul.ixeMenu > li:hover > div:nth-of-type(2) a{
    display: block !important;
    padding: 10px 12px !important;
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
}

/* === PC 서브메뉴 모양/정렬 다듬기 === */
@media (min-width: 901px){

  /* 서브메뉴 박스 */
  #menuBox ul.ixeMenu > li:hover > div:nth-of-type(2){
    min-width: 140px !important;   /* 너무 커진 박스 줄이기 */
    width: auto !important;
    padding: 6px 0 !important;     /* 위아래 여백만 */
    text-align: center !important; /* 가운데 정렬(지금 사이트 느낌) */
  }

  /* 서브메뉴 항목(링크) */
  #menuBox ul.ixeMenu > li:hover > div:nth-of-type(2) a{
    padding: 8px 14px !important;  /* 글씨가 박스 가운데 오도록 */
    line-height: 1.3 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }

  /* 혹시 li 기본 스타일(불릿/여백) 튀면 정리 */
  #menuBox ul.ixeMenu > li:hover > div:nth-of-type(2) ul,
  #menuBox ul.ixeMenu > li:hover > div:nth-of-type(2) li{
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
}

/* 모바일에서 메인메뉴(ul.ixeMenu)만 2열 그리드 */
@media (max-width: 600px){
  /* 메인메뉴 컨테이너 */
  #menuBox ul.ixeMenu{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 14px !important;
    margin: 0 auto !important;
    height: auto !important;      /* 기존 height:40px 같은 거 무력화 */
    overflow: visible !important; /* 잘림 방지 */
  }

  /* 각 메뉴 버튼: 2열 */
  #menuBox ul.ixeMenu > li{
    float: none !important;
    width: calc(50% - 6px) !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* 클릭영역(버튼) */
  #menuBox ul.ixeMenu > li > div > a{
    display: block !important;
    text-align: center !important;
    padding: 14px 10px !important;
    border-radius: 14px !important;
    background: #f3f3f3 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  /* 모바일에서 2차메뉴(서브메뉴) 안 쓸 거면 숨김 */
  #menuBox ul.ixeMenu > li > div + div{
    display: none !important;
  }
}



@media (max-width: 600px){
  ul.ixeMenu{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:12px !important;
    padding:0 14px !important;
    margin:0 auto !important;
    height:auto !important;
    overflow:visible !important;
  }
  ul.ixeMenu > li{
    float:none !important;
    width:calc(50% - 6px) !important;
    margin:0 !important;
    list-style:none !important;
  }
  ul.ixeMenu > li > div > a{
    display:block !important;
    text-align:center !important;
    padding:14px 10px !important;
    border-radius:14px !important;
    background:#f3f3f3 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }
  /* 서브메뉴 숨김(원하면 삭제) */
  ul.ixeMenu > li > div + div{ display:none !important; }
}

@media (max-width: 600px){

  /* 1) ul을 2열 그리드로 강제 */
  ul.ixeMenu{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:space-between !important;
    align-items:stretch !important;

    width:100% !important;
    max-width:520px !important;     /* 가운데 정렬 + 너무 넓지 않게 */
    margin:12px auto !important;
    padding:0 14px !important;

    height:auto !important;
    overflow:visible !important;
    gap:12px !important;
    box-sizing:border-box !important;
  }

  /* 2) li를 정확히 2칸으로 */
  ul.ixeMenu > li{
    float:none !important;
    display:block !important;
    width:calc(50% - 6px) !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    box-sizing:border-box !important;
  }

  /* 3) XE가 중간에 div로 감싸는 경우가 많아서 그 래퍼 폭도 풀기 */
  ul.ixeMenu > li > div{
    width:100% !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  /* 4) a를 버튼처럼 */
  ul.ixeMenu > li > div > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-height:52px !important;

    padding:14px 10px !important;
    text-align:center !important;

    border-radius:14px !important;
    background:#f3f3f3 !important;
    border:1px solid #e6e6e6 !important;

    line-height:1.2 !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }

  /* 5) 서브메뉴 영역(hover dropdown) 모바일에선 숨김 */
  ul.ixeMenu > li > div + div{
    display:none !important;
  }
}

@media (max-width: 600px){

  /* ✅ 메뉴 UL을 "무조건" 2열 그리드로 */
  #menuBox ul,
  .menuBox ul,
  div.menuBox ul,
  #menuBox ul.ixeMenu,
  .menuBox ul.ixeMenu{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;

    width:100% !important;
    margin:12px auto !important;
    padding:0 14px !important;

    height:auto !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  /* ✅ li가 float/width로 방해하지 못하게 초기화 */
  #menuBox ul > li,
  .menuBox ul > li,
  #menuBox ul.ixeMenu > li,
  .menuBox ul.ixeMenu > li{
    float:none !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    box-sizing:border-box !important;
  }

  /* ✅ a를 버튼처럼 */
  #menuBox ul > li a,
  .menuBox ul > li a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-height:52px !important;
    padding:14px 10px !important;

    text-align:center !important;
    white-space:nowrap !important;

    border-radius:14px !important;
    background:#f3f3f3 !important;
    border:1px solid #e6e6e6 !important;

    box-sizing:border-box !important;
  }

  /* ✅ 모바일에서는 드롭다운(서브메뉴) 숨김 */
  #menuBox ul > li ul,
  .menuBox ul > li ul{
    display:none !important;
  }
}



@media (max-width: 600px){

  /* ✅ 버튼 안 글씨 정렬 안정화 */
  #menuBox ul > li a,
  .menuBox ul > li a{
    font-size:18px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
  }

  /* ✅ 로고(홈) 버튼만 예쁘게 처리:
     - 로고 이미지가 a의 배경/이미지로 들어오는 경우가 많아서
       글자는 숨기고 높이만 맞춤 */
  #menuBox ul > li:first-child a,
  .menuBox ul > li:first-child a{
    min-height:52px !important;
    overflow:hidden !important;
    text-indent:-9999px !important; /* 글자 숨김 */
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
  }

  /* ✅ 혹시 첫번째가 "빈칸처럼" 필요없으면 아예 숨기기(선택)
     - 아래 한 줄은 원할 때만 켜기 */
   #menuBox ul > li:first-child, .menuBox ul > li:first-child { display:none !important; } 
}

@media (max-width: 600px){

  /* 메뉴 버튼 높이와 중앙 정렬 강제 */
  #menuBox ul > li a,
  .menuBox ul > li a{
    height:56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    padding:0 !important;
    font-size:18px !important;
    font-weight:700 !important;
  }

}

@media (max-width: 600px){

  /* (1) 실제 메뉴 UL을 정확히 타겟 */
  #menuBox ul.ixeMenu{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2×3 */
    gap: 10px !important;
    padding: 0 10px !important;
  }

  /* (2) li/a 높이/정렬 강제 */
  #menuBox ul.ixeMenu > li{
    height: auto !important;
    overflow: visible !important;
  }

  #menuBox ul.ixeMenu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    padding: 10px 8px !important;
    text-align: center !important;

    line-height: 1.2 !important;
    box-sizing: border-box !important;

    /* 글자가 위로 뜨는 원인(위치/변형) 제거 */
    position: static !important;
    top: auto !important;
    transform: none !important;
  }

  /* (3) a 안에 span/strong이 있으면 그놈이 범인인 경우가 많음 */
  #menuBox ul.ixeMenu > li > a *{
    line-height: 1.2 !important;
    position: static !important;
    top: auto !important;
    transform: none !important;
  }
}

@media (max-width: 600px){
  #menuBox ul.ixeMenu > li:first-child > a img{
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 600px){
  #menuBox ul.ixeMenu > li > a{
    min-height: 48px !important;
    padding: 8px 8px !important;
  }
}

/* 모바일 메인 메뉴 최종 정리 */
@media (max-width: 600px){

  /* 메뉴 그리드 */
  #menuBox ul.ixeMenu{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 10px !important;
  }

  /* 메뉴 버튼 공통 */
  #menuBox ul.ixeMenu > li{
    width: 100% !important;
    margin: 0 !important;
  }

  #menuBox ul.ixeMenu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    padding: 10px !important;
    font-size: 15px !important;
    text-align: center !important;
  }

  /* 로고 메뉴만 따로 정렬 */
  #menuBox ul.ixeMenu > li:first-child > a{
    justify-content: center !important;
  }

  #menuBox ul.ixeMenu > li:first-child img{
    max-width: 110px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
}


@media (max-width: 600px){

  /* 그리드: 여러 케이스를 한 번에 */
  #menuBox ul.ixeMenu,
  .menuBox ul.ixeMenu,
  .menuLeft ul.ixeMenu{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 0 10px !important;
  }

  #menuBox ul.ixeMenu > li,
  .menuBox ul.ixeMenu > li,
  .menuLeft ul.ixeMenu > li{
    width: 100% !important;
    margin: 0 !important;
  }

  #menuBox ul.ixeMenu > li > a,
  .menuBox ul.ixeMenu > li > a,
  .menuLeft ul.ixeMenu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    padding: 10px !important;
    text-align: center !important;
  }

  /* 로고 이미지 */
  #menuBox ul.ixeMenu > li:first-child img,
  .menuBox ul.ixeMenu > li:first-child img,
  .menuLeft ul.ixeMenu > li:first-child img{
    max-width: 110px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 600px){

  /* 1) 메뉴 전체 폭/중앙정렬 */
  #menuBox, .menuBox, .menuLeft{
    width: 100% !important;
  }

  #menuBox ul.ixeMenu,
  .menuBox ul.ixeMenu,
  .menuLeft ul.ixeMenu{
    width: min(92vw, 520px) !important;   /* 너무 넓지 않게 */
    margin: 8px auto 0 !important;       /* 중앙 정렬 */
    padding: 0 !important;               /* 기존 좌우패딩 제거 */
    list-style: none !important;

    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2×3 */
    gap: 10px !important;                 /* 간격 줄이기 */
    justify-content: center !important;
  }

  /* 2) 각 칸(버튼) 기본 여백/높이 리셋 */
  #menuBox ul.ixeMenu > li,
  .menuBox ul.ixeMenu > li,
  .menuLeft ul.ixeMenu > li{
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 3) 버튼 자체(링크) 높이/패딩/글자 정렬 */
  #menuBox ul.ixeMenu > li > a,
  .menuBox ul.ixeMenu > li > a,
  .menuLeft ul.ixeMenu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 8px 8px !important;          /* 세로 길이 줄이기 */
    min-height: 52px !important;          /* 버튼 높이 고정(작게) */
    line-height: 1.2 !important;          /* 글자 줄높이 낮추기 */

    text-align: center !important;
    white-space: nowrap !important;       /* 한 줄 유지 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 4) 로고 칸(1번째) 크기 줄이기 */
  #menuBox ul.ixeMenu > li:first-child > a,
  .menuBox ul.ixeMenu > li:first-child > a,
  .menuLeft ul.ixeMenu > li:first-child > a{
    min-height: 52px !important;
    padding: 6px !important;
  }

  #menuBox ul.ixeMenu > li:first-child img,
  .menuBox ul.ixeMenu > li:first-child img,
  .menuLeft ul.ixeMenu > li:first-child img{
    max-height: 26px !important;
    width: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

}

@media (max-width: 600px){
  #menuBox ul.ixeMenu * { box-sizing: border-box !important; }
}

@media (max-width: 600px){

  /* 버튼(링크) 높이 강제 고정 */
  #menuBox ul.ixeMenu > li > a,
  .menuBox ul.ixeMenu > li > a,
  .menuLeft ul.ixeMenu > li > a{
    height: 44px !important;       /* ← 여기 숫자만 줄이면 더 낮아짐 (40~48 추천) */
    min-height: 0 !important;
    padding: 0 10px !important;    /* 세로 padding 제거 */
    line-height: 44px !important;  /* 한 줄 중앙정렬(텍스트용) */
    display: block !important;
    text-align: center !important;
  }

  /* 링크 안에 span/div가 있으면 그 녀석들이 높이를 키우는 경우가 많아서 같이 리셋 */
  #menuBox ul.ixeMenu > li > a * ,
  .menuBox ul.ixeMenu > li > a * ,
  .menuLeft ul.ixeMenu > li > a *{
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit !important;
  }

  /* 로고칸은 이미지 때문에 높이가 커질 수 있어서 따로 */
  #menuBox ul.ixeMenu > li:first-child > a,
  .menuBox ul.ixeMenu > li:first-child > a,
  .menuLeft ul.ixeMenu > li:first-child > a{
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 !important;
  }

  #menuBox ul.ixeMenu > li:first-child img,
  .menuBox ul.ixeMenu > li:first-child img,
  .menuLeft ul.ixeMenu > li:first-child img{
    max-height: 22px !important;
    vertical-align: middle !important;
  }
@media (max-width: 600px){
  #menuBox ul.ixeMenu > li { padding: 0 !important; }
}
}


@media (max-width: 600px){
  body { outline: 10px solid #ff00ff !important; }
  html { outline: 10px solid #00ffff !important; }
}

@media (max-width: 600px){
  #menuBox, .menuBox, .menuLeft, ul.ixeMenu { outline: 6px solid red !important; }
}

@media (max-width: 600px){

  /* 메뉴 전체를 가운데 + 폭 잡기 */
  #menuBox, .menuBox {
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }

  /* 2열 그리드 + 간격 */
  ul.ixeMenu{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2열 폭 고정 */
  ul.ixeMenu > li{
    width: calc(50% - 10px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 버튼(링크) 높이 줄이기 (핵심) */
  ul.ixeMenu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px 8px !important;    /* <- 여기서 세로가 확 줄어듦 */
    min-height: 52px !important;     /* <- 손가락 터치 최소 높이 */
    line-height: 1.15 !important;

    font-size: 17px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* 로고 이미지가 버튼 높이를 키우면 제한 */
  ul.ixeMenu > li > a img{
    max-height: 28px !important;
    width: auto !important;
    height: auto !important;
  }
}


@media (max-width: 600px){
  ul.ixeMenu *{ padding-top: 0 !important; padding-bottom: 0 !important; }
}

@media (max-width: 600px){

  /* (중요) 메뉴 컨테이너 폭/정렬 */
  #menuBox, .menuBox, .menuLeft{
    width: 100% !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }

  /* 2열 레이아웃 */
  ul.ixeMenu{
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  ul.ixeMenu > li{
    width: calc(50% - 10px) !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;          /* 혹시 li에 고정 높이 있으면 해제 */
    box-sizing: border-box !important;
  }

  /* (핵심) 버튼 높이를 "고정"해서 강제로 줄임 */
  ul.ixeMenu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 56px !important;          /* <- 여기 숫자만 줄이면 더 낮아짐 (예: 50px) */
    padding: 0 !important;            /* <- 기존 padding 완전 제거 */
    line-height: 1 !important;        /* <- 라인하이트로 키우는 것 방지 */
    font-size: 17px !important;

    box-sizing: border-box !important;
  }

  /* a 안쪽에 span/div가 높이를 키우는 경우까지 싹 정리 */
  ul.ixeMenu > li > a *{
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  /* 로고 이미지가 높이를 키우면 제한 */
  ul.ixeMenu > li > a img{
    max-height: 28px !important;
    width: auto !important;
    height: auto !important;
  }
}

@media (max-width: 600px){
  ul.ixeMenu, ul.ixeMenu *{ outline: 2px solid rgba(255,0,0,.35) !important; }
}


@media (max-width: 600px){

  /* 1) a 자체 높이 강제 */
  ul.ixeMenu > li > a{
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 2) a 안쪽 "박스"가 높이를 잡는 걸 같이 눌러버림 (핵심) */
  ul.ixeMenu > li > a > *{
    height: 44px !important;       /* a랑 똑같이 */
    padding: 0 !important;         /* 상하 패딩 제거 */
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* 3) 그 안쪽 텍스트/스팬까지 라인하이트로 커지는 것 방지 */
  ul.ixeMenu > li > a *{
    line-height: 1.1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 4) 로고 이미지 높이가 전체를 키우면 제한 */
  ul.ixeMenu > li > a img{
    max-height: 28px !important;
    height: auto !important;
    width: auto !important;
  }
}

@media (max-width: 600px){
  ul.ixeMenu, ul.ixeMenu *{
    background: rgba(255,0,0,.08) !important;
  }
}

@media (max-width: 600px){

  /* 2열 그리드(이미 잘 되고 있지만 확정) */
  ul.ixeMenu{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ✅ 핵심: li를 눌러야 세로가 준다 */
  ul.ixeMenu > li{
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
  }

  /* a를 “버튼 박스”로 만들기 */
  ul.ixeMenu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 44px !important;       /* 30px은 너무 작아서 44 추천 */
    min-height: 44px !important;
    padding: 0 8px !important;
    margin: 0 !important;

    border-radius: 16px !important;
    background: #f3f3f3 !important; /* 버튼 배경을 a로 강제 */
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* a 안쪽 요소들이 높이 늘리는 것 방지 */
  ul.ixeMenu > li > a *{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
  }

  /* 로고 이미지 제한 */
  ul.ixeMenu img{
    max-height: 24px !important;
    width: auto !important;
    height: auto !important;
  }
}

@media (max-width: 600px){
  ul.ixeMenu > li{ outline: 3px solid lime !important; }
  ul.ixeMenu > li > a{ outline: 3px solid cyan !important; }
}

@media (max-width: 600px){

  /* 2열 레이아웃 유지 + 가운데 */
  ul.ixeMenu{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 96vw !important;
    box-sizing: border-box !important;

    /* ✅ 각 줄 높이를 고정 (li가 커지지 못하게) */
    grid-auto-rows: 56px !important;  /* 여기만 56~72 사이로 조절 */
  }

  /* ✅ 핵심: li 자체를 줄여버림 */
  ul.ixeMenu > li{
    height: 56px !important;          /* grid-auto-rows와 같은 값 */
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  /* 혹시 li에 붙은 가짜 배경/장식이 높이를 만들면 제거 */
  ul.ixeMenu > li::before,
  ul.ixeMenu > li::after{
    content: none !important;
    display: none !important;
  }

  /* a를 카드 전체로 */
  ul.ixeMenu > li > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 100% !important;          /* li 높이를 그대로 사용 */
    width: 100% !important;

    padding: 0 10px !important;
    margin: 0 !important;

    line-height: 1.1 !important;
    border-radius: 16px !important;

    /* 카드 배경은 a에 강제로 */
    background: #f3f3f3 !important;
    box-sizing: border-box !important;
  }

  /* a 안쪽이 높이 늘리는 것 방지 */
  ul.ixeMenu > li > a *{
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /* 로고 높이 제한 */
  ul.ixeMenu img{
    max-height: 24px !important;
    width: auto !important;
    height: auto !important;
  }
}

@media (max-width: 600px){

  /* li는 완전히 투명하게 */
  ul.ixeMenu > li{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* a만 카드처럼 보이게 */
  ul.ixeMenu > li > a{
    background: #f3f3f3 !important;
    border: 1px solid #e2e2e2 !important;
    box-shadow: none !important;
    border-radius: 16px !important;
  }

  /* a 안쪽 장식 제거 */
  ul.ixeMenu > li > a::before,
  ul.ixeMenu > li > a::after{
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 600px){

  /* 메뉴 영역 안쪽에 깔린 '둥근 박스' 원인들 전부 제거 */
  ul.ixeMenu,
  ul.ixeMenu li,
  ul.ixeMenu li a,
  ul.ixeMenu li > div,
  ul.ixeMenu li > span,
  ul.ixeMenu li a > div,
  ul.ixeMenu li a > span{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
  }

  /* 가짜 라인(이중테두리) 자주 쓰는 before/after 제거 */
  ul.ixeMenu *::before,
  ul.ixeMenu *::after{
    content: none !important;
    display: none !important;
  }

  /* 최종적으로 '클릭되는 a'만 카드처럼 보이게 다시 지정 */
  ul.ixeMenu li a{
    background: #f3f3f3 !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }
}
@media (max-width: 600px){
  #menuBox, .menuBox, .menuLeft, ul.ixeMenu{
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 600px){

  /* ✅ 1) 바깥 박스(이중박스 원인) 싹 제거 */
  ul.ixeMenu > li,
  ul.ixeMenu > li > div{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ✅ 2) 진짜 버튼은 a 하나만 쓰기 */
  ul.ixeMenu > li > div > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 버튼 높이/여백 줄이기 */
    height: 52px !important;        /* ← 여기 숫자만 조절하면 됨 (48~56 추천) */
    padding: 0 10px !important;
    line-height: 1.1 !important;

    /* 버튼 디자인 */
    background: #f3f3f3 !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 16px !important;
    box-shadow: none !important;

    text-decoration: none !important;
  }

  /* ✅ 3) 혹시 남아있는 가짜 테두리/레이어 제거 */
  ul.ixeMenu > li::before,
  ul.ixeMenu > li::after,
  ul.ixeMenu > li > div::before,
  ul.ixeMenu > li > div::after,
  ul.ixeMenu > li > div > a::before,
  ul.ixeMenu > li > div > a::after{
    content: none !important;
    display: none !important;
  }

  /* ✅ 4) 글자 크기도 살짝 줄이면 더 컴팩트 */
  ul.ixeMenu > li > div > a{
    font-size: 16px !important;
    font-weight: 700 !important;
  }
}

@media (max-width: 600px){

  /* 1) 배너(고양이 사진) 아래 여백 줄이기 */
  .menuLineBg{
    margin-bottom: 8px !important;   /* 기본이 크면 여기서 줄어듦 */
    padding-bottom: 0 !important;
  }
  .menuLineBg img{
    display:block !important;
    margin-bottom: 0 !important;
  }

  /* 2) 메뉴 전체를 "가운데"로 + 좌우 여백 정리 */
  #menuBox, .menuBox, .menuLeft{
    width: 100% !important;
    max-width: 420px !important;     /* 화면에 맞게 중앙에 모이게 */
    margin: 0 auto !important;       /* ✅ 중앙정렬 핵심 */
    padding: 0 12px !important;      /* 좌우 여백 */
    box-sizing: border-box !important;
  }

  /* 3) 메뉴 UL 자체의 바깥 여백(위/아래) 줄이기 */
  ul.ixeMenu{
    margin: 0 !important;            /* 배너-메뉴 간격 줄어듦 */
    padding: 0 !important;
  }

  /* 4) 버튼들 사이 간격(세로/가로) 줄이기 */
  ul.ixeMenu > li{
    margin: 8px 0 !important;        /* 세로 간격 */
  }
  ul.ixeMenu > li > div{
    margin: 0 !important;
  }
  ul.ixeMenu > li > div > a{
    margin: 0 !important;
  }

  /* 5) 메뉴 아래(SNS 아이콘)와의 간격 줄이기
     - 사이트마다 이 영역 클래스가 달라서 "메뉴 다음 요소"도 같이 조정 */
  #menuBox + *{
    margin-top: 10px !important;
  }
}
@media (max-width: 600px){
  .menuLineBg{
    margin-bottom: 0 !important;
  }
}

@media (max-width: 600px){

  /* 배너 바로 아래 요소의 위쪽 여백 제거 */
  .menuLineBg + #menuBox,
  .menuLineBg + .menuBox,
  .menuLineBg + .menuLeft{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 메뉴 전체의 위쪽 여백 제거 */
  #menuBox,
  .menuBox,
  .menuLeft{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 메뉴 리스트 자체 위 여백 제거 */
  ul.ixeMenu{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 600px){

  /* 1) 배너(메뉴라인) 자체의 아래 여백/패딩/라인높이 제거 */
  .menuLineBg, #menuLineBg{
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;   /* inline-img 아래 틈 방지 */
    height: auto !important;
  }

  /* 2) 배너 안의 이미지가 inline이면 아래에 3~6px 정도 틈 생김 -> block으로 */
  .menuLineBg img, #menuLineBg img{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) 배너 다음 메뉴 영역 위쪽 여백도 같이 제거 */
  #menuBox, .menuBox, .menuLeft, ul.ixeMenu{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
@media (max-width: 600px){

  /* 배너(배경) 전체가 보이게 */
  #logoBox.mainLogo{
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    /* 배너 높이: 너무 크면 잘린 것처럼 보이니 모바일에 맞게 조절 */
    height: 180px !important;   /* 160~220 사이에서 취향 조절 */
  }

  /* 로고 이미지(logo2_kaps.png)가 화면 밖으로 나가는 문제 해결 */
  #logoBox.mainLogo a,
  #logoBox.mainLogo img{
    display: block !important;
    margin: 0 auto !important;
    max-width: 70% !important;  /* 로고 크기 */
    height: auto !important;
  }

  /* 혹시 inline style로 margin-top:99px 같은게 박혀있으면 이게 먹여서 덮어씀 */
  #logoBox.mainLogo img{
    margin-top: 6px !important; /* 필요하면 0~12px */
  }
}

@media (max-width: 600px){

  /* 배너 배경(고양이 사진) */
  #logoBox.mainLogo{
    background-size: contain !important;      /* cover → contain */
    background-position: center top !important;
    background-repeat: no-repeat !important;

    height: auto !important;                 /* 고정 높이 해제 */
    aspect-ratio: 16 / 9;                    /* 배너 비율 (필요시 21/9, 4/3 등으로 변경) */
    min-height: 160px !important;            /* 너무 얇아지는 것 방지 */
    padding: 0 !important;
    overflow: visible !important;
  }

  /* 로고 이미지가 화면 밖으로 밀리는 문제 해결 */
  #logoBox.mainLogo img{
    display: block !important;
    float: none !important;
    max-width: 70% !important;
    height: auto !important;
    margin: 8px auto 0 !important;           /* 가운데 정렬 */
  }
}

@media (max-width: 600px){
  #logoBox.mainLogo img{ margin-right: auto !important; margin-left: auto !important; }
}

@media (max-width: 900px){

  /* 배너 박스: 폭을 무조건 화면 전체로 */
  body #logoBox.mainLogo,
  body #logoBox{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}
 
@media (max-width: 900px){

  body #logoBox.mainLogo{
    background-color: #fff !important;          /* 남는 공간 흰색 */
    background-size: contain !important;        /* 안 잘리게 */
    background-position: center center !important;
    background-repeat: no-repeat !important;

    height: 0 !important;
    padding-top: 56% !important;               /* 배너 높이(조절 가능) */
    overflow: hidden !important;
  }

  /* 로고 이미지 위치도 같이 안정화 */
  body #logoBox.mainLogo img{
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    top: auto !important;

    width: 48% !important;
    max-width: 240px !important;
    height: auto !important;
  }
}


@media (max-width: 900px){
  body #logoBox.mainLogo{
    background-size: cover !important;
    background-position: 2% center !important;
    height: 220px !important;
  }
}

@media (max-width: 900px){
  #logoBox.mainLogo img{
    margin-top: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px){

  /* 1) #logoBox.mainLogo 안의 모든 img */
  #logoBox.mainLogo img{
    margin-top: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 2) 혹시 id가 logoBox고 class가 mainLogo가 아닐 때 */
  #logoBox img{
    margin-top: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) 혹시 컨테이너 클래스만 mainLogo일 때 */
  .mainLogo img{
    margin-top: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px){

  /* 배너(고양이 배경) 영역 */
  #logoBox.mainLogo{
    position: relative !important;
    height: 220px !important;          /* 원하면 200~260 사이로 조절 */
    padding: 0 !important;
    overflow: hidden !important;
    background-size: cover !important;  /* 배너 꽉 채우기 */
    background-position: 2% center !important; /* 너가 맞춘 값 유지 */
  }
}
@media (max-width: 900px){
  /* blank.gif (CROM) 로고 영역이 위에서 클릭을 먹는 문제 차단 */
  #logoBox .logo,
  #logoBox .logo a,
  #logoBox .logo img{
    pointer-events: none !important;
  }
}

/* =========================
   MOBILE MENU ONLY (PC 영향 없음)
   ========================= */
@media (max-width: 900px){

  /* 1) 메뉴 버튼(전체) 글씨 크게 + 세로/가로 중앙정렬 */
  #menuBox a,
  .menuBox a,
  #menuBox ul li a,
  .menuBox ul li a{
    display: flex !important;
    align-items: center !important;      /* 세로 중앙 */
    justify-content: center !important;  /* 가로 중앙 */

    font-size: 20px !important;          /* 글씨 크게 */
    font-weight: 700 !important;
    line-height: 1.15 !important;

    /* 버튼 안쪽 여백 때문에 치우치면 이게 제일 잘 잡힘 */
    padding: 0 !important;
    text-align: center !important;
  }

  /* 2) KAPS 버튼(이미지) 빨간 테두리/배경 제거 + 이미지 자체도 가운데 */
  #menuBox a img,
  .menuBox a img,
  #menuBox ul li a img,
  .menuBox ul li a img{
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    display: block !important;
    margin: 0 auto !important;           /* 가로 중앙 */
  }

  /* 3) “KAPS 버튼”에만 혹시 남아있는 빨간 테두리/배경(상위 요소에 걸린 경우) 제거 */
  #menuBox a,
  .menuBox a{
    border-color: #e2e2e2 !important;     /* 기본 테두리로 통일 */
    background-color: #f3f3f3 !important; /* 기본 배경으로 통일 */
  }
}

@media (max-width: 900px){

  /* 메뉴 버튼 글씨 크게 + 중앙 정렬 */
  #menuBox ul.ixeMenu > li > div:first-child > a{
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    display: flex !important;
    align-items: center !important;     /* 세로 중앙 */
    justify-content: center !important; /* 가로 중앙 */

    height: 100% !important;
    padding: 0 10px !important;
    text-align: center !important;
  }

}



@media (max-width: 900px) {

  #menuBox .ixeMenu li div a {
    background: linear-gradient(135deg, #e6f2ef, #f4f6ff) !important;
    border: 1px solid #cfd8e3 !important;
    color: #2f3b6b !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    height: 56px !important;
    line-height: 56px !important;
    border-radius: 14px !important;
  }

}

/* mobile menu button color patch */
@media (max-width: 900px){

  /* 버튼 '박스'가 div에 잡혀있을 수도 있어서 div도 같이 */
  html body #menuBox ul.ixeMenu > li > div{
    background: linear-gradient(135deg, #e6f2ef, #f4f6ff) !important;
    border: 1px solid #c9d6f2 !important;
    border-radius: 14px !important;
  }

  /* 실제 클릭 영역 a */
  html body #menuBox ul.ixeMenu > li > div > a{
    background: transparent !important;   /* 배경은 div가 먹게 */
    color: #2f3b6b !important;
    font-size: 18px !important;
    font-weight: 700 !important;

    height: 56px !important;
    line-height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }
}



/* =========================
   KAPS Mobile Menu - FINAL
   (mobile only)
   ========================= */
@media (max-width: 900px){

  /* 상단 로고 박스(배너) */
  #logoBox.mainLogo{
    height: 160px !important;
    text-align: center !important;
    padding: 16px 10px 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  #logoBox.mainLogo img{
    width: 180px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* ===== 1차 메뉴(버튼 2열) ===== */
  #menuBox ul.ixeMenu{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 12px !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
  }

  #menuBox ul.ixeMenu > li{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;     /* 기존 float 무력화 */
    width: auto !important;     /* 50% 같은 값 무력화 */
  }

  /* “첫번째 div(1차 메뉴 버튼 컨테이너)”만 정확히 */
  #menuBox ul.ixeMenu > li > div:first-child{
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* 버튼 자체 */
  #menuBox ul.ixeMenu > li > div:first-child > a{
    display: flex !important;
    align-items: center !important;      /* 세로 중앙 */
    justify-content: center !important;  /* 가로 중앙 */
    height: 56px !important;             /* 버튼 높이 */
    padding: 0 10px !important;

    background: #e9f2f3 !important;
    border: 2px solid #c6d6df !important;
    border-radius: 18px !important;

    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    line-height: 1 !important;
    color: #23324a !important;

    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  /* 첫 버튼(KAPS 로고 이미지) 중앙 정렬 + 붉은 테두리/배경 제거 */
  #menuBox ul.ixeMenu > li > div:first-child > a img{
    display: block !important;
    height: auto !important;
    max-width: 78% !important; /* 버튼 안에서 적당히 */
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
  }

  /* 혹시 테마에서 이미지에 테두리 주는 경우 제거 */
  #menuBox ul.ixeMenu img{
    border: 0 !important;
    background: transparent !important;
  }

  /* 서브메뉴(ixeMenu2)는 건드리지 않음: 열림/닫힘 꼬임 방지 */
}




/* =========================
   KAPS Mobile Menu Fix
   ========================= */
@media (max-width: 900px){

  #menuBox ul.ixeMenu{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important; /* ← 3칸 */
    gap: 12px 10px !important;
    padding: 0 12px !important;
  }

  #menuBox ul.ixeMenu > li{
    float: none !important;
    width: auto !important;
  }

  #menuBox ul.ixeMenu > li > div:first-child > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;          /* ← 버튼 높이 줄임 */
    background: #e9f2f3 !important;
    border: 2px solid #c6d6df !important;
    border-radius: 16px !important;

    font-size: 17px !important;       /* ← 글씨 크기 줄임 */
    font-weight: 800 !important;
    color: #23324a !important;
  }
}




/*  ____________*/


@media (max-width: 900px){

  #menuBox ul.ixeMenu{
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px 6px !important;
    padding: 0 6px !important;
  }

  #menuBox ul.ixeMenu > li{
    float: none !important;
    width: auto !important;
  }

  #menuBox ul.ixeMenu > li > div:first-child > a{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 50px !important;
    background: #e9f2f3 !important;
    border: 2px solid #c6d6df !important;
    border-radius: 16px !important;

    font-size: 17px !important;
    font-weight: 800 !important;
    color: #23324a !important;
  }

}



/* ===== 모바일: 터치 시 나타나는 서브메뉴/타원(빈 박스) 제거 ===== */
@media (max-width: 900px){

  /* 1) 2차 메뉴(드롭다운) 완전 숨김 */
  #menuBox .subMenu,
  #menuBox ul.subMenu,
  #menuBox .subMenuBox,
  #menuBox .subMenuBox ul,
  .ixeMenu .subMenu,
  .ixeMenu ul.subMenu,
  .ixeMenu .subMenuBox,
  .ixeMenu .subMenuBox ul {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 2) 터치/포커스 시 생기는 아웃라인/그림자 제거 */
  #menuBox .ixeMenu > li > div > a:focus,
  #menuBox .ixeMenu > li > div > a:active,
  .ixeMenu > li > div > a:focus,
  .ixeMenu > li > div > a:active {
    outline: none !important;
    box-shadow: none !important;
  }

  /* 3) 모바일 탭 하이라이트(번쩍임)도 제거(선택사항) */
  #menuBox .ixeMenu > li > div > a,
  .ixeMenu > li > div > a {
    -webkit-tap-highlight-color: transparent;
  }

  /* 4) 혹시 focus-within 으로 서브가 열리는 테마면 그것도 차단 */
  .ixeMenu > li:focus-within .subMenu,
  #menuBox .ixeMenu > li:focus-within .subMenu {
    display: none !important;
  }
}


/* ===== 모바일에서 서브메뉴 완전 제거 ===== */
@media (max-width: 900px){

  /* 메뉴 안의 두번째 div = 서브메뉴 영역 */
  #menuBox .ixeMenu > li > div + div {
    display: none !important;
  }

  /* active, on 상태여도 절대 안 보이게 */
  #menuBox .ixeMenu > li.on > div + div,
  #menuBox .ixeMenu > li.active > div + div {
    display: none !important;
  }

}


/* 모바일 서브메뉴 완전 차단 */
@media (max-width: 900px) {
  #menuBox .ixMenu li > div,
  #menuBox .ixMenu li ul,
  #menuBox .ixMenu li.on > div,
  #menuBox .ixMenu li.active > div {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}


/* 새소식 아래 슬라이드 배너 위젯 높이 자동화 */
@media (max-width: 768px) {
    .widgetContainer,
    .widget,
    .xe-widget-wrapper {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* 모바일에서 배너 이미지 비율 유지 */
@media (max-width: 768px) {

    /* 슬라이드 전체 */
    .widget img,
    .widgetContainer img,
    .xe-widget-wrapper img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* 슬라이드 내부 div 높이 강제 제거 */
    .widget,
    .widgetContainer,
    .xe-widget-wrapper,
    .swiper-slide,
    .slide,
    .banner {
        height: auto !important;
        min-height: 0 !important;
    }
}

@media (max-width: 768px){
    .widgetContainer{
        margin-bottom: 10px !important;
    }
}





/* ==============================
   Shelter Stories (Content Widget - Photographer)
   Mobile layout: 2x2 grid (or 1x1 option)
   ============================== */
@media (max-width: 900px){

  /* 1) 위젯 박스가 고정 높이/여백을 갖고 있으면 강제로 풀기 */
  .widgetContainer,
  .widget_container,
  .widget {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 2) "Photographer" 스킨에서 목록을 그리드로 */
  :is(.widgetContainer, .widget_container, .widget) .photographer ul,
  :is(.widgetContainer, .widget_container, .widget) ul.photographer,
  :is(.widgetContainer, .widget_container, .widget) ul.widgetGallery,
  :is(.widgetContainer, .widget_container, .widget) ul.widget_list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  

  /* (선택) ❗만약 "최근 1개만" 보이게 하고 싶으면 위 2x2 대신 아래를 사용 */
  :is(.widgetContainer, .widget_container, .widget) .photographer li,
  :is(.widgetContainer, .widget_container, .widget) li.item,
  :is(.widgetContainer, .widget_container, .widget) li.widget_item {
    width: 100% !important;
  }
  

  /* 3) 이미지/제목 반응형 */
  :is(.widgetContainer, .widget_container, .widget) .photographer img,
  :is(.widgetContainer, .widget_container, .widget) img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 12px !important;
    object-fit: cover !important;
  }

  :is(.widgetContainer, .widget_container, .widget) .photographer .title,
  :is(.widgetContainer, .widget_container, .widget) .title,
  :is(.widgetContainer, .widget_container, .widget) .subject {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-top: 6px !important;
    text-align: center !important;
    word-break: keep-all !important;
  }

  /* 4) (선택) 좌우 파란 화살표/슬라이더 버튼 숨기기 
  .bx-prev, .bx-next,
  .slick-prev, .slick-next,
  .prev, .next,
  .direction-nav, .control, .controls,
  .pagination, .pager {
    display: none !important;
  }*/
}











/* =========================
   [모바일] "다양한 사연과 구조 이야기" (widgetGalleryA)
   2x2 그리드 + inline 고정폭/높이 무력화
   ========================= */
@media (max-width: 900px){

  /* 위젯 자체 높이 고정돼서 아래에 공간 남는 것 방지 */
  .widgetBorder,
  .widgetBox,
  .widgetBoxContainer{
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* ✅ 이 위젯의 리스트(갤러리)만 2열 그리드로 */
  ul.widgetGalleryA{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    height: auto !important;
  }

  /* li에 inline width:305px 같은 값이 있어도 덮어씀 */
  ul.widgetGalleryA > li{
    width: calc(50% - 6px) !important;
    margin: 0 !important;
    float: none !important;
    height: auto !important;
  }

  /* 썸네일 링크/이미지 크기 강제 반응형 */
  ul.widgetGalleryA a.thumb{
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  ul.widgetGalleryA a.thumb img{
    width: 100% !important;
    height: auto !important;      /* inline height:200px 무력화 */
    display: block !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* 제목도 카드 폭에 맞게 */
  ul.widgetGalleryA a.title{
    display: block !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-top: 6px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }
}






/* 모바일에서 구조 이야기 카드 1개만 보이게 */
@media (max-width: 768px){

  /* 구조 이야기 위젯 */
  .widgetContainer ul.widgetGalleryA{
    width:100% !important;
  }

  /* 카드 하나만 꽉 차게 */
  .widgetContainer ul.widgetGalleryA li{
    width:100% !important;
    float:none !important;
    margin-bottom:12px;
  }

  /* 이미지 화면에 맞게 */
  .widgetContainer ul.widgetGalleryA li img{
    width:100% !important;
    height:auto !important;
  }

}


/* 모바일: 구조이야기(News_02) 갤러리를 1개씩 보이게 */
@media (max-width: 768px){

  /* 갤러리 영역 밖으로 튀는 것 가리기 */
  ul.widgetGalleryA{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 각 카드(thumb)를 한 화면(100%)로 */
  ul.widgetGalleryA > li{
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 위젯 컨테이너가 넘치는 걸 잘라서 1개만 보이게 */
  .widgetBoxContainer{
    overflow: hidden !important;
  }

  /* 이미지 꽉 차게 */
  ul.widgetGalleryA img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}