@charset "utf-8";


/****************************************************************************** main 공통 : 시작 */

.main #container * {	
	transition: all .4s;
}
.main #container {
	padding-bottom: 12.0rem;
}
.main .main_table {
	overflow-x: auto;
}
.main .main_table > table {
	width: 100%;
	text-align: center;
	border-top: 1px solid #d8d8d8;
	background-color: #fff;
}
.main .main_table > table th,
.main .main_table > table td {
	height: 4.0rem;
	padding: 0.7rem;
	font-weight: 500;
	font-family: 'Pretendard'; 
	border-bottom: 1px solid #d8d8d8;
	vertical-align: middle;
}
.main .main_table > table .bg1 {background-color: #f5f5f5;}
.main .main_table > table .rkbox {
	position: relative;
	display: inline-block;
	padding: 0 1.7rem;
	font-family: 'Pretendard';
	font-weight: 500;
}
.main .main_table > table .rkbox:before {
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.2rem;
	height: 1.2rem;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;	
}
.main .main_table > table .rkbox.i_dw:before {background-image: url('../../assets/images/main/ico_lank_dw.png');}
.main .main_table > table .rkbox.i_up:before {background-image: url('../../assets/images/main/ico_lank_up.png');}

.main .section .m_title1 {
	position: relative;
	display: block;
	font-weight: 700;
	color: var(--body-color-2);
	font-size: 3.2rem;
	line-height: 4.2rem;
}
.main .section .btn_link_rd {
	display: inline-block;
	min-width: 11.0rem;
	height: 4.0rem;
	line-height: 4.0rem;
	font-size: 1.5rem;
	text-align: center;
	color: #fff;
	font-weight: 500;
	background-color: #949599;
	border-radius: 2.0rem 2.0rem 2.0rem 0;
}
.main .section .box_w {
	overflow: hidden;
	position: relative;
	padding: 3.0rem;
	background: #fff;
	border-radius: 1.8rem;
}
.main .section .box_w + .box_w {
	margin-top: 2.0rem;
}
.main .section {margin-top: 4.0rem}
.main .section + .section {margin-top: 8.0rem;}

@media all and (max-width: 1023px) {
	.main .section + .section {margin-top: 6.0rem;}
	.main .section .m_title1 {
		font-size: 2.8rem;
		line-height: 3.6rem;
	}
}
@media all and (max-width: 1200px) {
	#wrap.main #container {
		padding-bottom: 4.0rem;
	}
	.main .section.visual_area {margin-top: 0;}
}
@media all and (max-width: 767px) {
	.main .section .m_title1 {
		font-size: 2.4rem;
		line-height: 2.8rem;
	}
	.main .section .btn_link_rd {
		font-size: 1.4rem;
	    height: 3.8rem;
	    line-height: 3.8rem;
	}
	.main .section + .section {margin-top: 4.0rem;}
}
@media all and (max-width: 420px) {
	.main .section .m_title1 {
		font-size: 2.0rem;
		line-height: 2.4rem;
	}
	.main .section .box_w {
		padding: 2.0rem;
	}
	.main .section + .section {margin-top: 3.0rem;}
}
@media all and (max-width: 340px) {
	.main .section .box_w {
		padding: 1.5rem;
	}
	.main .section .btn_link_rd {
		font-size: 1.3rem;
	}
}

/****************************************************************************** main : 시작 */

/* 비주얼 스와이프 */
.main .visual_slider {position: relative;}
.main .visual_slider .bx_controls {
	position: absolute;
	left: 0;
	bottom: 0;
}
.main .visual_slider .bx_controls > span,
.main .visual_slider .bx_controls > span > em {
	display: inline-block;
	vertical-align: top;
	line-height: normal;
}
.main .visual_slider .bx_controls > span > a {
	overflow: hidden;
	display: inline-block;
	width: 1.5rem;
	height: 2.2rem;
	vertical-align: top;
	text-indent: -99999em;
	background-repeat: no-repeat;
	background-position: center;	
}
.main .visual_slider .bx_controls .pager {
	min-width: 3.4rem;
	line-height: 2.2rem;
	margin: 0 0.8rem;
	font-family: 'Pretendard';
	font-size: 1.4rem;
	font-weight: 500;
}
.main .visual_slider .bx_controls .pager > em {
	display: inline-block;
	padding: 0 0.6rem;
	line-height: 2.2rem;
}
.main .visual_slider .bx_controls .bx-prev {background-image: url('../../assets/images/main/slider_prev.png');}
.main .visual_slider .bx_controls .bx-next {background-image: url('../../assets/images/main/slider_next.png');}
.main .visual_slider .bx_controls .bx-play {display: none; background-image: url('../../assets/images/main/slider_play.png');}
.main .visual_slider .bx_controls .bx-stop {background-image: url('../../assets/images/main/slider_pause.png');}

.main .visual_slider ul > li .item {
	width: 100%;
	padding-top: 6.5rem;
	height: 41.2rem;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 100% auto;
}
.main .visual_slider ul > li .item.bg1 {background-image: url('../../assets/images/main/slider_1.png');}
.main .visual_slider ul > li .item.bg2 {background-image: url('../../assets/images/main/slider_2.png');}
.main .visual_slider ul > li .item.bg3 {background-image: url('../../assets/images/main/slider_3.png');}
.main .visual_slider ul > li .item .txt {
	height: 20.0rem;
}
.main .visual_slider ul > li .item h3 {
	color: #231f20;
	font-weight: 700;
	font-size: 4.2rem;
	line-height: 6.2rem;
	letter-spacing: -1.5px;
}
.main .visual_slider ul > li .item p {
	margin-top: 2.4rem;
	color: #4d4d4f;
	font-size: 1.7rem;
	line-height: 2.4rem;
}

@media all and (max-width: 1023px) {
	.main .visual_slider .bx_controls {
		position: static;
	}
	.main .visual_slider .bx_controls .pager,
	.main .visual_slider .bx_controls .pager > em {
		line-height: 3.0rem;
	}
	.main .visual_slider .bx_controls > span > a {
		width: 2.4rem;
		height: 3.0rem;
	}	
	.main .visual_slider ul > li .item {
		padding-top: 5.0rem;
		height: 32.0rem;
		background-size: 100% auto;
	}
	.main .visual_slider ul > li .item .txt {
		height: 20.0rem;
	}
	.main .visual_slider ul > li .item h3 {
		font-size: 3.6rem;
		line-height: 5.6rem;
	}
	.main .visual_slider ul > li .item p {
		margin-top: 2.0rem;
		font-size: 1.4rem;
		line-height: 2.0rem;
	}
	.main .visual_slider.bgon {

	}
}
@media all and (max-width: 720px) {	
	.main .visual_slider ul > li .item {
		position: relative;
		padding-top: 3.0rem;
		padding-bottom: 6.0rem;
		height: auto;
		min-height: 260px;
	}
	.main .visual_slider ul > li .item .txt {
		height: 16.0rem;
	}
	.main .visual_slider ul > li .item h3 {
		font-size: 3.0rem;
		line-height: 4.6rem;
	}
	.main .visual_slider ul > li .item p {
		margin-top: 1.5rem;
	}
	.main .visual_slider ul > li .item .btn_t {
		position: absolute;
		left: 0;
		bottom: 2.0rem;
	}
	/*
	.main .visual_slider ul > li .item.bg1 {background-image: none;}
	.main .visual_slider ul > li .item.bg2 {background-image: none;}
	.main .visual_slider ul > li .item.bg3 {background-image: none;}
	.main .visual_slider ul > li .item.bg1.bgon {background-image: url('../../assets/images/main/slider_1.png');}
	.main .visual_slider ul > li .item.bg2.bgon {background-image: url('../../assets/images/main/slider_2.png');}
	.main .visual_slider ul > li .item.bg3.bgon {background-image: url('../../assets/images/main/slider_3.png');}
	*/
}
@media all and (max-width: 420px) {	
	.main .visual_slider ul > li .item h3 {
		font-size: 2.2rem;
		line-height: 3.0rem;
	}
	.main .visual_slider ul > li .item .txt {
		height: auto;
	}
	.main .visual_slider .btn_t {
		margin-top: 2.0rem;
	}
	.main .visual_slider .btn_link_rd {
		min-width: 8.8rem;
		height: auto;
		line-height: normal;
		padding: 0.7rem 0;
		font-size: 1.4rem;
	}
}

