@charset "utf-8";
/* CSS Document */

#sub_all_wrap:after, .location ul:after{ display:block; clear:both; content:"";}

#sub_all_wrap{ padding-top:74px; margin-bottom:60px;}

/* Sub Visual */
.sub_visual{ height:164px; line-height:164px; background:url(../images/sub/sub_visual_bg.jpg) no-repeat; background-size:cover; text-align:center;}
.sub_visual h3{ font-size:32px; color:#fff; font-family: 'NotoKrM';}

/* Location */
.location{ height:54px; border-top:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; margin-bottom:55px;}
.location > ul{ width: 1280px; margin: 0px auto; position: relative;}
.location > ul > li{ position:relative; float:left; width: 40%; max-width:310px;}
.location > ul > li > a{ display:block; padding:0 16px; font-size:16px; height:55px; line-height:55px; background:url(../images/sub/arrow_location_down.png) no-repeat right 20px center;}
.location ul li.home{ width:auto;}
.location ul li.home a{ padding-left:0; position:relative; background:none;}
.location > ul > li > a:before{content: ""; position: absolute; right:0px; top:20px; width:1px; height:16px; background:#ccc;}
.location ul li.home a i{ font-size:24px; }

.location ul ul{  position:absolute; width:100%; border:1px solid #0087f1; background:#fff; top:53px; z-index:9; display:none;}
.location ul ul.on{ display:block;}
.location ul ul li{ padding:0 24px;}
.location ul ul li a{ display:block; font-size:16px; height:54px; line-height:54px; border-bottom:1px dashed #d4d4d4}
.location ul ul li:last-child a{ border-bottom:none;}
.location ul ul li.on a{ color:#146aca;}

/* Sub Contents */
.sub_cont{}

/* Title */
.h4{ position:relative; font-size:22px; font-family: 'NotoKrM'; padding-left:28px; background:url(../images/sub/h4_bulit.png) no-repeat left top 8px; margin-top:50px; margin-bottom:16px;}
.h4 span{ font-size:20px; color:#9797a6; font-family: 'NotoKrM'; margin-left:10px;}
.h4.t_search{ border-bottom: 2px solid #2aaa08; padding-bottom:16px; margin-bottom:0;}

.btn_h4_more{ background:url(../images/common/btn_h4_more.png) no-repeat left center; padding-left:18px; color:#666; position:absolute; right:0; top:0;}
.h5{ position:relative; font-size:18px; padding-left:28px; margin-bottom:16px; margin-top:20px; background:url(../images/sub/h5_bulit.png) no-repeat left top 6px;}
.h5_2{ font-size:16px; padding-left:28px; margin-bottom:16px;}
.h5_3{ display:inline-block; color:#146aca; font-size:18px; font-family: 'NotoKrM'; padding:6px 25px; border-radius:50px; background:#f5f5f5; border:1px dashed #dcdcdc;}

.h6{ position:relative; font-size:15px; color:#505050; margin-left:28px; padding-left:15px; margin-bottom:8px;}
.h6:before{content: ""; position: absolute; width:5px; height:5px; left:0px; top:9px;  background:#b4b4b4; border-radius:50%;}
.h6_2{  font-size:15px; color:#666; margin-left:28px; padding-left:15px; margin-bottom:6px;}

/* 공용 : TAB */
.tab{ display:table; width:100%; table-layout:fixed;}
.tab li{ display:table-cell; background:#fff; border-top: 1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; border-right:1px solid #e1e1e1;}
.tab li:first-child{ border-left: 1px solid #e1e1e1;}
.tab li a{ display:block; color:#666; font-size:16px; padding:16px 20px;}
.tab li.on{ color:#232323; background:#fffef6; font-family: 'NotoKrM'; border:1px solid #ffb43e;}

/* 계절관리제 추진현황 : 부문별 현황 : TAB */
.tab_2_wrap{ position:relative; margin-bottom:40px;}
.tab_2{ border-left: 1px solid #e1e1e1; overflow:hidden;}
.tab_2 li{ float:left; width:25%; height:56px; line-height:56px; background:#fff; border-top: 1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; border-right:1px solid #e1e1e1;}
.tab_2 li:nth-child(n+5){border-top:none}
.tab_2 li a{ display:block; color:#666; font-size:16px; text-align:center;}
.tab_2 li.on{  background:#fffef6; border:1px solid #ffb43e;}
.tab_2 li.on a{ color:#232323; font-family: 'NotoKrM';}

.tab_2.dist{ display:table; width:100%;}
.tab_2.dist li{ float:none; display:table-cell; text-align:center;}

.tab_2_cont{ margin-bottom:60px;}

/* Graph Box*/
.img_box{ overflow:hidden;}
.img_box li{ border:1px solid #e1e1e1; display:table; width:100%;}
.img_box li div{ height:370px; text-align:center; display:table-cell; vertical-align:middle; border-bottom:1px solid #e1e1e1; width:100%;}
.img_box li p{ height:50px; line-height:50px; background:#f5fbfd; font-size:15px; color:#505050; text-align:center; display:table-row}
.img_box li div img{}

.img_box.p3 li{ width:406px; margin-right:30px; float:left;}
.img_box li:last-child{ margin-right:0}

.img_box.p2 li{ width:48.8%; margin-right:2.4%; float:left;}
.img_box li:last-child{ margin-right:0}

/* 컨텐츠 이미지 박스 */
.img_box2{ padding:65px 10px; border:1px solid #e1e1e1; text-align:center;}

/* Info Text */
.info_txt{ margin-bottom:30px; margin-top:20px; font-size:16px; line-height:26px; text-align:center;}
.info_txt2{ font-size:14px; line-height:24px; color:#666;}

.p_txt{ font-size:15px; color:#505050; line-height:26px;}

/* 미세먼지란? */
.sub_tit_box{ border:6px solid #efefef; border-radius:5px; padding:40px 40px 40px 170px; margin-bottom:50px;}
.sub_tit_box.p111{ background:url(../images/sub/p111_titbox_bg.png) no-repeat left 45px top 50px;}
.sub_tit_box.p111 .img_box2{ padding:30px 10px;}
.sub_tit_box.p121{ background:url(../images/sub/p121_titbox_bg.png) no-repeat left 45px top 50px;}
.sub_tit_box.p221{ background:url(../images/sub/p221_titbox_bg.png) no-repeat left 45px top 50px;}

.s_tit1{ font-size:24px; font-family: 'NotoKrM'; color:#146aca; margin-bottom:10px;}
.s_tit2{ font-size:18px; margin-bottom:10px;}
.s_tit3{ position:relative; font-size:15px; color:#505050; padding-left:15px; margin-bottom:8px;}
.s_tit3:before{content: ""; position: absolute; width:5px; height:5px; left:0px; top:9px;  background:#b4b4b4; border-radius:50%;}

/* 아이템 박스 */
.item_box_list{ overflow:hidden;}
.item_box_list > li{}
.item_box_list.par2 > li{ float:left; width:calc(50% - 20px);}
.item_box_list.par2 > li:nth-child(even){ margin-left:40px;}
.item_box_list .i_tit{ font-size:18px; color:#219d00; font-family: 'NotoKrM'; margin-bottom:16px; margin-top:20px;}
.item_box{ border:1px solid #dcdcdc; border-top:2px solid #2aaa08; padding:28px 28px 28px 160px; height:148px; width:100%; display:table;
	background-repeat:no-repeat; background-position: left 20px center;
	}
.item_box ul{ display:table-cell; vertical-align:middle;}
.item_box li{ position:relative; font-size:15px; color:#505050; padding-left:15px; margin-bottom:8px;}
.item_box li:last-child{ margin-bottom:0;}
.item_box li:before{content: ""; position: absolute; width:5px; height:5px; left:0px; top:9px;  background:#b4b4b4; border-radius:50%;}
.item_box.topNone{ border-top:none;}

.p121_icon01{ background-image:url(../images/sub/p121_icon01.png);}
.p121_icon02{ background-image:url(../images/sub/p121_icon02.png);}
.p121_icon03{ background-image:url(../images/sub/p121_icon03.png);}
.p121_icon04{ background-image:url(../images/sub/p121_icon04.png);}
.p121_icon05{ background-image:url(../images/sub/p121_icon05.png);}
.p121_icon06{ background-image:url(../images/sub/p121_icon06.png);}
.p121_icon07{ background-image:url(../images/sub/p121_icon07.png);}
.p121_icon08{ background-image:url(../images/sub/p121_icon08.png);}
.p121_icon09{ background-image:url(../images/sub/p121_icon09.png);}
.p121_icon10{ background-image:url(../images/sub/p121_icon10.png);}

.p221_icon01{ background-image:url(../images/sub/p221_icon01.png);}
.p221_icon02{ background-image:url(../images/sub/p221_icon02.png);}
.p221_icon03{ background-image:url(../images/sub/p221_icon03.png);}

/* 계절관리제 추진현황 : 지역별 현황 */
.map_city_cont{ padding: 65px 8px 55px 8px; border: 1px solid #dedede; text-align: center;}
.tit_city{ text-align:center; margin-bottom:30px;}
.tit_city span{ font-size:28px; font-family: 'NotoKrM'; position:relative;}
.tit_city span:before{content: ""; position: absolute; left: 5px; top: -4px; width: 14px; height: 3px; background:#2aaa08; border-radius:10px;}

/* 통합검색 결과 */
.total_search_word{ font-size:24px; text-align:center; margin:40px 0; }
.total_search_word span{ font-size:24px; color:#229c01; font-family: 'NotoKrM';}

.total_search_list{ margin-bottom:50px;}
.total_search_list > li{ padding:22px; border-bottom:1px dashed #dcdcdc;}
.total_search_list > li:last-child{ border-bottom:1px solid #dcdcdc;}
.total_search_list > li:hover{ background:#f9fcf8;}

.search_word_location{ overflow:hidden; margin-bottom:12px;}
.search_word_location li{ position:relative; float:left; margin-right:22px;}
.search_word_location li:before{content: ""; position: absolute; right: -14px; top: 8px; width: 7px; height: 13px; background:url(../images/common/arrow_search_list.png) no-repeat;}
.search_word_location li:last-child:before{ display:none;}
.search_word_location li a{ font-size:18px; font-family: 'NotoKrM';}

.k_site_link{ font-size:18px; font-family: 'NotoKrM'; margin-bottom:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;}
.k_site_link a{ font-size:inherit; font-family:inherit; text-decoration:underline; margin-left:10px;}
.k_word_link{ font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;}

.k_word{ color:#229c01; font-size:inherit; font-family:inherit;}

.total_search_cont{ padding:30px 0; border-bottom:1px solid #dcdcdc; margin-bottom:50px;}
.total_search_cont .bbs_cardnews > li{ margin-bottom:0; height:auto;}
.total_search_cont .bbs_video > li{ margin-bottom:0;}

/* 미세먼지 상황 : 푸른 하늘의 날 기념식 */
.bluesky_poster{}
.bluesky_poster img{ width:100%; height:auto;}

/* 푸른 하늘이 날 : 푸른 하늘의 날 개요 */
.bluesky h3{ display:none;}
.bluesky .location{ margin-bottom:0; display:none;}
.bluesky_wrap{}
.bluesky_top_visaul{ /* background:url(../images/main/main_visual3.jpg)  no-repeat center top;*/ height:582px; margin-bottom:100px;}

.bluesky_txt_wrap{}
.blue_txt01{ text-align:center; margin-bottom:50px;}
.blue_txt02{ text-align:center; line-height:36px; font-size:20px; margin-bottom:20px; letter-spacing:-1px;}
.blue_txt03{ text-align:center; line-height:36px; font-size:20px; margin-bottom:128px; color:#0081e9; letter-spacing:-1px;}

.bluesky_middle_bg{ background:url(../images/sub/bluesky_middle_bg.png) no-repeat center top; height:411px;}

.bluesky_history_wrap{ position:relative; text-align:center;}
.bluesky_history_wrap:after{ display:block; clear:both; content:"";}
.bluesky_history_wrap .bluesky_tit{ position:relative; display:inline-block; color:#1e1e1e; font-size:36px; font-family: 'NotoKrM'; text-align:center; margin:auto 0; margin-bottom:50px;}
.bluesky_history_wrap .bluesky_tit:before{content: ""; position: absolute; left: -4%; right:-5%; bottom:0px; width:109%; height:24px; background:#d3eeff; border-radius:50px; z-index:-1}

.bluesky_history_bg_wrap{ background:url(../images/sub/bluesky_history_bg.png) no-repeat left top #f2f9ff;}
.bluesky_history_bg{ width: 1280px; margin: 0px auto; overflow-x:scroll;}
.bluesky_history{ position: relative; width:3650px;}
.bluesky_history:after{ display:block; clear:both; content:"";}
.bluesky_history li{ width:370px; float:left; height:636px; margin-right:40px; position:relative;}
.bluesky_history li:before{ content: ""; position: absolute; left: 0; top:0; width:3px; height:180px; background:#7d899c;}
.bluesky_history li:first-child:before{content: ""; position: absolute; left: 0; top:0; width:3px; height:180px; background:#004a98;}
.bluesky_history li:last-child{ margin-right:0;}
.bluesky_history .year_wrap{ height:180px; position:relative;}
.bluesky_history .year{ position:absolute; left:-40px; top:24px; transform: rotate(-90deg); display:inline-block; font-size:68px; font-family: 'NotoKrB'; color:#7d899c;}
.bluesky_history li:first-child .year{ color:#004a98;}
.bluesky_history .sub_tit{ font-size:18px; color:#323232; text-align:left; font-family: 'NotoKrB'; margin-bottom:10px;}
.bluesky_history .date{ font-size:14px; color:#666; text-align:left;}
.bluesky_history img{ width:100%; height:258px; border:1px solid #e2e2e2; border-radius:5px; margin-bottom:16px;}

/* 사이트맵 */
.sitemap:after { display:block; clear:both; content:"";}
.sitemap a{ display:block; position:relative;}

.sitemap > li{ float:left; width:30%; margin-right:4%; margin-bottom:25px;}
.sitemap > li:nth-child(3n+3){ margin-right:0;}
.sitemap > li > a{ font-size:20px; font-family:"SCDream5"; color:#519a48; height:56px; line-height:56px;}
.sitemap > li > a:before{content: ""; position: absolute; left: 0; bottom:0; width:50%; height:3px; background:#519a48;}
.sitemap > li > a:after{content: ""; position: absolute; left: 50%; bottom:0; width:50%; height:3px; background:#d1d1d1;}

.sm_dep2{}
.sm_dep2 > li{ border-bottom:1px dashed #d8d8d8;}
.sm_dep2 > li > a{ padding-left:12px; height:55px; line-height:55px; font-size:15px; margin-left:10px;}
.sm_dep2 > li > a:hover{ color:#ff5a00;}
.sm_dep2 > li > a:before{content: ""; position: absolute; left: 0; top:25px; width:5px; height:5px; background:#909090;}
.sm_dep2 > li > a:hover:before{ background:#ff5a00;}

.sm_dep3{ background:#f8f8f8; padding:12px 22px; margin-bottom:10px;}
.sm_dep3 li{}
.sm_dep3 li a{ height:24px; line-height:24px; color:#505050; font-size:13px;}
.sm_dep3 li a:hover{ color:#ff5a00; font-size:13px;}
.sm_dep3 li a:before{content: "-  ";}
.sm_dep3 li a:hover:before{content: "-  ";}

/* Graph Box */
.graph_box{ padding:45px 68px; border:1px solid #e1e1e1;}


@media all and (max-width:1024px) {
	#sub_all_wrap{ padding-top:0;}
	
	/* 기타환경 : 슬레이트 */
	.map{ width:100% !important;}
	.map.slate{float:inherit; border:1px solid red;}
	.slate_graph_wrap{ width:100%; float:inherit;}
	.h3_first{ margin-top:36px;}
	.slate_graph{ padding:10px;}
	
	.bluesky_top_visaul{margin-bottom:100px;}
}

@media (max-width: 640px){

	.bluesky_top_visaul{margin-bottom:0px;}
	
	/* Sub Visual */
	.sub_visual{ background:url(../images/sub/sub_visual_bg_m.jpg) no-repeat; background-size:100% auto;}
	
	/* Location */
	.location > ul{ width:100%;}
	.location a{ text-align:center;}
	.location > ul > li{ width:100%; max-width:inherit; display:none; float:inherit;}
	.location > ul > li:last-child{ display:block;}
	.location > ul > li > a:before{ display:none;}
	
	.h5_2{ padding-left:0;}
	.h6{ margin-left:0;}
	.h6_2{ padding-left:0; margin-left:5px;}
	
	.s_tit1{ font-size:24px;}
	.s_tit2{ font-size:16px;}
	.s_tit3{ font-size:14px;}
	
	/* 미세먼지란? */
	.sub_tit_box{ padding:15px 10px; border: 4px solid #efefef;}
	.sub_tit_box{ background:none !important;}
	.sub_tit_box.p111 .img_box2{ padding:30px 10px;}
	.img_box2 img{ width:100%;}
	.info_txt2{ font-size:14px;}
	
	/* 미세먼지란 : 미세먼지계절관리제 개요 */
	.item_box_list > li{}
	.item_box_list.par2 > li{ float:none; width:100%; }
	.item_box_list.par2 > li:nth-child(even){ margin-left:0;}
	.item_box { display:block; padding: 20px; height:auto; background:none;}
	.img_box li div { padding:15px;}
	.img_box li div img{ width:100%;}

	/* 계절관리제 추진현황 : 부문별 현황 : TAB */
	.tab_2{ position:absolute; width:100%; z-index:2; display:none;}
	.tab_2 li{ float:none; width:100%; height:50px; line-height:50px; border-top:none;}
	.tab_2 li a{ display:block;  color:#666; font-size:16px; padding-left:20px;}
	.btn_tab_2{ position:relative; width:100%; height:56px; line-height:56px; color:#232323; background:#fffef6; font-family: 'NotoKrM'; border:1px solid #ffb43e; font-size:16px;}
	.btn_tab_2 i{ position:absolute; right:20px; top:20px; transition: all 0.3s;}
	.btn_tab_2.active i{transform: rotate(-180deg);}
	
	.tab_2.dist{ display:none;}
	.tab_2.dist li{display:block;}
	
	/* 이미지 박스 */
	.img_box li{ width:100% !important; margin-bottom:20px;}
	
	.graph_box{ padding:10px;}
	
	/* 검색 */
	.sub_search_wrap{ display:block;}
	.sub_search_wrap input[type=text]{ width:calc(100% - 150px); display:table-cell;}	
	
	.total_search_cont .bbs_cardnews > li{ margin-bottom:40px;}
	.total_search_cont .bbs_cardnews > li:last-child{ margin-bottom:0;}
	.total_search_cont .bbs_video > li{ margin-bottom:40px;}
	.total_search_cont .bbs_video > li:last-child{ margin-bottom:0;}
	
	.map_city_cont img{ width:100%}
	
	/* 푸른 하늘이 날 : 푸른 하늘의 날 개요 */
	.bluesky .location{ display:block;}
	.bluesky_wrap{ margin-top:40px;}
	.bluesky_top_visaul{ height:auto;}
	.bluesky_top_visaul img{ width:100%; height:auto;}
	.bluesky_middle_bg{ background:url(../images/sub/bluesky_middle_bg_m.png) no-repeat center top; height:240px; background-size:96% 240px;}
	
	.bluesky_txt_wrap{ margin-top:40px; padding:15px;}
	.blue_txt01 img{ width:70%;}
	.blue_txt02{ text-align:left;}
	.blue_txt03{ text-align:left; margin-bottom:40px;}
	
	.bluesky_history_bg_wrap{ background:#f2f9ff;}
	.bluesky_history_bg{ width:100%; overflow:auto;}
	.bluesky_history{ width:100%; padding:10px;}
	.bluesky_history li { width: 100%; float:none; height: auto; margin-right:0; margin-bottom:30px;}
	.bluesky_history li:before { display:none;}
	.bluesky_history .year_wrap { position:relative; height:auto; text-align:left; padding-left:10px;}
	.bluesky_history .year_wrap:before{ content: ""; position: absolute; left: 0; top:0; width:3px; height:100%; background:#7d899c;}
	.bluesky_history li:first-child .year_wrap:before{ background:#004a98;}
	.bluesky_history .year { position:relative; left:0; top:0; transform: rotate(0deg); display:block; font-size: 40px;}
	.bluesky_history img{ height:auto;}
	#sub_all_wrap.bluesky{ margin-bottom:0;}
	
	/* 사이트맵 */
	.sitemap > li{ width:100%; margin-right:0;}
	
	}

.ecthichart_tooltip{padding-bottom: 12px;}
.ecthichart_tooltip li:first-child{ padding: 9px 18px 9px 18px;font-family: 'NotoKrB';border-radius: 7px 7px 0px 0px}
.ecthichart_tooltip li:nth-child(2) {padding: 12px 18px 3px 18px; }
.ecthichart_tooltip li{padding: 3px 18px 3px 18px;font-family: 'NotoKrB';font-family: 'NotoKrM' }