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

/*******************************
 * Sitename : 미세먼지종합포탈
 * Filename : main.css
 * update : 2024.02.21.
********************************/

.main_item_box:after, .main_bottom:after, .appoint_wrap:after, .main_middle:after, .pr_video_list:after{ display:block; clear:both; content:"";}

.main_visual{ position:relative; padding-top:74px;}

/* Visual BG */
.main_visual_rolling_wrap{ position:relative;}
.main_visual_rolling_wrap:after{content: ""; position: absolute; height:136px; min-width:1903px; width:100%; left:0; bottom:0; background:url(../images/main/visual_cover.png); z-index:53}

.main_visual_rolling{ position:relative;}
.main_visual_rolling li{ height:582px;}
.main_visual_rolling img{ min-width:1903px; width:100vw;}

/* 배너 영역 */
.banner_area{ position:absolute; top:50px; right:0; width:436px; height:483px; background:#fff; padding:8px 0 0 8px; border:1px solid #767676; border-radius:0 10px 10px 10px; z-index:54; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); padding-right:6px;}
.banner_area img{ }
.banner_item li{ }

/* Total Search */
.main_search_wrap{ position:absolute; width:616px; top:-50px; z-index:54;}
.main_search_wrap .tag_txt{ margin-bottom:8px;}
.main_search_wrap .tag_txt a{ font-size:18px; color:#666; margin-right:8px;}

.main_total_search{ width:100%; border:2px solid #2aaa08; border-radius:5px; height:60px; line-height:60px; background:#fff; overflow:hidden; vertical-align:middle; padding:0 0 6px 8px;}
.main_total_search input[type=text]{ height:54px; line-height:54px; width:80%; border:none;}
.main_total_search input[type=text]::placeholder{ color:#1e1e1e; font-size:18px;}
.main_total_search button{ height:56px; width:56px; background:#2aaa08; float:right;}
.main_total_search button i{ color:#fff;}

.main_middle{}

.main_h4{ font-size:24px; position:relative; margin-bottom:26px; font-family: 'NotoKrB';}
.main_h4 em{ font-size:24px; color:#146aca; font-family: 'NotoKrB';}
.main_h4 span{ font-size:14px; color:#666; margin-left:20px;}

/* 보도자료 */
.news_bbs{ margin-top:128px; width:616px; float:left;}

.btn_more{ position:absolute; display:inline-block; width:22px; height:22px; background:url(../images/main/btn_more_plus.png) no-repeat; right:0; top:10px;}

.news_bbs ul{ border-top:1px solid #323232;}
.news_bbs ul .news_main{ position:relative; padding:23px 0;}

.news_bbs .main_date{ position:absolute; width:100px; left:0; top:18px}
.news_bbs .main_date dt{ color:#133963; font-size:36px; text-align:center; margin-bottom:3px; line-height:40px;}
.news_bbs .main_date dd{ color:#133963; font-size:14px; text-align:center; white-space:nowrap;}

.news_bbs .date{}
.news_bbs ul li{ border-bottom:1px solid #e0e0e0; padding:20px; position:relative;}
.news_bbs ul li a{ display:block; font-size:16px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:calc(100% - 100px);}
.news_bbs ul li span{ position:absolute; font-size:14px; color:#767676; right:20px; top:20px;}

.main_bbs_txt{ margin-left:100px;}
.main_bbs_txt a{ font-size:20px !important; width:95% !important;}
.main_bbs_txt p{ font-size:15px !important; color:#505050; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:95%;}

/* 계절관리제 기간 미세먼지 현황 정보 */
.table_chart_board_wrap{ position:relative; width:615px; float:right; margin-top:18px;}
.table_chart_board_wrap .tit{ height:80px; line-height:80px; text-align:center;}
.table_chart_board{  border-radius:10px; padding:10px; background:#a4dbff;}
/*.table_chart_board:before{content: ""; position: absolute; left:0; top:-110px; width:100%; height:110px; background:url(../images/main/blue_sky.png) no-repeat right 0 bottom 0;}*/
.table_chart_board table{ border-spacing:0px; background:#fff; border-radius:10px;}
.table_chart_board thead th,
.table_chart_board tbody th,
.table_chart_board tbody td{ position:relative; text-align:center;}
.table_chart_board thead th{ background:#0060cc; color:#fff; font-size:18px; height:60px; line-height:18px; border-right:1px solid #e0e0e0; border-bottom:2px solid #323232;}
.table_chart_board thead th p{ font-size:14px; color:#fff; line-height:18px;}
.table_chart_board tbody th{ font-size:18px; line-height:20px; color:#000; font-family: 'NotoKrM'; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0; padding:10px 0;}
.table_chart_board tbody th span{ font-size:16px;}
.table_chart_board tbody th p{ font-size:14px; color:#949494;}
.table_chart_board tbody td{ font-size:22px; font-family: 'NotoKrM'; color:#000; line-height:24px; height:77px; border-right:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0;}

.table_chart_board thead th:last-child,
.table_chart_board tbody td:last-child{ border-right:none;}

.table_chart_board tbody tr:last-child th,
.table_chart_board tbody tr:last-child td{ border-bottom:none;}
/*
.table_chart_board thead th:nth-child(2){ border-top:4px solid #fff000; color:#fff000;}

.table_chart_board thead th:nth-child(1),
.table_chart_board thead th:nth-child(2),
.table_chart_board tbody th,
.table_chart_board tbody tr:nth-child(1) td:nth-child(2),
.table_chart_board tbody tr:nth-child(2) td:nth-child(2),
.table_chart_board tbody tr:nth-child(3) td:nth-child(2){ border-right:4px solid #fff000;}

.table_chart_board tbody tr:nth-child(3) td:nth-child(2){ border-bottom:4px solid #fff000;}
*/

.table_chart_board tbody td em{ font-size:14px; color:#767676;}
.table_chart_board tbody td p{ font-size:13px; color:#767676;}
.table_chart_board tbody td a{ font-size:14px; color:#000;  display: inline-block; width:10%;}

.table_chart_board tbody .good{ color:#1c67d7;}  /* 좋음 */
.table_chart_board tbody .nomal{ color:#008100;} /* 보통 */
.table_chart_board tbody .bad{ color:#937200;}   /* 나쁨 */

.table_chart_board tbody tr:nth-child(3) th,
.table_chart_board tbody tr:nth-child(3) td{ background:#fafafa;}

.table_chart_board tbody tr:nth-child(3) td p{ font-size:12px;}

/* 계절관리제 기간 미세먼지 현황 정보 : Tooltip */
.cb_tooltip_wrap{ position:relative; display:inline-block;}
.cb_tooltip_wrap button{ display:inline-block; width:16px; height:16px; line-height:16px; font-size:13px; background:#c8c8c8; border-radius:50px; color:#fff; font-family: 'NotoKrM';}
.cb_tooltip_wrap .cb_tooltip{ position:absolute; white-space: nowrap; background:#282f48; padding:0 10px; border-radius:5px; color:#fff; font-size:12px; height:28px; line-height:28px;
	left: 50%; transform: translateX(-50%); top:-33px; display:none; z-index:3;
}
.cb_tooltip_wrap .cb_tooltip:after{content: ''; position: absolute; display: inline-block; bottom:-8px; width:0; height:0;border-left:4px solid transparent; border-right:4px solid transparent;
 		border-top:9px solid #282f48; left: 50%; transform: translateX(-50%)
}

.way_wp {position:relative;margin-top:60px; background:url(../images/main/sld_bg.png) repeat-x top -10px left;}
.way_wp:before{content: ""; position: absolute; left:0; top:0; bottom:0; width:40%; height:100%; background:#8567d9;}
.way_wp .cont{width:100%;max-width:1280px;margin:0 auto;height:400px; position:relative;}

.way_wp .lcon{float:left;width:100%;padding:50px 0 0 0;text-align:left;}
.way_wp .lcon .h3{padding-bottom:30px;font-size:54px;font-weight:600;color:#fff000;letter-spacing:-1px;line-height:1.3;}
.way_wp .lcon .h3 p{padding-bottom:6px;font-size:24px;font-weight:400;letter-spacing:-0.5px;line-height:1.3;}
.way_wp .lcon  .txt_slide .sld{position:relative; display:table;width:450px !important;padding-left:80px; padding:40px 20px; border-radius:10px; 
	background-color:rgba(256, 256, 256, 0.9); opacity:1;
}
.way_wp .lcon  .txt_slide b{font-size:60px;color:#925cf0;letter-spacing:-2px;line-height:1; display:table-cell;}
.way_wp .lcon  .txt_slide span{font-size:20px;color:#1e1e1e;line-height:1.2; letter-spacing:-1px; display:table-cell; vertical-align:middle; padding-left:20px;}
.way_wp .rcon{position:absolute;right:50%;margin-right:-950px;width:1078px;margin-top:50px;}
.way_wp .img_slide .slick-list{padding-right:25px !important;}
.way_wp .slide_arr{margin-top:10px;font-size:0;letter-spacing:0;word-spacing:0;}
.way_wp .slide_arr .slick-arrow{display: inline-block;vertical-align: top;font-size:0;width:56px;height:56px;}
.way_wp .slide_arr .slick-arrow.slick-prev{background:url("../images/main/sld_prev.png") no-repeat;}
.way_wp .slide_arr .slick-arrow.slick-next{background:url("../images/main/sld_next.png") no-repeat; margin-left:-16px;}
.way_wp_bg{ width:640px; height:100%; background:#8567d9; border-radius:0 10px 10px 0;}

/* 홍보 동영상 */
.pr_video{ margin-top:40px;}
.pr_video .main_h4 em{ color:#ff5a00;}

.pr_video_list{}
.pr_video_list li{ width:400px; float:left; margin-right:40px;}
.pr_video_list li:last-child{ margin-right:0;}
.pr_video_list img{ border:1px solid #e2e2e2; border-radius:10px; overflow:hidden; width:400px; height:258px; margin-bottom:20px;}
.pr_video_list .tit{ margin-bottom:4px;}
.pr_video_list .tit a{ display:block; font-size:18px; font-family: 'NotoKrM'; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.pr_video_list .date{ font-size:14px; color:#666;}

.main_cont_bg{ background:url(../images/main/main_cont_bg.png) no-repeat bottom; background-size:auto; padding-bottom:80px;}

/* 기타자료 */
.etc_data{ margin-top:70px; }
.etc_data .main_h4 em{ color:#2aaa08;}

.etc_data_list{}
.etc_data_list:after{ display:block; clear:both; content:""; }
.etc_data_list > li{ border:1px solid #e2e2e2; border-radius:10px; width:400px; float:left; padding:26px 30px; margin-right:40px; background:#fff;}
.etc_data_list > li:last-child{ margin-right:0;}
.etc_data_list > li a{ display:block; font-size:18px; font-family: 'NotoKrM'; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; margin-bottom:4px;}
.etc_data_list li ul{}
.etc_data_list li ul:after{ display:block; clear:both; content:""; }
.etc_data_list li ul li{ position:relative; float:left; margin-right:21px; color:#666;}
.etc_data_list li ul li:last-child{ margin-right:0;}
.etc_data_list li ul li:before{ content:""; position:absolute; top:4px; right:-10px; width:1px; height:14px; background:#e2e2e2;}
.etc_data_list li ul li:last-child:before{ display:none;}

@media all and (max-width:1024px) {
	.main_visual{ padding-top:0;}

	/* 보도자료 */
	.news_bbs{ width:100%; float:none;}
	.news_bbs ul li{ padding:10px 15px;}
	.news_bbs ul li a{ width:100%; margin-bottom:4px;}
	.news_bbs ul li span{ position:static; display:block;}
	.news_bbs ul .news_main{ padding:15px 15px 15px 0;}
	.news_bbs .main_date { width: 80px; top: 8px;}
	.main_bbs_txt{ margin-left:80px;}
	
	.way_wp .rcon{ margin-right:-1100px;}
	
	.table_chart_board_wrap{ width:100%;}
	
	}

@media (max-width: 640px){
	.main_visual{}
	.main_visual:after{ display:block; clear:both; content:"";}
	.main_visual_rolling_wrap{ height:420px; }
	
	.main_visual_rolling_wrap:after{content: ""; position: absolute; min-width:100%; bottom:-36px; background:url(../images/main/visual_cover.png) left -250px top 0;}
	
	.main_visual_rolling img{ min-width:100%; width:100%;}
	.main_visual_rolling li{}
	
	.way_wp .slide_arr .slick-arrow.slick-next{ margin-left:0;}
	
	.banner_area_wrap{ padding:0 15px; position:relative;}
	.banner_area { width:100%; height:auto; background: #fff; padding-bottom:50px; margin-top:430px;}
	.main_search_wrap{ position:relative; width:100%; top:auto; margin-top:-60px}
	.banner_item li{ height:437px;}
	.banner_item li img{ height:437px !important;}
	
	.way_wp .img_slide .slick-list{padding-right:0 !important;}
	.way_wp .cont{width:90%;max-width:600px;height:auto;}
	.way_wp .img_slide img{max-width:100%;}

	.way_wp{margin-top:0;padding:40px 0; background:#DEF6EA url("../img/m_main2_bg_1.png") no-repeat;background-position:0 -15px;background-size:100% auto;}
	.way_wp .cloud_1{left:-215px;margin-left:0;margin-top:122px;z-index:2;}
	.way_wp .cloud_1 img{height:140px;}
	.way_wp .cloud_2{right:-210px;top:205px;left:auto;right:-300px;margin-left:0;}
	.way_wp .cloud_2 img{height:100px;}
	.way_wp .lcon{padding:40px 30px;}
	.way_wp .slide_arr{margin-top:30px; margin-left:36%;}
	.way_wp .lcon{float:none;padding-bottom:0; padding-bottom:0; padding:0;}
	.way_wp .lcon h3 {font-size:24px;}
	.way_wp .lcon h3 p{font-size:18px;}
	.way_wp .lcon .txt_slide {height:80px;}
	.way_wp .lcon .txt_slide .sld{font-size:14px;line-height:1.5; padding:20px 15px; width:100% !important;}
	.way_wp .lcon .txt_slide .sld span{font-size:20px;line-height:1.2; padding-left:10px;}
	.way_wp .lcon .txt_slide .sld .pc{display:none;}
	.way_wp .lcon .txt_slide b{font-size:42px;}
	.way_wp .slide_arr .slick-arrow{width:40px;height:40px;background-size:40px !important;}
	.way_wp .rcon{positioN:relative;margin-top:0;padding:40px 90px;right:0;width:100%; padding:0; margin-top:20px;margin-right:0;}
	.way_wp .rcon .slick-slide{margin:0 2px;}
	.way_wp:before{width:100%;}
	
	.way_wp .slide_arr .slick-arrow.slick-prev{ margin-right:10px;}
	
	.main_middle{ margin-bottom:40px; margin-top:560px;}
	
	/* 지표 */
	/*.table_chart_board:before{background:url(../images/main/blue_sky_mver.png) no-repeat right 0 bottom 0; background-size:100% auto;}*/
	.table_chart_board_wrap{ width:100%; float:none; padding:10px; margin-top:0;}
	.table_chart_board thead th{ font-size:14px;}
	.table_chart_board tbody td{ font-size:18px; height:auto; padding:5px 0; line-height:18px;}
	.table_chart_board thead th p{ font-size:11px;}
	.table_chart_board tbody th{ font-size:14px; line-height:18px;}
	.table_chart_board tbody th span{ font-size:13px;}
	.table_chart_board tbody td em{ display:block; font-size:12px;}
	.table_chart_board tbody tr:nth-child(3) td em{ display:inline-block;}
	.table_chart_board tbody th p{ font-size:12px;}
	.table_chart_board tbody td p{ font-size:12px;}
	
	/* 홍보 동영상 */
	.pr_video_list{}
	.pr_video_list li{ width:100%; float:none; margin-right:0; margin-bottom:30px;}
	.pr_video_list li:last-child{ margin-bottom:0;}
	.pr_video_list li img{ width:100%; height:auto;}
	
	/* 기타자료 */
	.etc_data{ margin-top:40px;}
	.etc_data_list > li{ width:100%; float:none; padding:15px 13px; margin-right:0; margin-bottom:20px;}
	.etc_data_list > li:last-child{ margin-bottom:0;}
	
	}