/* 자주찾는 서비스 */
.main .service_menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.main .service_menu .btn_link {
	position: relative; 
	display: inline-block; 
	line-height: 2.4rem;
	padding-right: 2.8rem;
}
.main .service_menu .btn_link:before {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.6rem;
	height: 0.8rem;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('../../assets/images/main/ico_arr_link.png');
}
.main .service_menu > div {
    flex: none;
}
.main .service_menu > .titbx {
	width: 28.0rem;
}
.main .service_menu > .titbx > .title {
	padding: 4.0rem 0;
	font-size: 3.2rem;
}
.main .service_menu .ui_tab {
	position: relative;
	padding-bottom: 3.4rem;
}
.main .service_menu .ui_tab > li > a {
	display: inline-flex;
	width: 30.2rem;
	height: 6.0rem;
	padding: 0 4.0rem;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--body-color-1);
	align-items: center;
	border-radius: 3.0rem 3.0rem 3.0rem 0;
}
.main .service_menu .ui_tab > li.active > a {
	position: relative;
	color: var(--hscity-white);
	background-color: #0055a6;
}
.main .service_menu .ui_tab > li.active > a:before {
	content: '';
	display: block;
	position: absolute;
	right: 4.0rem;
	top: 50%;
	transform: translateY(-50%);
	width: 0.6rem;
	height: 1.0rem;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('../../assets/images/main/ico_arr_link_w.png');
}
.main .service_menu .ui_tab > li + li {
	margin-top: 1.8rem;
}
.main .service_menu > .tab_conts_wrap {
    width: calc(100% - 28.0rem);
    padding: 3.0rem 4.5rem;
	border-radius: 1.8rem;
	background-color: #f1f1f1;
}
.main .service_menu > .tab_conts_wrap .tab_conts {
	position: relative;
	height: 100%;
}
.main .service_menu > .tab_conts_wrap .list {
	display: table;
	width: 100%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.main .service_menu > .tab_conts_wrap .list > li {
	display: table-cell;
    width: calc(100% / 3);
	padding: 0 1.5rem;
}
.main .service_menu > .tab_conts_wrap .list > li > a {
	display: block;
	text-align: center;
}
.main .service_menu > .tab_conts_wrap .list > li > a > span {
	overflow: hidden;
	display: block;
	max-width: 28.0rem;
	border-radius: 7.0rem;
	background-color: var(--hscity-white);
}
.main .service_menu > .tab_conts_wrap .list > li > a > span > img {
	max-width: 100%;
}
.main .service_menu > .tab_conts_wrap .list > li > a > dl {
	margin-top: 2.0rem;
}
.main .service_menu > .tab_conts_wrap .list > li > a > dl > dt {
	display: block;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--body-color-2);
}
.main .service_menu > .tab_conts_wrap .list > li > a > dl > dd {
	margin-top: 1.0rem;
	font-size: 1.6rem;
}
@media all and (max-width: 1023px) {
	.main .service_menu > .tab_conts_wrap .list > li {
		display: block;
	    width: 100%;
		padding: 0;
	}
	.main .service_menu > .tab_conts_wrap .list > li + li {
		margin-top: 2.0rem;
	}
	.main .service_menu > .tab_conts_wrap .list > li > a {
		display: flex;
    	flex-direction: row;
    	gap: 2.0rem;
    	align-items: center;
	}
	.main .service_menu > .tab_conts_wrap .list > li > a > span {
		max-width: 20.0rem;
	}
	.main .service_menu > .tab_conts_wrap .list > li > a > dl {
		margin-top: 0;
		text-align: left;
	}
}
@media (max-width: 767px) {
	.main .service_menu .ui_tab {
		padding-bottom: 2.0rem;
	}
	.main .service_menu > .titbx > .title {
		padding-top: 0;
		padding-bottom: 2.0rem;
		font-size: 2.4rem;
		line-height: 2.8rem;
	}
	.main .service_menu > .tab_conts_wrap {
		width: 100%;
		padding: 2.0rem;
	}
	.main .service_menu > .tab_conts_wrap .list > li > a > span {
		max-width: 15.0rem;
	}
	.main .service_menu .ui_tab > li + li {
		margin-top: 1.0rem;
	}
	.main .service_menu .ui_tab > li > a {
		background-color: #eee;
	}
}
@media (max-width: 420px) {
	.main .service_menu .ui_tab {
		padding-bottom: 1.0rem;
	}
	.main .service_menu > .titbx > .title {
		padding-bottom: 1.0rem;
		font-size: 2.0rem;
		line-height: 2.4rem;
	}
	.main .service_menu .ui_tab > li + li {
		margin-top: 0.8rem;
	}
	.main .service_menu .ui_tab > li > a {
		width: 24.0rem;
		height: 4.0rem;
		padding: 0 2.4rem;
		font-size: 1.5rem;
		border-radius: 1.8rem 1.8rem 1.8rem 0;
	}
	.main .service_menu > .tab_conts_wrap .list > li > a > dl > dt {
		font-size: 1.5rem;
	}
	.main .service_menu > .tab_conts_wrap .list > li > a > dl > dd {
		font-size: 1.5rem;
	}
}

