@charset "utf-8";

@media(max-width:1750px){
	
	.subMap .mapType{
		left:auto;
		right:.8rem;
		bottom:auto;
		top:calc(50% - 100px + 125px + 1rem);
		width:40px;
		height:106px;
		flex-direction:column;
	}
	.subMap .mapType a{
		width:34px;
		height:50px;
		line-height:17px;
		padding:0 7px;
	}
	.subMap .mapControl{
		flex-direction:column;
		right:.8rem;
		top:calc(50% - 100px);
		bottom:auto;
	}
	.subMap .mapLocation{
		margin:0 0 5px;
	}
	.subMap .mapZoom{
		flex-direction:column;
		width:40px;
		height:80px;
	}
	.subMap .mapZoomIn{
		border-radius:5px 5px 0 0;
	}
	.subMap .mapZoomOut{
		border-radius:0 0 5px 5px;
		border-left:1px solid #ccc !important;
		border-top:0 !important;
	}
	.subMap .legendBox{
		right:.8rem;
		top:calc(1.6rem + 50px);
	}
	
}

@media(max-width:1650px){
	
	.subMap{
		overflow:hidden;
	}
	.topInfo li{
		width:230px;
	}
	.topNav{
		width:calc(100% - 30rem);
	}
	/* .depth2 a{
		padding-left:1rem;
	} */
	
}

@media(max-width:1500px){
	
	.depth2 a{
		padding-left:1rem;
	}
	
}

@media(max-width:1450px){
	
	.topBtn{
		z-index:99;
	}
	.topNav{
		width:calc(100% - 20rem);
	}
	.topInfo{
		position:fixed;
		right:-100%;
		transition:all .3s;
	}
	.topInfo.active{
		right:calc(100% - 530px);
		z-index:1;
	}
	.topInfo li{
		width:300px;
	}
	.totalBody ul{
		gap:5rem;
	}
	.mapControl{
		bottom:80px;
	}
	.mapType{
		right:auto;
		top:auto;
		left:20px;
		bottom:80px;
	}
	.newsArea{
		width:calc(100% - 60px);
		left:0;
		margin:0 30px;
	}
	.newsLeft{
		width:calc(100% - 502px - 20px);
	}
	.section03{
		padding:60px 0;
	}
	.bnnrArea{
		width:calc(100% - 100px);
		gap:1.5rem;
	}
	.bnnr01{
		width:calc(100% - 340px - 330px - 3rem);
	}
	.bnnrArea > div{
		height:290px;
		padding:30px;
	}
	.bnnr01txt{
		padding-left:20px;
	}
	.baroInn{
		width:100%;
	}
	.footInn{
		width:calc(100% - 100px);
	}
	.sub_location > ul{
		width:100%;
	}
	.ctntInner{
		width:100%;
		max-width:none;
	}
	.sub_title{
		padding-left:50px;
	}
	.tblBox,
	.subTabHeader,
	.veiwList_btm,
	.board_list_detail{
		width:calc(100% - 100px);
		margin:0 auto;
	}
	.subTabHeader{
		width:calc(100% - 100px);
		margin:0 auto;
	}
	.subInfoBox{
		padding-left:50px;
	}
	.chartBox h4{
		padding-left:30px;
	}
	.chart-pie{
		padding:0 30px;
	}
	.graphBox{
		padding:0 30px;
	}
	.subInfoBox img{
		max-width:100%;
		padding-right:30px;
	}
	.allBnrBody li{
		width:calc(33.3% - .65rem);
	}
	
}

@media(max-width:1360px){
	
	.bnnr01Top h3,.bnnr02 h3{
		letter-spacing:-0.05rem;
	}
	
}

@media(max-width:1350px){
	
	.bnnrArea{
		gap:1.5rem;
	}
	.bnnr01{
		width:calc(100% - 280px - 250px - 3rem);
	}
	.bnnr02{
		width:280px;
	}
	.bnnr03{
		width:250px;
	}
	.bnnr02Cont a{
		text-indent:12px;
	}
	
}

