/*----------------------------여기까지 원래 있던 것---------------------*/ /* ========================= KAPS Mobile Responsive Patch for XE 1.4.x / CROM iXE2 layout Paste into: Layout Admin > CSS ========================= */ /* ========================================= 1) 모바일 구간 ========================================= */ @media (max-width: 768px) { /* 전체 컨테이너 폭을 화면에 맞춤 */ #rootContainer, .iXEcontainer, .iXEbody, .menuLineBg, #menuBox, #footBox, .iXEcontentBox { width: 100% !important; min-width: 0 !important; } /* 상단 상자/정렬이 깨질 때 대비 */ .topBox, .topMenuBox, .loginBox { width: 100% !important; box-sizing: border-box; } /* 검색 영역: 있으면 아래로 내려가게 */ .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; } } /* ========================================= 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: 768px) { /* 상단 배경이미지 영역 정리 */ #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; } /* 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: 768px){ #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; } } /* 기본 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: 768px){ #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; } } /*-------------------------------------------------------------*/ /*-------------------------------------------------------------*/ 상단 테마 베너와 협회로고 위치 /*-------------------------------------------------------------*/ /*-------------------------------------------------------------*/ @media (max-width: 768px){ #logoBox.mainLogo img{ margin-right: auto !important; margin-left: auto !important; } } @media (max-width: 768px){ /* 배너 박스: 폭을 무조건 화면 전체로 */ /* 배너(고양이 배경) 영역 */ body #logoBox.mainLogo, body #logoBox{ width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; background-color: #fff !important; /* 남는 공간 흰색 */ background-repeat: no-repeat !important; padding-top: 56% !important; /* 배너 높이(조절 가능) */ position: relative !important; height: 220px !important; /* 원하면 200~260 사이로 조절 */ padding: 0 !important; overflow: hidden !important; background-size: cover !important; /* 배너 꽉 채우기 */ background-position: 2% center !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; } /* blank.gif (CROM) 로고 영역이 위에서 클릭을 먹는 문제 차단 */ #logoBox .logo, #logoBox .logo a, #logoBox .logo img{ pointer-events: none !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; } } /* ======================== PC 모바일 공통 위젯 CSS ===================== */ /* ========================================================================== */ /* 모바일에서 썸네일 아래 제목 줄간격 조금 줄이기 */ .widgetBox .title{ margin-top:6px; line-height:1.3; } /* 화살표 터치 영역 조금 키우기 (모바일 편의성) */ .widgetNavigator button{ width:44px; height:44px; } /* 썸네일 모서리 둥글기 통일 */ .widgetGalleryA img{ border-radius:10px; } /* 위젯 썸네일 제목 다 표시 */ .widgetGalleryA a.title{ white-space: normal !important; overflow: visible !important; display: block; line-height: 1.3em; word-break: keep-all; }