@charset "utf-8";

/************************************************************************
 * 파일명      : media.css
 * 설명        : 메인화면 반응형
 * 작성자      : 박승연
 * 작성일      : 2021.10.12
************************************************************************/

@media (max-width:1400px) {
	.m_cont_layout,
	.m_cont_layout.board {padding: 0 30px;}
	.m_cont_layout.sitemap {padding: 0 30px;} /* 220613 */
    #header .logo {padding-left: 20px;}
	header .lnb .wrap {padding-right: 30px;}
	
    /* 가운데 지표 선택 영역 */
    .m_cont .m_cont_layout.m_index_wrapper {padding: 30px;}
    
    /* 공지사항 + 팝업존 */
    .m_lastSection {background: #e6eaf6;}
    .m_popupzone {display: none;}
    .m_lastSection .m_cont_layout {flex-wrap: nowrap; flex-direction: row-reverse; justify-content: space-between;  padding: 0 30px;}
    
    /* 공지사항 */
    .m_notice {flex-wrap: wrap; width: 49%; height: auto; padding: 20px 0 10px;}
    .m_notice .tit {display: flex; align-items: flex-end; width: 100%; padding-bottom: 13px;}
    .m_notice .tit .tit_txt {width: 100%; padding: 0; background: none;}
    .m_notice ul.notice_list {height: auto; width: 100%; margin: 0 0 20px 0; border-bottom: 2px solid #ccc; border-top: 2px solid #ccc; padding: 10px;}
    .m_notice ul.notice_list li {height: auto; padding: 5px 0; }
    .m_notice ul.notice_list li:before {display: inline-block; content: ''; width: 3px; height: 3px; border-radius: 50%; background: #999; margin-right: 9px;}
    .m_notice ul.notice_list li a {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
    .m_notice .btnmore.no_tab {display: none;}
    .m_notice .tit .btnmore.only_tab {display: block; margin: 0;}
    
    /* 팝업존 */
    .m_popupzone_2 {width: 49%; height: auto; display: block; padding: 20px 0 10px;}
    .m_popupzone_2 .tit {position: relative; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; width: 100%; padding-bottom: 13px;}
    .m_popupzone_2 .tit .tit_txt {font-size: 18px; font-family: 'NotoB'; color:#303030;}
    .m_popupzone_2 .tit .move_btn {}
    .m_popupzone_2 .tit .move_btn button {width:32px; height:32px; background:url('../img/main/pop_btn_prev.png') no-repeat center, #fff; font-size: 0; border:1px solid #d8d8d8; border-radius: 50%; cursor: pointer;}
    .m_popupzone_2 .tit .move_btn button.mvbtn_right {background:url('../img/main/pop_btn_next.png') no-repeat center, #fff; margin-left: 5px;}
    .m_popupzone_2 .pop_display {position: relative; display: flex; flex-wrap: nowrap; justify-content: space-between;  width: 100%; padding: 18px 40px; background: #698fff; box-sizing: border-box; overflow: hidden;}
	.m_popupzone_2 .pop_display .pop_illust {width: 30%; text-align: right; position: relative; z-index: 2;}
    .m_popupzone_2 .pop_display .pop_tit {width: 70%; font-size: 25px; color: #fff; margin-top: 10px;}
    .m_popupzone_2 .pop_display .pop_tit>span {font-size: 16px; color: #ffff00; display: block; padding-top: 5px;}
    .m_popupzone_2 .pop_display .pop_tit>div{margin-top:15px;}
    .m_popupzone_2 .pop_display .pop_tit>div>span {font-size: 23px; color: #ffff00;}
    .m_popupzone_2 .pop_display .more {display: flex; width: 100%; margin-top: 10px; font-size: 14px; color: #fff;}
    .m_popupzone_2 .pop_display .more span {display: inline-block; width: 55px; height: 25px; background: url(../img/main/ico_arrow.png) no-repeat center;}
    .m_popupzone_2 .pop_display .circle {position: absolute; z-index: 0; width: 230px; height: 0; padding-bottom: 230px; border-radius: 50%; background: rgba(138,227,227,0.15);}
    .m_popupzone_2 .pop_display .circle1 {background: rgba(204,204,204,0.15); top: -160px; left: -90px; }
    .m_popupzone_2 .pop_display .circle2 {bottom: -115px; right: -50px; }
    .m_popupzone_2 .pop_display .circle3 {width: 430px; padding-bottom: 430px; bottom: -370px; right: -100px;}
    
    /* 서브 : 사이트맵  (220613) */
/* 	.m_cont_layout.sitemap>ul li.sitemap_list ul li.sitemap_list_item {width: 25%;} */
	
	/* 서브 : 모든지표 목록보기 */
	.m_cont_layout .board_tab {width: 95%;}
	.m_cont_layout .board_tab a {font-size: 16px;}
	
	/* 이용가이드 221025 */
	.intr_main_img, .intr_sub_img { width: 100%; text-align: center; }
	#GuideMain .intr_main_txt { width: 100%; border: 1px solid #ddd; padding: 20px; }
	#menuList .sub_box .intr_sub_txt { width: 100%;  border: 1px solid #ddd; padding: 20px; }
	#menuList .sub_box .intr_sub_txt ul { border-bottom: none; border-top: 1px dotted #ddd; padding: 15px 10px 0; }
}

@media (max-width:980px) {
	
	/* (211104) 추가 */
	#header, .burger_menu .sideBg .side_menu .head {height: 69px;}
		.burger_menu .sideBg .side_menu .head a img {width: 44%;}
    
	/* lnb */
	header .lnb {display: none;}
	
    /* 햄버거 메뉴 */
    #header .center .gnb  {display: flex; align-items: center; width: auto; } /* 220915 */
    #header .gnb .gnb_wrap {display: none;}
    #header .gnb .burger_menu {display: block;}
    #header .burger_menu .sideBg .side_menu li.m_none {display:none;}
    
    /* 메인배경 움직이는 도형 삭제 */
    .main_shape_wrap.active {display: none;}
    .main_bg.index_bg {background:url('../img/main/main_bg01.gif') no-repeat top center; background-size: cover;}
    
    /* 메인 상단 슬로건 ~ 검색창 */
    .main_bg {min-height:541px;}
    .main_shape_bg {height:145px;}
    .main_title {padding-top: 36px;}
    .main_title .slogan {display: none;}
    .main_title .m_search {width:90%;}
    .main_title .m_search .searchbox {width: calc(100% - 170px);}
    .main_title .m_search .searchbox .m_srh_input {padding: 15px 0;}
    .main_title .m_search .searchbox .btnsearch {top: 11px;}
    .main_title .m_search .searchbox button {right:-172px;}
    .main_title .m_search .searchbox button.btn_alllist {height: 58px; background:url('../img/main/ico_plus.gif') #24377b no-repeat 14px 20px; font-size: 13px;}
	
	/* 풋터 - 220919 edit */
    #footer_wrap .m_cont_layout {display: flex; justify-content: center; flex-wrap: wrap; box-sizing: border-box;}
	#footer_wrap .footer_menu {height: auto;}
	#footer_wrap .m_cont_layout.foot_address {text-align: center;}  
	#footer_wrap .foot_address .foot_logo { margin-right: 0; }
	.footer_menu .f_site  { display: none; }
	.m_f_site_wrap { display: flex; justify-content: center; width: 100%; background: #1e1e1f; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
	.m_f_site { position: relative;  width: 280px; height: 47px; box-sizing: border-box; }
	.m_f_site .tog_btn { display: block; color: #fff; font-size: 15px; height: 47px; line-height: 47px; text-align: left; padding-left: 20px; border: 1px solid rgba(255,255,255,0.1); border-top: none; border-bottom: none; box-sizing: border-box;}
	.m_f_site .tog_btn:hover {background: #29292c;}
	.m_f_site .tog_btn:after { content: ''; display: block; width: 5px; height: 5px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg); border-right: 2px solid #fff; border-bottom: 2px solid #fff; }
	.m_f_site .tog_btn.clicked:after { top: 53%; transform: translateY(-50%) rotate(-135deg); }
	.m_f_site ul { position: absolute; top: 47px; width: 100%; display: none; background: #1e1e1f; border: 1px solid rgba(255,255,255,0.1);; box-sizing: border-box; z-index: 1; }
	.m_f_site ul li a { color: #fff; font-size: 15px; width: 100%; display: block; height: 47px; line-height: 47px; text-align: left; padding-left: 20px; box-sizing: border-box; }
	.m_f_site ul li:not(:last-of-type) a {border-bottom: 1px solid rgba(255,255,255,0.1);}
	.m_f_site ul li a:hover { text-decoration: underline; }
	
	/* 211126 박승연 추가 */
	#footer_wrap .copyright {padding:15px 0 0 0;}
	#footer_wrap .foot_address .foot_logo {padding-bottom:50px;}
	
	
	/* 서브 헤드 */
	.sub_head .sub_tit {font-size: 30px;}
	.sub_head .breadcrumbs ol.breadcrumbs_list li.breadcrumbs_item a {font-size: 14px;}
	
	/* 모든지표 목록보기 221111 Edit */
	.m_cont_layout.board .board_table thead tr th.m_none,
	.m_cont_layout.board .board_table tbody tr td.m_none {display: none;}
	.m_cont_layout.board .board_table thead tr th.num,
	.m_cont_layout.board .board_table tbody tr td.num {width: 100px;}
	.m_cont_layout.board .board_table thead tr th.tit,
	.m_cont_layout.board .board_table tbody tr td.tit {width: calc(100% - 100px);}
	
	
	/* 나의 관심지표 */
	.m_cont_layout .tree_layout,
	.m_cont_layout .my_index {width: 100%;}
	.MySttsBoard-table colgroup col.colchkBox{width:10%}
	.MySttsBoard-table colgroup col.cate{display:none}
	.MySttsBoard-table thead tr th.offcCol{display:none;}
	.MySttsBoard-table tbody td.row2{display:none}
 	.contents .my_index .s_index:first-of-type {margin-top: 30px;}
 	
 	/* 사이트맵 (220613) */
    .m_cont_layout.sitemap .sitemap {flex-wrap: wrap; justify-content: flex-start;}
    .m_cont_layout.sitemap .sitemap>li {width: 32%; margin-right: 0;}
    .m_cont_layout.sitemap .sitemap>li:not(:nth-of-type(3n)) {margin-right: 2%;}
	.m_cont_layout.sitemap >ul > li.home.block {margin-left: 20px;border-left: 1px solid #8da6cd;}
	.m_cont_layout.sitemap .sitemap_tit {margin-top: 15px;}
	
	/*마이페이지  엑셀 버튼*/
	.btn_excelDown{right: 10px;top: 40px; display: inline-block;padding: 5px 13px;background: #394d96;font-size: 7px;color: #fff;transition: .2s;}
	/*.btn_excelDown span:after{content:'다운';}*/
	
	/* 이벤트 (220816) */
	.event_lists ul li a {padding: 25px 0;}
    .event_lists ul li a p.tit {width: calc(100% - 330px); font-size: 17px;}
    .event_lists ul li a p.tit span.date {font-size: 14px;}
    .event_lists ul li a div.img {width: 200px; height: 63px;}
	.event_banner { background-image: none; background:#f3f4f6; width: 100%; height: 150px; }
	.event_banner .title { padding-top: 65px; font-size: 20px; }
	
	/* 운영정책 221115 SY Add */
	.confirm_cntnt.list tr { width: 100%; }
	.confirm_cntnt li { font-size: 15px; }
}

@media (max-width:900px) {
    /* 가운데 지표 선택 영역 */
    .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box {padding: 12px;}
    .illust_wrap {padding: 15px 0 10px;}
    .illust_wrap img {width: 50%;}
    .tit_wrap {padding-bottom: 5px;}
    .btn_bnr1 .tit_wrap .tit, .btn_bnr2 .tit_wrap .tit,
    .index_bnr .tit_wrap .tit{font-size: 16px;}
    .btn_bnr1 .tit_wrap .tit span, .btn_bnr2 .tit_wrap .tit span {font-size: 15px;}
	
	/* 서브 : 모든지표 목록보기 */
	.m_cont_layout.board .board_btn {flex-wrap: wrap;}
	.m_cont_layout.board .board_btn .btn_wrap {width: 100%;}
	.m_cont_layout.board .board_btn .btn_wrap1 {margin-bottom: 15px;}
	.m_cont_layout.board .board_search .board_search_wrap {height: 30px;}
	.m_cont_layout.board .board_search .board_search_wrap input {padding: 3px 12px; font-size: 13px;}
	.m_cont_layout.board .board_search .board_search_wrap select,
	.m_cont_layout.board .board_search .board_search_wrap a.search_btn {line-height: 30px; font-size: 13px;}
	.m_cont_layout.board .board_pager span,
	.m_cont_layout.board .board_pager ol li {width: 32px; height: 32px; margin-bottom: 5px;}
	
	/* 서브 : 소개페이지 (220929) */
	.m_cont_layout.intro .intro_cont .intro_img { overflow-x:  auto; }
}

@media (max-width:785px) {
	
	/* 이용가이드 221025 */
	.intr_img { width: 100%; }
}
	

@media (max-width:768px) {
    /* 가운데 지표 선택 영역 */
    .m_cont .m_cont_layout.m_index_wrapper .m_index,
    .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box {flex-wrap: wrap;}
    .m_cont .m_cont_layout.m_index_wrapper .m_index .btn_bnr1,
    .m_cont .m_cont_layout.m_index_wrapper .m_index .btn_bnr2,
    .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box,
    .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box .index_bnr,
    .m_cont .m_cont_layout.m_index_wrapper .m_index .btn_bnr1 a,
    .m_cont .m_cont_layout.m_index_wrapper .m_index .btn_bnr2 a,
    .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box .index_bnr a 
    {display: flex; width: 100%;}
    .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box {margin: 8% 0;}
    .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box .index_bnr:nth-of-type(2) {margin: 3% 0;}
    .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box {position: relative; background: none; border-radius: 0; padding: 0; }
    .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box:before {position: absolute; width: calc(100% + 60px); height: 112%; left: -30px; top:-6%; display: block; content: ''; background: rgba(128,168,249,0.4);}
    .illust_wrap {display: flex; justify-content: center; align-items: center; flex: 1; padding: 15px 0;}
    .tit_wrap {position: relative; display: flex; align-items: center;flex: 2; text-align: left; }
    .tit_wrap .tit { }
    .tit_wrap .btn_go {position: absolute; right: 5%; top: 50%; transform: translate(-50%, -50%);}
    .btn_bnr1 .tit_wrap .tit, .btn_bnr2 .tit_wrap .tit,
    .index_bnr .tit_wrap .tit {font-size: 17px;}
    .btn_bnr1 .tit_wrap .tit span, .btn_bnr2 .tit_wrap .tit span  {font-size: 16px;}
     
    /* 공지사항 + 팝업존 */
    .m_lastSection .m_cont_layout {flex-wrap: wrap;}
    
	/* 공지사항 */
    .m_notice {position: relative; width: 100%; flex-wrap: nowrap; align-items: center; padding: 15px 0; margin-top: 10px; z-index: 0; overflow: visible;}
	.m_notice:before {position: absolute; display: block; content: ''; width: calc(100% + 60px); top: 0; left: -30px; background: #fff; height: 100%; z-index: -1;}
	.m_notice .tit {width: auto; padding-bottom: 0;}
    .m_notice ul.notice_list {border: none; margin-bottom: 0; padding: 0;}
    .m_notice ul.notice_list li {padding: 0 0 0 15px; font-size: 15px; }
    .m_notice ul.notice_list li:not(:nth-of-type(1)) {display: none;}
    .m_notice ul.notice_list li:before {display: none;}
    .m_notice .btnmore.no_tab {display: block; white-space: nowrap; font-size: 0; padding:0 15px; margin: 0;}
    .m_notice .tit .btnmore.only_tab {display: none; }
	
	/* 팝업존 */
    .m_popupzone_2 {width: 100%; display: block;}
    .m_popupzone_2 .tit {display: none;}
    
	/* 서브 : 모든지표 목록보기 */
	.m_cont_layout .board_tab a {font-size: 15px;}
	.excelicon{display:none;}

}

@media (max-width:680px) {
    /* 서브 : 모든지표 목록보기 */
	.m_cont_layout .board_tab {display: none;}
	.m_cont_layout .board_select {display: flex; justify-content: center; align-items: center;}
	
	.compareIdxBody{display:none;}
	.m_cont_layout.compareIdx{display:block;}
	
	/* 사이트맵 (220613) */
	.m_cont_layout.sitemap .sitemap_tit {font-size: 24px;}
    .m_cont_layout.sitemap .sitemap>li {width: 48%;}
	.m_cont_layout.sitemap .sitemap>li:not(:nth-of-type(3n)){margin-right: 0;}
    .m_cont_layout.sitemap .sitemap>li:not(:nth-of-type(2n)) {margin-right: 4%;}
}

@media (max-width:650px) {
	/* 서브 : 소개페이지 (220929) */
	.m_cont_layout.intro .intro_cont .intro_img img { width: 100%; }
	
	/* 운영정책 221115 SY Add */
	.top_confirm_cntnt table.confirm_cntnt td li.m1,
	.top_confirm_cntnt table.confirm_cntnt td li.m2,
	.top_confirm_cntnt table.confirm_cntnt td li.m3,
	.top_confirm_cntnt table.confirm_cntnt td li.m4,
	.top_confirm_cntnt table.confirm_cntnt td li.m5,
	.top_confirm_cntnt table.confirm_cntnt td li.m6 { background-size: 80px; }
	
}

@media (max-width:600px) {
	/* 모바일 구간 패딩 좌우 조절 */
	.m_cont_layout.board,
	.m_cont_layout {padding: 0 20px;}
	.m_cont_layout.m_title_layout {padding: 0;}
	.m_cont .m_cont_layout.m_index_wrapper {padding: 20px;}
	.m_lastSection .m_cont_layout {padding: 0 20px;}
	.m_cont .m_cont_layout.m_index_wrapper .m_index .index_box {margin: 10% 0;}
	/*(1029)추가*/
	.m_notice:before, .m_cont .m_cont_layout.m_index_wrapper .m_index .index_box:before{width: calc(100% + 50px);}
	
    /* 메인 상단 슬로건 ~ 검색창 */
    .main_bg {min-height:541px;}
    .main_shape_bg {height:104px;}
    .main_title {padding-top: 21px;}
    .main_title .slogan {display: none;}
    .main_title .m_search {width:90%;}
    .main_title .m_search .searchbox {width: calc(100% - 164px); padding: 0 50px 0 15px;}
    .main_title .m_search .searchbox .m_srh_input {padding: 8px 0; font-size: 14px;}
    .main_title .m_search .searchbox .btnsearch {top: 8px; right: 5px;}
    .main_title .m_search .searchbox .btnsearch img {width: 70%;}
    .main_title .m_search .searchbox button {right:-166px;}
    .main_title .m_search .searchbox button.btn_alllist {height: 45px; background:url('../img/main/ico_plus.gif') #24377b no-repeat 11px 13px; font-size: 13px; white-space: nowrap; font-size: 12px;}
	
	/* 풋터 */
	#footer_wrap .m_cont_layout.foot_menu {padding: 0;} 
	#footer_wrap .footer_menu a.ftm_tit,
    #footer_wrap .address {font-size: 15px;}
	#footer_wrap .copyright {font-size: 14px;}
	
	/* 서브 : 사이트맵 (220613) */
/* 	.m_cont_layout.sitemap>ul li.sitemap_list ul {flex-wrap: wrap;} */
/* 	.m_cont_layout.sitemap>ul li.sitemap_list ul li.sitemap_list_item:first-of-type, */
/* 	.m_cont_layout.sitemap>ul li.sitemap_list ul li.sitemap_list_item {width: 50%; padding-left: 40px; margin-bottom: 15px;} */
	
	/* 서브 헤드 */
	#subContainer .sub_bg .sub_head:before {background: url(../img/main/sub_head_figure2.png) no-repeat center; background-size: cover;}
	
	/* 서브 : 모든지표 목록보기 */
	.m_cont_layout.board .board_search {margin: 20px 0;}
	.m_cont_layout.board .board_btn .btn_wrap a {margin-bottom: 5px;}
	.m_cont_layout .board_select {top: -80px;}
	
	/* 이용가이드 221025 */
	#GuideMain { padding: 30px 0; }
	#menuList { padding: 30px 0 0; }
	.guide_tab { height: 43px; }
	.guide_tab ul { height: 43px; }
	.guide_tab ul li { height: 43px; }
	.guide_tab ul li a { line-height: 43px; }
	#menuList .sub_box .intr_sub_txt ul li .tit { width: 100%; }
	#menuList .sub_box .intr_sub_txt ul li .exp { width: 100%; }
	
}

@media (max-width:570px) {
	#footer_wrap .footer_menu a.ftm_tit {width: 50%; text-align: center; box-sizing: border-box; white-space: nowrap;} 
	#footer_wrap .footer_menu a.ftm_tit:nth-child(3) {background:none;}
}

@media (max-width:480px) {
	.m_popupzone_2 .pop_display {padding: 18px 20px;}
	
	/* 서브 헤드 */
	.sub_head .sub_tit {padding: 18px 0 50px; font-size: 24px;}
	.sub_head .breadcrumbs ol.breadcrumbs_list li.breadcrumbs_item a {font-size: 13px;}
	
	/* 게시판 내부 */
	.contents .board_box {margin: 40px 0;}
	.contents .board_box .board_table tr th {padding: 15px 20px 15px 30px;}
	.contents .board_box .btn_right a {font-size: 14px;}
	.contents .board_box ul {margin-top: 20px;}
	.contents .board_box ul li {font-size: 14px; padding: 13px 30px;}
	.contents .board_box ul li a {padding-left: 30px;}
	
	/* 나의 관심지표 */
	.m_cont_layout .tree_layout {display: none;}
	.contents .my_index .s_index .lists {height: 120px;}
	.m_cont_layout.myIndex {margin-top: 0;}
	.contents .my_index .s_index {padding: 20px 23px;}
	.contents .my_index .s_index h3.title {font-size: 16px;}
	.contents .my_index .s_index .group li i {font-size: 17px;}
	.contents .my_index .s_index .group li a {font-size: 13px;}
	.contents .my_index .s_index .group a {line-height: 1.9;}
	.contents .my_index .s_index .btn_Area a.btn {font-size: 11px;}
	.contents .my_index .excel_btn {display: none;}
	
	/* 이벤트 (220816) */
	.event_tab { height: 45px; }
	.event_tab ul { height: 45px; }
	.event_tab ul li { height: 45px; }
	.event_tab ul li a { font-size: 15px; line-height: 45px;}
	.event_lists ul li a {padding: 15px 0;}
    .event_lists ul li a p.tit {display: none;}
    .event_lists ul li a p.tit span.date {font-size: 13px;}
    .event_lists ul li a div.img {width: 150px; height:48px;}
    
    /* 운영정책 221115 SY Add */
	.confirm_cntnt.list td.head { width: 100px; }
}

@media (max-width:400px) {
    .burger_menu .sideBg .side_menu {right: -100%; width: 100%;}
}

@media (max-width:300px) {
	.m_f_site { width: 100%; border-right: none; border-left: none; } /* 220919 Add */
}