@media(max-width:1200px){
	
	.tbl colgroup,.tbl thead,.topNav{
		display:none;
	}
	.container{
		margin-top:60px;
	}
	.gnbArea{
		padding:0 1.3rem;
	}
	h1 a{
		padding-top:20px;
		font-size:1.2rem;
		text-indent:115px;
		background-position-y:18px;
	}
	.topLeft,.topRight{
		height:60px;
		padding:0;
	}
	.totalMenu{
		font-size:0px;
		color:transparent;
	}
	.totalMenu span{
		height:19px;
		margin:0;
	}
	.totalMenu span i{
		height:3px;
		border-radius:3px;
		transition:all .3s;
	}
	.totalMenu span.active{
		position:relative;
		justify-content:center;
	}
	.totalMenu span.active i{
		position:absolute;
	}
	.totalMenu span.active i:nth-child(1){
		transform:rotate(45deg);
	}
	.totalMenu span.active i:nth-child(3){
		transform:rotate(-45deg);
	}
	.totalMenu span.active i:nth-child(2){
		display:none;
	}
	.totalBox{
		top:145px;
		height:calc(100% - 60px - 85px);
	}
	.totalTop{
		display:none;
	}
	.totalBody{
		padding:30px;
		height:100%;
		overflow-y:auto;
	}
	.totalBody ul{
		flex-direction:column;
		gap:2rem;
	}
	.totalBody li > a{
		font-size:1.3rem;
	}
	.totalBody li div a{
		font-size:1rem;
	}
	.topInfo{
		display:block;
		position:fixed;
		right:-100%;
		top:60px;
		width:100%;
		height:85px;
		padding:0 10px;
		background:#fff;
		border-bottom:3px solid var(--blu);
		z-index:1;
		transition:all .3s;
	}
	.topInfo.active{
		right:0;
	}
	.topInfo li{
		width:100%;
	}

	.baroInn{
		flex-direction:column;
	}
	.boroBtn{
		border-left:none;
		border-bottom:1px solid #666a74;
	}
	.footInn{
		width:100%;
	}
	.footTop{
		flex-direction:column;
		padding:2rem 1.2rem .5rem;
	}
	address{
		padding:1rem 0 2rem;
	}
	.footBtm{
		padding:0 1.2rem;
	}
	.footCall{
		flex-direction:column;
	}
	.footCall div{
		padding:0 0 1rem;
	}
	.footCall span{
		text-align:left;
	}
	.mapArea{
		overflow:hidden;
	}
	.subMap{
		height:calc(100vh - 120px);
	}
	.mapList{
		width:100vh;
	}
	.panelList{
		height:calc(100vh - 80px - 45px - 2rem - 45px - 122px);
	}
	.bnnrArea{
		flex-wrap:wrap;
	}
	.bnnr01{
		width:100%;
	}
	.bnnr02,.bnnr03{
		width:calc(50% - .75rem);
	}
	.bnnr01Top h3{
		letter-spacing:-0.05rem;
	}
	.bnnr02Cont a{
		text-indent:25px;
	}
	.allBnrBody li{
		width:calc(50% - .5rem);
	}
	
	.section02{
		height:1050px;
	}
	.newsArea{
		flex-direction:column;
		gap:3rem;
	}
	.newsLeft{
		width:100%;
	}
	.newsRight{
		width:100%;
	}
	.newsRightContsBox{
		height:500px;
	}
	.newsRightContsBox li{
		flex:0 0 50%;
	}
	
	.appQRArea{
		display:block;
		height:auto;
		padding:3rem 1.2rem;
	}
	.appQR{
		display:none;
	}
	.appTxt{
		padding:0;
	}
	.appTxt h3{
		padding:.8rem 0 1.5rem .5rem;
	}
	.appTxt p{
		font-size:1.2rem;
		line-height:1.8rem;
		padding:0 .5rem 2rem;
		word-break:auto-phrase;
	}
	.appDown a{
		width:100%;
		margin-right:10px;
	}
	.appDown a.appApple{
		margin-right:0;
	}
	.appGoogle{
		background-size:10rem;
	}
	.appApple{
		background-size:8rem;
	}
	
	.form50{
		padding:0 2rem 0 0;
	}
	.subInfoBox{
		padding-right:50px;
	}
	.gallery li{
		width:calc(50% - 20px);
	}
	.tbl td:not(.emccBox .tbl td){
		display:block;
		width:100%;
		min-height:30px;
		padding:0 15px 10px 80px;
		line-height:20px;
		font-size:.95rem;
		letter-spacing:-0.03rem;
		text-align:left;
		word-break:break-word;
		border:none;
		position:relative;
	}
	.tbl td.txtL{
		padding-left:80px;
	}
	.tbl td:before{
		content:attr(data-before);
		display:block;
		width:60px;
		font-weight:600;
		position:absolute;
		left:15px;
	}
	.tbl td:first-child:not(.emccBox .tbl td:first-child){
		border-top:1px solid var(--line);
		padding-top:1.2rem;
	}
	.tbl td:last-child:not(.emccBox .tbl td:last-child){
		padding-bottom:1.2rem;
	}
	.tbl tr:last-child td:last-child:not(.emccBox .tbl tr:last-child td:last-child){
		border-bottom:1px solid var(--line);
	}
	.tbl tr:first-child td:first-child:not(.emccBox .tbl tr:first-child td:first-child){
		border-top:2px solid #666a74;
	}
	.tbl.chem_list td:not(.emccBox .tbl td){
		padding-left:130px;
	}
	.tbl.chem_list td:before{
		width:110px;
	}
	.tbl.Shelter td:not(.emccBox .tbl td){
		padding-left:110px;
	}
	.tbl.Shelter td:before{
		width:90px;
	}
	.tbl td.tblnodata{
		padding:1.2rem !important;
		text-align:center !important;
	}
	.tbl td .ellipsis{
		white-space:normal;
	}
	.tbl td .ellipsis.w500{
		width:auto !important;
	}
	
	.emccBox{
		overflow-x:auto;
	}
	.emccBox .tbl colgroup{
		display:table-column-group;
	}
	/* .emccBox .tbl colgroup col:nth-child(1){
		width:130px;
	}
	.emccBox .tbl colgroup col:nth-child(2){
		width:200px;
	}
	.emccBox .tbl colgroup col:nth-child(3){
		width:300px;
	} */
	.emccBox .tbl thead{
		display:table-header-group;
	}
	.emccBox .tbl tbody th{
		line-height:20px;
		padding:1rem .7rem;
		font-size:.95rem;
	}
	.emccBox .tbl td{
		padding:.5rem .7rem;
		font-size:.95rem;
		line-height:20px;
		letter-spacing:-0.03rem;
	}	
	
}

