@charset "utf-8";
/* ================================================================
   청해군도시관리공단 - demo main page
   ================================================================ */

:root{
  --teal:#00b493;
  --teal-d:#02937f;
  --teal-dd:#03758a;
  --blue:#036287;
  --mint:#e5faf6;
  --mint2:#e6f7f4;
  --softblue:#ebf1f9;
  --ink:#1a1a1a;
  --gray:#767676;
  --line:#e2e2e2;
  --util-h:34px;
  --gnb-h:102px;
  --fs:100%;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:var(--fs)}
body{
  font-family:"Noto Sans KR",NotoSans,sans-serif,-apple-system,BlinkMacSystemFont;
  font-size:1rem;line-height:1.5;color:var(--ink);background:#fff;
  overflow-x:hidden;word-break:keep-all;
}
img{max-width:100%;vertical-align:top;border:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
em,i{font-style:normal}
h1,h2,h3{font-weight:700;line-height:1.35}

.a11y,.a11y_skip li a{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.a11y_skip li a:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;z-index:9999;padding:8px 14px;background:#fff;border:2px solid var(--teal);border-radius:4px}
.inwrap{width:100%;max-width:1400px;margin:0 auto;padding:0 20px}

/* ---------------- 공통 타이틀 ---------------- */
.bar_deco{display:flex;gap:3px;margin-bottom:14px}
.bar_deco i{display:block;width:38px;height:7px;border-radius:4px;background:var(--ink)}
.bar_deco i:last-child{width:40px;background:var(--teal)}
.sec_tit{font-size:1.5rem;font-weight:400;color:#555;letter-spacing:-.02em}
.sec_tit b{font-weight:800;color:var(--ink)}
.sec_tit.center{text-align:center}
.sec_tit.center .bar_deco{justify-content:center}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.show{opacity:1;transform:none}

/* ---------------- HEADER ---------------- */
#header{position:sticky;top:0;left:0;width:100%;z-index:200;background:#fff}
.util_w{border-bottom:1px solid #eee;background:#fff}
.util{height:var(--util-h);display:flex;align-items:center;justify-content:space-between}
.util_lnk{display:flex;align-items:center;gap:0}
.util_lnk li{position:relative;padding:0 15px}
.util_lnk li:first-child{padding-left:0}
.util_lnk li+li::before{content:"";position:absolute;left:0;top:50%;width:2px;height:2px;margin-top:-1px;border-radius:50%;background:#bbb}
.util_lnk li a{display:flex;align-items:center;gap:5px;font-size:.8125rem;color:#555;transition:color .2s}
.util_lnk li a:hover{color:var(--teal-d)}
.font_ctr{display:flex;align-items:center;gap:6px}
.fc_tit{font-size:.8125rem;color:#555;margin-right:4px}
.fc_tit b{font-weight:700;color:#333;margin-right:2px}
.fc_btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #ddd;border-radius:5px;font-size:.8125rem;line-height:1;color:#444;transition:.2s}
.fc_btn:hover{border-color:var(--teal);color:var(--teal-d)}

.gnb_w{border-bottom:1px solid #eef0f1;background:#fff}
.gnb{height:var(--gnb-h);display:flex;align-items:center;justify-content:space-between}
.logo a{display:flex;align-items:center;gap:9px}
.logo_mark{display:block;flex:none}
.logo_tx b{display:block;font-size:1.3125rem;font-weight:800;letter-spacing:-.04em;color:#111}
.logo_tx em{display:block;margin-top:2px;font-size:.5rem;font-weight:700;letter-spacing:.01em;color:#7d8794}

.nav{margin-left:auto}
.nav_item_wrap{display:flex;align-items:center;gap:34px}
.dep1_lst{position:static}
.dep1_lst>a{display:block;height:var(--gnb-h);line-height:var(--gnb-h);font-size:1.0625rem;font-weight:700;color:#222;transition:color .2s}
.dep1_lst>a::after{content:"";display:block;width:0;height:3px;margin-top:-3px;background:var(--teal);transition:width .25s}
.dep1_lst:hover>a{color:var(--teal-d)}
.dep1_lst:hover>a::after{width:100%}

.dep2_w{position:absolute;left:0;top:100%;width:100%;background:#fff;border-top:1px solid #eef0f1;box-shadow:0 14px 22px rgba(0,0,0,.07);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.26s ease;z-index:10}
#header.nav-on .dep1_lst.on .dep2_w{opacity:1;visibility:visible;transform:none}
.dep2_w .layout{display:flex;gap:60px;padding-top:36px;padding-bottom:40px}
.dep2_w .titbox{width:250px;flex:none}
.dep2_w .stxt{font-size:.8125rem;color:var(--teal-d);font-weight:700;letter-spacing:.02em}
.dep2_w .btxt{margin-top:6px;font-size:1.5rem;font-weight:800;color:#111;letter-spacing:-.03em}
.dep2_item_w{flex:1}
.dep2_item_w ul{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 28px}
.dep2_lst a{display:block;padding:9px 12px;font-size:.9375rem;color:#4b4b4b;border-radius:6px;transition:.2s}
.dep2_lst a:hover{background:var(--mint);color:var(--teal-dd);font-weight:700}

.btn_allmenu{display:flex;flex-direction:column;justify-content:space-between;width:26px;height:18px;margin-left:34px}
.btn_allmenu span{display:block;width:100%;height:2.5px;border-radius:2px;background:var(--teal);transition:.28s}
.btn_allmenu.on span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.btn_allmenu.on span:nth-child(2){opacity:0}
.btn_allmenu.on span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.gnb_dim{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.3s;z-index:150}
.gnb_dim.on{opacity:1;visibility:visible}
.mobile_h{display:none}

/* ---------------- SEC01 : 시설 ---------------- */
.sec01{background:var(--mint);padding:48px 0 68px}
.facility{display:grid;grid-template-columns:repeat(12,1fr);gap:26px 6px}
.facicon_box{display:flex;flex-direction:column;align-items:center;text-align:center}
.ficon_w{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:#fff;box-shadow:0 4px 10px rgba(3,117,138,.08);transition:transform .28s,box-shadow .28s}
.facicon_box:hover .ficon_w{transform:translateY(-6px);box-shadow:0 10px 18px rgba(3,117,138,.18)}
.facicon_box p{margin-top:11px;font-size:.8125rem;line-height:1.35;color:#2c3a3a;letter-spacing:-.04em;word-break:keep-all}
.facicon_box:hover p{color:var(--teal-dd);font-weight:700}

/* ---------------- SEC02 : POPUP ZONE ---------------- */
.sec02{position:relative;padding:58px 0 62px}
.sec02 .deco_block{position:absolute;left:50%;transform:translateX(-50%);bottom:34px;width:100%;max-width:1400px;height:396px;background:var(--softblue);border-radius:20px;z-index:0}
.others{position:relative;z-index:2;display:flex;gap:40px;align-items:flex-start}
.pupzone{flex:1 1 auto;min-width:0}
.quick{position:relative;width:460px;flex:none}
.tit_row{display:flex;align-items:flex-end;justify-content:space-between;min-height:70px;margin-bottom:22px}
.pup_ctr{display:flex;align-items:center;gap:8px;padding-bottom:4px}
.counter{display:flex;align-items:center;gap:8px;margin-right:6px;font-size:1rem;color:#999}
.counter b{font-weight:800;color:#111}
.counter i{color:#ddd}
.pbtn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--teal);transition:.22s}
.pbtn:hover{background:var(--teal-d)}

.pup_stage{position:relative;width:100%;aspect-ratio:2/1;border-radius:16px;overflow:hidden;background:#dbe7f5}
.pup_slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease}
.pup_slide.on{opacity:1;visibility:visible}
.pup_slide>a{display:block;width:100%;height:100%}
.pup_slide img{width:100%;height:100%;object-fit:cover}
.pup_slide .pop_art{display:flex;align-items:center;gap:20px;height:100%;padding:0 48px}
.art_reserve{background:linear-gradient(120deg,#dff2ee 0%,#c9e4f6 100%)}
.art_waste{background:linear-gradient(120deg,#cfe0f7 0%,#e4edfa 100%)}
.art_txt{flex:1;min-width:0}
.art_txt b{display:block;font-size:2.125rem;font-weight:800;line-height:1.24;letter-spacing:-.04em;color:#123a6b}
.art_waste .art_txt b{color:#17408f}
.art_txt em{display:block;margin-top:14px;font-size:1rem;line-height:1.5;color:#3d5a7a;font-weight:500}
.art_btn{display:inline-block;margin-top:20px;padding:9px 22px;border-radius:22px;background:var(--teal);color:#fff;font-size:.875rem;font-weight:700}
.art_ill{display:block;flex:none;width:210px}
.art_ill svg{width:100%;height:auto}

.quick_box{padding:30px;border-radius:14px;background:linear-gradient(135deg,#03887c 0%,#00bb9c 100%);box-shadow:0 10px 22px rgba(3,136,124,.18)}
.qbig{position:relative;display:flex;align-items:center;height:60px;padding:0 56px 0 24px;margin-bottom:14px;border-radius:8px;background:#fff;font-size:1rem;font-weight:700;color:#1d2b2b;transition:.22s}
.qbig .arw{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--teal)}
.qbig:hover{transform:translateX(3px)}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qgrid a{display:flex;align-items:center;justify-content:center;height:92px;border-radius:8px;background:#fff;font-size:.9375rem;font-weight:700;color:#1d2b2b;text-align:center;line-height:1.4;transition:.22s}
.qgrid a:hover{color:var(--teal-d);transform:translateY(-3px)}

.ai_bot{position:absolute;right:-16px;top:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:84px;height:84px;border-radius:50%;background:linear-gradient(140deg,#00c2a0,#0f8fbf);color:#fff;box-shadow:0 8px 18px rgba(3,136,124,.3);z-index:5;transition:.25s}
.ai_bot em{font-size:.75rem;font-weight:800;letter-spacing:-.02em}
.ai_bot:hover{transform:scale(1.06)}

/* ---------------- SEC03 : 알림마당 ---------------- */
.sec03{padding:64px 0 70px}
.board_w{display:flex;gap:40px;align-items:flex-start}
.board_tit{width:260px;flex:none;padding-top:26px}
.board_tit h2{font-size:1.3125rem;font-weight:800;letter-spacing:-.04em;line-height:1.45;color:#111}
.more_btn{display:inline-flex;align-items:center;gap:12px;margin-top:34px;font-size:.8125rem;font-weight:800;letter-spacing:.06em;color:#222}
.more_btn span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--teal);color:#fff;font-size:1.125rem;font-weight:400;line-height:1;transition:.22s}
.more_btn:hover span{background:var(--teal-d);transform:rotate(90deg)}
.cont.tabs{flex:1;min-width:0}
.tab_nav{display:flex;align-items:center;gap:10px;margin-bottom:26px;flex-wrap:wrap}
.tab_nav button{min-width:118px;height:46px;padding:0 24px;border-radius:24px;font-size:.9375rem;font-weight:500;color:#555;transition:.22s}
.tab_nav button:hover{color:var(--teal-d)}
.tab_nav button.on{background:linear-gradient(90deg,#03887c 0%,#00bb9c 100%);color:#fff;font-weight:700}

.board_lst{display:none;grid-template-columns:repeat(3,1fr);gap:44px}
.board_lst.on{display:grid}
.b_item a{display:flex;flex-direction:column;height:100%;min-height:270px}
.b_tag{font-size:.8125rem;font-weight:500;color:var(--teal-d)}
.b_tit{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:12px;font-size:1.25rem;font-weight:800;line-height:1.4;letter-spacing:-.04em;color:#111;transition:color .2s}
.b_item a:hover .b_tit{color:var(--teal-d);text-decoration:underline}
.b_txt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:16px;font-size:.9375rem;line-height:1.6;color:#707070}
.b_foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:38px;font-size:.875rem;color:#8a8a8a}
.b_foot em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b_foot time{display:flex;align-items:center;gap:6px;flex:none}

/* ---------------- SEC04 : 대표전화 ---------------- */
.sec04{background:#fafafa;padding:66px 0 72px}
.sec04 .sec_tit{margin-bottom:38px}
.fac_tell_w{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px}
.fac_tell_w ul li{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:9px 0 9px 12px;font-size:.9375rem}
.fac_tell_w ul li::before{content:"";position:absolute;left:0;top:18px;width:3px;height:3px;border-radius:50%;background:#999}
.fac_tell_w ul li b{font-weight:800;letter-spacing:-.04em;color:#1a1a1a}
.fac_tell_w ul li a{color:#3d3d3d;transition:color .2s}
.fac_tell_w ul li a:hover{color:var(--teal-d);text-decoration:underline}

/* ---------------- SEC05 : 바로가기 카드 ---------------- */
.sec05{padding:34px 0 54px}
.gobox{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.gobox>a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:140px;padding:26px 24px;border-radius:12px;background:var(--mint2);transition:.25s}
.gobox>a:hover{background:#d6f1ea;transform:translateY(-4px)}
.gb_tx b{display:block;font-size:1.125rem;font-weight:800;letter-spacing:-.04em;color:var(--teal-dd)}
.gb_tx em{display:block;margin-top:10px;font-size:.875rem;line-height:1.55;color:#5d6b6b}
.gobox img{width:64px;height:auto;flex:none;opacity:.85}

/* ---------------- FOOTER ---------------- */
#footer{border-top:1px solid var(--line);background:#fff}
.f_top .inwrap{display:flex;align-items:stretch;justify-content:space-between;gap:20px}
.f_lnk{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px;padding:19px 0}
.f_lnk li{position:relative;padding:0 14px}
.f_lnk li:first-child{padding-left:0}
.f_lnk li+li::before{content:"";position:absolute;left:0;top:50%;width:2px;height:2px;margin-top:-1px;border-radius:50%;background:#bbb}
.f_lnk li a{font-size:.875rem;color:#4a4a4a;transition:color .2s}
.f_lnk li a.point{color:var(--teal-dd);font-weight:700}
.f_lnk li a:hover{color:var(--teal-d);text-decoration:underline}
.f_select{position:relative;width:240px;flex:none;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.f_select>button{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;min-height:62px;padding:0 24px;font-size:.9375rem;color:#333}
.f_select ul{position:absolute;left:0;bottom:100%;width:100%;background:#fff;border:1px solid var(--line);border-radius:6px 6px 0 0;box-shadow:0 -6px 16px rgba(0,0,0,.08);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.24s;max-height:260px;overflow-y:auto}
.f_select.on ul{opacity:1;visibility:visible;transform:none}
.f_select.on>button svg{transform:rotate(180deg)}
.f_select ul li a{display:block;padding:11px 22px;font-size:.875rem;color:#444}
.f_select ul li a:hover{background:var(--mint);color:var(--teal-dd)}

.f_bottom{border-top:1px solid var(--line);padding:26px 0 40px}
.f_bottom .inwrap{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}
.f_info .addr{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:.9375rem;color:#3d3d3d}
.f_info .addr b{font-weight:800;color:#111;margin-right:5px}
.f_info .copy{margin-top:10px;font-size:.875rem;color:#8a8a8a;letter-spacing:.01em}
.f_info .copy2{margin-top:4px;font-size:.875rem;color:#6d6d6d}
.f_info .demo_note{margin-top:8px;font-size:.6875rem;color:#a9a9a9}
.f_marks{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;flex:none}
.f_marks li{display:flex;align-items:center;justify-content:center;width:66px;height:66px;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa}
.f_marks li span{font-size:.6875rem;font-weight:700;line-height:1.3;text-align:center;color:#8d9a9a}

.btn_top{position:fixed;right:24px;bottom:24px;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--teal);color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(10px);transition:.28s;z-index:120}
.btn_top.on{opacity:1;visibility:visible;transform:none}
.btn_top:hover{background:var(--teal-d)}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1399px){
  .nav_item_wrap{gap:22px}
  .dep1_lst>a{font-size:1rem}
  .facility{grid-template-columns:repeat(8,1fr);gap:24px 6px}
  .others{gap:26px}
  .quick{width:400px}
  .quick_box{padding:24px}
  .art_txt b{font-size:1.75rem}
  .art_ill{width:170px}
  .board_w{gap:30px}
  .board_tit{width:210px}
  .board_lst{gap:30px}
  .b_tit{font-size:1.125rem}
}

@media (max-width:1100px){
  .nav{position:fixed;right:0;top:0;width:340px;max-width:86vw;height:100%;margin:0;background:#fff;
    transform:translateX(105%);transition:transform .38s cubic-bezier(.4,0,.2,1);z-index:190;overflow-y:auto;box-shadow:-6px 0 22px rgba(0,0,0,.12)}
  .nav.on{transform:none}
  .mobile_h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:26px 22px;background:var(--mint)}
  .mobile_h .b_tit{font-size:1.125rem;font-weight:800;line-height:1.45;color:var(--teal-dd);letter-spacing:-.03em}
  .gnb_close{color:#333;flex:none}
  .nav_item_wrap{display:block;gap:0;padding:8px 0 40px}
  .dep1_lst{border-bottom:1px solid #eee}
  .dep1_lst>a{height:auto;line-height:1.4;padding:16px 22px;font-size:1rem}
  .dep1_lst>a::after{display:none}
  .dep2_w{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;display:none;background:#f8fbfb}
  .dep1_lst.on .dep2_w,#header.nav-on .dep1_lst.on .dep2_w{display:block}
  .dep2_w .layout{display:block;padding:10px 12px 16px;max-width:none}
  .dep2_w .titbox{display:none}
  .dep2_item_w ul{grid-template-columns:1fr;gap:0}
  .dep2_lst a{padding:10px 14px;font-size:.9375rem}
  .btn_allmenu{margin-left:16px}
  .facility{grid-template-columns:repeat(6,1fr)}
  .others{flex-direction:column}
  .quick{width:100%}
  .ai_bot{top:-6px;right:0}
  .sec02 .deco_block{display:none}
  .board_w{flex-direction:column}
  .board_tit{width:100%;padding-top:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
  .board_tit .bar_deco{width:100%}
  .board_tit h2{flex:1}
  .more_btn{margin-top:0}
  .board_lst{grid-template-columns:1fr;gap:0}
  .b_item{border-bottom:1px solid #ececec}
  .b_item a{min-height:0;padding:22px 0}
  .b_foot{padding-top:18px}
  .fac_tell_w{grid-template-columns:repeat(2,1fr)}
  .gobox{grid-template-columns:repeat(2,1fr)}
  .f_top .inwrap{flex-direction:column;gap:0}
  .f_select{width:100%;border-left:0;border-right:0;border-top:1px solid var(--line)}
  .f_bottom .inwrap{flex-direction:column}
}

@media (max-width:767px){
  :root{--gnb-h:70px}
  .util_lnk li{padding:0 10px}
  .fc_tit{display:none}
  .logo_tx b{font-size:1.0625rem}
  .logo_tx em{font-size:.4375rem}
  .logo_mark svg{width:34px;height:34px}
  .sec01{padding:32px 0}
  .facility{grid-template-columns:repeat(3,1fr);gap:22px 4px}
  .ficon_w{width:66px;height:66px}
  .ficon_w svg{width:32px;height:32px}
  .facicon_box p{font-size:.6875rem;line-height:1.3;word-break:normal}
  .sec02{padding:36px 0 40px}
  .tit_row{min-height:0;margin-bottom:16px;flex-wrap:wrap;gap:10px}
  .tit_row .sec_tit{width:100%}
  .pup_ctr{width:100%;justify-content:flex-end;padding-bottom:0}
  .pbtn{width:34px;height:34px}
  .sec_tit{font-size:1.25rem}
  .pup_stage{aspect-ratio:2/1}
  .pup_slide .pop_art{flex-direction:column;justify-content:center;align-items:flex-start;gap:0;padding:14px 18px}
  .art_txt b{font-size:1.125rem;line-height:1.22}
  .art_txt em{margin-top:5px;font-size:.75rem;line-height:1.35}
  .art_btn{margin-top:9px;padding:5px 13px;font-size:.75rem}
  .art_ill{display:none}
  .qbig{height:52px;font-size:.9375rem;padding:0 48px 0 18px}
  .qgrid a{height:74px;font-size:.875rem}
  .ai_bot{width:70px;height:70px;top:-4px}
  .ai_bot em{font-size:.6875rem}
  .sec03{padding:40px 0 44px}
  .tab_nav{gap:6px}
  .tab_nav button{min-width:0;flex:1 1 30%;height:40px;padding:0 10px;font-size:.875rem}
  .b_tit{font-size:1.0625rem}
  .sec04{padding:44px 0 48px}
  .fac_tell_w{grid-template-columns:1fr}
  .sec05{padding:24px 0 40px}
  .gobox{grid-template-columns:1fr;gap:12px}
  .gobox>a{min-height:0;padding:20px}
  .gobox img{width:52px}
  .f_lnk{justify-content:center;padding:16px 0}
  .f_lnk li{padding:4px 12px}
  .f_marks{grid-template-columns:repeat(6,1fr);gap:6px;margin-top:22px;width:100%}
  .f_marks li{width:100%;height:auto;aspect-ratio:1/1}
  .f_marks li span{font-size:.625rem}
  .f_info .addr{flex-direction:column;gap:3px;font-size:.875rem}
  .btn_top{right:14px;bottom:14px;width:42px;height:42px}
}