/* 폐기물, 행복홀씨 */
.main .visitor_box {
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
}
.main .visitor_box .btn_link_rd {
	min-width: 12.4rem;
}
.main .visitor_box .btn_link {
	position: relative; 
	display: inline-block; 
	font-size: 1.6rem;
	line-height: 2.4rem;
	padding-right: 2.8rem;
}
.main .visitor_box .btn_link:before {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.6rem;
	height: 0.8rem;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('../../assets/images/main/ico_arr_link.png');
}
.main .visitor_box .item {
    width: calc(50% - 1.2rem);
    padding: 3.0rem;
    background-color: #fff;
    border: 1px solid #d8d8d8;
	border-radius: 1.8rem;
}
.main .visitor_box .title_justify {	
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*
    align-items: stretch;
    align-self: stretch;
    */
}
.main .visitor_box .title_justify .title {
	font-size: 2.4rem;
	line-height: 3.6rem;
	color: var(--body-color-2);
}
.main .visitor_box .title_justify .right {
    display: flex;
    align-items: center;
}
.main .visitor_box .list {
    display: flex;
    flex-direction: column;
    row-gap: 1.0rem;
    margin-top: 2.0rem;
}
.main .visitor_box .list > li > a {
	position: relative;
    display: flex;
    flex-direction: row;
    gap: 1.0rem;
	height: 6.5rem;
	padding: 0 2.0rem;
	text-align: left;
    align-items: center;
    /*
	font-size: 1.6rem;
	*/
	color: var(--body-color-1);
	border-radius: 1.8rem;
	background-color: #f5f5f5;
}
.main .visitor_box .list > li > a:hover:before {
	content: '';
	display: block;
	position: absolute;
	right: 3.0rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.0rem;
	height: 1.6rem;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url('../../assets/images/main/ico_arr_right.png');
}
.main .visitor_box .list > li > a > em {
	display: inline-block;
	width: 4.0rem;
	height: 4.0rem;
	line-height: 4.0rem;
	text-align: center;
	border-radius: 100%;
	background-color: #f36f21;
	color: var(--hscity-white);
	font-family: 'Pretendard';
	font-size: 1.6rem;
	font-weight: 500;
}
.main .visitor_box .txt {
	margin-top: 2.0rem;
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.main .visitor_box .btn_bx {
	margin-top: 2.0rem;
}
@media all and (max-width: 1023px) {
	.main .visitor_box {		
	    flex-direction: column;
	    gap: 2.0rem;
	}
	.main .visitor_box .item {
		width: 100%;
		padding: 2.0rem;
	}
	.main .visitor_box .item .title .br {
		display: none;
	}
}
@media all and (max-width: 767px) {
	.main .visitor_box .title_justify .title {
		font-size: 2.0rem;
		line-height: 2.8rem;
	}
	.main .visitor_box .list > li > a {
		padding-left: 1.8rem;
		padding-right: 1.8rem;
	}
	.main .visitor_box .list > li > a > em {
		flex: none;
		width: 3.0rem;
		height: 3.0rem;
		line-height: 3.0rem;
		font-size: 1.4rem;
	}
}
@media all and (max-width: 420px) {
	.main .visitor_box .title_justify .title {
		font-size: 1.8rem;
		line-height: 2.6rem;
	}
	.main .visitor_box .list,
	.main .visitor_box .txt {
	    margin-top: 1.0rem;
	}
}

/****************************************************************************** main - 그래프 */
.main .chart_group .title_justify {	
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main .chart_group .title_justify select {
	min-width: 120px;
	height: 4.2rem;
}
.main .chart_group .main_chart1 {
    display: flex;
    flex-direction: column;
	gap: 3.0rem;
}
.main .chart_group .box_w .s_tit {
	position: relative;
	margin-bottom: 3.0rem;
	padding-left: 2.2rem;
	font-size: 1.7rem;
	font-weight: 700;
	color: #231f20;
}
.main .chart_group .box_w .s_tit:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 100%;
	background-color: #0055a6;
}

.main .chart_group .chart_area {
    display: flex;
    flex-direction: row;
	min-height: 75.0rem;
	gap: 4.0rem;
    padding: 5.0rem;
	padding-bottom: 19.0rem;
	border-radius: 1.8rem;
	background-color: #d8f2ff;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% auto;
	background-image: url('../../assets/images/main/chart_bg1.png');
}
.main .chart_group .chart_area > li:first-child {
    flex: none;
	width: 40.0rem;
}
.main .chart_group .chart_area > li:last-child {
    flex: none;
    width: calc(100% - 44.0rem);
}
.main .chart_group .main_chart1 .box_w {box-shadow: 0.5rem 0.5rem #c3e8fa;}
.main .chart_group .main_chart1 .left .box_w {padding-bottom : 5.0rem;}

@media all and (max-width: 1100px) {
	.main .chart_group .chart_area {
		display: block;
		padding: 3.0rem;
		padding-bottom: 19.0rem;
	}
	.main .chart_group .chart_area > li:first-child {
		width: 100%;
	}
	.main .chart_group .chart_area > li:last-child {
		width: 100%;
		margin-top: 2.0rem;
	}
}
@media all and (max-width: 767px) {
	.main .chart_group .chart_area {
		padding-bottom: 20%;
	}
	.main .chart_group .title_justify select {
		min-width: 100px;
		height: 3.6rem;
	}
}
@media all and (max-width: 420px) {
	.main .chart_group .chart_area {
		padding: 2.0rem;
		padding-bottom: 20%;
	}
	.main .chart_group .box_w .s_tit {
		font-size: 1.6rem;
		margin-bottom: 2.0rem;
	}
	.main .chart_group .main_chart1 {
		gap: 1.5rem;
	}
}


.main .donut_box {
	position: relative;
	width: 250px !important;
	height: 250px !important;
	margin: 0 auto;
}
.main .donut_box .donutChart {
	width: 250px !important;
	height: 250px !important;
}
.main .donut_box .total_label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 1.6rem;
	line-height: 2.4rem;
	font-weight: 700;
	color: var(--body-color-1);
	pointer-events: none;
	font-family: 'Pretendard';
}

.main .barChart1 > .bar_container {
	display: flex;
	height: 2.8rem;
	line-height: 2.8rem;
}
.main .barChart1 > .bar_container + .bar_container {
	margin-top: 2.0rem;
}
.main .barChart1 > .bar_container .t_label {
	width: 10.0rem;
	color: var(--body-color-1);
	font-weight: 500;
}
.main .barChart1 > .bar_container .t_bar {
	position: relative;
	width: 100%;
	background-color: #f5f5f5;
}
.main .barChart1 > .bar_container .t_bar .bar_fill {
	height: 100%;
	width: 0;
	color: white;
	padding-left: 10px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	transition: width 1s ease-out;
}
.main .barChart1 > .bar_container .t_value {
	width: 6.0rem;
	text-align: right;
	color: var(--body-color-1);
	font-weight: 500;
	font-family: 'Pretendard';
}

.main .barChart1 .bar_container:nth-child(1) .bar_fill {background: #228bf4;}
.main .barChart1 .bar_container:nth-child(2) .bar_fill {background: #0156d6;}
.main .barChart1 .bar_container:nth-child(3) .bar_fill {background: #4cb4d9;}
.main .barChart1 .bar_container:nth-child(4) .bar_fill {background: #55d2c6;}
.main .barChart1 .bar_container:nth-child(5) .bar_fill {background: #7ED5B3;}

@media all and (max-width: 500px) {
	.main .donut_box,
	.main .donut_box .donutChart {
		width: 200px !important;
		height: 200px !important;
	}
	.main .barChart1 > .bar_container {
		font-size: 1.4rem;
	}
}


/* 생활폐기물수 : 맵공통 */
.map_group .main_map {
    display: flex;
    flex-direction: column;
	gap: 3.0rem;
}
.map_group .box_w {box-shadow: 0.5rem 0.5rem #ffd7c4;}
.map_group .map_area {
    display: flex;
    flex-direction: column;
	min-height: 60.0rem;
	gap: 4.0rem;
    padding: 5.0rem;
	padding-bottom: 19.0rem;
	border-radius: 1.8rem;
	background-color: #ffe5d8;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% auto;
	background-image: url('../../assets/images/main/chart_bg2.png');
    transition: all .3s;
}
.map_group .map_area > li.map_img {width: 100%;}
.map_group .map_area > li.map_img > div {
	display: flex;
    flex-direction: row;
	width: 100%;
	text-align: center;
	justify-content: center;
}
.map_group .map_area > li.map_img > div img[usemap] {
    border: none;
    width: auto;
    height: auto;
    width: 100%;
    max-width: 100%;
	max-width: 500px;
}
.map_group .map_area > li.map_img > div .img_l {}
.map_group .map_area > li.map_img > div .img_r {}
.map_group .map_area > li.map_address .com_list {
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
}
.map_group .map_area > li.map_address .com_list > div {	
    width: calc(50% - 1.2rem);
    margin-top: 0;
}
.map_group .com_list dl > dt {
	position: relative;
	padding-bottom: 2.0rem;
	padding-left: 2.0rem;
	border-bottom: 1px solid #d8d8d8;
	color: #231f20;
	font-weight: 700;
	font-size: 1.7rem;
}
.map_group .com_list dl > dt:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.5rem;
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 100%;
	background-color: #f36f23;
}
.map_group .com_list dl > dd {
	position: relative;
	padding-left: 2.0rem;
	font-size: 1.5rem;
	margin-top: 2.0rem;
}
.map_group .com_list dl > dd:before {
	content: '';
	position: absolute;
	left: 0.8rem;
	top: 0.6rem;
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 100%;
	background-color: #949599;
}

@media all and (max-width: 1100px) {
	.map_group .map_area {
		display: block;
		padding: 3.0rem;
		padding-bottom: 19.0rem;
	}
	.map_group .map_area > li:first-child {
		width: 100%;
	}
	.map_group .map_area > li:last-child {
		width: 100%;
		margin-top: 2.0rem;
	}
}

@media all and (max-width: 767px) {
	.map_group .map_area {
		padding-bottom: 20%;
	}
	.map_group .map_area > li.map_img > div {
	    flex-direction: column;
	    padding: 5px;
	}
	.map_group .map_area > li.map_address .com_list {
	    flex-direction: column;
	}
	.map_group .map_area > li.map_address .com_list > div {	
	    width: 100%;
	}
}

@media all and (max-width: 420px) {
	.map_group .main_map {
		gap: 1.5rem;
	}
	.map_group .map_area {
		padding: 2.0rem;
		padding-bottom: 20%;
	}
	.map_group .com_list dl > dt {
		font-size: 1.6rem;
		padding-bottom: 1.5rem;
	}
	.map_group .com_list dl > dt:before {
		top: 0.4rem;
	}
	.map_group .com_list dl > dd {
		font-size: 1.4rem;
		margin-top: 1.5rem;
	}
}


/****************************************************************************** main : 끝 */

/****************************************************************************** 청소민원신청 */
.step_radius {
	display: flex;
	gap: 3.8rem;
}
.step_radius > li {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 8.6rem;
	padding: 1.2rem 1.0rem;
	line-height: 2.4rem;
	text-align: center;
	border-radius: 1.8rem;
	border: 1px solid var(--hscity-gray-30);
}
.step_radius > li + li:before {
	content: '';
	display: block;
	position: absolute;
	left: -3.8rem;
	top: 50%;
	width: 3.8rem;
	height: 3.8rem;
	transform: translateY(-50%);
    background: url('../../assets/images/icon/icon_step_r.png') no-repeat center center;
}

/* 대형폐기물 */
.step_radius.imgTy1 {
	gap: var(--gap-size-10);
}
.step_radius.imgTy1 > li {
	overflow: hidden;
	padding: 0;
	border: 0;
	border-radius: 1.0rem;
	line-height: 0;
}
.step_radius.imgTy1 > li:before {
	display: none;
}
.step_radius.imgTy1 > li img {
	width: 100%;
}
@media (max-width: 767px) {
	.step_radius > li {
		flex-basis: auto;
		height: auto;
		min-height: auto;
		padding: 1.0rem 1.2rem;
	}
	.step_radius > li + li:before {
		left: 50%;
		top: -3.8rem;
		transform: translateX(-50%);
    	background: url('../../assets/images/icon/icon_step_d.png') no-repeat center center;
	}
	.step_radius.imgTy1 {
    	flex-direction: row;
    	flex-wrap: wrap;
	}
	.step_radius.imgTy1 > li {
		flex:  none;
		min-height: auto;
		padding: 0;
		width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-10)) / var(--columns-3) );
	}
}
@media (max-width: 420px) {
	.step_radius {
    	flex-direction: column;
    	gap: 2.8rem;
	}
	.step_radius > li{
		border-radius: 1.5rem;
	}
	.step_radius > li + li:before {
		top: -2.8rem;
	    height: 2.8rem;
	    background-size: 14px auto;
	}
}

.step_radius.type1 > li {
	padding: 1.6rem 0.8rem;
	height: auto;
}
.step_radius.type1 > li {
	display: flex;
    flex-direction: column;
    gap: 1.0rem;
    justify-content: flex-start;
}
.step_radius.type1 > li > b {
	display: block;
}
@media (max-width: 767px) {
	.step_radius.type1 > li > br {display: none;}
}
@media (max-width: 420px) {
	.step_radius.type1 > li {
		padding: 1.5rem;
		height: auto;
	}
	.step_radius.type1 > li {
	    gap: 0.3rem;
	}
}

/* 개인정보처리동의 */
.agree_list > dl {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	padding: 0.8rem 0;
	gap: 0.8rem;
}
.agree_list > dl:first-child {
	padding-top: 0;
}
.agree_list dl > dt {
	display: flex;
    flex-direction: row;
	gap: 2.0rem;
}
.agree_list dl > dd {
	display: flex;
	margin-left: auto;
    flex-direction: row;
	gap: 1.8rem;
}
.agree_list > dl + dl {
	border-top: 1px solid #e1e3e6;
}
.agree_list > dl > dt > span {
	display: inline-block;
	min-width: 160px;
	line-height: 3.6rem;
}
.agree_list .d_radio + .d_radio {
	margin-left: 0 !important;
}

@media (max-width: 540px) {
	.agree_list > dl {
		flex-direction: column;
		gap: 0.8rem;
		padding: 1.2rem 0;
	}
	.agree_list dl > dt {
		width: 100%;
	}
	.agree_list dl > dt .btn {
		font-size: 14px;
		margin-left: auto;
	}
	.agree_list dl > dd {
		width: 100%;
	}
}

.agebox_14 {
	display: flex;
    flex-direction: row;
}
.agebox_14 > li {
	width: 50%;
	text-align: center;
	padding: 2.0rem 0;
}
.agebox_14 > li .s_text_13 {
	margin-top: 2.0rem;
}
.agebox_14 > li + li {
	border-left: 1px solid #e1e3e6;
}

.agebox_14 .d_radio input + span, 
.agebox_14 .d_check input + span {
	display: block;
	padding-left: 0;
	padding-top: 30px;
}

.agebox_14 .d_radio:before {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.agebox_14 .d_radio:after {
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 768px) {
	.agebox_14 {
		display: block;
	}
	.agebox_14 > li {
		width: 100%;
		text-align: left;
		padding: 0;
	}
	.agebox_14 > li .s_text_13 {
		margin-top: 0.8rem;
		padding-left: 30px;
	}
	.agebox_14 > li + li {
		border-left: none;
		margin-top: 1.2rem;
	}
	.agebox_14 .d_radio input + span, 
	.agebox_14 .d_check input + span {
		display: inline-block;
		padding-left: 30px;
		padding-top: 0;
	}

	.agebox_14 .d_radio:before {
		top: 0;
		left: 0;
		transform: none;
	}
	.agebox_14 .d_radio:after {
        top: 6px;
        left: 6px;
		transform: none;
	}
}

.target_depth {
	padding: 1.6rem 2.0rem;
	border-radius: 1.0rem;
	border: 1px solid #e1e3e6;
}

.target_depth .dl_ckbox + .dl_ckbox {
	margin-top: 2.0rem;
}

/* 인증서선택 */
.certificate_select {
	display: flex;
	gap: 4%;
}
.certificate_select > li {
	display: flex;
	width: 25%;
}
.certificate_select > li > a {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	height: 8.6rem;
	line-height: 2.4rem;
	text-align: center;
	border-radius: 1.8rem;
	border: 1px solid var(--hscity-gray-30);
}
.certificate_select > li > a > span {
	position: relative;
	display: inline-block;
	padding-left: 6.0rem;
}
.certificate_select > li > a > span:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: 4.0rem;
	height: 4.0rem;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-position: center;
}
.certificate_select > li > a.icon_hp > span:before {
	background-image: url('../../assets/images/icon/icon_cer_hp.png');
}
.certificate_select > li > a.icon_easy > span:before {
	background-image: url('../../assets/images/icon/icon_cer_easy.png');
}
.certificate_select > li > a.icon_ipin > span:before {
	background-image: url('../../assets/images/icon/icon_cer_ipin.png');
}
.certificate_select > li > a.icon_mbid > span:before {
	background-image: url('../../assets/images/icon/icon_cer_mbid.png');
}

.certificate_btnbx {
	text-align: center;
}
.certificate_btnbx .btn {
	width: 240px;
}
.certificate_btnbx .btn > span {
	gap: 16px;
}

@media (max-width: 767px) {
	.certificate_select {		
        flex-wrap: wrap;
        flex-direction: row;
        row-gap: 1.0rem;
        column-gap: 1.0rem;
	}
	.certificate_select > li {
        flex: none;
        width: calc(50% - 0.5rem);
	}
	.certificate_select > li > a > span {
		padding-left: 5.0rem;
	}
}

/* 공무원체크 */
.complainant_ckbox {
	margin-top: 3.0rem;
	padding: 0 1.2rem;
}
.complainant_ckbox .dd {
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.8rem;
    max-width: 50%;
}
.complainant_ckbox .dd > label {
	flex-shrink: 0;
}
@media (max-width: 767px) {
	.complainant_ckbox .dd {
	    max-width: 100%;
	}
}

/* sns문자체크 */
.sns_result_ckbox {
	display: flex;
    flex-direction: column;
    gap: 2.0rem;
	margin-top: 3.0rem;
	padding: 2.0rem 1.2rem;
	text-align: center;
	border-top: 1px solid #e1e3e6;
	border-bottom: 1px solid #e1e3e6;
}
.sns_result_ckbox.top_noline {
	border-top: none;
	padding-top: 0;
}

/* 신고조회 */
.ul_table_list.report_list a:hover {text-decoration: underline;}
.ul_table_list.report_list > li > div:nth-child(2) {}
.ul_table_list.report_list > li > div:last-child {margin-left: auto;}
.ul_table_list.report_list > li > div .header_cell + div {
	display: flex;
	gap: 6px;
	align-items: center;
}
@media (max-width: 767px) {
	.ul_table_list.report_list > li {
	    flex-direction: column;
	    align-items: flex-start;
	    gap: 0.8rem;
	}
	.ul_table_list.report_list > li > div {
		width: 100%;
	}
	.ul_table_list.report_list > li > div .header_cell {
		width: 40%;
	}
	.ul_table_list.report_list > li > div > div {
		display: flex;
		align-items: center;
		height: 3.6rem;
		gap: 0.8rem;
	}
	.ul_table_list.report_list > li > div > div:last-child {
		margin-left: auto;
	}
}

.add_img {
	display: flex;
    flex-direction: row;
    gap: 0.8rem;
}
.add_img > li {
	width: 33.33333%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
	background-image: url('../../assets/images/sub/noimg.png');
	border: 1px solid #ddd;
}
.add_img > li img {
	width: 100%;
}
@media (max-width: 767px) {
	.add_img {
        flex-wrap: wrap;
	}
	.add_img > li {
		flex: none;
        width: calc(50% - 0.4rem);
        min-height: 200px;
	}
}
@media (max-width: 550px) {
	.add_img {
    	flex-direction: column;
	}
	.add_img > li {
		width: 100%;
	}
}

/****************************************************************************** 레이어팝업 */
/* 신고할 대상 선택하기 : 생활불편신고 */
.list_select_report dl {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.list_select_report dl + dl {
	margin-top: 30px;
}
.list_select_report dl > dt {
	font-weight: 700;
}
.list_select_report dl > dd {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.list_select_report dl > dd > .target {
	display: flex;
    padding: 0 10px;
    font-size: 1.6rem;
    height: 4.8rem;
    align-items: center;
    border-radius: 1.0rem;
    border: 1px solid #4d4d4f;
    color: #4d4d4f;
    background: var(--hscity-white);
}
.list_select_report dl > dd > .target:hover {
	background: #f1f1f1;
}


/* 지도에서 선택하기 : 신고위치찾기  */
.layer_pop .add_txt {
	display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
	margin: 8px 0;
}
.layer_pop .add_txt .text {
	flex: 1;
}

/* 화성시 행정 읍/면/동 레이어 : 행복홀씨회원 등록 */
.list_select_dong dl {
	display: flex;
	/*
	flex-direction: column;
	*/
	gap: 10px;
}
.list_select_dong dl + dl {
	margin-top: 20px;
}
.list_select_dong dl > dt {
	display: flex;
	width: 80px;
    align-items: center;
    justify-content: center;
    border-radius: 1.0rem;
	font-weight: 700;
	background: #eef2f7;
    border: 1px solid #e1e3e6;
}
.list_select_dong dl > dd {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
}
.list_select_dong dl > dd > .target {
	display: flex;
	width: calc(25% - 8px);
    padding: 0 10px;
    font-size: 1.6rem;
    height: 4.8rem;
    align-items: center;
    border-radius: 1.0rem;
    border: 1px solid #4d4d4f;
    color: #4d4d4f;
    background: var(--hscity-white);
}
.list_select_dong dl > dd > .target:hover {background: #f1f1f1; text-decoration:none;}
.list_select_dong dl > dd > .target.on {background: #f1f1f1; color: #231f20; font-weight: bold;}

/* 배출정보 */
@media (max-width: 1000px) {
	.table.tb_kind .m_left {
		text-align: left;
	} 
}

/* 내집앞 폐가전 */
.list_happ {
	position: relative;
	overflow: hidden;
	border-top: 2px solid #4d4d4f;
}
.list_happ:before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #e1e3e6;
}
.list_happ > li {
	display: flex;
    flex-direction: row;
	float: left;
	width: 50%;
	border-bottom: 1px solid #e1e3e6;
}
.list_happ > li > span {
	display: flex;
	width: 25%;
	height: 48px;
	justify-content: center;
	align-items: center;
	border-right: 1px solid #e1e3e6;
}
.list_happ > li span:nth-child(3),
.list_happ > li span:nth-child(1) {
	background-color: #eef2f8;
}
.list_happ > li:nth-child(2n+2) span:last-child {
	border-right: none;
}
@media (max-width: 767px) {
	.list_happ > li {
		float: none;
		width: 100%;
	}
	.list_happ > li:nth-child(2n+1) span:last-child {
		border-right: none;
	}
}

.sh_bunlisugeo {
	overflow: hidden;
	padding: 20px 30px 110px;
	border-radius: 10px;
	background-color: #ddeaff;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
    background-image: url(../../assets/images/sub/bg_bunlisugeo.png);
}
.sh_bunlisugeo .sh_bunlisugeo_in {
	padding: 40px;
	border-radius: 10px;
	background-color: #fff;
}
.sh_bunlisugeo .f_cklist {
	width: 100%;
	display: flex;
	align-items: center;
}
.sh_bunlisugeo .f_cklist > li {
	flex: 1;
}

@media (max-width: 999px) {
	.sh_bunlisugeo {
		padding: 20px 20px 80px;
	}
	.sh_bunlisugeo .sh_bunlisugeo_in {
		padding: 20px;
	}
	.sh_bunlisugeo .f_cklist {		
		gap: var(--gap-size-10);		
		flex-direction: row;
		flex-wrap: wrap;
	}
	.sh_bunlisugeo .f_cklist > li {
		flex:  none;
		width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-10)) / var(--columns-3) );
	}
}
@media (max-width: 767px) {
	.sh_bunlisugeo {
		padding: 20px 20px 60px;
	}
	.sh_bunlisugeo .f_cklist > li {
		flex:  none;
		width: calc( (100% - (var(--columns-2) - 1) * var(--gap-size-10)) / var(--columns-2) );
	}
}
@media (max-width: 500px) {
	.sh_bunlisugeo .btn_rtxt {
		flex-direction: column;
	}
	.sh_bunlisugeo .btn_rtxt .btn_sm {
		height: 3.6rem;
	}
}
@media (max-width: 360px) {
	.sh_bunlisugeo {padding: 15px 15px 60px;}
	.sh_bunlisugeo .sh_bunlisugeo_in {padding: 15px;}
	.sh_bunlisugeo .d_radio input + span, 
	.sh_bunlisugeo .d_check input + span {font-size: 13px;}
}

.discharge_info > ul {	
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	gap: var(--gap-size-10);
}
.discharge_info > ul > li {
	padding: 2.0rem 1.5rem;
	border-radius: 1.0rem;
    border: 1px solid var(--hscity-gray-30);
	width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-10)) / var(--columns-3) );
}
.discharge_info .item_bx {
	position: relative;
	text-align: center;
	line-height: 2.4rem;
}
.discharge_info .item_bx > span {
	display: block;
}
.discharge_info .item_bx .dt {
	font-weight: 700;
}
.discharge_info .item_bx .img {
	margin-top: 1.5rem;
}
.discharge_info .item_bx .dd {
	margin-top: 1.0rem;
}
.discharge_info .item_bx .img img {
	max-width: 100px;
}

