.sr_only { position: absolute; width: 1px !important; height: 1px !important; text-indent: -9999px; font-size: 0; } .new_box_area .new_box_toggle { padding : 15px 15px 0 15px; background-color: #f7f7f7; border : 1px solid #e0e0e0; border-bottom : none; border-radius : 10px 10px 0 0; } .new_box_area .new_box_toggle.active { padding-bottom : 15px } .new_box_area .search_inner.active { display : none } .new_box_area .new_search_wrap { display : flex; border : 1px solid #58616a; border-radius : 10px; overflow: hidden } .new_box_area .new_search_wrap input { flex : auto; height : 48px; padding : 0 10px; border : none } .new_box_area .new_search_wrap button { width : 48px; height : 48px; flex-shrink: 0; display : block; text-align: center; line-height: 48px; border : none; background-color: #fff; } .new_box_area .search_content { display : flex; gap : 10px; padding : 10px 0 } /* 상태·기간 칸 폭 (지역 칸은 아래 :first-child 규칙에서 flex:auto 로 남는 폭을 모두 가져간다). 이 사이트는 전역 box-sizing 이 content-box 라, border-box 로 두어야 padding·border 를 포함해 화면상 실제로 125px 가 된다. flex-shrink:0 은 폭이 부족할 때 임의로 줄어드는 것을 막는다. */ .new_box_area .search_content .inner { border-right : 1px solid #d9d9d9; width : 143px; padding : 0 10px; box-sizing : border-box; flex-shrink : 0; } /* 기간 칸을 줄여 긴 지역명이 다음 체크박스와 겹치지 않게 하고, 날짜 입력칸은 세로로 배치한다. */ .new_box_area .search_content .inner:last-child { border-right : none; width : 250px } .new_box_area .search_content .inner:first-child { flex : auto; padding : 0 } /* 체크박스 칸(지역·상태)은 좌우 여백 없이 붙인다 */ .new_box_area .search_content .inner.chk-group { padding : 0; } .new_box_area .inner h3 { font-size : 14px; font-weight: bold; margin-bottom : 10px } .new_box_area .inner .area_ul { display : flex; flex-wrap : wrap; gap : 10px; align-items: start; justify-content: start; } /* 한 줄에 4개 — 시안은 5개(20%)였지만 실제 시도명이 "강원특별자치도(1,250)" 처럼 길어 nowrap 인 라벨이 칸을 넘쳐 옆 항목과 겹쳐 보였다. gap(10px) 3개를 뺀 폭으로 정확히 4개만 들어간다. */ .new_box_area .inner .area_ul li { width : calc(25% - 8px); white-space: nowrap; box-sizing : border-box; } .new_box_area .inner .state_ul li { white-space: nowrap; } .new_box_area .inner .state_ul li ~ li { margin-top : 10px } /* form.css 의 input.checkbox[type="checkbox"] 가짜 숨김(position:relative + clip)은 clip 이 position:absolute/fixed 에서만 동작하는 스펙이라 실제로는 숨겨지지 않아, 라벨의 가짜 체크박스(:before) 옆에 브라우저 기본 체크박스가 그대로 남아 체크박스가 2개로 보였다. 폭/높이를 0으로 접어 완전히 숨긴다 (label[for] 클릭으로 토글되는 동작에는 영향 없음). */ .new_box_area input[type="checkbox"] { -webkit-appearance:none; appearance:none; width:0; height:0; margin:0; padding:0; border:0; overflow:hidden; } .new_box_area input[type="checkbox"] + label:before { width : 20px; height : 20px; border : 1px solid #58616A; background-color: #fff; box-shadow: inherit; } .new_box_area input[type="checkbox"]:checked + label:before { content : ''; background : #25408F url('/images/newdesign/ic_check.png') no-repeat center center; width : 20px; height : 20px; box-shadow: inherit; } .new_box_area .inner input[type="text"] { background : #fff url('/images/newdesign/ic_calendar.png') no-repeat right 10px center; line-height : 44px; border : 1px solid #58616A; border-radius : 6px; padding : 0 10px; font-size : 13px } /* 지역/상태 체크박스 라벨 - 시도명이 길어 칸(li) 폭을 넘기지 않도록 기본 폭에서부터 작게 잡는다. 기존엔 450px 이하 모바일에서만 13px 로 줄였는데, 데스크톱 폭에서도 "강원특별자치도" 같은 긴 이름이 칸 경계선에 닿아 잘려 보이므로 전체 폭에서 기본값을 줄인다. */ .new_box_area input[type="checkbox"] + label { font-size : 13px } .new_box_area .search_rang_wrap { display : flex; flex-direction : column; gap : 0; align-items : stretch; width : 140px; max-width : 100% } .new_box_area .search_rang_wrap .search_rang { flex : 0 0 auto; width : 100%; min-width : 0 } .new_box_area .inner .search_rang label { display : block; font-size : 11px } .new_box_area .inner .search_rang input { width : 100%; min-width : 0; box-sizing : border-box; padding-right : 42px } .new_box_area .inner .search_rang input::placeholder { font-size : 11px } .new_box_area .inner .search_rang + .search_rang { margin-top : 8px } /* 기간 단축 선택 버튼(오늘/일주일/한달). 예전에는 .btn .btn_white 클래스를 붙였는데 그 클래스는 하단 버튼 영역(.search_btm_wrap button)에만 스타일이 걸려 있어, 이 자리에서는 아무 스타일도 먹지 않은 브라우저 기본 버튼으로 보였다. 날짜 입력칸 아래에서 화면 전체로 늘어나지 않고 각 버튼 내용만큼의 폭으로 배치한다. */ .search_rang_quick { display : inline-flex; gap : 6px; max-width : 100%; margin-top : 8px } .search_rang_quick button { flex : 0 0 auto; min-width : 60px; padding : 0 8px; line-height : 30px; border : 1px solid #cfd6e4; border-radius : 15px; background-color : #f5f7fb; color : #25408F; font-size : 13px; white-space : nowrap; cursor : pointer; transition : background-color .15s ease, border-color .15s ease, color .15s ease } .search_rang_quick button:hover, .search_rang_quick button:focus { background-color : #25408F; border-color : #25408F; color : #fff } .ui-datepicker { padding : 0; margin-top : 10px } .ui-widget-header { background : #25408F; border-color : #25408F } .ui-icon-circle-triangle-w { background-position : -95px 0 } .ui-icon-circle-triangle-e { background-position : -35px 0 } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border : none; background : #25408F; color : #fff } .ui-state-hover .ui-icon-circle-triangle-e { background : url(https://clik.nanet.go.kr/css/images/ui-icons_ffffff_256x240.png) no-repeat -35px 0px } .ui-state-hover .ui-icon-circle-triangle-w { background : url(https://clik.nanet.go.kr/css/images/ui-icons_ffffff_256x240.png) no-repeat -95px 0px } .ui-datepicker .ui-datepicker-prev-hover { left : 2px; top : 2px } .ui-widget-content { background : #fff } .ui-datepicker table { table-layout: fixed; border-collapse: collapse; border-spacing: 0 } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background : #fff; border : none; text-align: center; color : #666 } .ui-datepicker td { padding : 0; border : 1px solid #f9f9f9; } .ui-state-disabled { background-color: #f1f1f1; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { color : #fff; background-color: #25408F; } .ui-datepicker-today a { background : #25408f3d !important; color : #fff !important } .search_btm_wrap { text-align: right; padding : 10px 0; } .search_btm_wrap button { display : inline-block; line-height : 48px; border-radius : 6px; border : 1px solid #999; padding : 0 15px; background-color: #fff; } .search_btm_wrap button.btn_blue { background-color: #25408F; color : #fff } .new_box_area > button { display : block; width : 100%; line-height : 38px; background-color: #fff; border : 1px solid #e0e0e0; border-radius : 0 0 10px 10px; margin-bottom:20px;} #boxToggleTxt { position : relative } #boxToggleTxt:after { content: url('/images/newdesign/ic_arrow.png'); display : inline-block; margin-left : 5px; position : relative; top : -2px; transition : all .3s ease } #boxToggleTxt.active:after { transform : rotate(180deg); top : 0 } .bbs_total { font-size : 20px; font-weight: bold; margin : 25px 0 } .bbs_total strong { color : #25408f; font-weight: 800; } .tab_list { margin : 25px 0 } .bbs_list_wrap { display : flex; gap : 24px; flex-wrap : wrap; margin-bottom : 20px } /* flex 단축값에 길이만 주면 flex-grow:1 이 함께 적용되어, 마지막 줄처럼 항목이 4개 미만인 줄에서 카드가 남은 공간만큼 늘어났다. .thumb_wrap 높이가 padding-top:130%(= 자기 너비 기준)라 그 줄만 이미지가 훨씬 크게 보이는 원인이었다. 늘어나지 않게 고정해 어느 줄이든 정확히 4개 · 같은 크기로 맞춘다. (gap 24px × 3개를 뺀 폭 = 25% - 18px) */ .bbs_list_wrap li { flex : 0 0 calc(25% - 18px); max-width : calc(25% - 18px); box-sizing : border-box; } .bbs_list_wrap a { display : block; } /* 행사 포스터는 비율이 제각각이라 cover 로 채우면 위아래(또는 좌우)가 잘려 제목·날짜가 함께 잘린다. contain 으로 원본 비율 그대로 넣고, 칸에서 남는 자리는 옅은 회색 배경으로 채운다. */ .bbs_list_wrap .thumb_wrap { position : relative; padding-top : 130%; background-color : #ffffff; } .bbs_list_wrap .thumb_wrap img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 100%; height : 100%; object-fit: cover; border-radius : 10px; } .bbs_list_wrap .thumb_wrap i { position : absolute; top : 0; left : 0; width : 90px; line-height : 35px; text-align: center; z-index: 9; font-size : 16px; border-radius : 10px 0 10px 0 } /* 2026-08-28 수정: 상태 뱃지(진행중/진행예정/진행종료) 배경색만 퍼블.png 시안 색상으로 교체. 배경 외 속성은 그대로 둠 */ .title_ing { background : #0032C3; color :#fff; } .title_prev { background : #BEC6DE; color : #25408F; border : 0; outline : 0; box-shadow : none } .title_end { background: #6C6F73; color :#fff; } .bbs_list_wrap a div { padding : 15px 0 } /* 2026-08-28 수정: 지역명(.sub_title)은 칩이 아니므로 알약 스타일에서 제외 */ .bbs_list_wrap a div span:not(.sub_title) { display : inline-block; padding : 0 15px; line-height : 30px; border : 2px solid; border-radius : 20px; font-size : 14px } .cate_blue { border-color : #25408F; color : #25408F; font-weight: bold; } .cate_red { border-color : #D91629; color : #D91629; font-weight: bold; } .cate_green { border-color : #30BE56; color : #30BE56; font-weight: bold; } /* 2026-08-28 수정: 목록 카드 — 분류 칩 + 지역명을 한 줄로 붙여서 보여준다 (칩 오른쪽에 지역명) */ .bbs_list_wrap .cate_row { display : flex; align-items : center; margin : 0 } .bbs_list_wrap h2 { text-overflow: ellipsis; overflow : hidden; white-space : nowrap; font-size : 20px; margin : 10px 0 3px 0; font-weight: bold;} .bbs_list_wrap .sub_title { font-size : 15px; color : #666666; margin-left : 8px } /* 2026-08-28 수정: margin-left 추가 (칩과 간격) */ .bbs_list_wrap .date { font-size : 16px; color : #333333; margin-top : 3px } /* 카드 마우스오버 — 항목 전체가 살짝 떠오르는 효과. 목록(.bbs_list_wrap)과 상세화면의 '행사 추천'(.bbs_view_list) 둘 다 같은 동작이다. 확대/이동은 안쪽 요소가 아니라 카드 하나를 통째로 감싸는 li 에 준다. (썸네일 img 는 가운데 정렬용으로 이미 transform:translate(-50%,-50%) 를 쓰고 있어서, 거기에 또 transform 을 걸면 기존 정렬이 덮어써져 이미지가 어긋난다. li 에 주면 자식 요소의 transform 은 그대로 살아 있고 카드 전체가 함께 움직인다.) 확대(scale)는 쓰지 않는다 — 카드가 합성 레이어로 올라간 뒤 그 비트맵을 늘리는 방식이라 그 안의 글자가 다시 그려지지 않고 늘어나 흐릿해진다. 특히 진행상태 뱃지(.thumb_wrap i)는 isolation:isolate 로 별도 스택이 잡혀 있어 눈에 띄게 뭉개져 보였다(화질 깨짐). 떠오르는 느낌은 translateY 만으로도 충분하고, 썸네일 자체는 아래에서 따로 1.08 배 확대한다. */ .bbs_list_wrap li, .bbs_view_list li { transition : transform .25s ease; will-change : transform } .bbs_list_wrap li:hover, .bbs_view_list li:hover { transform : translateY(-6px) } /* 키보드로 이동하는 이용자에게도 같은 표시를 준다(마우스가 없어도 어디에 있는지 보이도록) */ .bbs_list_wrap li:focus-within, .bbs_view_list li:focus-within { transform : translateY(-6px) } /* 화면 동작 줄이기(접근성) 설정을 켠 이용자에게는 움직임을 끈다 */ @media (prefers-reduced-motion: reduce) { .bbs_list_wrap li, .bbs_view_list li { transition : none } .bbs_list_wrap li:hover, .bbs_view_list li:hover, .bbs_list_wrap li:focus-within, .bbs_view_list li:focus-within { transform : none } } .ui-datepicker { width : 100%; max-width : 300px } .top_bbs_info { display : flex; gap : 40px } /* 목록과 같은 이유로 대표이미지도 잘리지 않게 원본 비율 유지 + 남는 자리 옅은 회색 */ .top_bbs_info .thumb_img_wrap { flex-shrink : 0; width : 255px; height : 380px; position : relative; background-color : #f4f4f4; } .top_bbs_info .thumb_img_wrap a { position : absolute; bottom : 0; right : 0; padding : 1rem; z-index: 9; } .top_bbs_info .thumb_img_wrap > img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width: 100%; height : 100%; object-fit: cover; } .top_bbs_info .info_txt > p span { display : inline-block; line-height : 28px; padding : 0 15px; border-radius : 20px; overflow : hidden; font-size : 14px; border : 2px solid } /* 상세 상단 진행상태 뱃지 — 메인 목록의 title_ing/title_prev/title_end 색상과 동일하게 표시한다. */ .top_bbs_info .info_txt > p span.cate_ing { background : #0032C3; border-color : #0032C3; color : #fff } .top_bbs_info .info_txt > p span.cate_prev { background : #BEC6DE; border-color : #BEC6DE; color : #25408F } .top_bbs_info .info_txt > p span.cate_end { background : #6C6F73; border-color : #6C6F73; color : #fff } .top_bbs_info .info_txt h2 { font-size : 32px; margin : 10px 0 20px 0; color : #040404; } .top_bbs_info .info_txt dl { display : table; table-layout: fixed; width: 100%; border-bottom : 1px solid #e0e0e0 } .top_bbs_info .info_txt h2 + dl { border-top : 1px solid #000 } .top_bbs_info .info_txt dl dt, .top_bbs_info .info_txt dl dd { display : table-cell; vertical-align: top; padding : 9.4px; color : #1A1A1A; font-size : 14px } .top_bbs_info .info_txt dl dt { width : 110px; font-weight: bold; color : #040404; } .top_bbs_info .info_txt dl dd a { display : inline-block; margin-left : 5px } .bbs_view_title { margin : 40px 0 20px 0 } .bbs_view_title h2 { display : flex; gap : 10px; font-size : 24px; align-items: center; font-weight: bold;} .bbs_view_title h2 span { color : #25408F } .pesta_intro_wrap .inner { display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; font-size : 16px } .pesta_intro_wrap.active .inner { display : block; } .pesta_intro_wrap button { display : block; width: 100%; font-size :15px; color : #666; background-color: #fff; padding : 10px 0; } .pesta_intro_wrap button span { position : relative; } .pesta_intro_wrap button span:after { content : url('/images/newdesign/ic_arrow.png'); display : inline-block; transform : rotate(180deg); margin-left : 10px; transition : all .3s ease } .pesta_intro_wrap.active button span:after { transform : rotate(0) } .big_size_zoom { display : none; position : fixed; top : 0; left : 0; width : 100%; height : 100%; background : rgba( 0, 0, 0, 0.5); z-index: 999999; } .big_size_zoom.active { display : block } .big_size_zoom #closeBtn { position : absolute; top : 50px; right : 50px; color : transparent; background : url('/images/newdesign/ic_close.png') no-repeat center center / cover; width : 45px; height : 45px; padding : 0 } .big_size_zoom img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); } #zoom { width: 100%; height: 100%; } div#zoom > img { width: auto; height: 80%; } .line { height : 1px; background: #e0e0e0; margin : 40px 0 } /* ── Swiper 루트 클래스 보정 ────────────────────────────────────────────── 사이트 공용 /css/swiper.min.css 는 Swiper 4 라서 루트 클래스가 .swiper-container 인데, 실제로 동작하는 JS(/js/swiper/swiper-bundle.min.js)는 Swiper 8 이고 루트 클래스가 .swiper 다. 그래서 .swiper 에는 적용되는 규칙이 하나도 없어 position/overflow 가 빠졌고, 슬라이드가 잘리지 않고 그대로 흘러넘쳐 "행사 이미지" 슬라이드가 깨져 보였다. 공용 css 는 다른 화면(.swiper-container)이 쓰고 있으므로 건드리지 않고, 여기서 v6+ 기본값만 보충한다. */ .swiper { margin-left : auto; margin-right : auto; position : relative; overflow : hidden; list-style : none; padding : 0; z-index : 1; display : block; } .photo_swiper_wrap { position : relative; margin : 0 -15px } #photoSwiper .swiper-wrapper { margin : 0; justify-content : flex-start } /* 세로→가로 형태로 변경: 기존 165x235(세로)를 235x165(가로)로 뒤집었다 */ #photoSwiper .swiper-slide { width : 235px } #photoSwiper .swiper-slide a { display : block; position : relative; width : 235px; height : 165px; background-color : #ffffff; } #photoSwiper .swiper-slide a img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 100%; height : 100%; object-fit: cover; border-radius : 10px; } /* 대체 이미지(no_image)는 실제 행사 사진과 비율이 달라, 위 규칙의 cover 로 채우면 가운데만 크게 확대돼 보인다(로고가 잘려 "확대된 것처럼" 보이는 현상). 대체 이미지일 때만 contain 으로 바꿔 원본 비율 그대로 박스 안에 전체가 들어오게 한다. */ #photoSwiper .swiper-slide a img.no-img { object-fit : contain; } .photo_swiper_wrap svg { width : 15px; height : 15px; } .photo_swiper_wrap svg path { fill : #000 } /* ── 좌우 화살표 아이콘 ──────────────────────────────────────────────────── 시안은 Swiper 14 기준이라 버튼 안에 가 들어가는 걸 전제로 .photo_swiper_wrap svg 만 꾸몄다. 그런데 실제로 도는 Swiper 8 은 svg 를 넣지 않고 :after + swiper-icons 폰트를 쓰는데 그 폰트/스타일은 Swiper 8 css 에 들어있고 이 사이트는 Swiper 4 css 만 로드한다. 결국 어느 쪽 아이콘도 나오지 않아 버튼이 빈 동그라미로만 보였다. 버전에 상관없이 늘 보이도록 CSS 로 직접 꺾쇠를 그린다(폰트·이미지 의존 없음). */ .photo_swiper_wrap .swiper_btn, .photo_swiper_btm_wrap .swiper_btn { background-image : none; display : flex; align-items : center; justify-content : center; } /* watchOverflow가 현재 화면에 모든 이미지가 들어오면 붙이는 클래스. 버튼 요소 자체는 항상 두고 이 클래스만으로 숨겨야 화면 축소 시 다시 나타날 수 있다. */ .photo_swiper_wrap .swiper-button-lock { display : none !important; } .photo_swiper_wrap .swiper_btn:after, .photo_swiper_btm_wrap .swiper_btn:after { content : ''; display : block; width : 9px; height : 9px; border-top : 2px solid #000; border-right : 2px solid #000; } .photo_swiper_wrap .swiper-button-next:after, .photo_swiper_btm_wrap .swiper-button-next:after { transform : rotate(45deg); margin-left : -3px; } .photo_swiper_wrap .swiper-button-prev:after, .photo_swiper_btm_wrap .swiper-button-prev:after { transform : rotate(-135deg); margin-right : -3px; } .photo_swiper_wrap .swiper_btn { top : 50%; margin-top : 0; width : 40px; height : 40px; border : 1px solid #000; background-color : #fff; border-radius : 100% } .photo_swiper_wrap .swiper-button-prev { left : 0 } .photo_swiper_wrap .swiper-button-next { left : 100%; right : 0 } #photoBigSwiperBtm .swiper-slide { position : relative; width : 119px; height : calc(100% - 15px); overflow: hidden; background-color: transparent; border: 6px solid transparent } #photoBigSwiperBtm .swiper-slide a { display : block; width : 100%; height : 100%; position : relative; overflow : hidden } /* width/height 가 없으면 이미지가 원본 크기 그대로 중앙에 얹혀서, 원본이 이 썸네일(119px)보다 크면 가운데 일부만 확대되어 보인다("줌인된 것처럼 보인다"는 현상). 다른 이미지 영역과 같은 기준으로 박스에 맞춰 전체가 보이게 한다. */ #photoBigSwiperBtm .swiper-slide a img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 100%; height : 100%; object-fit: contain; } div#content.sub { min-height : auto; margin-bottom : auto } div#content.overflow { overflow : inherit } #photoBigSwiperBtm { height : 100% } #modalSwiperWrap { display : none; position : fixed; top : 0; left : 0; width : 100%; height : 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 9999999; } #modalSwiperWrap.active { display : block } #modalSwiperWrap .inner { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 90%; height : 85% } #swiperCloseBtn { position : absolute; top : 50px; right : 50px; color : transparent; background : url('/images/newdesign/ic_close.png') no-repeat center center / cover; width : 45px; height : 45px; padding : 0; z-index: 6; } #photoBigSwiperTop { height : 70%; padding-bottom : 70px } #photoBigSwiperTop .swiper-wrapper, #photoBigSwiperBtm .swiper-wrapper { width : 100% !important } #photoBigSwiperTop .swiper-slide { background : none; height : 100%; } #photoBigSwiperTop .swiper-slide a { display : block; position : relative; height : 100%; margin : 0 auto } #photoBigSwiperTop .swiper-slide a img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 100%; height : 100%; object-fit: contain; max-width: 100%; } /* 스크롤바가 안 보이던 이유 — 공용 swiper.min.css(Swiper 4)에서 스크롤바에 "높이"를 주는 규칙은 ".swiper-container-horizontal > .swiper-scrollbar { height:5px; ... }" 하나뿐인데, 그 선택자는 루트에 swiper-container-horizontal 클래스가 있어야 한다(Swiper 4 기준). 실제로 동작하는 Swiper 8 은 루트에 swiper-horizontal, 스크롤바에 swiper-scrollbar-horizontal 을 붙이므로 저 규칙이 전혀 걸리지 않아 높이가 0 이 됐다(= 화면에 안 보임). 아래 규칙에도 height 가 없어서 그대로 0 이었으므로 여기서 직접 지정한다. (막대 자체인 .swiper-scrollbar-drag 는 v4 의 height:100% 규칙이 스코프 없이 적용되므로 그대로 채워진다) */ #photoBigSwiperTop .swiper-scrollbar { position : fixed; bottom : -25px; left : 0; background-color: rgba(255, 255, 255, 0.5); width : 100%; height : 4px; z-index : 50; } #photoBigSwiperTop .swiper-scrollbar-drag { background-color: #fff; } .swiper-slide-thumb { border : 6px solid transparent } #photoBigSwiperBtm .swiper-slide-thumb-active { border : 4px solid #2487FF; border-radius : 5px; } #photoBigSwiperTop .swiper-pagination { display : block; position : relative; margin : 10px auto; z-index: 99; text-align: center; background-color: rgba( 0, 0, 0, 0.5); width : 100px; border-radius: 20px; line-height : 40px; bottom : -5px; color : #fff; font-size : 14px } #photoBigSwiperTop .swiper-pagination-total { color : rgba(255, 255, 255, 0.6) } .photo_swiper_btm_wrap { position : relative; height : 20% } .photo_swiper_btm_wrap svg { width : 15px; height : 15px; } .photo_swiper_btm_wrap svg path { fill : #000 } .photo_swiper_btm_wrap .swiper_btn { top : 50%; margin-top : 0; width : 40px; height : 40px; border : 1px solid #000; background-color : #fff; border-radius : 100% } .photo_swiper_btm_wrap .swiper-button-prev { left : 0 } .photo_swiper_btm_wrap .swiper-button-next { left : 100%; right : 0 } #map > img { display : block; width : 100%; height : auto } /* 행사 위치 지도 위 '현재 위치로 가기' 버튼 — 카카오맵 SDK 의 확대/축소 컨트롤(ZoomControl)은 SDK 가 자체적으로 그려 넣지만, 현재 위치 이동은 SDK 기본 기능이 아니라 버튼을 지도 위에 직접 올려서 만든다. .map-area 에 position:relative 를 줘야 이 버튼이 지도 박스 기준으로 자리를 잡는다(문서 전체 기준으로 튀지 않도록). */ .map-area { position : relative } .map-current-loc-btn { position : absolute; right : 10px; bottom : 10px; z-index : 3; width : 36px; height : 36px; padding : 0; border : none; border-radius : 4px; background-color : #fff; box-shadow : 0 1px 4px rgba(0,0,0,.3); cursor : pointer; } .map-current-loc-btn:hover { background-color : #f5f5f5 } /* 버튼 아이콘도 이미지 대신 CSS 로 그린다(이 파일의 스와이퍼 화살표와 같은 방식) — 원(테두리) 안에 점 하나, GPS 위치 아이콘의 가장 단순한 형태 */ .map-current-loc-btn::before { content : ''; display : block; width : 14px; height : 14px; margin : 0 auto; border : 2px solid #555; border-radius : 50%; box-sizing : border-box; position : relative } .map-current-loc-btn::after { content : ''; position : absolute; top : 50%; left : 50%; width : 6px; height : 6px; margin : -3px 0 0 -3px; border-radius : 50%; background-color : #25408F } /* '현재 위치로 가기' 클릭 시 지도 위에 표시하는 파란 점(내 위치) — 행사 위치 마커와 헷갈리지 않도록 모양을 다르게 한다 */ .map-current-loc-dot { width : 16px; height : 16px; border-radius : 50%; background-color : #4285f4; border : 2px solid #fff; box-shadow : 0 0 0 2px rgba(66,133,244,.4), 0 1px 3px rgba(0,0,0,.4); } /* 행사 추천 카드 — 목록 화면 카드(.bbs_list_wrap)와 같은 구조·같은 스타일로 맞춘다. 예전에는 썸네일 비율(padding-top:130%)을 ".bbs_view_list p" 처럼 요소 선택자로 줬는데, 카드에 날짜(

)가 추가되면서 그 규칙이 날짜 문단에도 걸려 카드 한 장 높이만큼의 빈 공간이 제목과 날짜 사이에 생겼다. 썸네일(.thumb_wrap)에만 걸리도록 좁힌다. */ .bbs_view_list { display : flex; gap : 24px; flex-wrap : wrap } .bbs_view_list li { flex : 0 0 calc(25% - 18px); max-width : calc(25% - 18px); box-sizing : border-box; } .bbs_view_list a { display : block; } .bbs_view_list .thumb_wrap { position : relative; padding-top : 130%; background-color : #ffffff; } .bbs_view_list .thumb_wrap img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 100%; height : 100%; object-fit: cover; border-radius : 10px; } .bbs_view_list .thumb_wrap i { position : absolute; top : 0; left : 0; width : 90px; line-height : 35px; text-align: center; z-index: 9; font-size : 16px; border-radius : 10px 0 10px 0 } .bbs_view_list a div { padding : 15px 0 } /* 지역명(.sub_title)은 칩이 아니므로 알약 스타일에서 제외 — 목록 화면(.bbs_list_wrap)과 동일 */ .bbs_view_list a div span:not(.sub_title) { display : inline-block; padding : 0 15px; line-height : 30px; border : 2px solid; border-radius : 20px; font-size : 14px } .bbs_view_list h2 { text-overflow: ellipsis; overflow : hidden; white-space : nowrap; font-size : 20px; margin : 10px 0 3px 0; font-weight: bold;} .bbs_view_list .sub_title { font-size : 15px; color : #666666; margin-left : 8px } /* 분류 칩 + 지역명 한 줄 — 목록 화면의 .cate_row 와 같은 규칙. 예전에는 이 줄을

로 두었는데, 위의 ".bbs_view_list a div{padding:15px 0}" 이 바깥 div 뿐 아니라 이 안쪽 div 에도 걸려 뱃지 위아래로 15px 씩이 더 붙었다. 그래서 뱃지와 행사명 사이가 목록 화면보다 눈에 띄게 벌어져 보였다. 마크업을 목록 화면과 똑같이

로 맞춘다(p 는 위 div 규칙에 걸리지 않는다). */ .bbs_view_list .cate_row { display : flex; align-items : center; margin : 0 } .bbs_view_list .date { font-size : 16px; color : #333333; margin-top : 3px } /* ── 이미지 마우스 오버 효과 (목록/상세 공통) ────────────────────────────────── 목록과 상세 추천 카드는 고정된 wrapper 안에서 이미지만 확대한다. wrapper의 overflow:hidden과 10px 모서리로 확대된 이미지가 카드 밖으로 넘치지 않게 한다. */ .bbs_list_wrap .thumb_wrap, .bbs_view_list .thumb_wrap { overflow : hidden; border-radius : 10px; isolation : isolate } .bbs_list_wrap .thumb_img_clip, .bbs_view_list .thumb_img_clip { display : block; position : absolute; top : 0; right : 0; bottom : 0; left : 0; overflow : hidden; border-radius : 10px; z-index : 0 } .bbs_list_wrap .thumb_wrap img, .bbs_view_list .thumb_wrap img { transition : transform .3s ease; will-change : transform } .bbs_list_wrap li a:hover .thumb_wrap img, .bbs_view_list li a:hover .thumb_wrap img { transform : translate(-50%, -50%) scale(1.08) } /* 진행예정 뱃지의 둥근 좌측 상단 틈으로 이미지 색이 비치지 않도록, 이미지(z-index:auto) 위·뱃지(z-index:9) 아래에 같은 색의 작은 코너 마스크를 둔다. */ .bbs_list_wrap .thumb_wrap.thumb-upcoming::before, .bbs_view_list .thumb_wrap.thumb-upcoming::before { content : ''; position : absolute; top : 0; left : 0; width : 16px; height : 16px; z-index : 8; background : #efefe5; pointer-events : none } #photoSwiper .swiper-slide a { overflow : hidden; border-radius : 10px } #photoSwiper .swiper-slide a img { transition : transform .3s ease } #photoSwiper .swiper-slide a:hover img { transform : translate(-50%, -50%) scale(1.08) } /* 상세 대표이미지만 확대 대신 밝기로 반응시킨다 — 이 박스 안에는 확대보기 오버레이(.big_size_zoom, position:fixed)가 들어 있어서, 확대분을 자르려고 overflow:hidden 을 걸면 브라우저에 따라 그 오버레이까지 잘릴 위험이 있다. (확대보기는 바로 이 이미지를 클릭해 여는 기능이라 절대 깨지면 안 된다) */ .top_bbs_info .thumb_img_wrap > img { transition : filter .3s ease } .top_bbs_info .thumb_img_wrap:hover > img { filter : brightness(1.08) } /* 카드는 이미지 확대와 함께 그림자·제목 색으로도 반응한다 */ .bbs_list_wrap .thumb_wrap, .bbs_view_list .thumb_wrap { transition : box-shadow .3s ease } .bbs_list_wrap li a:hover .thumb_wrap, .bbs_view_list li a:hover .thumb_wrap { box-shadow : 0 6px 16px rgba(0, 0, 0, 0.18) } .bbs_list_wrap li a:hover h2, .bbs_view_list li a:hover h2 { color : #25408F } /* 대표이미지·행사 이미지 슬라이드는 클릭하면 확대창이 열리므로 손가락 커서로 알린다 */ .top_bbs_info .thumb_img_wrap > img, #photoSwiper .swiper-slide a { cursor : pointer } .sub_inner { padding : 0 15px; margin-bottom : 180px } /* 목록 화면의 페이지네이션 아래 여백. 통합검색(searchList.do)은 페이지네이션이 div.search_box 안에 있고 그 뒤에도 내용이 더 붙어서 푸터와 넉넉히 떨어져 보이는데, 이 화면(event/index.jsp)은 .pagelist 가 #content 의 마지막 요소라 board.css 의 margin-bottom:20px 만 남아 푸터에 바짝 붙어 보였다. 여기서 margin-bottom 을 쓰면 안 된다 — sub.css 의 div#content{overflow:hidden} 을 index.jsp 가 인라인 style="overflow:inherit" 로 덮는 바람에 #content 가 BFC 를 만들지 않아, 마지막 자식인 .pagelist 의 margin-bottom 이 #content 의 margin-bottom 과 병합되어(margin collapsing) 실제로는 아무 여백도 늘지 않는다. 병합되지 않는 padding 으로 확보한다. (new_style.css 는 지역행사/이슈키워드 화면에서만 불러오므로 통합검색 화면에는 영향이 없다) */ .pagelist { padding-bottom : 20px } /* 페이지 번호 묶음(.pagelist-nums) 자체는 버튼이 아니라 단순 컨테이너다. board.css 의 div.pagelist span{display:inline-block;width:42px;height:39px} 과 div.pagelist span:hover{background:#25408F} 가 이 묶음에도 걸리므로 되돌린다. 기본(데스크톱)에서는 display:inline 이라 지금까지와 똑같이 번호가 흐른다. */ .pagelist .pagelist-nums { display : inline; width : auto; height : auto; padding : 0 } .pagelist .pagelist-nums:hover { background : transparent; cursor : default } /* 상세화면 상단(summary 와 top_bbs_info 사이) "목록" 버튼 - 왼쪽 정렬. 예전에는 테두리 없는 글자 링크에 "<" 를 글자로 붙여 썼는데, 버튼으로 보이지 않고 꺾쇠도 글꼴에 따라 크기·위치가 제각각이었다. 테두리 있는 버튼 + CSS 로 그린 꺾쇠 아이콘으로 바꾼다. (아이콘을 이미지/아이콘폰트가 아니라 CSS 로 그리는 건 이 파일의 스와이퍼 화살표와 같은 방식 — 폰트나 이미지 파일이 없어도 항상 보인다) */ .top_list_btn_wrap { text-align : left; margin : 10px 0 } .top_list_btn_wrap .btn_list_top { display : inline-flex; align-items : center; gap : 8px; padding : 0 18px; line-height : 38px; box-sizing : border-box; border : 1px solid #ccc; border-radius : 6px; background-color : #fff; color : #333; font-size : 15px; } /* border-top+border-right 로 만든 정사각형 모서리를 -135도 돌리면 왼쪽 꺾쇠(<)가 된다. currentColor 라서 hover 시 글자색이 바뀌면 아이콘 색도 같이 따라간다. */ .top_list_btn_wrap .btn_list_top .ico_prev { display : inline-block; width : 7px; height : 7px; border-top : 2px solid currentColor; border-right : 2px solid currentColor; transform : rotate(-135deg); margin-left : 3px; } .top_list_btn_wrap .btn_list_top:hover, .top_list_btn_wrap .btn_list_top:focus { border-color : #25408F; color : #25408F; text-decoration : none; } /* 상세화면 하단 "목록" 버튼 */ .bbs_view_btm { text-align : center; margin-top : 50px; } .bbs_view_btm .btn_list { display : inline-block; min-width : 150px; line-height : 50px; padding : 0 25px; box-sizing : border-box; border : 1px solid #25408F; border-radius : 6px; background-color : #25408F; color : #fff; font-size : 16px; text-align : center; } .bbs_view_btm .btn_list:hover, .bbs_view_btm .btn_list:focus { background-color : #1b3068; border-color : #1b3068; color : #fff; text-decoration : none; } .event_data_source { margin-top : 24px; padding : 16px 20px; border-radius : 6px; background-color : #f5f6f8; color : #666; font-size : 14px; line-height : 1.6; text-align : left; } .custom_select_box .selected_label { display : none } .select_options { display : flex; width: 100%; } .select_options li { position : relative; flex : auto; border-bottom : 2px solid #ccc } .select_options li:first-child { margin-left : 0 } .select_options a { display : block; line-height : 55px; text-align: center; color : #999999; background-color: #fff } .select_options li.active a { color : #25408F; font-weight: bold; } .select_options li.active:after { content : ''; width : 100%; height : 3px; background-color: #25408F; position : absolute; bottom : -2px; left : 0; } .graph_cal_wrap { display : flex; justify-content: space-between; margin : 30px 0; align-items: center; } /* 좌우 화살표 — 원본 ic_arrow.png 는 14x8px 짜리 1배수 이미지라 고해상도(레티나) 화면에서 확대되며 뭉개져 보였다. 같은 모양의 SVG 를 data URI 로 넣어 어떤 배율에서도 선명하게 그린다. (아래 rotate 각도는 그대로라 화살표 방향은 기존과 동일하다) */ .graph_cal_wrap a { display : block; width : 40px; height : 40px; background : url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1L7 7L13 1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center / 12px auto; border : 1px solid #000; background-color : #fff; border-radius : 100% } .graph_cal_wrap a.cal_prev { transform : rotate(-90deg)} .graph_cal_wrap a.cal_next { transform : rotate(90deg)} /* 이번 달을 보고 있을 때의 '다음달' 버튼 — 그 다음은 아직 지나지 않아 데이터가 없으므로 눌러도 반응하지 않는다(JS 에서도 막지만, 여기서 시각적으로도 비활성 상태임을 알린다) */ .graph_cal_wrap a.disabled { opacity : .35; cursor : default; pointer-events : none; } .graph_cal_wrap div { display : flex; gap : 10px } /* 연/월 드롭다운 화살표 — 원본 ic_dropdown.png 는 16x16 짜리 1배수 이미지라 고해상도(레티나) 화면에서 뭉개져 보였다. 좌우 이동 버튼과 같은 모양의 SVG 로 바꿔 어떤 배율에서도 선명하게 그린다. */ .graph_cal_wrap select { display : inline-block; border : 1px solid transparent; font-weight: bold; font-size : 16px; background : url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1L7 7L13 1' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 5px center / 12px auto; padding : 0 25px 0 8px; -webkit-appearance: none; appearance: none; height : 40px; border-radius : 6px; cursor : pointer } /* 연/월 셀렉트를 열거나 값을 고르는 중(포커스)일 때 — 기본 파란 하이라이트 대신 이 사이트 기본색(#25408F)으로 테두리를 잡아 준다. */ .graph_cal_wrap select:hover { background-color : #f4f6fb } .graph_cal_wrap select:focus { outline : none; border-color : #25408F; background-color : #f4f6fb } /* 펼쳐진 목록 안의 항목 간격·선택색 (브라우저가 option 스타일을 지원하는 경우에만 적용됨) */ .graph_cal_wrap select option { padding : 6px 8px; font-size : 15px; font-weight: normal; background-color : #fff; color : #222 } .graph_cal_wrap select option:checked { background-color : #eaecf4; color : #25408F; font-weight: bold } /* 순위 목록(.graph_rank)과 월별추이 그래프(.graph_area)를 한 줄에 좌우로 배치한다. 순위는 350px 고정, 그래프가 남는 폭을 모두 차지한다(page03.html 시안과 동일). */ .graph_top_area { display : flex; gap : 24px } .graph_top_area * { box-sizing: border-box;} .graph_top_area > div { box-shadow: 5px 5px 11px 3px #BCBCBC7A; padding : 25px} .graph_top_area .graph_rank { width : 350px; flex-shrink : 0 } .graph_top_area.no-keywords .graph_rank { width : 100%; flex-shrink : 1 } /* 순위 목록은 350px 폭이라 2열로 나누면 좁으므로 한 줄에 하나씩(기본 세로 목록) 둔다 */ .graph_top_area .graph_rank ul li { display : flex; position : relative; align-items : center; gap : 10px; padding-right : 45px } .graph_top_area .graph_rank ul li ~ li { margin-top : 10px } .graph_top_area .graph_rank ul li span { display : inline-block; width : 24px; line-height : 26px; text-align: center; background-color: #eaecf4; color : #25408F; font-size : 14px; border-radius : 3px; flex-shrink: 0; } .graph_top_area .graph_rank ul li a { display : block; line-height : 26px; text-overflow: ellipsis; overflow : hidden; white-space: nowrap; font-size : 16px } .graph_top_area .graph_rank ul li i { position : absolute; top : 50%; right : 0; display : flex; align-items : center; justify-content : center; width : 40px; height : 26px; transform : translateY(-50%); text-align: center; } .graph_top_area .graph_rank ul li i img { display : block } /* 키워드 선택 표시 — 퍼블리싱 시안에 선택 상태가 빠져 있어 어떤 키워드를 보고 있는지 알 수 없었다. 글자색만으로는 눈에 잘 안 띄어 줄 전체 배경까지 깔아 준다. (on 클래스는 가 아니라

  • 에 붙는다 — argos/index.jsp 참고) */ .graph_top_area .graph_rank ul li { cursor : pointer; border-radius : 4px; transition : background-color .15s } .graph_top_area .graph_rank ul li a { color : #222 } .graph_top_area .graph_rank ul li:hover { background-color : #f4f6fb } .graph_top_area .graph_rank ul li.on { background-color : #eaecf4 } .graph_top_area .graph_rank ul li.on a { color : #25408F; font-weight : bold } .graph_top_area .graph_rank ul li.on span { background-color : #25408F; color : #fff } /* "조회된 이슈키워드가 없습니다" 안내문 — 위의 li 기본값이 display:flex 라 그대로 두면 가운데 정렬이 먹지 않으므로 block 으로 되돌려 가운데에 오게 한다. */ .graph_top_area .graph_rank ul li.aiv-empty { display : block; padding-right : 0; text-align : center; white-space : nowrap; cursor : default } .graph_top_area .graph_rank ul li.aiv-empty:hover { background-color : transparent } /* 그래프 영역은 세로 flex 로 두고, 그래프(#aivTrendChart)를 아래쪽으로 밀어 붙인다. 순위 목록(.graph_rank)이 그래프보다 길어 박스 높이가 순위 기준으로 늘어나는데, 그대로 두면 남는 빈 공간이 그래프 "아래"에 생겨 그래프 선이 박스 위쪽에 떠 보였다. margin-top:auto 로 남는 공간을 제목과 그래프 "사이"로 보내 그래프가 하단에 붙게 한다. */ .graph_top_area .graph_area { flex : auto; display : flex; flex-direction : column } .graph_top_area .graph_area #aivTrendChart { margin-top : auto } .graph_top_area .graph_area.no-selection { min-height : 320px; align-items : center; justify-content : center } .graph_top_area .graph_area.no-selection h2 { display : none } .graph_top_area .graph_area.no-selection #aivTrendChart { width : 100%; margin-top : 0 } .graph_top_area .graph_area.no-selection .aiv-empty { padding : 0 } /* 그래프 영역 상단 타이틀 — 선택된 키워드만 표시한다("이슈 키워드 월별 추이 "..."" 문구 제거). ui.reset.css 가 h2 의 font-size/font-weight 를 전부 0/normal 로 지우므로 타이틀처럼 보이도록 직접 잡아 준다. */ .graph_top_area .graph_area h2 { text-align : center; font-size : 18px; font-weight : bold; margin-bottom : 15px } .graph_bbs_title { display : flex; margin : 40px 0 20px; justify-content: space-between; font-size : 24px; font-weight: bold; } .graph_bbs_title a { position : relative; font-size : 14px; font-weight: normal; color : #1A1A1A } .graph_bbs_title a:after { content : url('/images/newdesign/ic_arrow.png'); transform : rotate(90deg); display : inline-block; margin-left : 10px } /* 섹션 제목은 원래 좌측 위치에 두고 검색결과 수를 바로 옆에 배치한다. */ .graph_bbs_title .graph_bbs_left, .graph_bbs_title .graph_bbs_right { display : flex; align-items : center } .graph_bbs_title .graph_bbs_left { gap : 10px; align-items : flex-end } .graph_bbs_title .graph_bbs_count { font-size : 14px; font-weight : normal; color : inherit } .graph_bbs_title .graph_bbs_count strong { font-weight : bold } .graph_bbs_wrap * { box-sizing: border-box ;} .graph_bbs_wrap ul { display : flex; gap : 24px; align-items: stretch; } /* min-width:0 이 없으면 카드가 줄어들지 않아 3개 중 1개만 보인다. flex 아이템의 기본값이 min-width:auto 라 "내용이 요구하는 최소 너비" 아래로는 축소되지 않는데, 제목(h2)에 white-space:nowrap 이 걸려 있어 긴 제목이면 그 최소 너비가 통째로 한 줄 길이가 된다. 결국 첫 카드가 영역을 다 차지하고 나머지 2개는 밖으로 밀려났다. min-width:0 을 줘야 축소가 허용되고 h2 의 말줄임(text-overflow:ellipsis)도 동작한다. */ /* 카드는 개수와 상관없이 항상 1/3 폭을 유지한다(gap 24px × 2 를 뺀 값). flex-grow 가 1 이면 결과가 2건일 때 두 카드가 빈 3번째 자리까지 나눠 먹어 한 건짜리 줄처럼 넓어진다. min-width:0 은 그대로 둔다 — flex 아이템 기본값(min-width:auto)이면 제목(nowrap)이 길 때 축소가 막혀 카드가 밀려나고 h2 의 말줄임도 동작하지 않는다. */ .graph_bbs_wrap ul li { position : relative; flex : 0 0 calc(33.333% - 16px); max-width : calc(33.333% - 16px); min-width : 0; border : 1px solid #e0e0e0; border-radius : 8px; padding : 15px 15px 40px 15px; } .graph_bbs_wrap ul a { display : block; letter-spacing: -1px; } .graph_bbs_wrap ul a > p { display : flex; flex-wrap : wrap; align-items : center; gap : 6px; min-width : 0 } .graph_bbs_wrap .btn { display : inline-block; padding : 0 10px; line-height : 25px; border : 1px solid transparent; border-radius : 20px; font-size : 14px; color : #25408F } .graph_bbs_wrap .aiv-badge-region { background-color : #eaecf4; border-color : #eaecf4 } .graph_bbs_wrap .aiv-badge-detail { background-color : #fff; border-color : #25408F } .graph_bbs_wrap h2 { text-overflow: ellipsis; overflow : hidden; white-space: nowrap; font-size : 16px; margin : 15px 0 10px 0; font-weight: bold; } .graph_bbs_wrap h3 { font-size : 14px; font-weight: normal; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; } .graph_bbs_wrap sub { position : absolute; bottom : 25px; left : 15px; font-size : 14px; color : #999 } /* 관련자료 목록(#aivRelatedWrap)이 argos 화면의 마지막 요소라 그대로 두면 푸터에 바짝 붙는다. 푸터와의 간격을 40px 확보한다. 마지막 자식의 margin 이 부모와 병합되지 않도록 padding 을 쓴다. (1359px 이하에서는 하단 고정 푸터에 가려지므로 아래 미디어쿼리에서 70px 로 더 키운다) */ #aivRelatedWrap { padding-bottom : 40px } @media only screen and (max-width: 1359px){ .summary { top: 0; } #container { top : 0 } /* 이 폭에서는 .summary 가 position:fixed(높이 53px)라 흐름에서 빠져 있어, #content 를 아래로 밀어 주지 않으면 본문 첫 요소가 상단바에 가려진다. */ #content { top : 0; padding-top : 80px } /* 단, class="search-tab-box" 인 화면(event/index.jsp, event/detail.jsp)은 sub_m2.css 의 div.search-tab-box{margin-top:85px} 로 이미 그만큼 내려와 있다. 거기에 padding-top:80px 까지 더하면 85+80=165px 이라 검색창 위 공백이 너무 넓어진다. 반대로 argos/index.jsp 는 이 클래스가 없어 padding-top 이 유일한 여백이므로 남겨 둬야 한다. */ #content.search-tab-box { padding-top : 0 } /* 그 85px 도 모바일에서는 상단 여백이 과해 보인다는 요청에 따라 2/3(약 57px)로 줄인다. - 목록(event/index.jsp) : 검색영역과 .summary 사이 빈 공간이 줄어든다 - 상세(event/detail.jsp): .summary 와 .top_list_btn_wrap 위 상단 여백이 줄어든다 sub_m2.css 의 div.search-tab-box 와 같은 우선순위로는 로드 순서에 좌우되므로, #content 를 붙여 우선순위를 높여 확실히 덮어쓴다(두 화면 모두
    ). */ #content.search-tab-box { margin-top : 57px } /* 바닥 1px 패딩 — 아래 .event_data_source 의 margin-bottom 이 부모(#content)의 margin 과 합쳐져(margin collapsing) 사라지는 것을 막는다. 이 화면의 #content 는 인라인 style="overflow:inherit" 라 BFC 가 아니라서 그냥 두면 마진이 밖으로 빠져나간다. 1px 이라 두 화면(목록/상세) 어디에도 눈에 띄는 영향이 없다. */ #content.search-tab-box { padding-bottom : 1px } .photo_swiper_wrap { margin : 0 15px } div#content.overflow { overflow : hidden } /* 이 폭부터 sub_m2.css 의 div.w_hide.m_footer 가 position:fixed; bottom:0; z-index:1000000 으로 화면 하단에 뜬다. .sub_inner 에 이미 margin-bottom:180px 이 있지만, margin 은 마지막 자식인 .bbs_view_btm 의 margin-bottom 과 겹쳐(margin collapsing) 실제 확보되는 여백이 더 커지지 않고, 페이지를 끝까지 내려도 버튼이 고정 푸터 영역 안에 그대로 남아 겹쳐 보인다. margin 은 부모/형제와 합쳐질 수 있어 안 겹치는 걸 보장 못 하므로, 절대 합쳐지지 않는 padding 으로 푸터 높이(약 50px)보다 넉넉한 여백을 .sub_inner 박스 안에 직접 확보한다. */ .sub_inner { padding-bottom : 70px } /* event/index.jsp(목록) 의 고정 푸터 회피 여백. 페이지네이션은 더 이상 마지막 요소가 아니다 — 그 아래 안내 문구(.event_data_source)가 붙는다. 그래서 예전처럼 여기에 80px 을 주면 (1) 페이지네이션과 안내 문구 사이만 크게 벌어지고 (2) 정작 마지막 요소인 안내 문구는 고정 푸터(.m_footer, position:fixed) 뒤로 들어가 잘렸다. 여백은 줄이고, 푸터를 피하기 위한 공간은 아래 안내 문구 밑으로 옮긴다. */ .pagelist { padding-bottom : 16px } /* 마지막 요소가 된 안내 문구 아래에 푸터 높이(약 48px) + 실제 보이는 여백(약 40px) 을 확보한다. padding 이 아니라 margin 인 이유 — .event_data_source 는 회색 배경 박스라 padding 을 늘리면 여백이 아니라 박스 자체가 커진다. (마진이 부모로 새지 않도록 위에서 #content 에 바닥 1px 패딩을 뒀다) */ .event_data_source { margin-bottom : 90px } /* 좁은 화면에서 페이지 번호가 2줄로 접히던 문제 — 한 줄로 고정하고 넘치는 뒤쪽 번호는 잘라 감춘다. 목록 전체를 flex 한 줄로 두되, 앞뒤 이동 버튼(<< < > >>)은 flex-shrink:0 으로 항상 남기고 가운데 번호 묶음만 overflow:hidden 으로 잘라낸다(min-width:0 이어야 flex 항목이 줄어든다). */ .pagelist .pagination { display : flex; justify-content : center; align-items : center; flex-wrap : nowrap; max-width : 100% } .pagelist .pagination > span, .pagelist .pagination > strong { flex : 0 0 auto } .pagelist .pagelist-nums { display : flex; flex-wrap : nowrap; overflow : hidden; min-width : 0 } .pagelist .pagelist-nums > span, .pagelist .pagelist-nums > strong { flex : 0 0 auto } /* argos(지방의회 이슈키워드) 도 관련자료 목록이 페이지 마지막 요소라 같은 고정 푸터에 잘린다. 이 구간의 푸터(.m_footer)는 position:fixed 로 화면 하단에 겹쳐 뜨고 높이가 약 48px (img 27px + a 상하 margin 20px + border-top 1px)이다. 따라서 데스크톱과 같은 "보이는 여백 40px"을 얻으려면 푸터 높이만큼을 더해야 한다. 48px(푸터) + 40px(여백) ≒ 90px 40px 만 주면 그 전부가 푸터 뒤로 들어가 목록이 푸터에 붙어 보인다(1348/786/518px 모두 동일). */ #aivRelatedWrap { padding-bottom : 90px } } @media ( max-width : 1200px ){ .new_box_area .search_content { flex-direction: column; padding : 0; gap : 0 } .new_box_area .search_content .inner { width : 100%; border : none; border-bottom : 1px solid #ccc; padding: 20px 0 !important; } .new_box_area .search_content .inner:first-child, .new_box_area .search_content .inner:last-child { width : 100% } .new_box_area .inner .state_ul { display : flex; align-items: center; gap : 10px; flex-wrap : wrap } .new_box_area .inner .state_ul li ~ li { margin : 0; } .new_box_area .search_rang_wrap { align-items : stretch; } .custom_select_box, .custom_select_box * { box-sizing: border-box;} .custom_select_box { position: relative; cursor: pointer; } .custom_select_box ul { width : 100% } .select_options li { border : none; border-bottom : 1px solid #ccc } .custom_select_box .selected_label { display : block; width : 100%; } .selected_label { padding: 10px 15px; border: 1px solid #25408F; border-radius: 10px; background: #fff; color : #25408F; background-color: #fff; } .custom_select_box .selected_label::after { content : '▼'; display : inline-block; float : right; font-size : 0.8em; color : #666; transform : rotate(0deg); transition : transform .2s ease; } /* z-index 는 sub_m2.css 의 .summary(position:fixed, z-index:10000) 보다 높아야 한다. 10 이던 값으로는 펼친 목록이 상단 고정바 등 다른 층에 가려 "안 열린 것처럼" 보인다. */ .select_options { display: none; position: absolute; top: 100%; left: 0; width: 100%; border: 1px solid #ccc; border-top: none; background: #fff; z-index: 10001; max-height: 200px; overflow-y: auto; } .select_options li a { display: block; color: #333; text-decoration: none; line-height : 40px } .select_options li:hover { background-color: #f5f5f5; } .select_options li.active { background-color: #e0f7fa; font-weight: bold; } .custom_select_box.open .selected_label { border-bottom : none; border-radius : 10px 10px 0 0 } .custom_select_box.open .selected_label::after { transform : rotate(180deg); } .custom_select_box.open .select_options { position : absolute; top : 48px; left : 0; width : 100%; display: block; border-top : none; border-radius : 0 0 10px 10px; border-color : #25408F } .select_options li:first-child {border-top : 1px solid #ccc } .select_options li.active:after { display : none } .custom_select_box ul a { font-size : 14px } /* 예전에는 이 구간에서 카드(의안/회의록/뉴스)를 세로로 쌓았는데(flex-direction:column), 카드가 아래로 줄줄이 내려가 한 화면에 안 들어온다는 지적이 있어 가로 한 줄 배치를 유지한다. 폭이 좁아지면 카드가 같이 좁아질 뿐 줄바꿈/쌓임은 하지 않는다. */ } @media ( max-width : 800px ){ .new_box_area .inner .area_ul li { width : calc(25% - 10px) } /* 좁은 화면에서 4개를 유지하면 카드가 너무 작아진다 — 추천행사 목록(.bbs_view_list)과 같은 기준으로 2개씩 */ .bbs_list_wrap li { flex : 0 0 calc(50% - 12px); max-width : calc(50% - 12px); } .top_bbs_info { flex-direction: column; } .top_bbs_info .thumb_img_wrap { margin : 0 auto } .top_bbs_info .info_txt h2 { font-size : 26px } .graph_top_area { flex-direction: column;} .graph_top_area > div { width : 100% !important } } @media ( max-width : 700px ){ .new_box_area .inner .area_ul li { width : calc(33.33% - 10px) } .new_box_area .inner .state_ul li { width : calc(50% - 10px) } .big_size_zoom #closeBtn, #swiperCloseBtn { width : 36px; height : 36px } .top_bbs_info .info_txt dl dt { width : 90px } } @media ( max-width : 600px ){ #photoBigSwiperTop { height : 70% } .top_bbs_info .info_txt dl dt { width : 80px } .top_bbs_info .info_txt h2 { font-size : 24px } .bbs_view_title h2 { font-size : 22px } .bbs_view_list { flex-wrap : wrap } /* 기본 규칙이 flex/max-width 로 폭을 고정하므로(목록 카드와 동일), 여기서도 같은 속성으로 덮어야 한다 — width 만 주면 flex-basis 가 그대로 남아 2단으로 바뀌지 않는다 */ .bbs_view_list li { flex : 0 0 calc(50% - 12px); max-width : calc(50% - 12px); } /* 카드는 계속 가로 한 줄로 두되(요구사항), 이 폭에서 3등분하면 글자가 안 읽힐 만큼 좁아진다. 카드 최소폭을 잡고 넘치는 만큼 옆으로 스크롤해서 보게 한다. */ .graph_bbs_wrap ul { overflow-x : auto; gap : 12px; padding-bottom : 5px } .graph_bbs_wrap ul li { flex : 0 0 240px; max-width : 240px } } @media ( max-width : 500px ){ /* 페이지네이션 버튼 축소 — board.css 의 div.pagelist span{width:42px;height:39px} 이 좁은 화면에서도 그대로라 << < > >> 4개(168px)만으로도 폭을 넘겨 버튼이 잘렸다. style.phon.css 에 축소 규칙이 있지만 div.pagelist a 만 대상이라 이 화면(span 마크업)에는 걸리지 않는다. :not(.pagelist-nums) 로 번호 묶음 컨테이너는 제외해야 한다(폭이 고정되면 안 되는 flex 컨테이너다). */ .pagelist .pagination > span:not(.pagelist-nums), .pagelist .pagelist-nums > span, .pagelist .pagelist-nums > strong { width : 32px; height : 34px; padding-top : 4px; font-size : 13px } .new_box_area .inner .area_ul li { width : calc(50% - 10px) } .bbs_list_wrap li { flex : 0 0 100%; max-width : 100%; } } @media ( max-width : 450px ){ .new_box_area input[type="checkbox"] + label:before { width : 17px; height : 17px } }