@charset "utf-8";

/* set */
body {font-size:16px !important;margin:0;padding:0;font-family: 'Paperlogy', NotoSans, 'Noto Sans KR', Dotum, "돋움", sans-serif; color:#000;font-weight:400;}
input, select, button{font-family: Paperlogy, "에스코어드림", NotoSans, 'Noto Sans KR', Dotum, "돋움", sans-serif;}
body *{ box-sizing:border-box;}
a {color: #000; font-size:16px;}
::selection {background:#6856cc;color:#fff;text-shadow:none;}
li a{text-decoration:none;}

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

#skip{position:absolute;top:0;left:0;width:100%;z-index:9999}
#skip a{position:absolute;left:-9999px;background:#000;color:#fff;padding:10px}
#skip a:focus{left:0;top:0}


/* 메인비쥬얼 */
#content{padding: 0 25px;}
.main_container{background:#0a0a0a url('/images/clean/main/visual_back_mo.png') no-repeat center/cover;min-height: 481px;}
.main_container .visual-inner{position:relative;padding-top: 1px;}
.main_container .quick-links{float: right;margin-top: 21px;}
.main_container .quick-links .qlink,.main_container .quick-links .sep{color: #fff;font-size: 16px;margin-left: 3px;}
.main_container .quick-links .qlink:focus{outline:2px solid #fff;outline-offset:2px;}
.main_container .visual-title{margin:115px 0 16px;color:#fff;}
.main_container .visual-title .v-line{font-size: 35px;font-weight:800;}
.main_container .visual-desc{margin: 34px 0 0;color: #fff;font-size: 18px;line-height:1.6;}
.main_container .visual-contact{margin-top: 2px;}
.main_container .visual-contact .label,.main_container .visual-contact .sep,.main_container .visual-contact .contact-phone,.main_container .visual-contact .dept{color: #fff;font-size: 18px;}
.main_container .visual-illust{position:relative;display:inline-flex;align-items:flex-end;}
.main_container .btn-primary{position:static;display:inline-block;width: 218px;height:52px;line-height:52px;padding: 0 18px;border-radius: 15px;background:linear-gradient(90deg,#3fa87b 0%, #d1c84d 100%);color:#fff;font-weight: 600;font-size: 18px;}
.main_container .btn-primary:focus{outline:2px solid #fff;outline-offset:2px;}
.main_container .visual-illust img{position:static;margin-left: -57px;width:91px;height:99px;}

/* 처리절차 공통 */
.flow{padding:40px 25px 80px;--flow-gap:26px;--flow-arrow-size:46px;--flow-arrow-offset-h:18px}
.flow_wrap{position:relative;max-width:1080px;margin:0 auto}
.flow_wrap::after{content:"";position:absolute;right:-22px;bottom:-83px;width:200px;height:120px;background:url('/images/clean/main/truck.png') no-repeat right bottom/contain;pointer-events:none}
.flow_tit{margin:0 0 25px;font-size:28px;font-weight:700;color:#333}
.flow_dot{display:inline-block;width:8px;height:8px;background:#f5a200;margin-left:12px;vertical-align:top}

.flow_list{margin:0;padding:40px 20px 30px;border:2px solid #f5a200;border-radius:19px;box-shadow:0 1px 16px rgba(245,162,0,.2);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--flow-gap)}
.flow_step{position:relative;display:flex;justify-content:center}
.flow_card{text-align:center}
.flow_icon{position:relative;width:90px;height:90px;border-radius:50%;background:#fff3dc;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.flow_icon img{width:45px;height:45px}

.flow_label span{display:block;font-size:12px;line-height:1.2;color:#bdbcbc;text-align:center}

.flow_label{display:inline-block;padding: 13px 15px;border-radius: 30px;background:#333;color:#fff;font-size: 16px;font-weight: 600;margin-top: -20px;/* z-index: 2; */position: relative;white-space: nowrap;}
.flow_deco{position:absolute;}
.flow_left{left: -35px;top: 40px;width: 111px;height:auto;}
.flow_right{right:-6px;top: 400px;width: 105px;height:auto;}
.flow_truck{right: 0;bottom: -125px;width: 200px;height:auto;transform: translateX(43px);} 
.flow_step:not(:last-child)::after{content:"";position:absolute;left: 99%;transform: translateX(-50%)rotate(-90deg);top: 33px;width: 35px;height: 35px;background:url('/images/clean/main/arrow_down.png') no-repeat center/contain;}
.flow_point{color:#00adef;}

/* 배출 지도 */
.facility_wrap{display:flex;flex-wrap:wrap;gap: 55px;padding: 0 25px;margin-top: 60px;margin-bottom: 65px;}
.facility_left,.facility_right{width:100%;}
.main_map{position:relative;container-type:inline-size;}
.main_map .img{position:relative;width:100%;}
.main_map img{display:block;width: 100%;height:auto;}

/* 배출지도 버튼(읍면동) */
.map_list{list-style:none;margin:0;padding:0;position:absolute;left: 0;top:0;width:100%;height:100%;}
.map_list li{position:absolute;transform:translate(-50%, -50%);}
.map_list a{display: block;background: var(--primary-purple);color:#fff;border-radius:999px;padding: 4px 9px;font-weight: 500;white-space:nowrap;/* 뷰포트 기준 기본 반응형 */font-size: 14px;} 
.map_list a:focus{outline:2px solid #fff;outline-offset:2px;}
.map_list .m1{left: 79%;top: 7%;}
.map_list .m2{left: 52%;top: 21%;}
.map_list .m3{left: 13%;top: 40%;}
.map_list .m4{left: 37%;top: 40%;}
.map_list .m5{left: 56%;top: 32%;}
.map_list .m6{left:74.5%;top: 41.8%;}
.map_list .m7{left: 81%;top: 33%;}
.map_list .m8{left:11%;top: 53%;}
.map_list .m9{left: 38%;top: 54%;}
.map_list .m10{left: 55%;top: 48%;}
.map_list .m11{left: 88%;top: 50%;}
.map_list .m12{left:31.5%;top:64%;}
.map_list .m13{left: 64%;top: 56%;}
.map_list .m14{left: 87%;top: 59%;}
.map_list .m15{left: 60%;top: 65%;}
.map_list .m16{left: 82%;top: 68%;}
.map_list .m17{left: 52%;top: 75%;}
.map_list .m18{left:50%;top: 90%;}
.map_list .m19{display:none;}

.faq_illust{max-width:100%;height:auto;}

/* Q&A */
.qna_list{margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.q-item{background:#f4f5f8;border:2px solid transparent;border-radius:12px;transition: background-color 180ms ease, border-color 180ms ease, box-shadow 200ms ease;}
.q-item:hover{background:#eef0f4;}
.q-button{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;background:transparent;border:0;cursor:pointer;text-align:left;}
.q-mark{flex:none;display:inline-flex;justify-content:center;line-height: 28px;width:28px;height:28px;border-radius:50%;background:var(--primary-purple);color:#fff;font-weight:700;font-size:14px;}
.q-text{flex:1 1 auto;color:#111;font-size:16px;line-height:1.4;word-break:keep-all;font-weight:600;}
.btn-more{background:#333;padding:6px 9px;color:#fff;border-radius: 20px;line-height: 34px;margin-left: 10px;}
/* .q-button::after{content:""; flex:none;width:10px;height:10px;border-right:2px solid #666;border-bottom:2px solid #666;transform: rotate(-45deg);transition: transform 220ms ease, border-color 180ms ease;} */
.faq_head img{display:none;}
.q-item.is-open{background:#fff;border-color: var(--primary-purple);box-shadow: 0 6px 16px rgba(0,0,0,0.08);}
.q-item.is-open .q-button::after{transform: rotate(135deg);border-color: var(--primary-purple);}

.a-panel{overflow:hidden;max-height:0;opacity:0;padding:0 16px;transition: max-height 280ms ease, opacity 240ms ease, padding-top 180ms ease, padding-bottom 180ms ease;}
.a-inner{padding:8px 0 14px;}
.a-inner p{margin:0;color:#444;font-size:16px;line-height:1.6;word-break:keep-all;}
.q-item.is-open .a-panel{max-height: 600px;opacity:1;padding-top: 6px;padding-bottom: 10px;}



/*  테블릿 */
@media (min-width:768px){

  /*메인비쥬얼 */
  #content{margin-left:0;padding: 0 40px;}
  .main_container{min-height:620px;background-image:url('/images/clean/main/visual_back.png');}
  .main_container .visual-title{margin:140px 0 18px;}
  .main_container .visual-title .v-line{font-size:46px;}
  .main_container .visual-desc{margin:16px 0 0;font-size:18px;}
  .main_container .visual-contact{margin-top:6px;}
  .main_container .visual-contact .label,.main_container .visual-contact .sep,.main_container .visual-contact .contact-phone,.main_container .visual-contact .dept{font-size: 18px;}
  .main_container .visual-illust{margin-top:24px;display:block;margin-left:auto;width:max-content;}
  .main_container .btn-primary{width: 230px;height:56px;line-height:56px;font-size:18px;}
  .main_container .visual-illust img{width: 96px;height: 98px;margin-left: -67px;margin-top: -39px;}
  
  /* 처리 절차 (공통 기본) */
  .flow{padding: 60px 40px 100px;margin-left:0;} 
  .flow_tit{font-size: 30px;}
  .flow{--flow-gap:80px;--flow-arrow-offset-h:18px;}
  .flow_list{display:flex;flex-wrap:nowrap;gap:0;border-radius:20px;}
  .flow_step{width:auto;}
  .flow_step+ .flow_step{margin-top:0;}
  .flow_icon{width: clamp(120px, 14vw, 160px);height: clamp(120px, 14vw, 160px);margin-bottom: 10px;}
  .flow_icon img{width: 43%;height:auto;}
  /* 기본(태블릿 공통)에서는 화살표 숨김 - 범위쿼리에서만 표시 */
  .flow_step:not(:last-child)::after{display:none;}
  .flow_label{font-size: clamp(14px, 1.8vw, 16px);} 
  .flow_label span{font-size:14px;color:#bdbcbc;display: contents;}
  .flow_left{left:-24px;top: 57px;}
  .flow_right{right:-16px;top: 151px;width: 111px;}
  .flow_wrap::after{right: 26px;bottom: 0px;width: 80%;height: 36%;}

  /* facility - tablet (nowrap) */
  .facility_wrap{display:flex;flex-wrap:nowrap;gap:20px;padding: 0 40px;margin-top: 20px;}
  .facility_left,.facility_right{width:50%;}
  .map_list {left: 0px;}
  .main_map img { display: block;width: 100%;height: auto;}
  .map_list a {padding: 5px 10px;}
  
  .map_list .m1{left: 79%;top: 7%;}
  .map_list .m2{left: 52%;top: 21%;}
  .map_list .m3{left: 13%;top: 40%;}
  .map_list .m4{left: 37%;top: 40%;}
  .map_list .m5{left: 59%;top: 35%;}
  .map_list .m6{left:74.5%;top: 41.8%;}
  .map_list .m7{left: 81%;top: 33%;}
  .map_list .m8{left: 17%;top: 54%;}
  .map_list .m9{left: 43%;top: 54%;}
  .map_list .m10{left: 58%;top: 48%;}
  .map_list .m11{left: 88%;top: 50%;}
  .map_list .m12{left: 32.5%;top: 62%;}
  .map_list .m13{left: 64%;top: 56%;}
  .map_list .m14{left: 87%;top: 59%;}
  .map_list .m15{left: 60%;top: 65%;}
  .map_list .m16{left: 82%;top: 68%;}
  .map_list .m17{left: 52%;top: 75%;}
  .map_list .m18{left:50%;top: 90%;}
  /* qna 질문 */
  .faq_head img{display:none;}
  .qna_list{ gap:12px; }
  .q-button{ padding:16px 18px; }
  .q-mark{ width:30px; height:30px; font-size:14px; }
  .q-text{ font-size:16px; }
  .a-panel{ padding:0 18px; }
  .a-inner{ padding:10px 0 16px; }
  .btn-more{margin-left:10px;}

}

/* PC */
@media (min-width:1200px){
  /* 메인비쥬얼 */
  #content{/*padding: 0px 100px;*/min-height: 400px;/* width: 100%; */}
  .main_container{min-height:680px;background-image:url('/images/clean/main/visual_back.png');}
  .main_container .visual-title{margin: 150px 0 30px;}
  .main_container .visual-title .v-line{font-size: 48px;}
  .main_container .visual-title .v-line br{display:none;}
  .main_container .visual-desc{font-size: 18px;}
  .main_container .visual-contact{margin-top:8px;}
  .main_container .visual-contact .label,.main_container .visual-contact .sep,.main_container .visual-contact .contact-phone,.main_container .visual-contact .dept{font-size:18px;}
  .main_container .visual-illust{position:absolute;top: 223px;right: 19px;display:inline-flex;align-items:flex-end;margin-top:0;}
  .main_container .btn-primary{width: 290px;height: 70px;line-height: 70px;font-size: 25px;border-radius: 18px;}
  .main_container .visual-illust img{width: 115px;height: 125px;margin-left: -70px;margin-bottom: -3px;}

  /* 재활용배출안내 */
  .side-widget{margin-top: 85px;}
  .weekly{display:block;background:#e7f8ff;border:0;border-radius:15px;padding: 18px 12px;}
  .weekly-title{margin:0 0 10px;text-align:center;}
  .weekly-title .t-main{display:block;font-size:18px;font-weight:800;color:#333;}
  .weekly-title .t-sub{display:block;font-size:16px;font-weight:700;color:#333;margin-top:2px;}
  .weekly-date{display:flex;align-items:center;justify-content:center;background:#333;color:#f5a200;font-weight:600;border-radius:10px;font-size:16px;width:100%;height:30px;}
  .weekly-date2{display:flex;align-items:center;justify-content:center;background: #ade3f9;color: #333;font-weight:600;border-radius:10px;font-size:16px;width:100%;height: 52px;margin-top: 10px;}

  .weekly-list{list-style:none;padding:0;margin:0;}
  .badge{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight: 600;font-size: 16px;}
  .dong .badge{background: #e50075;position: relative;top: 10px;left: 83px;}
  .myeon .badge{background: #6856cc;position: relative;top: 10px;left: 83px;}
  .card{background:#fff;border-radius:12px;padding:14px 12px;text-align:center;width: 100%;}
  .type{display:block;color:#333;font-size: 18px;line-height:1.4;margin-bottom:8px;}
  .dong .type{color:#ff2b7a;}
  .myeon .type{color: #6856cc;}
  .time{margin:0;color:#666;font-size: 16px;line-height:1.5;font-weight: 500;}
  .weekly-illust{text-align:center;}
  .weekly-illust img{width: 100%;height:auto;position: relative;top: 18px;}
  
  /* 처리 절차 (공통 기본) */
  .flow{padding: 80px 100px 120px;FONT-VARIANT: JIS78;--flow-arrow-offset-h: 55px;}
  .flow_wrap{max-width: 1200px;margin: 0;}
  .flow_list{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;padding:40px 48px;}
  .flow_step{flex:1;}
  .flow_icon{width: 136px;height: 136px;}
  .flow_icon img{width: 65px;height: auto;}
  .flow_label{font-size: 18px;margin-top:-20px;position:relative;z-index:2;}
  .flow_left{left: -47px;top: 240px;width: 129px;}
  .flow_right{display: none;}
  .flow_wrap::after{right: -258px;bottom: 0px;width: 100%;height: 68%;}
  .flow_step:not(:last-child)::after{display:none;}
  .flow_step:not(:last-child) .flow_icon::after{content:"";position:absolute;right: -64px;top:50%;transform:translateY(-50%) rotate(-90deg);width:var(--flow-arrow-size);height:var(--flow-arrow-size);background:url('/images/clean/main/arrow_down.png') no-repeat center/contain;}
  .flow_tit{font-size: 35px;}
  .faq_head{
    position: relative;
    z-index: auto;
}
  /* 시설안내/Q&A 레이아웃 PC버전*/
  .facility_wrap{display:flex;flex-wrap:nowrap;gap:20px;padding: 0 100px;}
  .facility_left,.facility_right{width: 50%;}
  .map_list a {padding: 6px 16px;font-weight: 600;white-space: nowrap;font-size: 16px;}
  .main_map img{margin-top:-50px;margin-left: 44px;width: 65%;}
  .map_list{left: 50px;}
  .map_list li a{display:inline-block;transition:transform .2s ease;}
  .map_list li a:hover{transform:translateY(-4px);}
  
  .map_list .m1{left: 50%;top: 6%;}
  .map_list .m2{left: 34%;top: 21%;}
  .map_list .m3{left: 13%;top: 40%;}
  .map_list .m4{left: 28%;top: 40%;}
  .map_list .m5{left: 39%;top: 33%;}
  .map_list .m6{left: 49.5%;top: 42.8%;}
  .map_list .m7{left: 54%;top: 34%;}
  .map_list .m8{left:11%;top: 52%;}
  .map_list .m9{left: 33%;top: 52.5%;}
  .map_list .m10{left: 38%;top: 45.5%;}
  .map_list .m11{left: 61%;top: 47%;}
  .map_list .m12{left: 23.5%;top: 57%;}
  .map_list .m13{left: 47%;top: 54%;}
  .map_list .m14{left: 59%;top: 57%;}
  .map_list .m15{left: 40%;top: 61%;}
  .map_list .m16{left: 56%;top: 66%;}
  .map_list .m17{left: 34%;top: 71%;}
  .map_list .m18{left: 33%;top: 90%;}
  /*  Q&A */
  .qna_list{gap:14px;position: static;z-index:auto;width:100%;max-width:100%;margin-top: 37px;}
  .q-button{ padding:18px 20px; }
  .q-mark{ width:32px; height:32px; font-size:15px; }
  .q-text{font-size: 18px;}
  .a-panel{ padding:0 20px; }
  .a-inner{ padding:12px 0 18px; }
  .q-item.is-open{ box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
  .btn-more{float: right; margin: 0;padding: 4px 20px;border-radius: 50px;}
  .faq_head img{display:block;z-index: -1;position: absolute;top: -46px;left: 320px;width: 17%;}

}
/* 처리절차 */
@media (min-width:768px) and (max-width:1199px){
  .flow_list{display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;border-radius:20px;}
  .flow_step{width:100%;}
  .flow_step .flow_icon{position:relative;}
  .flow_step .flow_icon::after{content:"";position:absolute;right: calc(var(--flow-arrow-offset-h) * -4);top: 50%;transform:translateY(-50%) rotate(-90deg);width:var(--flow-arrow-size);height:var(--flow-arrow-size);background:url('/images/clean/main/arrow_down.png') no-repeat center/contain;}
  .flow_step:nth-child(3) .flow_icon::after,
  .flow_step:nth-child(5) .flow_icon::after{display:none;}
}