.discharge_info.type1 > ul > li {
	padding: 2.3rem 3.0rem;
	width: calc( (100% - (var(--columns-2) - 1) * var(--gap-size-10)) / var(--columns-2) );
}
.discharge_info.type1 .item_bx {
	padding-left: 130px;
	text-align: left;
	min-height: 100px;
}
.discharge_info.type1 .item_bx .img {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	width: 100px;
	margin: 0;
	text-align: left;
}
.discharge_info .item_bx .img img {
	width: 100%;
}

@media (max-width: 767px) {
	.discharge_info > ul > li {
		width: calc( (100% - (var(--columns-2) - 1) * var(--gap-size-10)) / var(--columns-2) );
	}
	.discharge_info.type1 .item_bx {
		padding-left: 120px;
	}
	.discharge_info.type1 > ul > li {
		padding: 1.5rem 2.0rem;
		width: calc( (100% - (var(--columns-1) - 1) * var(--gap-size-10)) / var(--columns-1) );
	}
}
@media (max-width: 420px) {
	.discharge_info.mg_t30 {
		margin-top: 20px !important;
	}
}
@media (max-width: 400px) {
	.discharge_info > ul > li {
		width: calc( (100% - (var(--columns-1) - 1) * var(--gap-size-10)) / var(--columns-1) );
	}
}

