@charset "utf-8";
/* CSS Document */

/** 전남광주통합특별시 메인개편 (2026.11.01) **/


/* HEADER */
#wrap-header .head-logo a { width:250px; height:60px; background:url(../images/new_1101/logo.png) no-repeat; background-size:contain; }
#wrap-header .gnb-wrap .a1:hover,
#wrap-header .gnb-wrap .a1.on,
#wrap-header .gnb-wrap .a2:hover,
#wrap-header .gnb-wrap .a2:focus,
#wrap-header .gnb-wrap .li3 .a3:hover { color:#0051d9; }
#wrap-header .gnb-wrap .a1:after,
#wrap-header .gnb-wrap .li3 .a3::before { background:#0051d9; }

/* MAIN COMMON */
body.main #wrap-content { margin-top:0; }
body.main .main-content .container { padding:0; }
.main-section4 { padding:5rem 0; }

/* MAIN VISUAL */
.main-section1 { padding:7rem 0; background:url(../images/new_1101/img_newmain_visual.png) no-repeat 50% 50%; background-size:cover; }
.main-visual-wrap { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:end; gap:4rem; margin:0 auto; }

/* POPUP */
.visual-popup { position:relative; min-width:0; }
.visual-popup .popup-wrap { position:relative; width:100%; height:auto; aspect-ratio:16/8.5; margin:0; overflow:hidden; border-radius:3rem; background:#fff; box-shadow:0 12px 25px rgba(0,0,0,0.18); }
.popup-slide { display:none; width:100%; height:100%; }
.popup-slide.active { display:block; }
.popup-slide > a,
.popup-slide > .popup-inner { display:block; width:100%; height:100%; }
.popup-slide img { display:block; width:100%; height:100%; /*object-fit:cover;*/ }
.popup-slide .popup-html { width:100%; height:100%; padding:3rem; overflow:auto; }
.popup-bell { position:absolute; top:-2rem; right:-1rem; display:flex; align-items:center; justify-content:center; width:8rem; height:8rem; padding:0; border:0; border-radius:50%; background:#4990ce; color:#fff; text-decoration:none; box-shadow:0px 10px 5px 0px rgba(0,0,0,0.15); cursor:pointer; z-index:2; }
.popup-bell:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.bell-icon { width:35px; height:35px; }
.bell-icon img { display:block; width:100%; height:100%; object-fit:contain; transform-origin:50% 10%; }
.popup-bell:hover .bell-icon img,
.popup-bell:focus-visible .bell-icon img { animation:bell-shake 0.8s ease-in-out; }
@keyframes bell-shake {
    0%, 100% { transform:rotate(0); }
    15% { transform:rotate(18deg); }
    30% { transform:rotate(-15deg); }
    45% { transform:rotate(10deg); }
    60% { transform:rotate(-7deg); }
    75% { transform:rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
    .popup-bell:hover .bell-icon img,
    .popup-bell:focus-visible .bell-icon img { animation:none; }
}
.bell-count { position:absolute; top:1rem; right:1rem; display:flex; align-items:center; justify-content:center; min-width:2rem; height:2rem; padding:0 0.3rem; border-radius:50%; background:#d42a22; color:#fff; font-size:1.3rem; }
.bell-count[hidden] { display:none; }
.popup-control { position:absolute; right:1rem; bottom:-2rem; display:flex; align-items:center; justify-content:center; gap:1.5rem; height:4.5rem; padding:0 2.5rem; border-radius:3rem; background:#1645a5; z-index:3; }
.popup-control button { padding:0; border:0; background:none; color:#fff; font-size:1.8rem; cursor:pointer; }
.popup-control button:hover,
.popup-control button[aria-pressed="true"] { color:#ffdc65; }
.popup-control button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.popup-control .popup-current { color:#fff; font-size:1.5rem; letter-spacing:0; }
.popup-control .popup-current em { color:#ffdc65; font-style:normal; font-weight:700; }

/* BOARD TAB */
.visual-board { min-width:0; }
.board-head { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-bottom:1.3rem; }
.board-tabs { display:flex; align-items:center; gap:3rem; min-width:0; }
.board-tabs button { position:relative; padding:0; border:0; background:none; color:#CCC; font-size:2.0rem; font-weight:500; letter-spacing:-0.1rem; white-space:nowrap; cursor:pointer; }
.board-tabs button.active::after { content:""; position:absolute; top:-15px; right:-20px; width:23px; height:23px; background:url(../images/new_1101/icn_bbs_active.png) no-repeat; background-size:contain; }
.board-tabs button.active { color:#fff; font-weight:700; font-size: 2.8rem; }
.board-tabs button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.board-more { flex-shrink:0; color:#fff; font-size:4.5rem; font-weight:300; line-height:1; text-decoration:none; }
.board-more:hover,
.board-more:focus { color:#ffdc65; }

/* BOARD CONTENT */
.board-body { position:relative; }
.board-content { display:none; padding:2rem 2.5rem; border-radius:1.3rem; background:rgba(10,35,95,0.22); box-shadow:0 12px 25px rgba(0,0,0,0.18); min-height:300px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.board-content.active { display:block; }
.board-content[hidden] { display:none; }
.board-list { margin:0; padding:0; list-style:none; }
.board-list li { border-bottom:1px dashed #e5e5e5; }
.board-list li:last-child { border-bottom:0; }
.board-list li a { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:5rem; }
.category { flex-shrink:0; border-radius:2rem; font-size:12px; padding:0 1.2rem; color:#fff; font-weight:500; letter-spacing:-0.1rem; line-height:2.2rem; }
.category.ico-press { background-color:#00309d; }
.category.ico-notice { background-color:#006ff7; }
.category.ico-video { background-color:#0052c3; }
.board-title { position:relative; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:#fff; }
.board-list time { flex-shrink:0; color:#ccc; font-size:1.6rem; }
.board-list li a:hover .board-title,
.board-list li a:focus .board-title { text-decoration:underline; }
.board-empty { display:flex; align-items:center; justify-content:center; min-height:25rem; color:#fff; }
.board-loading { display:flex; align-items:center; justify-content:center; gap:1rem; min-height:25rem; margin:0; color:#fff; font-size:1.7rem; }
.board-loading::before { content:""; width:2.2rem; height:2.2rem; border:3px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation:boardSpin 0.8s linear infinite; }
@keyframes boardSpin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .board-loading::before { animation:none; } }

.board-gallery { padding:2rem 2.5rem; }
.video-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 3rem; margin:0; padding:0; list-style:none; }
.video-list li { min-width:0; }
.video-list li:nth-child(n+3) { display:none; }
.video-list li a { display:block; text-decoration:none; padding-top: 2rem; }
.video-thumb { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:0.8rem; background:#f2f2f2; }
.video-thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.35s; }
.video-play { position:absolute; top:50%; left:50%; display:flex; align-items:center; justify-content:center; width:3.5rem; height:3.5rem; border-radius:50%; background:rgba(0,0,0,0.6); transform:translate(-50%,-50%); }
.video-play::after { content:""; margin-left:3px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid #fff; }
.video-title { display:-webkit-box; min-height:2.8em; margin-top:1.2rem; overflow:hidden; color:#fff; font-weight:600; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-align:center; }
.video-list li time { display:block; color:#ccc; font-size:1.6rem; text-align:center; }
.video-list li a:hover img,
.video-list li a:focus img { transform:scale(1.08); }


/* COUNT */
.count-wrap { margin-right:6rem; border:1px solid #d3e4ff; background:#edf1ff; box-shadow:0 6px 15px rgba(219,220,221,0.51); }
.count-wrap h2 { color:#111; font-weight:bolder; }
.count-wrap h2 span { color:#0051d9; }
.count-wrap ul li div.top-inner { background-color:#006ff7; }
.count-wrap ul li.bottom div.box { background-color:#00309d; }

/* QUICK MENU */
.quick-wrap { width:calc(100% - 500px); }
.quick-wrap h2 { margin:2rem 0; color:#111; font-size:3rem; font-weight:bolder; }
.quick-wrap .quick-area { padding:2rem 3rem; border:1px solid #ddd; border-radius:2rem; box-shadow:0 6px 15px rgba(219,220,221,0.51); }
.quick-wrap ul { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0; padding:0; list-style:none; }
.quick-wrap ul li { position:relative; border-right:1px solid #ddd; }
.quick-wrap ul li:nth-child(3n) { border-right:none; }
.quick-wrap li:nth-child(-n+3)::after { content:""; position:absolute; bottom:0; left:8%; width:84%; height:1px; background:#ddd; }
.quick-wrap li a { display:block; padding-bottom:2rem; text-align:center; font-weight:600; word-break:keep-all; }
.quick-wrap li .wrap_ico { transition:transform 0.35s; }
.quick-wrap li .wrap_ico img { display:flex; align-items:center; justify-content:center; width:auto; height:60px; margin:0 auto 1rem; }
.quick-wrap li a:hover .wrap_ico,
.quick-wrap li a:focus .wrap_ico { transform:scale(1.1); }
.quick-wrap li a:hover span,
.quick-wrap li a:focus span { color:#0051d9; }


/* ========================================
   RESPONSIVE
======================================== */
@media all and (max-width:1440px) {
    body.main .main-content .container { padding:0 2rem; }
}

@media all and (max-width:1200px) {
    .main-visual-wrap { gap:3rem; }
    .board-tabs { gap:2.2rem; }
    .board-tabs button { font-size:2.4rem; }
    .count-wrap { margin-right:4rem; }
    .quick-wrap { width:calc(100% - 480px); }
}

@media all and (max-width:1025px) {
    .main-section1 { padding:5rem 0 4rem; }
    .main-visual-wrap { grid-template-columns:minmax(0,1fr); gap:5rem; max-width:760px; }
    .board-content { min-height:0; }
    .board-empty,
    .board-loading { min-height:15rem; }

    .main-section4 { padding:5rem 0; }
    .count-wrap { margin-right:0; }
    .quick-wrap { width:100%; margin-top:2rem; }
}

@media all and (max-width:768px) {
    #wrap-header .head-logo a { width:190px; height:46px; background-image:url(../images/new_1101/logo.png); }

    .main-section1 { padding:3.5rem 0 3rem; }
    .main-visual-wrap { gap:4.5rem; }
    .visual-popup .popup-wrap { border-radius:2rem; }
    .popup-bell { top:-1.5rem; right:-0.5rem; width:6rem; height:6rem; }
    .bell-icon { width:26px; height:26px; }
    .bell-count { top:0.6rem; right:0.6rem; min-width:1.8rem; height:1.8rem; font-size:1.2rem; }
    .popup-control { right:1.5rem; bottom:-1.8rem; gap:1.2rem; height:3.8rem; padding:0 1.8rem; }
    .popup-control button { font-size:1.6rem; }

    .board-head { gap:1rem; }
    .board-tabs { gap:1.6rem; }
    .board-tabs button { font-size:1.9rem; letter-spacing:-0.05rem; }
    .board-tabs button.active::before { top:-12px; left:-14px; width:18px; height:18px; }
    .board-more { font-size:3.6rem; }
    .board-content,
    .board-gallery { padding:1.2rem 1.6rem; border-radius:1rem; }
    .board-list li a { min-height:4.6rem; gap:0.8rem; }
    .board-title { font-size:1.6rem; }
    .board-list time { font-size:1.4rem; }
    .video-list { gap:1.5rem; }
    .video-title { margin-top:0.8rem; font-size:1.5rem; }
    .video-list li time { font-size:1.4rem; }

    .quick-wrap h2 { font-size:2.6rem; }
    .quick-wrap .quick-area { padding:2rem 1.5rem; }
    .quick-wrap ul { gap:16px 0; }
    .quick-wrap li a { padding:0 0.5rem 1.6rem; font-size:1.6rem; }
    .quick-wrap li .wrap_ico img { height:48px; }
}

@media all and (max-width:480px) {
    .board-tabs { gap:1.2rem; }
    .board-tabs button { font-size:1.7rem; }
    .board-tabs button.active::before { top:-14px; left:-8px; width:16px; height:16px; }
    .board-list .category { display:none; }
    .board-list time { font-size:1.3rem; }
    .video-list { gap:1rem; }

    .quick-wrap ul { grid-template-columns:repeat(2,1fr); }
    .quick-wrap ul li:nth-child(3n) { border-right:1px solid #ddd; }
    .quick-wrap ul li:nth-child(2n) { border-right:none; }
    .quick-wrap li:nth-child(-n+3)::after { content:none; }
    .quick-wrap li:nth-child(-n+4)::after { content:""; position:absolute; bottom:0; left:8%; width:84%; height:1px; background:#ddd; }
}

@media all and (max-width:360px) {
    #wrap-header .head-logo a { width:170px; height:41px; }
    .board-tabs { gap:1rem; }
    .board-tabs button { font-size:1.55rem; }
    .board-more { font-size:3rem; }
}