@charset "utf-8";


:root{--header-h-m:64px;--sidebar-w-tb:260px;--sidebar-w-pc:300px;
--primary-purple:#6856cc;--hover-purple:#43358c;}

/*setting*/
#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#016b4f;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}



/* TNB */
#tnb {border-bottom: 1px solid #e9e9e9;}
#tnb ul{text-align:right; height:40px; padding:10px 25px;}
#tnb ul li{display:inline-block; height:100%;}
#tnb ul li::before{content:"|"; color:#ccc; padding:0 4px;}
#tnb ul li:first-child:before{content:""; padding:0;}
#tnb ul li a {font-size:13px; color:#666;}

html, body{height:100%;}

body{padding-top:0; min-height:100vh; display:flex; flex-direction:column;}
.site-header_sl{float:none;width:100%;background:#fff;position:relative;z-index:2000;overflow:visible;}
.site-header_sl .h_wrap_sl{display:flex;align-items:center;justify-content:space-between;height: 80px;padding: 0 25px;border-bottom: 1px solid #efefef;}
.site-header_sl .logo_sl{text-align:left;display:flex;align-items:center;gap:8px;}
.site-header_sl .logo_sl a{display:inline-flex;align-items:center;}
.site-header_sl .logo_sl img{display:block;height:28px;}
.site-header_sl .logo-sub_sl{display:inline-block;font-size: 15px;/* line-height: 1.2; */color: var(--hover-purple);font-weight: 700;max-width:110px;white-space:normal;word-break:keep-all;text-align:left;margin-left: 7px;}

.hamburger_sl{display:block;}
.btn-gnb_sl{position:relative;display:inline-flex;flex-direction:column;justify-content:center;gap: 6px;background:transparent;cursor:pointer;}
.btn-gnb_sl .bar_sl{display:block;width: 25px;height: 3px;background: var(--primary-purple);border-radius: 3px;}

/* 메뉴 */
.gnb_sl{display:none;background:#fff;position:relative;z-index:2100;}
.gnb_sl .gnb-list_sl{padding:24px 20px;list-style:none;}
.gnb_sl .gnb-list_sl li+li{margin-top:12px;}
.gnb_sl .gnb-list_sl a{display:block;font-size:16px;line-height:1.4;color:#111;}
.side-widget_sl{display:none;}

/* 서브레이아웃 상단 비주얼*/
.sub_top {background: url("/images/clean/common//sub_bg.png") no-repeat left center;height: 150px;background-size: cover;}
.top_title h2 {padding: 90px 0 20px 0;font-weight: 600;font-size: 24px;text-align: center;color: #333;}
.top_menu {width: 100%;padding: 0 0 40px 0;}
.top_menu div {display: flex;width: 150px;gap: 12px;margin: 0 auto;}
.top_menu ul {display: flex;gap: 5px;}
.top_menu ul li a {display: block;width: 35px;height: 30px;background: url("") no-repeat;}
.tm_box {border: 2px solid #676a86; border-radius: 30px;}
.top_menu ul .plus a {width: 45px;background-position: center -1302px;}
.top_menu ul .minus a {width: 45px;background-position: center -1262px;}
.top_menu ul .minus {position: relative;}
.top_menu ul .minus::after {display: block;content: "";position: absolute;top: 5px;left: -2px;width: 1px;height: 21px;background-color: #83859e9e;}
.top_menu ul .share a {height: 35px; background-position: 0 -1217px;}
.top_menu ul .print a {height: 35px; background-position: 0 -1160px;}
.top_menu ul li a span {position: absolute; top: -10000px; left: -10000px;}
.top_menu ul li a:hover,.top_menu ul li a:active,.top_menu ul li a:focus {transform: scale(1.1);}

.sub_container{width:100%;flex:1 0 auto;}
.s_content{width:100%;}
.s_con {max-width:1400px;width:100%;margin:0 auto;padding: 20px 25px;}

/* 타이틀/유틸 바*/
.title_wrap{display:block;width:100%;margin:0 auto;padding:30px 20px 20px;border-bottom:1px solid #e9e9e9;}
.page__title{margin:0 0 16px;font-size:24px;line-height:1.25;color:#333;font-weight:600;}

/* 유틸 영역 */
.utile_wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.location_wrap{display:flex;align-items:center;gap:8px;list-style:none;margin:0;padding:0;color:#666;}
.location_wrap a{color:#666;font-size: 14px;}
.location_wrap li+li{position:relative;padding-left:12px;}
.location_wrap li+li::before{content:"›";position:absolute;left:0;top:0;color:#c7c7c7;}
.location_wrap .navi_home a{position:relative;}

.print_wrap{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0;}
.print_wrap::before{content:"";display:block;width:1px;height:16px;background:#e3e3e3;margin-right:4px;}
.print_wrap button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:20px 20px;cursor:pointer;font-size:0;}
.print_wrap .btn-sns{background-image:url("/images/clean/common//share.png");}
.print_wrap .copy{background-image:url("/images/clean/common//link.png");}
.print_wrap .btn-print{background-image:url("/images/clean/common//print.png");}

/* SNS 공유 팝업 */
.sns_wrap{display:none;position:absolute;top:100%;right: -10px;margin-top:8px;padding:8px 6px;background:#fff;border:1px solid #e9e9e9;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,0.06);z-index:100;}
#sns_layout{position:relative;}
#sns_layout.on .sns_wrap{display:flex;flex-direction:column;gap:6px;}
.sns_wrap .clickClose{display:none;}
#sns_layout.on .sns_wrap .clickClose{display:block;}
.sns_wrap a{display:flex;font-size: 0;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;background-color:#f7f7f7;background-repeat:no-repeat;background-position:center;background-size:18px 18px;border-radius:4px;cursor:pointer;transition:background-color 0.2s;}
.sns_wrap a:hover{background-color:#eee;}
.sns_wrap .fa{background-image:url("/images/clean/common//fb.png");background-size: 25px;}
.sns_wrap .tw{background-image:url("/images/clean/common//tw.png");background-size: 17px;}
.sns_wrap .na{background-image:url("/images/clean/common//nb.png");background-size: 18px;}
.sns_wrap .ka{background-image:url("/upload_data/board_data/BBS_0000522/177457389526569.png");background-size: 26px;}
.sns_wrap .nb{background-image:url("/upload_data/board_data/BBS_0000522/177485691638394.png");background-size: 26px;}

.print_wrap a span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background-repeat:no-repeat;background-position:center;background-size:20px 20px;}

/* 닫기 버튼 */
.sns_wrap .clickClose{width: 28px; height: 28px; padding:0;cursor:pointer; margin: 0 auto;}
.sns_wrap .clickClose:focus{outline:2px solid rgba(104,86,204,0.35);outline-offset:2px;}
.sns_wrap .clickClose:hover{background:#f5f6f8;box-shadow:0 0 0 1px rgba(0,0,0,0.1);}
.sns_wrap .clickClose::before,
.sns_wrap .clickClose::after{content:"close";position:absolute;left: 17px;top: 20px; width: 17px;height: 2px;background: #000;}
.sns_wrap .clickClose::before{transform:rotate(45deg);}
.sns_wrap .clickClose::after{transform:rotate(-45deg);}

@media (min-width:768px){
  #tnb ul{padding:10px 40px;}
  #tnb ul li a {font-size:14px;}
  .top_title h2{font-size:28px;}
  .s_con{padding: 25px 40px;}
  .site-header_sl{float:none;width:100%;border-right:0;}
  .site-header_sl .h_wrap_sl{display:flex;align-items:center;justify-content:space-between;height:80px;padding: 0 40px;}
  .site-header_sl .logo_sl{display:block;text-align:left;margin-top: 16px;}
  .site-header_sl .logo_sl a{display:inline-block;}
  .site-header_sl .logo_sl img{height: 44px;margin:0;}
  .site-header_sl .logo-sub_sl{display: inline-block;margin-top: -41px;font-size: 18px;color: var(--hover-purple);font-weight:700;max-width:none;margin-left: 153px;}
  .hamburger_sl{display:block;}
  .gnb_sl{display:none;padding:0;}
  .gnb_sl .gnb-list_sl{padding:24px 0 0;list-style:none;}
  .gnb_sl .gnb-list_sl li+li{margin-top:12px;}
  .gnb_sl .gnb-list_sl a{display:block;padding:16px 20px;border-radius:12px;background:var(--primary-purple);color:#fff;font-size:16px;text-align:center;/* transition:all 0.3s ease; */}

  /* 타이틀/유틸 바 */
  .title_wrap{display:flex;align-items:center;justify-content:space-between;padding: 40px 40px 23px;}
  .page__title{margin:0;font-size:28px;}
  .utile_wrap{margin-left:auto;gap:20px;flex-wrap:nowrap;justify-content:flex-end;}
  .location_wrap{gap:10px;}
  .location_wrap a{font-size: 15px;}
  .location_wrap li+li{padding-left:13px;}
  .print_wrap{gap:12px;}
  .print_wrap::before{height:18px;}
  .print_wrap button{width:30px;height:30px;background-size:22px 22px;}
  .sns_wrap{padding:10px 8px;}
  .sns_wrap a{width:34px;height:34px;background-size:20px 20px;}
}

/* PC */
@media  (min-width:1200px) {

.top_title h2{font-size:32px;}
.s_con{padding:30px 40px;}
#tnb {border-bottom: 1px solid #e9e9e9;}
#tnb ul{text-align:right; height:40px; padding:10px 100px;}
#tnb ul li{display:inline-block; height:100%;}
#tnb ul li::before{content:"|"; color:#ccc; padding:0 4px;}
#tnb ul li:first-child:before{content:""; padding:0;}
#tnb ul li a {font-size:14px; color:#666666;}

/* 헤더 */
.hamburger_sl{display:none;}
.site-header_sl{position:relative;}
.site-header_sl .logo_sl{display:flex;align-items:center;gap:10px;margin: 0;}
.site-header_sl .logo_sl a{display:inline-flex; align-items:center;}
.site-header_sl .logo_sl img{height: 45px;}
.site-header_sl .logo-sub_sl{font-size: 18px;line-height:1;color: var(--hover-purple);font-weight:700;margin: 0;padding-left: 8px;margin-left: 0;}

/* GNB */
.site-header_sl .h_wrap_sl{display:flex;align-items:center;/* justify-content:space-between; */height: 90px;padding: 0 100px 0 100px;border-bottom:1px solid #efefef;position:relative;}
.site-header_sl:has(.has-sub_sl.on) + .gnb-bg_sl{opacity:1; visibility:visible;}
.gnb_sl{display:block;/* position:absolute; *//* left: 64%; *//* top:50%; *//* transform:translate(-50%, -50%); */height:auto;/* padding:0; */background:transparent;/* white-space:nowrap; */float: right;}
.gnb_sl .gnb-list_sl{display:flex;gap: 55px;padding:0;flex-wrap:nowrap;}
.gnb_sl .gnb-list_sl li+li{margin-top:0;}
.gnb_sl .gnb-list_sl a{display:block;padding:0;border-radius:0;background:transparent;color: #333;font-size: 18px;/* font-weight: 400; */white-space: nowrap;}
.gnb_sl .gnb-list_sl a:hover{color: var(--primary-purple);}
.gnb_sl .gnb-list_sl > li{position:relative;display:flex;align-items:center;width: 100%;}
.gnb_sl .gnb-list_sl > li > a{position:relative;display:flex;align-items:center;justify-content:center;height:56px;padding:0 12px;}
.gnb_sl .gnb-list_sl > li > a::after{content:"";position:absolute;left:12px;right:12px;bottom:-6px;height:4px;border-radius:2px;background:var(--primary-purple);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease;}
.gnb_sl .gnb-list_sl > li.on > a{color: var(--primary-purple);} 
.gnb_sl .gnb-list_sl > li.on > a::after{transform:scaleX(1);} 
.gnb_sl .sub_gnb_sl{position:absolute;left:50%;top: 70px;transform:translate(-50%, -10px);z-index:3000;display:block;width:220px;padding:0;background:#fff;border:1px solid #e9e9e9;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,0.04);visibility:hidden;opacity:0;transition:max-height .3s ease, opacity .2s ease, transform .2s ease;pointer-events:none;will-change: transform, opacity;}
.gnb_sl .sub_gnb_sl::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.gnb_sl .sub_gnb_sl li+li{margin-top:8px;}
.gnb_sl .sub_gnb_sl a{display:block;padding:10px 16px;color:#555;font-size: 16px;background:transparent;border-radius:0;}
.gnb_sl .sub_gnb_sl a:hover{color:#111; background:#f7f7fb;}
.gnb_sl .has-sub_sl.on > .sub_gnb_sl{max-height:600px; padding:12px 8px; visibility:visible; opacity:1; transform:translate(-50%, 0); pointer-events:auto;} 

.gnb_sl .gnb-list_sl > li:hover > a{color: var(--primary-purple);} 
.gnb_sl .gnb-list_sl > li:hover > a::after{transform:scaleX(1);} 
.gnb_sl .gnb-list_sl > li:hover > .sub_gnb_sl{/* open은 .on 상태에서만 제어 */} 

body.gnb-debug .gnb_sl .sub_gnb_sl{max-height:600px; padding:12px 8px; visibility:visible; opacity:1; transform:translate(-50%, 14px);}
#sub_content {margin: 0 auto;padding: 40px 0;width: 1400px;}
.sub_top{height: 245px;}

.title_wrap{display:flex;max-width:1400px;margin:0 auto;padding:57px 0px 25px;align-items:center;justify-content:space-between;border-bottom:2px solid #e9e9e9;}
.page__title{margin:0;font-size:32px;}

.utile_wrap{margin-left:auto;gap:24px;justify-content:flex-end;flex-wrap:nowrap;}
.location_wrap{gap:12px;}
.location_wrap li+li{padding-left:14px;}
.print_wrap{gap:14px;}
.print_wrap::before{height:20px;margin-right:6px;}
.print_wrap button{width:28px;height:28px;background-size:22px 22px;}

}   


@media (max-width:1199px){

body{padding-top:80px;}
.site-header_sl, .site-header_su{position:fixed;top:0;left:0;right:0;z-index:1100;}
.gnb_sl, .gnb_su_sl{position:fixed;right:0;top:80px;width:85%;max-width:360px;height:calc(100vh - 80px);z-index:1001;background:#fff;overflow:auto;display:none;}
.gnb_sl .gnb-list_sl, .gnb_su_sl .gnb-list_su_sl{padding:18px 16px 40px;}
.gnb_sl .gnb-list_sl > li > a, .gnb_su_sl .gnb-list_su_sl > li > a{display:block;padding:14px 16px;border-radius:6px;background:var(--primary-purple);color:#fff;font-weight:700;text-align:left;} 
.gnb_sl .gnb-list_sl > li > a:hover, .gnb_su_sl .gnb-list_su_sl > li > a:hover{background:var(--hover-purple);} 
.gnb_sl .sub_gnb_sl a, .gnb_su .sub_gnb_su a{background:#efeaff;color:#3c3280;padding: 13px 12px;border-radius:6px;text-align:center;}
.gnb_sl .sub_gnb_sl, .gnb_su_sl .sub_gnb_su_sl{list-style:none;padding:10px 0 4px 12px;margin:0;display:none;}
.gnb_sl .has-sub_sl.open > .sub_gnb_sl, .gnb_su_sl .has-sub_su_sl.open > .sub_gnb_su_sl{display:block;}
.gnb_sl .gnb-close, .gnb_su_sl .gnb-close_su_sl{display:none;}
.gnb-dim, .gnb-dim_su{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:1000;}

} 





 /* 배출지도 마커 */
    .marker{--size:35px;width:30px;height:35px;display:inline-block;background-repeat:no-repeat;background-size:100% auto;background-position:center;}
    .m_clothes{background-image:url('/images/clean/layout/clothes.png');}
    .m_bulb{background-image:url('/images/clean/layout/bulb.png');}
    .m_battery{background-image:url('/images/clean/layout/battery.png');}
    .m_sea{background-image:url('/images/clean/layout/sea.png');}
    .m_medicine{background-image:url('/images/clean/layout/medicine.png');}
    .m_food{background-image:url('/images/clean/layout/food.png');}
    .m_electronics{background-image:url('/images/clean/layout/electronics.png');}


    /* 배출지도 정보팝업 */

    .map-info { font-family: inherit; line-height: 1.5; color: #222; --thumb-w:130px; --thumb-h:96px; }
    .map-info *, .map-info *::before, .map-info *::after { box-sizing: border-box; }
    .map-info_card {position: relative;width:300px;background: #fff;border: 1px solid #d9d9d9;border-radius: 6px;box-shadow: 0 6px 18px rgba(0,0,0,0.2);overflow: hidden;}
    .map-info_card::before,
    .map-info_card::after{content: "";position: absolute;left: 50%;transform: translateX(-50%);width: 0; height: 0;border: 10px solid transparent;pointer-events: none;}
    .map-info_card::before{bottom: -21px;border-top-color: #d9d9d9;}
    .map-info_card::after{bottom: -20px;border-top-color: #fff;}
    .map-info_close{position: absolute;right: 8px;top: 8px;width: 28px;height: 28px;border: 0;border-radius: 50%;background: #fff;color: #444;font-size: 18px;line-height: 27px;text-align: center;cursor: pointer;box-shadow: 0 0 0 1px rgba(0,0,0,0.08);}
    .map-info_close:hover{ background:#f5f5f5; }
    .map-info_header{padding: 12px 40px 8px 14px;border-bottom: 1px solid #eee;}
    .map-info_name{display: inline-flex; align-items: center;gap: 6px; font-weight: 700;font-size: 18px;color: #111;text-decoration: none;vertical-align: top;}
    .map-info_name:hover{ text-decoration: underline; }
    .map-info_content{display: grid;grid-template-columns: var(--thumb-w) 1fr; gap: 14px;padding: 14px;align-items: start;}
    .map-info_thumb{width:100%;height:150px;border-radius: 4px;overflow: hidden;background: #f2f3f5;border: 1px solid #eee;}
    .map-info_thumb img{width: 100%;height: 100%;object-fit: cover;display: block;}
    .map-info_details{ font-size: 14px; padding-right: 2px; overflow-wrap: anywhere; }
    .map-info_details p{ margin: 0 0 6px; }
    .map-info_details .map-info_addr{font-size: 16px;}
    .map-info_details p:last-child{ margin-bottom: 0; }
    .map-info_addr{ color:#333; }
    .map-info_time{ color:#333;}
    .map-info_time::before{ content:""; background: url(/images/clean/layout/time.png) no-repeat 0 50% / 18px 18px; display: inline-block; margin-right: 6px; width:18px; height: 18px; vertical-align: -4px; }
    .map-info_tel{ display:flex; align-items:center; color:#333; }
    .map-info_tel::before{ content:""; background: url(/images/clean/layout/call.png) no-repeat 0 50% / 18px 18px; display:inline-block; margin-right:6px; width:18px; height:18px; vertical-align:-4px; }

    .map-info_tel a{ color:#222; text-decoration: none; }
    .map-info_tel a:hover{ text-decoration: underline; }
    .map-info_footer{padding: 0 14px 14px; }
    .map-info_btn{display: inline-flex; align-items: center;justify-content: center;min-width: 96px; height: 36px;padding: 0 14px;text-decoration: none; background: #6856cc; color: #fff;border-radius: 4px;font-weight: 700;font-size: 14px;}
    .map-info_btn:hover{ background:#8877ec; }
    .map-info_btn span{ margin-left: 6px; }


    @media (min-width: 1025px){
      .map-info{ --thumb-w:150px; --thumb-h:112px; }
    }

    @media (max-width: 420px){
      .map-info_card{ width: 100%; }
      .map-info_content{grid-template-columns: 1fr;}
      .map-info_thumb{ width: 100%; height: 160px; }
    }                                                               

@media(min-width:1200px){
#tnb{position:fixed;top:0;left:0;width:100%;z-index:2000;background:#fff;}
.site-header_sl{position:fixed !important;top:40px;left:0;width:100%;z-index:1999;background:#fff;}
body{padding-top:120px;}
}