.bg_can_box {
	min-height: 38.0rem;
    padding: 2.0rem 3.0rem 0;
    border-radius: 1.0rem;
    background-color: #abd9fa;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% auto;
    background-image: url(../../assets/images/sub/img_scom_4.png);
}
.bg_can_box.bg_type1 {background-color:#95d8e8; background-image: url(../../assets/images/sub/img_scom_5.png);}
.bg_can_box .box_w {
	padding: 3.0rem;
	border-radius: 1.5rem;
}
@media (max-width: 600px) {
	.bg_can_box {
		min-height: auto;
    	padding: 1.5rem 2.0rem 0;
	    padding-bottom: 15.0rem;
	}
	.bg_can_box .box_w {
		padding: 1.5rem;
		border-radius: 1.0rem;
	}
}
@media (max-width: 420px) {
	.bg_can_box {
    	padding: 1.5rem 1.5rem 0;
	    padding-bottom: 15.0rem;
	}
}
@media (max-width: 400px) {
	.bg_can_box {
	    padding-bottom: 10.0rem;
	}
}

/* 문장간격 */
.desc_box1 {display: flex; gap: 2.0rem;}
.desc_box1.col {flex-direction: column;}
.desc_box1.row {flex-direction: row;}
.desc_box1.gap10 {gap: 1.0rem;}

.qr_justBx {
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
}
.qr_justBx .qrimg {
	display: inline-block;
}
.qr_justBx .qrimg img {
	width: 98px;
}
.qr_justBx .left {
	display: flex;
    flex-direction: row;
    gap: 3.0rem;
    justify-content: left;
    align-items: center;
}
.qr_justBx .right {
	margin-left: auto;
}
@media (max-width: 767px) {
	.qr_justBx {
		width: 100%;
	    flex-direction: column;
	}
	.qr_justBx .left {
		width: 100%;
    	gap: 1.5rem;
	}
	.qr_justBx .right {
		width: 100%;
	}
	.qr_justBx .right .btn {
		width: 100%;
	}
}
@media (max-width: 500px) {
	.qr_justBx .br {display: none;}
}

/* 투명페트병/캔 보상수거 */
.can_pet_bx {
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-top: 2.5rem;
}
.can_pet_bx > li {
	width: 50%;
	border: 1px solid var(--hscity-gray-30);
	border-radius: 1.8rem;
}
.can_pet_bx > li .dt {
	padding: 20px;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 700;
	border-bottom: 1px solid var(--hscity-gray-30);
}
.can_pet_bx > li .dd {
	padding: 20px;
}
.can_pet_bx > li .dd + .dd {
	padding-top: 0;
}
.can_pet_bx > li .pic {
	margin-top: 25px;
	text-align: center;
}
.can_pet_bx > li dl {
	font-size: 1.6rem;
	line-height: 2.4rem;
}
.can_pet_bx > li dl dt {
	font-weight: 700;
}
.can_pet_bx > li dl dd {
	padding-left: 18px;
	margin-top: 8px;
}
@media (max-width: 767px) {
	.can_pet_bx {
		flex-direction: column;
	}
	.can_pet_bx > li {
		width: 100%;
	}
	.can_pet_bx > li .dt {
		padding: 15px;
		font-size: 1.6rem;
	}
	.can_pet_bx > li .dd {
		padding: 15px;
	}
}
@media (max-width: 420px) {
	.can_pet_bx > li .dt {
		padding: 12px;
		font-size: 1.4rem;
	}
	.can_pet_bx > li .dd {
		padding: 12px;
	}
	.can_pet_bx > li .dd > dl {
		font-size: 1.4rem;
		line-height: 2.2rem;
	}
	.can_pet_bx > li dl dd {
		margin-top: 0;
	}
	.can_pet_bx > li .pic {
		padding: 0 40px;
	}
}

/* 개인정보처리방침 */
.privacy_box {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}
.privacy_box dl {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.privacy_list > div {
	display: flex;
	flex-direction: row;
    border-top: 2px solid #4d4d4f;
}
.privacy_list > div > ul {
	width: 50%;
}
.privacy_list > div > ul > li {
	padding: 10px;
	min-height: 38px;
	border-bottom: 1px solid #e1e3e6;
}

.privacy_box1 > ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-size-20);
}
.privacy_box1 > ul > li {
	overflow: hidden;
	padding-top: 15px;
	text-align: center;
	width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-20)) / var(--columns-3) );
	border-radius: 1.2rem;
	border: 1px solid var(--hscity-gray-30);
}
.privacy_box1 > ul > li > dl {
	position: relative;
	padding-top: 100px;
}
.privacy_box1 > ul > li > dl:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;	
	display: block;
	width: 77px;
	height: 86px;
	margin-left: -38.5px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;	
}
.privacy_box1 > ul > li > dl > dd {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	background-color: #f1f1f1;
}
.privacy_box1 > ul > li > dl.bg1:before {background-image: url('../../assets/images/sub/img_privacy1.png');}
.privacy_box1 > ul > li > dl.bg2:before {background-image: url('../../assets/images/sub/img_privacy2.png');}
.privacy_box1 > ul > li > dl.bg3:before {background-image: url('../../assets/images/sub/img_privacy3.png');}
.privacy_box1 > ul > li > dl.bg4:before {background-image: url('../../assets/images/sub/img_privacy4.png');}
.privacy_box1 > ul > li > dl.bg5:before {background-image: url('../../assets/images/sub/img_privacy5.png');}
.privacy_box1 > ul > li > dl.bg6:before {background-image: url('../../assets/images/sub/img_privacy6.png');}

@media (max-width: 767px) {
	.privacy_list > div {flex-direction: column;}
	.privacy_list > div > ul {width: 100%;}
	.privacy_list > div > ul.li_2 > li:last-child {display: none;}
	.privacy_box1 > ul > li > dl {padding-top: 81px;}
	.privacy_box1 > ul > li > dl:before {width: 60px; height: 67px; margin-left: -30px;}
	.privacy_box1 > ul > li {width: calc( (100% - (var(--columns-2) - 1) * var(--gap-size-20)) / var(--columns-2) );}
}
@media (max-width: 420px) {
	.privacy_box1 > ul > li > dl > dd {
		font-size: 12px;
		height: 38px;
	}
}