@media(max-width:700px){
	
	.pagenation{
		display:none;
	}
	.btnAll{display:none !important;}
	
	.footCall .phone-call,
	td.phone-call span{
		display:flex;
		align-items:center;
		gap:.3rem;
	}
	td.phone-call span{
		gap:.5rem;
	}
	.footCall .phone-call:before,
	td.phone-call span:before{
		content:"\f095";
		display:block;
		font-family:"Font Awesome 6 Free";
		font-size:60%;
		font-weight:900;
	}
	td.phone-call span:before{
		font-size:80%;
	}
	.footBtm{
		flex-direction:column;
		height:100%;
		padding:0;
	}
	.footMenu{
		display:flex;
		gap:1rem;
		/* justify-content:space-between; */
		width:100%;
		padding:1.2rem;
	}
	.footMenu a{
		margin:0;
	}
	.copy{
		padding-bottom:1rem;
	}
	
	.section01{
		/* height:55vh; */
	}
	.mapList{
		left:.8rem;
		top:.8rem;
	}
	.mapList a{
		height:36px;
		line-height:28px;
		border-radius:20px;
		margin-right:10px;
		padding:0 .6rem 0 1.8rem;
		font-size:0.8rem;
		background-position-x:0.4rem;
		background-size:1.4rem;
		white-space:nowrap;
	}
	.mapType{
		top:auto;
		left:auto;
		bottom:.8rem;
		right:.8rem;
		width:40px;
		height:106px;
		flex-direction:column;
	}
	.mapType a{
		width:34px;
		height:50px;
		line-height:17px;
		padding:0 7px;
	}
	.mapControl{
		flex-direction:column;
		right:.8rem;
		bottom:calc(106px + 10px + .8rem);
	}
	.mapLocation{
		margin:0 0 5px;
	}
	.mapZoom{
		flex-direction:column;
		width:40px;
		height:80px;
	}
	.mapZoomIn{
		border-radius:5px 5px 0 0;
	}
	.mapZoomOut{
		border-radius:0 0 5px 5px;
		border-left:1px solid #ccc !important;
		border-top:0 !important;
	}
	.mapAll{
		bottom:0;
	}
	.section02{
		height:auto;
	}
	.newsArea{
		position:static;
		width:100%;
		padding:5rem 1.2rem 1.2rem;
		margin:0;
		border-radius:0;
		flex-direction:column;
	}
	.newsLeft{
		width:100%;
	}
	.newsLeftTop{
		padding:0 70px 0 0;
		flex-direction:column;
		align-items:flex-start;
		position:relative;
	}
	.newsLeftTop h3{
		padding:0 0 1.5rem .5rem;
	}
	.tabHeader li:before{
		width:100%;
		left:0;
	}
	.newsLeftContsBox{
		height:340px;
		padding:0 .5rem;
		border-left:none;
		border-right:none;
		border-radius:0;
		border-bottom-color:#000;
	}
	.newsConts ul{
		padding-top:15px;
	}
	.newsConts a .news_subject{
		max-width:calc(100% - 100px);
	}
	.newsConts a .news_date{
		font-size:0.9rem;
	}
	.newsConts .newsMore{
		top:-41px;
	}
	.newsRight{
		width:100%;
		padding-top:3rem;
	}
	.newsRightContsBox{
		height:262px;
	}
	.newsRightContsBox ul{
		width:100%;
	}
	.newsRightContsBox li{
		flex:0 0 100%;
	}
	.section03{
		padding:1.2rem;
	}
	.bnnrArea{
		width:100%;
		display:block;
	}
	.bnnrArea > div{
		height:auto;
		padding:1.2rem;
		margin-bottom:1.2rem;
	}
	.bnnrArea > div h3{
		padding:.8rem 0 1.5rem .5rem;
		text-align:left;
		word-break:auto-phrase;
	}
	.bnnr01{
		width:100%;
	}
	.bnnr01Top{
		align-items:flex-end;
	}
	.bnnr01Top a{
		padding-bottom:2.5rem;
	}
	.bnnr01Cont{
		display:block;
	}
	.bnnr01img{
		width:100%;
		height:200px;
		display:flex;
		/* align-items:center; */
	}
	.bnnr01txt{
		width:100%;
		padding:1rem 0 0;
	}
	.bnnr01desc{
		padding:.3rem 0 1rem;
	}
	.bnnr02{
		width:100%;
	}
	.bnnr03{
		justify-content:flex-start;
		width:100%;
		height:200px;
		padding:1.2rem;
		background-position:100%;
		background-size:15rem;
	}
	.bnnr03 span{
		width:40%;
		font-size:2.5rem;
		text-align:left;
		word-break:auto-phrase;
		white-space:nowrap;
	}
	.bnnr03 span br{
		display:block;
	}
	.bnnr03 span:before{
		-webkit-text-stroke:8px #000;
		white-space:normal;
	}
	.bnnr03 span:after{
		white-space:normal;
	}
	
	.sub_location > ul{
		width:100%;
	}
	.sub_location > ul > li:first-child{
		border-left:none;
	}
	/* .sub_location > ul > li:not(.sub_location .m-on,.sub_location li:first-child,.sub_location li:last-child){
		display:none;
	} */
	.sub_location > ul > li:not(.sub_location li:nth-child(3),.sub_location li:first-child,.sub_location li:last-child){
		display:none;
	}
	.sub_location > ul > li:last-child{
		border-right:none;
	}
	/* .sub_location > ul > li.m-on{
		width:100%;
	} */
	.sub_location > ul > li:nth-child(3){
		width:100%;
	}
	.sub_locaBtn{
		width:100%;
	}
	.sub_locaList{
		width:calc(100% + 2px);
	}
	.ctntInner{
		padding:2rem 0;
		margin:0;
	}
	.sub_title{
		padding:0 3rem 1.5rem 1rem;
		font-size:2rem;
		word-break:auto-phrase;
	}
	.subInfoBox{
		padding:0 1.3rem 1.5rem 1rem;
	}
	.subInfoBox p{
		line-height:1.2rem;
		padding:5px 0;
		word-break:auto-phrase;
	}
	.subInfoBox img,
	.viewCont img{
		width:100% !important;
		height:auto !important;
		padding:0;
	}
	.subTabHeader{
		width:100%;
		padding:0 1rem 2rem;
	}
	.subTabHeader li a{
		padding:15px 0;
		font-size:1rem;
	}
	.schBox{
		padding:1rem;
		margin-bottom:30px;
	}
	.formGrp{
		flex-direction:column;
		align-items:flex-start;
	}
	.schBox .formBox{
		width:100%;
		justify-content:space-between;
		gap:0;
	}
	.form100 .optBox,
	.form50 .optBox{
		width:30%;
	}
	.form100 select,
	.form50 select:not(.form50 .wp100 select){
		border-right:none;
		border-radius:5px 0 0 5px;
	}
	.form100 .optBox + input[type="text"],
	.form50 .optBox + input[type="text"]{
		width:70%;
		border-radius:0 5px 5px 0;
		padding:0 40px 0 15px;
	}
	.form100 .m-schBtn{
		position:absolute;
		right:2rem;
		line-height:0;
		padding:0;
		background:transparent;
		color:#000;
		font-size:0;
	}
	.form100 .m-schBtn i{
		font-size:1.3rem;
		padding:0;
	}
	.form50{
		flex-direction:column;
		padding:0;
	}
	.form50 .formGrp{
		width:100%;
	}
	.form50 .formLabel{
		width:100%;
		text-align:left;
	}
	.formLabel{
		padding:.3rem 0 .15rem;
	}
	.form50 .dateBox.wp100,.dateBox{
		width:45% !important;
	}
	.schBox .btnGrp{
		padding-bottom:1rem;
	}
	.schBox .formGrp .schBtn{
		width:100%;
		text-align:center;
	}
	.tblBox,.board_list_detail{
		width:100%;
		padding:0 1rem;
	}
	.tblTop{
		/* flex-direction:column;
		align-items:flex-start;
		gap:5px; */
		align-items:flex-end;
	}
	.tblTopGrp{
		width:100%;
	}
	.tblTop .btn{
		width:calc(50% - 60px - 5px);
		justify-content:space-between;
	}
	
	.emccBox_m{
		display:block;
		padding:.5rem 1rem;
		font-size:.92rem;
		color:var(--red);
	}
	.emccBox .tbl{
		width:450px;
		margin-bottom:10px;
	}
	.emccBox .tbl colgroup col:nth-child(1){
		width:40px;
	}
	.emccBox .tbl colgroup col:nth-child(2){
		width:130px;
	}
	.emccBox .tbl colgroup col:nth-child(3){
		width:130px;
	}
	.emccBox .tbl colgroup col:nth-child(4){
		width:auto;
	}
	
	.gallery{
		flex-direction:column;
		gap:0;
	}
	.gallery li{
		width:100%;
	}
	.tblMore{
		display:flex;
		justify-content:center;
		padding:2.5rem 0 1rem;
	}
	.tblMore a{
		display:flex;
		align-items:center;
		gap:.8rem;
		padding:.8rem 1.5rem;
		font-size:1rem;
	}
	.tblMore a:after{
		content:"\f107";
		font-family:"Font Awesome 6 Free";
		font-size:.8rem;
		font-weight:900;
	}
	.viewHeader{
		padding:1.8rem 1rem;
	}
	.viewHeader h4{
		padding-bottom:.5rem;
	}
	.fileDown{
		padding:1rem;
	}
	.fileDown li{
		align-items:flex-start;
		padding-bottom:.6rem;
	}
	.fileDown span{
		display:inline-block;
		font-size:.85rem;
	}
	/* .fileDown a{
		width:100%;
		justify-content:center;
		padding:.6rem .5rem;
		margin-bottom:.5rem;
		font-size:.9rem;
		word-break:auto-phrase;
	} */
	.viewType1 .veiwList,
	.viewType2 .veiwList{
		grid-template-columns:25% 75%;
	}
	.viewType2 .view_th:not(.viewType2 .colspan){
		justify-content:flex-start;
		padding:0 10px 0 12px;
	}
	.viewType2 .colspan{
		padding-left:0;
	}
	.veiwList li{
		font-size:1rem;
	}
	.view_th{
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.viewType1 .colspan{
		grid-column:auto;
	}
	.viewCont{
		padding:3.5rem 1rem;
		line-height:1.3rem;
		font-size:.95rem;
	}
	.veiwList_btm{
		flex-direction:column;
		gap:1rem;
		padding:1rem .7rem;
		margin:0 1rem;
		width:calc(100% - 2rem);
	}
	.veiwList_btm a{
		gap:.5rem;
	}
	.veiwList_btm a.next{
		flex-direction:row;
	}
	.veiwList_btm a i{
		transform:rotate(90deg);
	}
	.veiwList_btm a span:last-child{
		display:block;
		width:calc(100% - 100px);
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.btnGrp{
		padding-top:2rem;
	}
	
	.subMap{
		height:calc(100vh - 120px);
	}
	.subMap .legendBox{
		top:calc(1.6rem + 36px);
	}
	.panelBox{
		position:fixed;
		left:0;
		top:100vh;
		width:100%;
		transition:all .3s;
	}
	.panelBox.active{
		top:0;
		left:0;
		z-index:999;
	}
	/*.panelBox .schBox .formBox{
		flex-direction:row;
	}*/
	.panelBtn{
		display:flex;
		justify-content:center;
		align-items:center;
		width:80px;
		height:40px;
		border-radius:10px 10px 0 0;
		background:rgba(50,55,65,.9);
		color:#fff;
		position:fixed;
		bottom:0;
		left:calc(50% - 40px);
	}
	.panelBtn:after{
		content:"\f106";
		font-size:1.5rem;
		position:static;
	}
	.panelBox.active .panelBtn:after{
		content:"\f107";
	}
	.subMap .mapList,
	.subMap .mapList.active{
		left:.8rem;
		width:100%;
	}
	.panelList{
		height:calc(100vh - 80px - 45px - 2rem - 45px - 2px);
		padding-bottom:3rem;
	}
	.panelList.datepk{
		height:calc(100vh - 80px - 45px - 2rem - 45px - 2px - 50px);
		padding-bottom:3rem;
	}
	.filterCont{
		left:auto;
		right:0;
		width:90%;
	}
	.filterList{
		width:100%;
	}
	.filterList-btn{
		width:100% !important;
	}
	.helpBox{
		width:100%;
		left:0;
	}
	
	.mapBox .vw-popup,
	.mapBox .nw-popup{
		width:90%;
		min-width:330px;
		/* z-index:1;  */
	}
	.mapBox .nw-popup > div:first-child{
		width:100% !important;
	}
	.mapBox .nw-popup > div:nth-child(2),
	.mapBox .nw-popup > div:nth-child(3){
		left:50% !important;
	}
	.mapPopup{
		width:100%;
	}
	.mapPopup h3{
		width:330px;
	}
	.popBody{
		width:330px;
		min-width:330px;
		max-width:330px;
		height:auto;
		max-height:280px;
		padding:.8rem .5rem .5rem 1rem;
	}
	
	.mapBox .vw-logo, .mapBox .vw-scale-line, .mapBox .vw-notice{
		left:.5rem;
	}
	.graphBox{
		flex-direction:column;
		padding:0 30px;
	}
	.graphBox li{
		width:100%;
	}
	.graphBox li .chartBoxbarChart1,
	.graphBox li .chartBoxbarChart2,
	.graphBox li .chartBoxbarChart3,
	.graphBox li .chartBoxbarChart4{
		width:100%;
	}
	
	.accBoxTop .tblTopGrp,
	.accBoxTop  .tblTopGrp  .btn{
		width:auto;
	}
	.accHeader{
		height:auto;
		min-height:60px;
		padding:15px;
	}
	.accHeader span{
		margin-left:30px;
	}
	.accBody{
		padding:18px 20px 15px;
	}
	
	.mainModal{
		width:100% !important;
		top:auto;
		bottom:0;
		left:0;
	}
	.modalCont{
		border:1px solid #323741;
	}
	.modalDesc{
		padding:15px;
		max-height:calc(100vh - 130px)
	}
	
}