/* 개인정보처리방침 - 도형 */
.org_group {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 1000px;
	margin: 0 auto;
}
.org_group .itbx {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
    width: 100%;
    min-height: 62px;
    padding: 10px;
    font-size: 14px;
	border: 1px solid #ccc;
	line-height: 20px;
}
.org_group .itbx:before {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 100%;
	width: 1px;
	height: 21px;
	margin-left: -0.5px;
	background: #ccc;
}
.org_group .fir_box {
	position: relative;
	display: inline-flex;
	justify-content: center;
	padding: 0 20%;
}
.org_group .fir_box .itbx {
    min-height: auto;
	color: #fff;
	background-color: #006ba3;
	font-weight: 700;
}
.org_group .fir_box .itbx:before {
	bottom: auto;
	top: 100%;
}
.org_group .mid_box {
	display: flex;
	justify-content: space-between;
	gap: 20px;	
}
.org_group .mid_box > ul {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
.org_group .mid_box > ul:before {
	content: '';
	position: absolute;
	left: 50%;
	top: -21px;
	width: calc(50% + 32px);
	height: 1px;
	background: #ccc;
}
.org_group .mid_box > ul:last-child:before {
	left: auto;
	right: calc(50% - 1px);
}
.org_group .mid_box > ul > li {
	position: relative;
	display: flex;
	width: 100%;
	justify-content: center;
}
.org_group .mid_box > ul > li:nth-child(1) .itbx {
	background-color: #b9e6e1;
	font-weight: 700;
}
.org_group .mid_box > ul > li.last .itbx {
	background-color: #afd486;
	font-weight: 700;
}
.org_group .mid_box > ul > li:nth-child(3):before {
	content: '';
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1px;
	height: 21px;
	margin-left: -0.5px;
	background: #ccc;
}
.org_group .mid_box > ul > li.row {
	position: relative;
	justify-content: space-between;
	gap: 20px;	
	margin-top: 20px;
}
.org_group .mid_box > ul > li.row .itbx:after {
	content: '';
	position: absolute;
	left: 50%;
	top: -21px;
	width: calc(50% + 32px);
	height: 1px;
	background: #ccc;
}
.org_group .mid_box > ul > li.row .itbx:last-child:after {
	left: auto;
	right: 50%;
}
.org_group .mid_box > ul > li.last {
	justify-content: left;
}
.org_group .mid_box > ul > li.last .itbx {
	width: calc(50% - 32px);
}

@media screen and (max-width: 600px) {
	.org_group {
		padding-right: 20px;
		gap: 20px;
	}
	.org_group .fir_box {
		padding: 0;
	}
	.org_group .fir_box .itbx:before {
		left: auto;
		right: -10px;
		top: 20px;
		width: 10px;
		height: 1px;
	}
	.org_group .mid_box {
		flex-direction: column;
	}
	.org_group .mid_box > ul:before {
		left: auto;
		right: -10px;
		top: -41px;
		bottom: 0;
		width: 1px;
		height: auto;
		background: #ccc;
	}
	.org_group .mid_box > ul:last-child:before {
		left: auto;
		right: -10px;
		bottom: auto;
		top: -78px;
		height: 100px;
		background: #ccc;
	}
	.org_group .mid_box > ul > li:nth-child(1) .itbx:before {
		left: auto;
		right: -10px;
		top: 20px;
		width: 10px;
		height: 1px;
	}
}

.bg_rd_box {
	overflow: hidden;
	padding: 2.0rem 3.0rem;
	background-color: #ddeaff;
	border-radius: 1.0rem;
}
.bg_rd_box .box_w {
	border-radius: 1.0rem;
}
.bg_rd_box.bg1 {
	padding-left: 315px;
	background-color: #ddeaff;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% auto;
	background-image: url('../../assets/images/sub/img_sub5_02.png');
}
.bg_rd_box.bg2 {
	padding-left: 315px;
	background-color: #ffefdd;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 100% auto;
	background-image: url('../../assets/images/sub/img_sub5_03.png');
}
@media screen and (max-width: 767px) {
	.bg_rd_box.bg1 {
		padding-left: 3.0rem;
		padding-bottom: 12.0rem;
	}
	.bg_rd_box.bg2 {
		padding-left: 3.0rem;
		padding-bottom: 12.0rem;
	}
}

/****************************************************************************** 우리동네 수거정보 : 시작 */
.wrap_map #container {
	height: calc(100vh - 157px);
	font-size: 15px;
	line-height: 24px;
}
.wrap_map #container .inner {
	position: relative;
	height: 100%;
}
.wrap_map #container .contents {
    position: relative;
    width: 100%;
	height: calc(100vh - 157px - 140px);
}
.wrap_map #container select {
	height: 44px;
	font-size: 16px;
}
.wrap_map #container .tab_area .ui_tab {
	margin-bottom: 0;
}
.wrap_map #container .s_title03 {
	font-size: 24px;
}
.wrap_map #container .map_title {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.wrap_map #container .map_title > h4 {
	position: relative; 
	display: inline-block; 
	font-size: 17px;
	font-weight: 700;
	padding-left: 20px;
	color: #231f20;
}
.wrap_map #container .map_title > h4:before {
	content: ''; 
	position: absolute; 
	left: 0; 
	top: 6px; 
	display: block; 
	width: 11px; 
	height: 11px; 
	border-radius: 50%; 
	background-color: #0055a6;
}
.wrap_map #container .map_title > .right {
	margin-left: auto;
}
.wrap_map #container .map_title > .map_stit {
	display: inline-block;
	padding: 8px 12px; 
	font-size: 15px;
	font-weight: 700;
	margin-left: 20px;
	color: #231f20;
	background-color: #f5f5f5;
	border-radius: 6px;
}
@media (max-width: 600px) {
	.wrap_map #container .map_title > .map_stit {
		margin-left: 0;
	}
}

.wrap_map #container .title_map {
	height: 140px;
	padding: 55px 0 0;
	background-color: #fff;
}
.wrap_map #container .map_imgbx {
    position: relative;
    width: 100%;
	height: 100%;
}

/* 핀 */
.wrap_map .pin_info_wrap {
	position: absolute;
}
.wrap_map .pin_info_box {
	position: absolute;
	left: 50%;
	top: 5px;
	transform: translate(-50%, -100%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	font-size: 15px;
	border: 1px solid #bdbec1;
	background-color: #fff;
	border-radius: 8px;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
}
.wrap_map .pin_info_box .pin_btn_close {
	position: absolute;
	right: 8px;
	top: 8px;
	display: block;
	width: 22px;
	height: 22px;
	background-color: transparent;	
    background-size: 11px auto;
    background-repeat: no-repeat;
    background-position: center center;	
    background-image: url('../../assets/images/map/btn_pin_close.png');
}
.wrap_map .pin_info_box .icon_mark {
	text-align: center;
}
.wrap_map .pin_info_box .pin_label > span {
	display: inline-block;
	padding: 0 12px;
	font-size: 13px;
	color: #fff;
	background-color: #00966d;
	border-radius: 21px;
}
.wrap_map .pin_info_box .pin_label > span.j_1 {background-color: #a9cd4b;}
.wrap_map .pin_info_box .pin_label > span.j_2 {background-color: #00af9d;}
.wrap_map .pin_info_box .pin_label > span.j_3 {background-color: #0078d9;}
.wrap_map .pin_info_box .pin_label > span.j_4 {background-color: #f28f2f;}
.wrap_map .pin_info_box .pin_label > span.j_5 {background-color: #e4b52f;}
.wrap_map .pin_info_box .pin_label > span.j_6 {background-color: #e85385;}
.wrap_map .pin_info_box .pin_label > span.j_7 {background-color: #b28c52;}
.wrap_map .pin_info_box .pin_label > span.j_8 {background-color: #00a4e2;}
.wrap_map .pin_info_box .pin_num {
	text-align: center;
}
.wrap_map .pin_info_box .pin_num > span {
	display: inline-block;
	font-weight: bold;
	text-decoration: underline;
	font-size: 20px;
	color: #231f20;
	font-family: 'Pretendard';
}
.wrap_map .pin_info_box .pin_num > span.no_line {
	text-decoration: none;
	font-size: 17px;
}
.wrap_map .pin_info_box .pin_txt > b {
	display: block;
	color: #231f20;
	font-size: 17px;
	margin-bottom: 4px;
	font-family: 'Pretendard';
}
.wrap_map .pin_info_box .pin_txt > span {
	display: block;
}
.wrap_map .pin_info_box .pin_txt > span > em {
	font-weight: bold;
	font-family: 'Pretendard';
	font-size: 17px;
}

@media (max-width: 1260px) {
	.wrap_map #container .inner {width: 100%;}
}
@media (max-width: 1200px) {
	.wrap_map #container {height: 100vh;}
	.wrap_map #container .s_title03 {font-size: 20px;}

	.wrap_map #container .title_map {height: 85px; padding-top: 20px;}
	.wrap_map #container .title_map .s_title01 {font-size: 22px;}
	.wrap_map #container .contents {height: calc(100vh - 71px - 85px);}
}
@media (max-width: 999px) {
	.wrap_map #container {
		height: 100vh;
		padding-top: 200px;
		font-size: 13px;
		line-height: 22px;
	}
	.wrap_map #container select {
		height: 36px;
		font-size: 13px;
	}
	.wrap_map #container .s_title03 {font-size: 16px;}

	.wrap_map #container .map_title {
		margin-bottom: 12px;
	}
	.wrap_map #container .map_title > h4 {
		padding-left: 16px;
		font-size: 15px;
	}
	.wrap_map #container .map_title > h4:before { 
		top: 6px;  
		width: 8px; 
		height: 8px;
	}
	.wrap_map #container .title_map {
		position: fixed;
		left: 0;
		top: 71px;
		z-index: 5;
		width: 100%;
		height: 55px;
		padding-top: 15px;
		padding-left: 12px;
	}
	.wrap_map #container .title_map .s_title01 {font-size: 18px;}
	.wrap_map #container .contents {height: calc(100vh - 71px - 129px);}
	.wrap_map #container .tab_area .ui_tab > li .btn_tab {
		font-size: 16px;
		height: 38px;
	}

}
@media (max-width: 600px) {
	.wrap_map #container .map_title {
		gap: 8px;
		flex-direction: column;
		align-items: normal;
	}
	.wrap_map #container .map_title .right {
		margin-left: inherit;
	}
}
@media (max-width: 420px) {
	.wrap_map #container .tab_area .ui_tab > li .btn_tab {
		font-size: 15px;
	}
}

.map_gnb {
	position: absolute;
	left: 0;
	top: 120px;
	z-index: 10;
	width: 100%;
	height: auto;
	padding: 20px 36px 0;
	padding-bottom: 38px;
	display: flex;
	flex-direction: column;	
	gap: 20px;
	background-color: #fff;
	border-radius: 20px;
	border: 1px solid #4d4d4f;
	box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
	transition: all .4s;
	/*
	overflow-y: auto;
	flex-direction: column-reverse;	
	*/
}
.map_gnb.on {
	max-height: 90%;
}
.map_gnb.on .map_gnb_inner {
	display: block;
}
.map_gnb .map_gnb_btn {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 6;
	width: 100%;
	text-align: center;
	border-radius: 20px;
	background-color: #fff;
}
.map_gnb .map_gnb_btn .btn_map_onoff {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 15px;
	border: 0;
}
.map_gnb .map_gnb_btn .btn_map_onoff > em {
	position: relative;
	display: inline-block;
	padding-right: 28px;
}
.map_gnb .map_gnb_btn .btn_map_onoff > em:before {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 16px;
	height: 10px;
	margin-top: -5px;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('../../assets/images/icon/icon_map_dw.svg');
	transform: rotate(0deg);
	transition: all .3s;
}
.map_gnb.on .map_gnb_btn .btn_map_onoff > em:before {transform: rotate(-180deg);}

.map_gnb_wrap {
	position: relative;
	display: flex;
	gap: 20px;
    flex-direction: column;
	max-height: 100%;
    overflow-y: auto;
    margin-right: -36px;
    padding-right: 36px;
}

.map_gnb_wrap .map_gnb_inner {
	position: relative;
	display: flex;
	gap: 20px;
    flex-direction: column;
	display: none;
	width: 100%;
	/*
    overflow-y: auto;
    max-height: 450px;
    */
}


/* 시설물 */
.map_gnb.taype_tab .map_gnb_wrap {
	overflow: hidden;
	max-height: none;
    margin-right: 0;
    padding-right: 0;
}
.map_gnb.taype_tab .map_gnb_wrap .map_gnb_inner {
	display: block;
}
.map_gnb.taype_tab .map_gnb_wrap .tab_conts_wrap {
	position: relative;
	height: 45px;
}
.map_gnb.taype_tab.on .map_gnb_wrap .tab_conts_wrap {
	height: 100%;
	max-height: 450px;
	overflow-y: auto;
}

@media (max-width: 1200px) {
	.map_gnb {
		top: 65px;
		padding: 20px;
		padding-bottom: 38px;
	}
	.map_gnb.taype_tab.on .map_gnb_wrap .tab_conts_wrap {
		max-height: 100%;
	}
}
@media (max-width: 999px) {
	.map_gnb {
		position: fixed;
		left: 0;
		top: 120px;
		width: 100%;
		padding: 12px;
		padding-bottom: 38px;
		border-radius: 10px;
	}
	.map_gnb.on {
		max-height: 100%;
		bottom: 0;
	}
	.map_gnb_wrap {
		overflow: hidden;
		position: relative;
		gap: 12px;
		height: 100%;
	}
	.map_gnb_wrap .map_gnb_inner {
    	overflow-y: auto;
		max-height: 100%;
		/*
		gap: 12px;
		max-height: 380px;
    	max-height: calc(100vh - 300px);
	    overflow-y: auto;
	    */
	}
}
@media (max-width: 600px) {
	.map_gnb.taype_tab .map_gnb_wrap .tab_conts_wrap {
		height: 68px;
	}
}

.f_boxline {
	position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
	width: 100%;
	padding: 5px 12px;
	min-height: 44px;
	color: #4d4d4f;
	background-color: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
}
.f_boxline input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
.f_boxline > span {
	font-size: 15px;
}
.f_boxline:has(input:checked) {background-color: #0055a6; color: #fff; border-color: #0055a6;}
.f_boxline:has(input:disabled) {background-color: #f1f1f1; color: #666; cursor: default;}
.f_boxline:has(input:disabled:checked) {background-color: #0055a6; color: #fff; opacity: 0.7;}
.f_boxline.type1 {
	padding: 5px 20px;
    justify-content: space-between;
}
.f_boxline.type2 {
    flex-direction: column;
    height: 118px;
}
@media (max-width: 999px) {
	.f_boxline {
		min-height: 36px;
		padding: 5px 12px;
		border-radius: 8px;
	}
	.f_boxline.type1 {
		padding: 5px 12px;
	}
	.f_boxline.type2 {
		height: 100px;
	}
}

.list_car_number {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-size-10);
}
.list_car_number > li {
	display: flex;
	width: 142px;
	text-align: center;
	justify-content: center;
	transition: all .4s;
}
.list_car_number > li b {font-family: 'Pretendard'; font-size: 16px;}
.list_car_number.ty1 {flex-direction: column;}
.list_car_number.ty2 > li {width: calc( (100% - (var(--columns-2) - 1) * var(--gap-size-10)) / var(--columns-2) );}
.list_car_number.ty3 > li {width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-10)) / var(--columns-3) );}
.list_car_number.ty4 > li {width: calc( (100% - (var(--columns-4) - 1) * var(--gap-size-10)) / var(--columns-4) );}
.list_car_number.ty5 > li {width: calc( (100% - (var(--columns-5) - 1) * var(--gap-size-10)) / var(--columns-5) );}
.list_car_number.ty6 > li {width: calc( (100% - (var(--columns-6) - 1) * var(--gap-size-10)) / var(--columns-6) );}
.list_car_number.ty8 > li {width: calc( (100% - (var(--columns-8) - 1) * var(--gap-size-10)) / var(--columns-8) );}

@media screen and (max-width: 1100px) {
	.list_car_number.ty4 > li {width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-10)) / var(--columns-3) );}
	.list_car_number.ty6 > li {width: calc( (100% - (var(--columns-5) - 1) * var(--gap-size-10)) / var(--columns-5) );}
}
@media screen and (max-width: 999px) {
	.list_car_number {gap: var(--gap-size-8);}
	.list_car_number.ty4 > li {width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-8)) / var(--columns-3) );}
	.list_car_number.ty6 > li {width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-8)) / var(--columns-3) );}
	.list_car_number.ty8 > li {width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-8)) / var(--columns-3) );}
}

.btn_car_viewbx {
	display: flex;
	gap: 16px;
}
.btn_car_viewbx > li {
	width: calc(100% - 8px);
}
.btn_car_viewbx > li .map_btn1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	color: #fff;
	text-align: center;
	border: 1px solid #4d4d4f;
	background-color: #4d4d4f;
	border-radius: 10px;
}
.btn_car_viewbx > li .map_btn1 > span {
	position: relative;
	display: inline-block;
	padding-left: 32px;
}
.btn_car_viewbx > li .map_btn1 > span:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 24px;
	height: 24px;
	transform: translateY(-50%);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
}
.btn_car_viewbx > li .map_btn1 > span.icon_real_time:before {background-image: url('../../assets/images/icon/icon_real_time.png');}
.btn_car_viewbx > li .map_btn1 > span.icon_run:before {background-image: url('../../assets/images/icon/icon_run.png');}
.btn_car_viewbx > li .map_btn1 > span.icon_route:before {background-image: url('../../assets/images/icon/icon_route.png');}
.btn_car_viewbx > li .map_btn1:disabled {border-color: #999; background-color: #999; cursor: default;}
.btn_car_viewbx > li:only-child {
	width: calc(50% - 8px);
}

@media screen and (max-width: 999px) {
	.btn_car_viewbx {
		gap: 8px;
		margin-top: 20px;
	}
	.btn_car_viewbx > li {
		width: calc(100% - 4px);
	}
	.btn_car_viewbx > li .map_btn1 {
		height: 36px;
		border-radius: 8px;
	}
	.btn_car_viewbx > li .map_btn1 > span {
		padding-left: 26px;
	}
	.btn_car_viewbx > li .map_btn1 > span:before {
		width: 18px;
		height: 18px;
	}
	.btn_car_viewbx > li:only-child {
		width: calc(50% - 4px);
	}
}


/* 동선택 */
.map_city {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20px;
	border-bottom: 1px solid #d8d8d8;
}
.map_city > .left {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-direction: row;
}
.map_city > .left > .txt_label {
	display: inline-block;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 700;
    color: #231f20;
    background-color: #f5f5f5;
    border-radius: 6px;
}
.map_city > .left > .txt_label > span {
	position: relative;
	display: inline-block;
	padding-left: 25px;
}
.map_city > .left > .txt_label > span:before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
}
.map_city > .left > .txt_label > span.icon_real_time:before {background-image: url('../../assets/images/icon/icon_real_time2.png');}
.map_city > .left > .txt_label > span.icon_run:before {background-image: url('../../assets/images/icon/icon_run2.png');}

.map_city .right {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

@media (max-width: 999px) {
	.map_city {
    	flex-direction: column;
		align-items: normal;
		padding-bottom: 12px;
	}
	.map_city .right {
		margin-left: initial;
	}
	.map_city.type_between {
		align-items: center;
    	flex-direction: row;
		justify-content: space-between;
	}
	.map_city.type_between .right {
		margin-left: auto;
	}
}
@media (max-width: 600px) {
	.map_city > .left {
		flex-direction: column;
		align-items: normal;
	}
	.map_city > .left > .txt_label {
	    font-size: 15px;
	}
}

/* 읍 선택버튼 */
.map_town {
	display: flex;
	gap: 26px;
	justify-content: space-between;
}
.map_town > li {
	width: calc( 50% - 13px);
}
.map_town > li .item_bx {
	position: relative;
	display: flex;
	gap: 5px;
    flex-direction: column;
    padding: 25px 40px;
    padding-right: 90px;
    /*
    font-size: 15px;
    line-height: 24px;
    */
    border-radius: 8px;
    background-color: #f5f5f5;
}
.map_town > li .item_bx:before {
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	width: 10px;
	height: 18px;flex-grow: 1;
	margin-top: -9px;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #f5f5f5;
	background-image: url('../../assets/images/icon/icon_aw_g_r.png');
}
.map_town > li .item_bx:hover {
	background-color: #eaf0ff; color: #0055a6;
}
.map_town > li .item_bx:hover:before {
	background-image: url('../../assets/images/icon/icon_aw_b_r.png');
}
.map_town > li > a > b {
	display: block;
	font-weight: 700;
}

@media (max-width: 1023px) {
	.map_town {
		gap: 20px;
    	flex-direction: column;
		justify-content: normal;
	}
	.map_town > li {width: 100%;}
}

.list_city {
	display: flex;
    flex-direction: column;
	gap: 4px;
}
.list_city .f_boxline {
	justify-content: left;
}

.map_gnb_area {
    display: flex;
    flex-direction: row;
    gap: 60px;
    /*
	font-size: 15px;
    line-height: 24px;
    justify-content: space-between;
    */
}
.map_gnb_area .map_stit {font-weight: 700;}
.map_gnb_area .map_stit.line_h_44 {line-height: 44px;}
.map_gnb_area .left {
    display: flex;
    flex-direction: column;
    gap: 4px;
	width: 340px;
}
.map_gnb_area .left.on_scroll {
	overflow-y: auto;
	height: 190px;
}
.map_gnb_area .left > div {
	padding: 20px 30px;
	border-radius: 8px;
	background-color: #f5f5f5;
}
.map_gnb_area .left > div:last-child {padding-top: 12px;}
.map_gnb_area .right {
	display: flex;
    flex-direction: column;
    gap: 20px;
	width: calc(100% - 340px - 60px);
	justify-content: space-between;
	padding-bottom: 20px;
}
.map_gnb_area .right.type_pin {
	justify-content: normal;
    gap: 10px;
    padding-bottom: 50px;
}
.map_gnb_area .right.type_normal {
	justify-content: normal;
    gap: 20px;
}
.map_gnb_area .right .right_in {
	display: flex;
    flex-direction: column;
    gap: 20px;
}
.map_gnb_area .left div.map_s_company {padding-top: 10px; padding-bottom: 10px;}

.map_gnb_area2 {
	padding: 30px;
	border-radius: 10px;
	background-color: #f5f5f5;
}

@media screen and (max-width: 1100px) {
	.map_gnb_area {
	    gap: 20px;
	}
	.map_gnb_area .right {
	    width: calc(100% - 340px - 20px);
	}
}
@media screen and (max-width: 999px) {
	.map_gnb_area {
		flex-direction: column;
		gap: 12px;
		padding-bottom: 50px;
	}
	.map_gnb_area .left {
	    width: 100%;
	}
	.map_gnb_area .left.on_scroll {
		overflow-y: initial;
		height: auto;
	}
	.map_gnb_area .left > div {
		padding: 12px;
		border-radius: 6px;
	}
	.map_gnb_area .right {
		display: block;
		flex: none;
		justify-content: flex-start;
		width: 100%;
		padding-bottom: 10px;
	}
	.map_gnb_area .right .right_in {
		gap: 12px;
	}
	.map_gnb_area .right.type_pin {
		display: flex;
	    gap: 10px;
	}
	.map_gnb_area2 {
		padding: 12px;
    	margin-bottom: 50px;
	}
	.map_gnb_area2 .list_car_number.ty8 > li {width: calc( (100% - (var(--columns-4) - 1) * var(--gap-size-8)) / var(--columns-4) );}
}
@media screen and (max-width: 500px) {
	.map_gnb_area2 .list_car_number.ty8 > li {width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-8)) / var(--columns-3) );}
}

.map_s_cntbox {
	display: flex;
	flex-direction: column;	
	gap: 10px;
}
.map_s_cntbox .map_scroll_1 {
	overflow-y: auto;
	max-height: 180px;
}
.map_s_cntbox.type_j {
	flex-direction: row;
}
.map_s_cntbox.type_j .map_stit {width: 100px;}
.map_s_cntbox.type_j .txt_box {width: calc(100% - 100px - 10px);}

@media screen and (max-width: 999px) {
	.map_s_cntbox {gap: 8px;}
	.map_s_cntbox.type_j {flex-direction: column;}
	.map_s_cntbox.type_j .map_stit {width: 100%;}
	.map_s_cntbox.type_j .map_stit.line_h_44 {line-height: normal;}
	.map_s_cntbox.type_j .txt_box {width: 100%;}
	.map_s_cntbox.type_j .map_scroll_1 {max-height: none; overflow-y: initial;}
}


.sort_garbage {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-size-44);
	row-gap: 12px;
}
.sort_garbage > li {
	text-align: center;
	width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-44)) / var(--columns-3) );
}
.sort_garbage > li > button {
	display: inline-block;
	width: 65px;
}
.sort_garbage > li > button > span {
	position: relative;
	display: block;
	padding-top: 70px;
	margin: 0 -5px;
}
.sort_garbage > li > button > span:before {
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	display: block;
	width: 65px;
	height: 65px;
	margin-left: -32.5px;
	border-radius: 10px;
	background-color: #d8d8d8;
	background-size: 26px auto;
	background-repeat: no-repeat;
	background-position: center center;	
}
.sort_garbage > li > button.on > span:before {background-color: #0055a6;}
.sort_garbage > li > button > span.i_1:before {background-image: url('../../assets/images/sub/car_icon_01.png');}
.sort_garbage > li > button > span.i_2:before {background-image: url('../../assets/images/sub/car_icon_02.png');}
.sort_garbage > li > button > span.i_3:before {background-image: url('../../assets/images/sub/car_icon_03.png');}
.sort_garbage > li > button > span.i_4:before {background-image: url('../../assets/images/sub/car_icon_04.png');}
.sort_garbage > li > button > span.i_5:before {background-image: url('../../assets/images/sub/car_icon_05.png');}
.sort_garbage > li > button > span.i_6:before {background-image: url('../../assets/images/sub/car_icon_06.png');}

.sort_garbage.type_j > li > button > span {margin: 0 -10px; letter-spacing: -1px; line-height: 17px;}
.sort_garbage.type_j > li > button > span:before {background-size: 44px auto;}
.sort_garbage.type_j > li > button > span.j_1:before {background-image: url('../../assets/images/sub/map_icon_01.png');}
.sort_garbage.type_j > li > button > span.j_2:before {background-image: url('../../assets/images/sub/map_icon_02.png');}
.sort_garbage.type_j > li > button > span.j_3:before {background-image: url('../../assets/images/sub/map_icon_03.png');}
.sort_garbage.type_j > li > button > span.j_4:before {background-image: url('../../assets/images/sub/map_icon_04.png');}
.sort_garbage.type_j > li > button > span.j_5:before {background-image: url('../../assets/images/sub/map_icon_05.png');}
.sort_garbage.type_j > li > button > span.j_6:before {background-image: url('../../assets/images/sub/map_icon_06.png');}
.sort_garbage.type_j > li > button > span.j_7:before {background-image: url('../../assets/images/sub/map_icon_07.png');}
.sort_garbage.type_j > li > button > span.j_8:before {background-image: url('../../assets/images/sub/map_icon_08.png');}
.sort_garbage.type_j > li > button.on > span.j_1:before {background-color: #a9cd4b;}
.sort_garbage.type_j > li > button.on > span.j_2:before {background-color: #00af9d;}
.sort_garbage.type_j > li > button.on > span.j_3:before {background-color: #0078d9;}
.sort_garbage.type_j > li > button.on > span.j_4:before {background-color: #f28f2f;}
.sort_garbage.type_j > li > button.on > span.j_5:before {background-color: #e4b52f;}
.sort_garbage.type_j > li > button.on > span.j_6:before {background-color: #e85385;}
.sort_garbage.type_j > li > button.on > span.j_7:before {background-color: #b28c52;}
.sort_garbage.type_j > li > button.on > span.j_8:before {background-color: #00a4e2;}

@media screen and (max-width: 999px) {
	.sort_garbage {
		gap: var(--gap-size-20);
		row-gap: 12px;
	}
	.sort_garbage > li {
		width: calc( (100% - (var(--columns-3) - 1) * var(--gap-size-20)) / var(--columns-3) );
	}
	.sort_garbage > li > button > span {
		padding-top: 65px;
	}
	.sort_garbage > li > button > span:before {
		width: 60px;
		height: 60px;
		margin-left: -30px;
		border-radius: 8px;
		background-size: 26px auto;
	}
}

/* 요일검색 */
.sort_week {
	overflow: hidden;
	display: flex;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
}
.sort_week > li {flex: 1;}
.sort_week > li button {
	width: 100%;
	line-height: 44px;
	color: var(--body-color-1);
	background-color: var(--hscity-white);
}
.sort_week > li + li button {border-left: 1px solid #d8d8d8;}
.sort_week > li button.on,
.sort_week > li button.active {color: #fff; background-color: #0055a6;}

@media screen and (max-width: 999px) {
	.sort_week > li button {
		line-height: 36px;
	}
}

/* 동서남 버튼 */
.sort_garbage2 {
	display: flex;
	gap: 10px;
}
.sort_garbage2 > li > button {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border-radius: 8px;
	background-color: #fff;
	border: 1px solid #d8d8d8;
}
.sort_garbage2 > li > button.on {
	background-color: #4d4d4f;
	border: 1px solid #4d4d4f;
}
.sort_garbage2 > li > button.on > span {
	color: #fff;
}
@media screen and (max-width: 999px) {
	.sort_garbage2 {
		gap: 8px;
	}
	.sort_garbage2 > li > button {
		height: 36px;
	}
}

/* 노면정보팝업 */
#layerMapBox .layer_header {
	height: 65px;
	padding-bottom: 0;
	flex-direction: column;	
	gap: 8px;
}
#layerMapBox .layerMapTit {
	padding-left: 30px;
	margin-bottom: 10px;
	font-size: 15px;
}
#layerMapBox .layerMapImg {
	overflow-x: auto;
}
#layerMapBox .layerMapImg img {
	max-width: 100%;
}
@media screen and (max-width: 1023px) {
	#layerMapBox .layer_header h4 {
		height: 56px;
		font-size: 20px;
		padding-left: 26px;
	}
	#layerMapBox .layer_header > h4:before {
		width: 18px;
		height: 18px;
		border: 5px solid var(--point-color-2);
	}
	#layerMapBox .layerMapTit {
		padding-left: 26px;
		font-size: 14px;
	}
	#layerMapBox .layerMapImg img {
		max-width: none;
		width: 1024px;
	}
}
/****************************************************************************** 우리동네 수거정보 : 끝 */