:root{ --font_OMT:'OMT'; --font_13:1.3rem; --font_14:1.4rem; --font_15:1.5rem; --font_16:1.6rem; --font_17:1.7rem; --font_18:1.8rem; --font_19:1.9rem; --font_20:2.0rem; --font_22:2.2rem; --font_24:2.4rem; --font_26:2.6rem; --font_42:4.2rem; --col_333:#333; --col_666:#666; --col_999:#999; --col_aaa:#aaa; --col_red:#e6002d; --col_yellow:#ffba00; --col_pink:#ff0096; --col_green:#007b50; --col_main_green:#007b8b; --col_darkgreen:#00444c; --col_white:#fff; --col_black:#333; --col_lightgray0:#dae2e9; --col_lightgray1:#f4f6f8; --col_lightgray2:#ecf0f4; --col_darkgray:#65707c; --col_lightyellow:#fffdea; --line_color_01:#d5d5d5; --line_color_02:#dae2e9; --col_level_bg_01:#e5f3ff; --col_level_bg_02:#fffdea; --col_level_bg_03:#feeddd; --col_level_bg_04:#ffe9e9; } :focus-visible{border:4px dotted red} /*body{height:100%} #wrap{height: 100%;}*/ /*팝업*/ .overlay {display: none;} .overlay__flex {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.55);display: flex;align-items: center;justify-content: center;z-index: 9999;} /* 팝업 박스 */ .popup {width: 60rem;;border-radius: 6px;box-shadow: 0 10px 25px rgba(0,0,0,.25);overflow: hidden;position: absolute;/* ← 이동을 위해 absolute */} /* 헤더(드래그 영역) */ .popup-header {background: var(--col_main_green);color: #fff;padding: 1.5rem;font-size: 1.6rem;font-weight: 600;cursor: move;/* 드래그 느낌 */display: flex;justify-content: space-between;align-items: center;} .popup-header .notice_tit{font-size: 2.2rem;} /* 닫기 버튼 */ .close-btn {border: none;background: transparent;color: #fff;font-size: 22px;cursor: pointer;} /* 내용 */ .popup-body {padding: 18px 20px;line-height: 1.6;background: #fff} .popup-footer {display: flex;justify-content: flex-end;gap: 8px;padding: 12px 16px;background: #f4f6f8;border-top: 1px solid #e2e6eb;} .btn-oneday {padding: 8px 14px;border-radius: 6px;border: 1px solid var(--col_main_green);background: var(--col_main_green);color: #fff;cursor: pointer;font-size: 13px;} .btn-close {padding: 8px 14px;border-radius: 6px;border: 1px solid #b0b3b8;background: #f0f1f3;color: #333;cursor: pointer;font-size: 13px;} .btn-oneday:hover { opacity: .9; } .btn-close:hover { background: #e6e7ea;} /*공통*/ .box1400{width:100%;max-width: 1400px;margin:0 auto;} /*input{border-radius: 5px;border:1px solid var(--color_lightgray);width:100%;font-family: 'Gmarket';font-weight: 500;}*/ .input_search:focus{outline:1px solid #023b95;border:0} button{border-radius: 5px;background: transparent;} .position-relative{position: relative;} h2{font-size: 3.6rem;} .btn{width:100%;border-radius: 0.5rem;color: #fff;} .btn_green{background: var(--col_main_green);font-size: 1.6rem;} /*주메뉴 바로가기, 본문바로가기*/ #skip a{position: absolute;top: -40px;z-index: 9999;display: block;width: 100%;height: 40px;font-weight: 600;color: white;line-height: 40px;text-align: center;background-color: var(--col_green);} /*Top_로고*/ #header{position: relative;/*border-bottom:1px solid var(--line_color_01);*/} .headTop {display: flex;} .headTop .head_box{display: flex;align-items: center;justify-content: center;height:8rem;margin-right: 7.5rem;} /*로고*/ .headTop .head_box .ffs_logo{display: flex;align-items: center;font-size: 0;} /*검색*/ .total_search_box{position: relative;;display: flex;align-items: center;width: 100%;margin-right: 2rem;} .total_search_box form{width: 100%;} .total_search_box .input_search{width: 100%;height:5rem;border: 2px solid #333;border-radius: 2.5rem;text-indent: 1rem;} .total_search_box .btn_search{position: absolute;right:0;background:url(../images/main/icon_search_w.svg)#333 no-repeat center center/2.2rem ;width:5rem;height:5rem;border-radius: 25rem;} /*M_검색*/ .m_search_box{display: none;position: relative;align-items: center;width: calc(100% - 2rem);margin:0 auto} .m_search_box form{width: 100%;height: 100%;display: flex;align-items: center;} .m_search_box .input_search{width: 100%;height:5rem;border: 0px solid #333;border-radius: 2.5rem;text-indent: 1rem;background: rgba(255, 255, 255, 1);} .m_search_box .btn_search{position: absolute;right:0;background:url(../images/main/icon_search_w.svg)#333 no-repeat center center/2.2rem ;width:5rem;height:5rem;border-radius: 25rem;margin-right: 0;} /*모바일 메뉴버튼*/ .m_menu_box{display:flex;align-items: center;margin-left: auto;cursor: pointer;} /* 모달 오버레이 */ .modal_overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;justify-content: center;align-items: start;} .modal_overlay.active {display: flex;} .modal_overlay.active .m_search_box .btn_search_submit{position: absolute;right:0;background:url(../images/main/icon_search_w.svg)#333 no-repeat center center/2.2rem ;width:5rem;height:5rem;border-radius: 25rem;} /*메뉴*/ .Menu{position: relative;display: flex;align-items: center;justify-content: flex-end;width: 100%;} .menu_box{position: relative;display: flex;width:100%;height: 100%;} #gnb {position:relative;z-index: 20;left: 0;} #gnb > ul {display: flex;} #gnb > ul > li {box-sizing: border-box;} #gnb > ul > li > a {display: block;text-decoration: none;position: relative;} #gnb > ul > li > a {display: block;text-align: center;font-size: 2.2rem;font-weight: 700;padding:2.6rem 0rem;min-width: 19rem;color: #333;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;white-space: nowrap;border: 1px solid transparent;} #gnb > ul > li > a.on{color: var(--col_main_green);} #gnb > ul > li > a.on::after{content: '';display: block;position: absolute;left:calc(50% - 0.5rem);top:1rem;width:1rem;height:1rem;border-radius: 1rem;background: var(--col_main_green);} /*서브메뉴*/ #gnb > ul > li > a.ov, #gnb > ul > li > a:hover, #gnb > ul > li > a:active, #gnb > ul > li > a:focus {color:#007b8b;} #gnb > ul > li > a.ov::before{content: '';display: block;position: absolute;left:50%;bottom:-1px;width:0;height:0;border-bottom:1rem solid #007b8b;border-right: 1rem solid transparent;border-left:1rem solid transparent;transform:translate(-50% , 0) ;} #gnb > ul > li > ul {position: absolute;padding: 0;padding:1.5rem 0 0 0;display: none;overflow: hidden;-webkit-opacity: 0;-moz-opacity: 0;opacity: 0;filter: alpha(opacity=0);} #gnb > ul > li > ul > li {float: none;width: auto;} #gnb > ul > li > ul > li:first-child {margin-top: 0;} #gnb > ul > li > ul > li > a {display:block;text-align: center;font-size: 1.8rem;font-weight: 500;padding:1rem 0rem;margin-bottom:0.8rem; min-width:18.9rem;height: auto;color: #464646;background: none;letter-spacing: -0.4px;-webkit-transition: all .0s ease;-moz-transition: all .0s ease;-ms-transition: all .0s ease;-o-transition: all .0s ease;transition: all .0s ease;border-radius: 0.5rem;} #gnb > ul > li > ul > li:last-child > a{margin-bottom: 0;} #gnb > ul > li > ul > li > a > em {display: block;} #gnb > ul > li > ul > li > a.ov,#gnb > ul > li > ul > li > a:hover,#gnb > ul > li > ul > li > a:active,#gnb > ul > li > ul > li > a:focus {background: #007b8b;color: #fff;} #header .bg {position:relative;width: 100%;display: none;background: #fafafa;position: absolute;left: 0;top:8rem;z-index:10;border-top: 2px solid #007b8b;border-bottom: 1px solid #cecece;-webkit-opacity: 0.98;-moz-opacity: 0.98;opacity: 0.98;filter: alpha(opacity=98);} #header .sub_img{display: flex;align-items: end;width:26.5rem;height:100%;background: #f4f4f4;padding-bottom: 2rem;} #header .bg_gray{width:20%;background: #f4f4f4;height:100%;position:absolute;top:0;left:0;z-index: -1;} #skipToContent {position: relative;overflow: hidden;width: 100%;margin: 0 auto;z-index: 100;padding: 0;display: none;} /*모바일 메뉴*/ header .m_menu{position: fixed;z-index: 1;top: 0px;left: -230px;z-index: 999;width: 230px;height: 100%;background: rgba(0, 0, 0, .85);overflow-x: hidden;transition: all ease .6s;-webkit-transition: all ease .6s;-o-transition: all ease .6s;-moz-transition: all ease .6s;-ms-transition: all ease .6s;} header .m_menu.show{left:0px} header .m_menu .closebtn {display: flex;color:#fff;height: 4rem;;margin:0 10px;} header .m_menu ul li{padding: 10px 10px 10px 30px;margin: 0 10px;border-bottom: 1px solid rgba(255, 255, 255, 0.5);overflow: hidden;} header .m_menu ul li.sub_tit{font-size: 14px;padding-left:60px} header .m_menu ul li.sub_tit a{display: block;font-size: 16px;line-height: 24px;} header .m_menu ul li a{font-size: 18px;color: #fff;transition: 0.3s;text-wrap: nowrap;} header .m_menu .closebtn a{font-size: 35px;color:#fff;position: absolute;right:10px; top:00px} /*Content_wrap*/ .contents_wrap{position: relative;} .contents_wrap .content_wrap{position: relative;} /*section_1*/ .section_1{position: relative;;/*min-height: 40rem;*/background: url(../images/main/main_bg.png)no-repeat center center/cover;overflow: hidden;} .section_1 .prev-btn{background: url(../images/main/arrow_b_left.png)no-repeat left center;width: 3.5rem;margin:0 8rem 0 4.5rem} .section_1 .prev-btn button{display: block;width: 100%;height: 100%;} .section_1 .next-btn{background: url(../images/main/arrow_b_right.png)no-repeat right center;width: 3.5rem;margin:0 4.5rem 0 8rem} .section_1 .next-btn button{display: block;width: 100%;height: 100%;} .section_1 .slider_wrap{width: calc(100% - 32rem);overflow: hidden;} .section_1 .slider{display: flex;height: 100%;transition: transform 0.6s ease-in-out;} .section_1 .slider .slide{display: flex;flex-wrap: wrap;justify-content: space-between;width:100%;min-width: 100%;height:100%;flex-shrink: 0;color: #fff;} .section_1 .slider .slide.active {transform: translateX(0);} .section_1 .slider .slide.prev {transform: translateX(-100%);} .section_1 .slide .stat_box{width:48rem;margin:5.0rem 0 4.0rem 0;} .section_1 .slide .stat_box h1{font-size: 4.2rem;font-weight: 600;margin-bottom: 1.5rem;} .section_1 .slide .stat_box .txt1{font-size: 2.2rem;margin-bottom: 1.0rem;} .section_1 .slide .stat_box .txt2{font-size: 1.7rem;margin-bottom: 3rem;} .section_1 .slide .stat_box .stat_num ul{display: flex;} .section_1 .slide .stat_box .stat_num ul li{flex:1;margin-right:2rem;} .section_1 .slide .stat_box .stat_num ul li dl dt{width:auto;font-size: 1.8rem;text-align: center;background: #fff;color:#333;padding:1rem;border-radius: 2rem;white-space: nowrap;} .section_1 .slide .stat_box .stat_num ul li dl dd{font-size: 3rem;font-weight: 600;text-align: center;margin-top: 0.5rem;white-space: nowrap;} .section_1 .slide .stat_box .stat_num ul li dl dd span{font-size: 2rem;} .section_1 .slide .slider-dots{display: flex;align-items: center;justify-content: center;width:100%;height: 5rem;} /* 인디케이터 (점) */ .slider-dots {display: flex;align-items: center;justify-content: center;width:100%;gap: 10px;padding:1.0rem 0 4.2rem} .dot {width: 12px;height: 12px;border-radius: 50%;background: rgba(255, 255, 255, 0.5);cursor: pointer;transition: all 0.3s ease;} .dot:hover {background: rgba(255, 255, 255, 0.8);transform: scale(1.2);} .dot.active {background: white;width: 32px;border-radius: 6px;} .quick_menu{position: absolute;right:-10rem;top:0;width: 10rem;height: 100%;} .quick_menu ul{display: flex;flex-direction: column;height: 100%;} .quick_menu ul li{flex: 1;margin-bottom: 1px;} .quick_menu ul li a{display: flex;align-items: center;justify-content: center;font-size: 1.4rem;height:100%;background: rgba(0, 0, 0, .5);color: #fff;} .quick_menu ul li:nth-of-type(1) a span::before{content: '';display: flex;justify-content: center;background: url(../images/main/icon_sidemenu_01.png)no-repeat center center;width:100%;height:3rem;margin-bottom: 1rem;} .quick_menu ul li:nth-of-type(2) a span::before{content: '';display: flex;justify-content: center;background: url(../images/main/icon_sidemenu_02.png)no-repeat center center;width:100%;height:3rem;margin-bottom: 1rem;} .quick_menu ul li:nth-of-type(3) a span::before{content: '';display: flex;justify-content: center;background: url(../images/main/icon_sidemenu_03.png)no-repeat center center;width:100%;height:3rem;margin-bottom: 1rem;} .quick_menu ul li:nth-of-type(4) a span::before{content: '';display: flex;justify-content: center;background: url(../images/main/icon_sidemenu_04.png)no-repeat center center;width:100%;height:3rem;margin-bottom: 1rem;} /*section_2*/ .section_2{background: #f4f4f4;} .section_2 .tit{font-size: 2.6rem;font-weight:600;padding:4rem 0 2rem} .section_2 .stat_item_box{padding-bottom:5.5rem} .section_2 .stat_item_box ul{display: flex;flex-wrap: wrap;} .section_2 .stat_item_box ul li {width: calc(14.285714% - 3.0rem);height: 15rem;background: #fff;border-radius: 0.5rem;margin:0 3.5rem 2rem 0;transition: all 0.2s ease;} .section_2 .stat_item_box ul li:hover{background:#007b8b;-webkit-box-shadow:3px 3px 5px 2px rgba(0,0,0,0.3); box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001; transform: translateY(-0.5rem);} .section_2 .stat_item_box ul li:hover a{color: #fff;} .section_2 .stat_item_box ul li:nth-of-type(7n){margin-right:0} .section_2 .stat_item_box ul li a{position: relative;;display: block;height:100%;color: #333;text-align: center;text-decoration: none; text-align: center; text-transform: uppercase;} .section_2 .stat_item_box ul li a div{display: flex;position: absolute;top: 1rem;right: 1rem;text-align: right;} .section_2 .stat_item_box ul li a div img{margin-left:0.2rem} .section_2 .stat_item_box ul li a span{/*white-space: nowrap;*/} /* .section_2 .stat_item_box ul li:nth-of-type(1) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_04.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(2) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_01.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(3) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_05.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(4) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_10.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(5) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_08.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(6) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_07.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(7) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_11.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(8) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_13.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(9) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_09.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(10) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_02.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(11) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_06.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(12) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_02.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(13) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_12.png)no-repeat center 67%;} .section_2 .stat_item_box ul li:nth-of-type(14) a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_14.png)no-repeat center 67%;} */ .section_2 .stat_item_box ul li.iconLi35 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_04.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi15 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_01.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi44 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_12.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi41 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_10.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi40 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_08.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi39 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_07.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi43 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_11.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi25602 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_13.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi38 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_09.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi29 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_02.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi46 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_06.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi30 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_03.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLi45 a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_05.png)no-repeat center 67%;} .section_2 .stat_item_box ul li.iconLiEtc a span::before{content: '';display: block;width: 100%;height: 69%;background: url(../images/main/icon_item_14.png)no-repeat center 67%;} /*section_3*/ .section_3 .section_box{display: flex;justify-content: space-between;} /*공지사항*/ .section_3 .section_box .notice_box{width:45%;padding:4rem 0 6rem 0} .section_3 .section_box .notice_box .tit{display: flex;align-items: center;font-size: 2.6rem;font-weight:600;padding-bottom:1.5rem;border-bottom:1px solid #333} .section_3 .section_box .notice_box .tit .btn_more{position: relative;;display: inline-block;font-size: 1.8rem;margin-left:auto;padding-right:4rem;cursor: pointer;} .section_3 .section_box .notice_box .tit .btn_more::after{content: '';display: block;background: url(../images/main/icon_plus.png)no-repeat center center;width:2rem;height: 2rem;position: absolute;right: 1rem;top:0} .section_3 .section_box .notice_box .notice_list{padding-top:1.5rem} .section_3 .section_box .notice_box .notice_list ul li{padding:1rem 0} .section_3 .section_box .notice_box .notice_list ul li a{position: relative;;display: flex;font-size: 1.7rem;color: #333;padding:0 1rem 0 2rem;} .section_3 .section_box .notice_box .notice_list ul li a:hover span.txt{border-bottom:1px solid #333} .section_3 .section_box .notice_box .notice_list ul li a::before{content: '';display: block;width:0.5rem;height:0.5rem;background: #666666;position: absolute;left: 0.5rem;top:0.8rem;} .section_3 .section_box .notice_box .notice_list ul li a .txt{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin-right:1rem;height: 2.3rem;} .section_3 .section_box .notice_box .notice_list ul li a .date{margin-left:auto;color: #888888;white-space: nowrap;} /*통계보고서*/ .section_3 .section_box .report_box{width:45%;padding:4rem 0 6rem 0} .section_3 .section_box .report_box .tit{display: flex;align-items: center;font-size: 2.6rem;font-weight:600;padding-bottom:1.5rem;} .section_3 .section_box .report_box ul{display: flex;flex-wrap: wrap;} .section_3 .section_box .report_box ul li{width:calc(33.333333% - 1rem);margin: 0 1.5rem 1rem 0;} .section_3 .section_box .report_box ul li:nth-of-type(3n){margin-right: 0;} .section_3 .section_box .report_box ul li a{position: relative;display: flex;align-items: center;justify-content: center;background: #f4f4f4;border: 1px solid #d5d5d5;border-radius: 0.5rem;font-size: 1.7rem;color: #333;padding:1.2rem;text-wrap: nowrap;} .section_3 .section_box .report_box ul li a:hover{background: #e0e0e0;border:1px solid #ccc} /*------------------------------------------------------------------------------------*/ /*footer*/ footer {width:100%;overflow: hidden;} footer .footer_top {border-top:1px solid #cccccc} footer .footer_top .banner-container{display: flex;align-items: center;height: 9rem;} footer .footer_top .banner-container .banner-slider{flex:1;width:calc(100% - 9rem);height:100%;overflow: hidden;} /* footer .footer_top .banner-container .banner-slider ul.banner-wrapper{display: flex;gap:1.6rem;height: 100%;transition: transform 0.3s ease;} */ footer .footer_top .banner-container .banner-slider ul.banner-wrapper{display: flex;gap:1.6rem;height: 100%;} footer .footer_top .banner-container .banner-slider ul li{flex: 0 0 auto;width:calc((100% / 5) - 1.6rem);text-align: center;height: 100%;font-size: 0;} footer .footer_top .banner-container .banner-slider ul li a{display: block;width:100%;height: 100%;} footer .footer_top .banner-container .banner-slider ul li:nth-of-type(1){background: url(../images/main/logo_forest.png)no-repeat center center}/*산림청*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(2){background: url(../images/main/logo_mafra.png)no-repeat center center}/*농림축산식품부*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(3){background: url(../images/main/logo_ansk.png)no-repeat center center}/*국가데이터처*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(4){background: url(../images/main/logo_kofpi.png)no-repeat center center}/*한국임업진흥원*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(5){background: url(../images/main/logo_kosis.png)no-repeat center center}/*KOSIS*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(6){background: url(../images/main/logo_sgis.png)no-repeat center center}/*통계지리정보서비스*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(7){background: url(../images/main/logo_mdis.png)no-repeat center center}/*MDIS*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(8){background: url(../images/main/logo_k-stat.png)no-repeat center center}/*통계설명자료*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(9){background:url(../images/main/logo_kass.png)no-repeat center center/ auto 2.5rem}/*국가농식품통계서비스*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(10){background:url(../images/main/logo_molit.png)no-repeat center center/auto 3.4rem}/*국토교통 통계누리*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(11){background:url(../images/main/logo_ecos.png)no-repeat center center/auto 1.7rem}/*한국은행 경제통계시스템*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(12){background: url(../images/main/logo_kma.png)no-repeat center center}/*기상자료개방포털*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(13){background:url(../images/main/logo_fpdis.png)no-repeat center center/auto 3rem}/*임산물유통정보시스템*/ footer .footer_top .banner-container .banner-slider ul li:nth-of-type(14){background: url(../images/main/logo_nong.png)no-repeat center center}/*농넷*/ footer .footer_top .banner-container .banner-prev{width:4.5rem;height:100%;background: url(../images/main/icon_arrow_left.svg)no-repeat center center/ 2rem;} footer .footer_top .banner-container .banner-next{width:4.5rem;height:100%;background: url(../images/main/icon_arrow_right.svg)no-repeat center center/ 2rem;} footer .footer_middle{border-top:1px solid #cccccc} footer .footer_middle .work_link_box ul{display: flex;} footer .footer_middle .work_link_box ul li{display: flex;width:20rem;border-left:1px solid #ccc;height:5rem;padding:0 1rem;} footer .footer_middle .work_link_box ul li:nth-of-type(4){border-right:1px solid #ccc} footer .footer_middle .work_link_box ul li a{display: flex;align-items: center;justify-content: center;width:100%;color: #333;} footer .footer_middle .work_link_box ul li:nth-of-type(1) a:before{content: '';display: block;background: url(../images/main/icon_online.png)no-repeat left center;width:2.5rem;height: 100%;} footer .footer_middle .work_link_box ul li:nth-of-type(2) a:before{content: '';display: block;background: url(../images/main/icon_openai.png)no-repeat left center;width:2.5rem;height: 100%;} footer .footer_middle .work_link_box ul li:nth-of-type(3) a:before{content: '';display: block;background: url(../images/main/icon_mywork.png)no-repeat left center;width:2.5rem;height: 100%;} footer .footer_middle .work_link_box ul li:nth-of-type(4) a:before{content: '';display: block;background: url(../images/main/icon_mywork.png)no-repeat left center;width:2.5rem;height: 100%;} footer .footer_middle .work_link_box ul li a:after{content: '';display: block;background: url(../images/main/icon_link.png)no-repeat right center;width:2.8rem;height: 100%;} footer .footer_bottom {background:#333;} footer .footer_bottom .copyright_box{padding:4rem 0;} footer .footer_bottom .copyright_box .txt{display: flex;font-size:1.6rem;font-weight: 300;color: #fff;} footer .footer_bottom .copyright_box .txt ul{display: flex;} footer .footer_bottom .copyright_box .txt ul li{margin-right:8rem;line-height: 1.8rem;} footer .footer_bottom .copyright_box .txt_gray{color:#888888} /*------------------------------------------------------------------------------------*/ #container{display: flex;flex-direction: row;} #container:after{content: '';display: block;clear: both;} /*상단 메뉴위 selectbox*/ #location_wrap{background:linear-gradient(to right, rgba(0,54,127,1) 0%, rgba(0,123,139,1) 20%, rgba(0,144,131,1) 50%, rgba(0,123,139,1) 80%, rgba(0,54,127,1) 100%);} #location_wrap .home{display: flex;align-items: center;justify-content: center;background:transparent;padding:0 3.5rem;background: url(../images/main/icon_home.png)no-repeat center center;font-size: 0;} #location_wrap ul{display: flex;align-items: end;border-top:1px solid var(--line_color_01);border-bottom:1px solid var(--line_color_01);margin-top: 0.5rem;} #location_wrap ul>li{position: relative;border-right:1px solid var(--line_color_01);} #location_wrap ul>li>a{position: relative;display: block;background:#fff;font-size: 1.8rem;color: #333;padding:1.2rem 4rem 1.2rem 2rem;} #location_wrap ul>li>a:after{content:'';display: block;background:url(../images/main/icon_arrow_down.png)no-repeat center center; width:1.4rem;height: 100%;position: absolute;right:1.5rem;top:0;transition: transform 0.3s ease;} #location_wrap ul>li>a:only-child::after {display: none;} #location_wrap ul>li>a.active::after {transform: rotate(180deg);} #location_wrap ul>li:nth-of-type(1){min-width:18.5rem;border-left: 1px solid var(--line_color_01);} #location_wrap ul>li:nth-of-type(2){min-width:21rem} #location_wrap ul>li:nth-of-type(3){min-width:18.5rem} /* 하위 메뉴가 없는 경우 화살표 숨기기 */ #location_wrap ul>li>ul{display: none;position: absolute;top:4.50rem;z-index: 9;margin:0 0 0 -1px;border-bottom: 0;width: calc(100% + 2px);} #location_wrap ul>li>ul>li{border:1px solid var(--line_color_01)} #location_wrap ul>li>ul>li:nth-of-type(2){min-width:auto} #location_wrap ul>li>ul>li>a{margin-top:-1px;background: #f4f4f4;white-space: nowrap;} #location_wrap ul>li>ul>li>a:after{background:none;display: none;} #location_wrap ul>li>ul>li>a:hover{background:#fff;transition: transform 0.3s ease;} #location_wrap ul>li>ul>li>a:hover:after{content:"";display:block;position:absolute;left:-1px;right:-1px;top:-1px;bottom:-1px;border:1px solid var(--col_main_green);width: 100%;border:1px solid var(--col_green)} /*통합검색 검색창*/ #location_wrap .total_search_box{display: flex;align-items: center;justify-content: center;margin:2rem 0;} #location_wrap .total_search_box input{text-indent: 15rem;} #location_wrap .total_search_box form{position: relative;width:60rem;margin:0 auto} #location_wrap .total_search_box form .search_select{width:15rem;height:4.6rem;border-radius: 2.5rem;position: absolute;left:0;padding:0 1rem;border:0;margin:0.2rem;background-color: #fff;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat: no-repeat; background-position: right 1.2rem center; background-size: 16px 12px;appearance: none;} #location_wrap .total_search_box form .search_select:focus{outline: none;border:0} .part_tap_menu_wrap{margin:2rem 0} /*통합검색 탭메뉴*/ ul.part_tap_menu{display: flex;align-items: end;width: 100%;} ul.part_tap_menu li{flex:1;text-align: center;} ul.part_tap_menu li a{position: relative;display: block;background: #fff;font-size: 1.8rem;color: #333;padding: 1.2rem 1rem 1.2rem 1rem;border:1px solid var(--line_color_01);margin-left:-1px} ul.part_tap_menu li a.active{background:var(--col_main_green);color: #fff;} ul.part_tap_menu li span{font-weight: 600;} .top_tit{text-align: center;font-size: 2.2rem;padding:3.2rem 0;font-weight: 600; } .part_box .part_bar{background:#dbe7e9;padding:1.3rem;font-size: 2rem;font-weight: 600;} .part_box .part_con{padding:3rem 0} .part_box .part_con ul li{display: flex;justify-content: space-between;margin-bottom: 2rem;} .part_box .part_con .part_left{position: relative;;padding-left:2rem;margin-left: 1rem;color: #333;} .part_box .part_con .part_left::before{content:'';display: block;background: url(../images/main/icon_tree.png)no-repeat center 0.2rem;width:1.3rem;height: 100%;position: absolute;top:0;left:0;} .part_box .part_con .part_left:hover{text-decoration: underline;text-underline-position: under;} .part_box .part_con .part_right{color: #333;margin-right: 1rem;} .part_box .part_con .part_right:hover{text-decoration: underline;text-underline-position: under;} .part_box .part_con .part_right dt{text-align: right;margin-bottom:0.7rem} .part_box .part_con .part_right dd{font-size: 1.4rem;} /*서브페이지 공통*/ /*좌측*/ #lnb{position: relative;width:30rem;padding:5rem 0} #lnb:after{content: '';position: absolute;top: 0;left: 254px;height: 100%;width: 1px;background-color: var(--line_color_01)}/*세로line*/ /*좌측메뉴*/ #lnb nav{width:23.5rem} #lnb nav h2{border-bottom:2px solid var(--col_333);padding:0.5rem 0 1rem 2rem;line-height: 3.4rem;letter-spacing: -0.3rem;} #lnb nav ul li.lnb_depth_1{font-size:1.8rem;border-bottom:1px solid var(--line_color_01);} #lnb nav ul li.lnb_depth_1>a{position: relative;display: block;font-size: 1.8rem;color:#333;padding:1.2rem 4rem 1.2rem 2rem;word-break: keep-all;transition: none;cursor:pointer;} #lnb nav ul li.lnb_depth_1>a:hover{color: #000;} #lnb nav ul li.lnb_depth_1>a.no-submenu::after {display: none;} #lnb nav ul li.lnb_depth_1>a.active{padding:1.2rem 4rem 1.2rem 2rem;background:var(--col_main_green);color:var(--col_white)} #lnb nav ul li.lnb_depth_1>a.active:after{content: '';color:var(--col_white);background:url(../images/main/icon_lnb_dwArr.png) no-repeat right center /2.2rem;width:2.2rem;height:100%;position: absolute;right:1.5rem;top:0;transition: transform 0.3s ease;} #lnb nav ul li.lnb_depth_1>a.active:only-child::after {display: none;} #lnb nav ul li.lnb_depth_1 ul{display: none;background: #f4f4f4;padding:1rem 0} #lnb nav ul li.lnb_depth_1 ul>li>a{position: relative;;display: block;font-size: 1.6rem;color: #333;padding:0.8rem 0 0.8rem 4rem;} #lnb nav ul li.lnb_depth_1 ul>li>a.on{font-weight: 500;text-decoration: underline;color: var(--col_main_green); text-decoration-line: underline;text-decoration-thickness: 2px;text-underline-offset: 0.5rem;} #lnb nav ul li.lnb_depth_1 ul>li>a.on span{border-bottom:2px solid var(--col_main_green);font-weight: 500;} #lnb nav ul li.lnb_depth_1 ul>li>a.on::before{content:'';display: block;background: url(../images/main/icon_arrow_right_on.png)no-repeat center center;} #lnb nav ul li.lnb_depth_1 ul>li>a:hover{color: var(--col_main_green);} #lnb nav ul li.lnb_depth_1 ul>li>a:hover::before{content:'';display: block;background: url(../images/main/icon_arrow_right_on.png)no-repeat center center;} #lnb nav ul li.lnb_depth_1 ul>li>a:hover span{border-bottom:2px solid var(--col_main_green);font-weight: 500;} #lnb nav ul li.lnb_depth_1 ul>li>a::before{content:'';display: block;background: url(../images/main/icon_arrow_right.png)no-repeat center center ;position: absolute;left: 2rem;top:0;width:0.8rem;height: 100%;} /*우측*/ #container_wrap{position: relative;width:calc(100% - 30rem)} .container_midd_top{overflow: hidden;padding:0 0 1.5rem 0} .container_midd_top ul{display: flex;align-items: center;float: right;height: 100%;} .container_midd_top ul li{font-size: 1.4rem;margin-right:2rem;padding-left:3rem;word-break: keep-all;line-height: 2rem;} .container_midd_top ul li:nth-of-type(1){background:url(../images/main/file-list-icon_1.png)no-repeat left center/2rem ; } .container_midd_top ul li:nth-of-type(2){background:url(../images/main/file-list-icon_2.png)no-repeat left center/2rem ; } .container_midd_top ul li:nth-of-type(3){background:url(../images/main/file-list-icon_3.png)no-repeat left center/2rem ; } .container_midd_top ul li:nth-of-type(4){background:url(../images/main/excel-icon_on.png)no-repeat left center/2rem ; } .navigation{display: flex;align-items: center;border-bottom:1px solid var(--col_aaa);padding:0 0 1rem 0;margin:4rem 0 3rem;} .navigation form{display: flex;align-items: center;margin-left:auto} .navigation.menu_01 h2{color: var(--col_main_green);line-height: 3.4rem;padding: 0 0 0 4rem;background: url(../images/main/icon_m_01.png)no-repeat left center;word-break: keep-all;} .navigation.menu_02 h2{color: var(--col_main_green);line-height: 3.4rem;padding: 0 0 0 4rem;background: url(../images/main/icon_m_02.png)no-repeat left center;word-break: keep-all;} .navigation.menu_03 h2{color: var(--col_main_green);line-height: 3.4rem;padding: 0 0 0 4rem;background: url(../images/main/icon_m_03.png)no-repeat left center;word-break: keep-all;} .navigation.menu_04 h2{color: var(--col_main_green);line-height: 3.4rem;padding: 0 0 0 4rem;background: url(../images/main/icon_m_04.png)no-repeat left center;word-break: keep-all;} .statlist_search_box{margin-left: auto;} .statlist_search_box button img{width: 2rem;} .m_statlist_search_box{display: none;} /*통계보기>승인통계*/ .container_midd{margin-bottom:5rem} /*공통 단계*/ .file_list ul>li{position: relative;min-height: 4.7rem;margin-top:0.5rem;padding: 0 0.5rem;} .file_list ul>li>a{display: flex;align-items: center;width:100%;padding:1.2rem 0 1.2rem 2rem;background:var(--col_main_green);color: #fff;font-size: 1.8rem;border-radius: 0.5rem;} .file_list ul>li>a div.icon_btn{display: flex;margin:0 0.3rem;padding:0} .file_list ul>li>a span{position: relative;display: block;padding:0 2rem 0 3rem;font-weight: 600;} .file_list ul>li>a span::before,.file_list ul>li>a span::after{content: "";display: block;position: absolute;left: 0;top: calc(50% - 1px);width: 1.7rem;height: 0.3rem;background-color: #fff;} .file_list ul>li>a span::after{-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-webkit-transition: transform 0.3s ease;transition: transform 0.3s ease;} .file_list ul>li>a.leftTreeToggleBtn{cursor:pointer;} /*3단계*/ .file_list ul>li>ul.depth3{position: relative;padding-left:3rem} .file_list ul>li>ul.depth3::before{content: '';display: block;position: absolute;width:1px;height: 100%;top:0;left:1.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li{padding:0} .file_list ul>li>ul.depth3>li>a{background:#dbe7e9;color:#333} .file_list ul>li>ul.depth3>li>a::before{content: '';display: block;position: absolute;width:1.5rem;height: 1px;top:2.1rem;left:-1.5rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>a span::before,.file_list ul>li>ul.depth2>li>a span::after{content: "";display: block;position: absolute;left: 0;top: calc(50% - 1px);width: 1.7rem;height: 0.3rem;background-color: var(--col_main_green);} .file_list ul>li>ul.depth3>li>a span::after{-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-webkit-transition: transform 0.3s ease;transition: transform 0.3s ease;background-color: var(--col_main_green);} .file_list ul>li>ul.depth2>li>ul.depth3{position: relative;padding:0 0 0rem 3rem} .file_list ul>li>ul.depth2>li>ul.depth3::before{content: '';display: block;position: absolute;width:1px;height: 100%;top:0;left:1.5rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth2>li>ul.depth3>li{padding:0} .file_list ul>li>ul.depth2>li>ul.depth3>li>a{background:#fff;color:#333;padding:1rem 0 } .file_list ul>li>ul.depth2>li>ul.depth3>li>a{background:#dbe7e9;color:#333} .file_list ul>li>ul.depth2>li>ul.depth3>li>a::before{content: '';display: block;position: absolute;width:1.5rem;height: 1px;top:2.1rem;left:-1.5rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth2>li>ul.depth3>li>a span em::before{content: '';display: block; position: absolute;left:0;top:calc(50% - 10px);width:1.8rem;height:1.8rem;border:1px solid var(--col_main_green);border-radius: 0.2rem;} .file_list ul>li>ul.depth2>li>ul.depth3>li>a span::before,.file_list ul>li>ul.depth2>li>ul.depth3>li>a span::after{content: "";display: block;position: absolute;left: 4px;top: calc(50% - 1px);width: 1.2rem;height: 0.2rem;background-color: var(--col_main_green);}/*+아이콘*/ .file_list ul>li>ul.depth2>li>ul.depth3>li>a span::after{-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-webkit-transition: transform 0.3s ease;transition: transform 0.3s ease;}/*+아이콘*/ .file_list ul>li>ul.depth3>li>a.kosisLink{background:#fff;color:#333} .file_list ul>li>ul.depth3>li>a.kosisLink:before{content:'';display:none} .file_list ul>li>ul.depth3>li>a.kosisLink span:before,.file_list ul>li>ul.depth3>li>a.kosisLink span:after{content:'';display:none} .file_list ul>li>ul.depth3>li>a.kosisLink span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>a.kosisLink span:after{content: '';display: none;} .file_list ul>li>ul.depth3>li>a.frstyBookOpen span:before,.file_list ul>li>ul.depth3>li>a.frstyBookOpen span:after{content:'';display:none} .file_list ul>li>ul.depth3>li>a.frstyBookOpen span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>a.frstyBookOpen span:after{content: '';display: none;} /*4단계 정리*/ .file_list ul>li>ul.depth3>li>ul.depth4{position: relative;padding:0 0 0rem 3rem} .file_list ul>li>ul.depth3>li>ul.depth4::before{content: '';display: block;position: absolute;width:1px;height: 100%;top:0;left:1.5rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li{padding:0;margin-top: 0;} .file_list ul>li>ul.depth3>li>ul.depth4>li>a{background:#fff;color:#333;padding:1rem 0 } .file_list ul>li>ul.depth3>li>ul.depth4>li>a::before{content: '';display: block;position: absolute;width:1.5rem;height: 1px;top:2.1rem;left:-1.5rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>a:hover span{text-decoration: underline;color: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>a span::before,.file_list ul>li>ul.depth3>li>ul.depth4>li>a span::after{content: "";display: block;position: absolute;left: 4px;top: calc(50% - 1px);width: 1.2rem;height: 0.2rem;background-color: var(--col_main_green);}/*+아이콘*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>a span em::before{content: '';display: block; position: absolute;left:0;top:calc(50% - 10px);width:1.8rem;height:1.8rem;border:1px solid var(--col_main_green);border-radius: 0.2rem;} .file_list ul>li>ul.depth3>li>ul.depth4>li>a.kosisLink span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>a.kosisLink span:after{content:'';display:none} .file_list ul>li>ul.depth3>li>ul.depth4>li>a.kosisLink::before{content: '';display: none;}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>a.frstyBookOpen span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>a.frstyBookOpen span:after{content:'';display:none} .file_list ul>li>ul.depth3>li>ul.depth4>li>a.frstyBookOpen::before{content: '';display: none;}/*단계별라인*/ /*5단계 정리 밤나무 삽입해야함*/ /*5단계*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5{position: relative;padding: 0 0 0rem 2.6rem;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5::before{content: '';display: block;position: absolute;width:1px;height: 100%;top: 0rem;left: 1rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5.notline::before{content:'';display:none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a::before{content: '';display: block;position: absolute;width: 1.5rem;height: 1px;top: 1.8rem;left: -1.5rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li{min-height: 3.4rem;padding:0} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a{background:#fff;color:#333;padding:0.7rem 0 0.7rem 0rem} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a:hover{text-decoration: underline;color: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a>span{position: relative;display: block;font-weight:400;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a>span::before,.file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a>span::after{content: "";display: block;position: absolute;left: 3px;top: calc(50% - 0px);width: 1.2rem;height: 0.2rem;background-color: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a span em::before{content: '';display: block;position: absolute;left:0;top: calc(50% - 8px);width: 1.6rem;height: 1.6rem;border:1px solid var(--col_main_green);border-radius: 0.2rem;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a.kosisLink span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a.kosisLink span:after{content: '';display: none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a.kosisLink::before{content: '';display: none;}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a.frstyBookOpen span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a.frstyBookOpen span:after{content: '';display: none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>a.frstyBookOpen::before{content: '';display: none;}/*단계별라인*/ /*6단계*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6{position: relative;padding: 0 0 0rem 2.6rem;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6::before{content: '';display: block;position: absolute;width:1px;height: 100%;top: 0rem;left: 1rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6.notline::before{content:'';display:none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a::before{content: '';display: block;position: absolute;width: 1.5rem;height: 1px;top: 1.8rem;left: -1.5rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li{min-height: 3.4rem;padding:0} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a{background:#fff;color:#333;padding:0.7rem 0 0.7rem 0rem} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a:hover{text-decoration: underline;color: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a>span{position: relative;display: block;font-weight:400;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a>span::before,.file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a>span::after{content: "";display: block;position: absolute;left: 3px;top: calc(50% - 0px);width: 1.2rem;height: 0.2rem;background-color: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a>span>em::before{content: '';display: block;position: absolute;left:0;top: calc(50% - 8px);width: 1.6rem;height: 1.6rem;border:1px solid var(--col_main_green);border-radius: 0.2rem;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a.kosisLink span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a.kosisLink span:after{content: '';display: none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a.kosisLink::before{content: '';display: none;}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a.frstyBookOpen span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a.frstyBookOpen span:after{content: '';display: none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>a.frstyBookOpen::before{content: '';display: none;}/*단계별라인*/ /*7단계*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7{position: relative;padding: 0 0 0rem 2.6rem;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7::before{content: '';display: block;position: absolute;width:1px;height: 100%;top: 0rem;left: 1rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7.notline::before{content:'';display:none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a::before{content: '';display: block;position: absolute;width: 1.5rem;height: 1px;top: 1.8rem;left: -1.5rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li{min-height: 3.4rem;padding:0} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a{background:#fff;color:#333;padding:0.7rem 0 0.7rem 0rem} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a:hover{text-decoration: underline;color: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a>span{position: relative;display: block;font-weight:400;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a>span::before,.file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a>span::after{content: "";display: block;position: absolute;left: 3px;top: calc(50% - 0px);width: 1.2rem;height: 0.2rem;background-color: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a span em::before{content: '';display: block;position: absolute;left:0;top: calc(50% - 8px);width: 1.6rem;height: 1.6rem;border:1px solid var(--col_main_green);border-radius: 0.2rem;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a.kosisLink span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a.kosisLink span:after{content: '';display: none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a.kosisLink::before{content: '';display: none;}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a.frstyBookOpen span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a.frstyBookOpen span:after{content: '';display: none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>a.frstyBookOpen::before{content: '';display: none;}/*단계별라인*/ /*8단계*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li{min-height: 3.4rem;padding:0} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li>a{background:#fff;color:#333;padding:0.7rem 0 0.7rem 0rem} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li>a::before{content: '';display: block;position: absolute;width: 1.5rem;height: 1px;top: 1.8rem;left: -1.5rem;background: var(--col_main_green);}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li>a:hover{text-decoration: underline;color: var(--col_main_green);} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li>a.kosisLink span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green)} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li>a.kosisLink span:after{content: '';display: none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li>a.kosisLink::before{content: '';display: none;}/*단계별라인*/ .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li>a.frstyBookOpen span:before{content: '';display: block;position: absolute;left: 1.5rem;width: 0.5rem;height: 0.5rem;border-radius: 0.5rem;background: var(--col_main_green)} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li>a.frstyBookOpen span:after{content: '';display: none;} .file_list ul>li>ul.depth3>li>ul.depth4>li>ul.depth5>li>ul.depth6>li>ul.depth7>li>ul.depth8>li>a.frstyBookOpen::before{content: '';display: none;}/*단계별라인*/ /* 기본 트리 메뉴 애니메이션 스타일 */ .depth2, .depth3, .depth4 {overflow: hidden;transition: max-height 0.2s ease, opacity 0.2s ease;} /* 닫힌 상태 */ .depth2.collapsed,.depth3.collapsed,.depth4.collapsed {max-height: 0 !important;opacity: 0;} /* 열린 상태 */ .depth2.expanded,.depth3.expanded,.depth4.expanded {max-height: 1000px;/* 충분히 큰 값 */ opacity: 1;} /* 열린 상태일 때 ::after를 회전시켜 마이너스로 만들기 */ .file_list ul>li>a span.open::after {transform: rotate(0deg) !important;} .file_list ul>li>ul.depth2>li>a span.open::after {transform: rotate(0deg) !important;} .file_list ul>li>ul.depth2>li>ul.depth3>li>a span.open::after {transform: rotate(0deg) !important;} ul.treeArea .frstyLeftDiv { width: 100%; } ul.treeArea .frstyLeftDiv span[id^=rmrk] { font-size:0.875em; color:#666666; } ul.treeArea button.frstyBookDownAll { position: absolute; top: 14px; right: 5%; width: 22px; height: 22px; background: url(../images/sub/excel-icon_on.png) no-repeat center 0; background-size: 22px 22px; } ul.treeArea button.frstyBookDownOn { position: absolute; top: 14px; right: 5%; width: 22px; height: 22px; background: url(../images/sub/excel-icon_on.png) no-repeat center 0; background-size: 22px 22px; } ul.treeArea button.frstyBookDownOff { position: absolute; top: 14px; right: 5%; width: 22px; height: 22px; background: url(../images/sub/excel-icon_off.png) no-repeat center 0; background-size: 22px 22px; } ul.treeArea button.frstyBookDownGrid { position: absolute; top: 14px; right: 5%; width: 22px; height: 22px; background: url(../images/sub/excel-icon_off.png) no-repeat center 0; background-size: 22px 22px; } ul.treeArea button.frstyBookDownDefault { position: absolute; top: 14px; right: 5%; width: 22px; height: 22px; background: url(../images/sub/excel-icon_on.png) no-repeat center 0; background-size: 22px 22px; } /*통계주요지표*/ .Title_wrap{display: flex;justify-content: center;font-size: 3.6rem;} .Title{position: relative;width:42.6rem;text-align: center;color:#fff;border-radius: 1.5rem 1.5rem 0 0;padding:1.15rem 2rem;background:linear-gradient(to right, rgba(0,136,134,1) 0%, rgba(0,144,131,1) 50%, rgba(0,136,134,1) 100%)} .Title:before {content: '';display: block;width: 0;height: 0;border-bottom: 5.7rem solid rgba(0,134,136,1);border-left: 2.5rem solid transparent;position: absolute;bottom: 0;left: -2.4rem;} .Title:after {content: '';display: block;width: 0;height: 0;border-bottom: 5.7rem solid rgba(0,134,136,1);border-right: 2.5rem solid transparent;position: absolute;bottom: 0;right: -2.4rem;} .tab_wrap{background:linear-gradient(to right, rgba(0,54,127,1) 0%, rgba(0,123,139,1) 20%, rgba(0,144,131,1) 50%, rgba(0,123,139,1) 80%, rgba(0,54,127,1) 100%);line-height: 5.2rem;} /*탭메뉴 공통*/ .tab_tit ul{display: flex;justify-content: center;flex-direction: row-reverse;align-items: end;} .tab_tit ul li{position: relative;padding: 0 1rem 0 0;margin-left: 0.3rem;} .tab_tit ul li a{line-height: 4.4rem;font-size: 2.2rem;width: 20rem;text-align: center;margin-top:0.8rem} /*탭메뉴tab_01*/ .tab_tit ul li a.tab_01 {display: block;background: var(--col_main_green);color: #fff;font-weight: 500;padding: 0 1.5rem;border-radius: 1.5rem 1.5rem 0 0;overflow: hidden;} .tab_tit ul li a.tab_01:before {content: '';display: block;width: 0;height: 0;border-bottom: 3.5rem solid var(--col_main_green);border-left: 1.5rem solid transparent;position: absolute;bottom: 0;left: -1.4rem;} .tab_tit ul li a.tab_01:after {content: '';display: block;width: 0;height: 0;border-bottom: 3.5rem solid var(--col_main_green);border-right: 1.5rem solid transparent;position: absolute;bottom: 0;right: -0.4rem;} /*탭메뉴tab_02*/ .tab_tit ul li a.tab_02 {display: block;background: var(--col_main_green);color: #fff;font-weight: 500;padding: 0 1.5rem;border-radius: 1.5rem 1.5rem 0 0;overflow: hidden;} .tab_tit ul li a.tab_02:before {content: '';display: block;width: 0;height: 0;border-bottom: 3.5rem solid var(--col_main_green);border-left: 1.5rem solid transparent;position: absolute;bottom: 0;left: -1.4rem;} .tab_tit ul li a.tab_02:after {content: '';display: block;width: 0;height: 0;border-bottom: 3.5rem solid var(--col_main_green);border-right: 1.5rem solid transparent;position: absolute;bottom: 0;right: -0.4rem;} /*탭메뉴 tap_01,tap_02 active*/ .tab_tit ul li a.active{background: #fff;color:#333;} .tab_tit ul li a.tab_01.active:before {content: '';display: block;width: 0;height: 0;border-bottom: 3.5rem solid #fff;border-left: 1.5rem solid transparent;position: absolute;bottom: 0;left: -1.4rem;} .tab_tit ul li a.tab_01.active::after{content: '';display: block;width: 0;height: 0;border-bottom: 3.5rem solid #fff;border-right: 1.5rem solid transparent;position: absolute;bottom:0;right:-0.4rem} .tab_tit ul li a.tab_02.active:before {content: '';display: block;width: 0;height: 0;border-bottom: 3.5rem solid #fff;border-left: 1.5rem solid transparent;position: absolute;bottom:0;left:-1.4rem;z-index: 9;} .tab_tit ul li a.tab_02.active::after{content: '';display: block;width: 0;height: 0;border-bottom: 3.5rem solid #fff;border-right: 1.5rem solid transparent;position: absolute;bottom:0;right:-0.4rem} /*Tab01_지역별*/ .tabcontent{width: 100%;} /*통계주요지표>지역별*/ #Tab01 .layer_left{width: 30%;margin-right: 6rem;} #Tab01 .layer_right{width: 70%} #Tab01 .layer_left h2{color:#333;font-weight: 300;white-space: nowrap;margin:2rem 0} #Tab01 .layer_right h2{color:#333;white-space: nowrap;margin:2rem 0;} /*Tab01>행정구역 select 좌측*/ #Tab01 .layer_left .form-select {padding: 0.8rem;font-size: 1.8rem;} #Tab01 .layer_left .map_box{display: flex;align-items: center;justify-content: center;height: 50rem;margin:2rem 1rem;/*height: calc(100% - 12.8rem)*/;} #Tab01 .layer_left .map_box img{width:100%;height: 100%;} #Tab01 .layer_left .map_box .map_box_in{width:100%;height: 100%;} #Tab01 .layer_left .map_box .map_box_in .map_korea{background: url(../images/map/map_korea.svg)no-repeat center center;width:100%;height:100%;min-height: 50rem;} #Tab01 .layer_left .map_box .select1{display: none;} #Tab01 .layer_left .map_box .select2{display: none;} #Tab01 .layer_left .map_box .map_box_in .seoul{background: url(../images/map/map_Seoul.svg)no-repeat center center;width:100%;height:100%;min-height: 50rem;} #mapContainer {width: 100%;height: 100%;} #mapContainer svg {width: 100%;height: 100%;} /* active 클래스가 없을 때는 모든 li가 opacity 1 */ .map:has(li.active) li:not(.active) { opacity: 0.2; } .map:has(li.active) li:not(.active):hover { opacity:1; background:rgba(0, 0, 0, 0.5); color: #fff; } /* active 클래스가 있는 li만 opacity 1 */ .map li.active { opacity: 1 !important; font-weight: bold; background: rgba(0, 0, 0, .8); } .map li:hover { background: rgba(0, 0, 0, 1); } /*전국*/ .map{position: relative;;background: url(../images/map/map_korea.svg)no-repeat center center;width:38rem;height:100%;min-height: 50rem;} .map li {position: absolute;z-index: 1;padding: 0.3rem 0.7rem;background: rgba(0,0,0,0.7);font-size:1.5rem;color: #fff;border-radius: 10.25rem;cursor: pointer;font-weight: 500;line-height: normal;white-space: nowrap;} .map li:nth-child(1) {top: 17%;left: 22%;}/*서울*/ .map li:nth-child(2) {top: 69%;left: 68%;}/*부산*/ .map li:nth-child(3) {top: 53%;left: 60%;}/*대구*/ .map li:nth-child(4) {top: 21%;left: 8%;}/*인천*/ .map li:nth-child(5) {top: 67%;left: 16%;}/*광주*/ .map li:nth-child(6) {top: 46%;left: 32%;}/*대전*/ .map li:nth-child(7) {top: 62%;left: 76%;}/*울산*/ .map li:nth-child(8) {top: 27%;left: 26%;}/*경기*/ .map li:nth-child(9) {top: 14%;left: 48%;}/*강원*/ .map li:nth-child(10) {top: 33%;left: 41%;}/*충북*/ .map li:nth-child(11) {top: 42%;left: 17%;}/*충남*/ .map li:nth-child(12) {top: 57%;left: 25%;}/*전북*/ .map li:nth-child(13) {top: 75%;left: 23%;}/*전남*/ .map li:nth-child(14) {top: 41%;left: 60%;}/*경북*/ .map li:nth-child(15) {top: 63%;left: 50%;}/*경남*/ .map li:nth-child(16) {top: 92%;left: 20%;}/*제주*/ .map li:nth-child(17) {top: 39%;left: 30%;}/*세종*/ /*서울*/ .map_seoul li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 서울전체 */ .map_seoul li:nth-child(2) {top:42%;left:47%}/* 종로구 */ .map_seoul li:nth-child(3) {top:48%;left:50%}/* 중구 */ .map_seoul li:nth-child(4) {top:54%;left:46%}/* 용산구 */ .map_seoul li:nth-child(5) {top:50%;left:61%}/* 성동구 */ .map_seoul li:nth-child(6) {top:54%;left:72%}/* 광진구 */ .map_seoul li:nth-child(7) {top:43%;left:60%}/* 동대문구 */ .map_seoul li:nth-child(8) {top:38%;left:72%}/* 중랑구 */ .map_seoul li:nth-child(9) {top:36%;left:55%}/* 성북구 */ .map_seoul li:nth-child(10) {top:28%;left:49%}/* 강북구 */ .map_seoul li:nth-child(11) {top:21%;left:57%}/* 도봉구 */ .map_seoul li:nth-child(12) {top:27%;left:68%}/* 노원구 */ .map_seoul li:nth-child(13) {top:32%;left:32%}/* 은평구 */ .map_seoul li:nth-child(14) {top:44%;left:31%}/* 서대문구 */ .map_seoul li:nth-child(15) {top:51%;left:33%}/* 마포구 */ .map_seoul li:nth-child(16) {top:58%;left:16%}/* 양천구 */ .map_seoul li:nth-child(17) {top:48%;left:9%}/* 강서구 */ .map_seoul li:nth-child(18) {top:65%;left:18%}/* 구로구 */ .map_seoul li:nth-child(19) {top:74%;left:26%}/* 금천구 */ .map_seoul li:nth-child(20) {top:59%;left:29%}/* 영등포구 */ .map_seoul li:nth-child(21) {top:64%;left:40%}/* 동작구 */ .map_seoul li:nth-child(22) {top:72%;left:38%}/* 관악구 */ .map_seoul li:nth-child(23) {top:68%;left:52%}/* 서초구 */ .map_seoul li:nth-child(24) {top:63%;left:62%}/* 강남구 */ .map_seoul li:nth-child(25) {top:63%;left:79%}/* 송파구 */ .map_seoul li:nth-child(26) {top:50%;left:84%}/* 강동구 */ /*경기*/ .map_gyeonggi li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_gyeonggi li:nth-child(2) {top:71%;left:34%}/* 수원 */ .map_gyeonggi li:nth-child(3) {top:58%;left:45%}/* 성남시 */ .map_gyeonggi li:nth-child(4) {top:37%;left:36%}/* 의정부시 */ .map_gyeonggi li:nth-child(5) {top:61%;left:22%}/* 안양시 */ .map_gyeonggi li:nth-child(6) {top:52%;left:9%}/* 부천시 */ .map_gyeonggi li:nth-child(7) {top:56%;left:21%}/* 광명 */ .map_gyeonggi li:nth-child(8) {top:88%;left:32%}/* 평택 */ .map_gyeonggi li:nth-child(9) {top:24%;left:38%}/* 동두천 */ .map_gyeonggi li:nth-child(10) {top:67%;left:13%}/* 안산시 */ .map_gyeonggi li:nth-child(11) {top:42%;left:17%}/* 고양 */ .map_gyeonggi li:nth-child(12) {top:57%;left:35%}/* 과천 */ .map_gyeonggi li:nth-child(13) {top:47%;left:41%}/* 구리 */ .map_gyeonggi li:nth-child(14) {top:42%;left:47%}/* 남양주 */ .map_gyeonggi li:nth-child(15) {top:77%;left:37%}/* 오산 */ .map_gyeonggi li:nth-child(16) {top:60%;left:10%}/* 시흥 */ .map_gyeonggi li:nth-child(17) {top:66%;left:27%}/* 군포 */ .map_gyeonggi li:nth-child(18) {top:62%;left:35%}/* 의왕 */ .map_gyeonggi li:nth-child(19) {top:52%;left:47%}/* 하남 */ .map_gyeonggi li:nth-child(20) {top:75%;left:48%}/* 용인시 */ .map_gyeonggi li:nth-child(21) {top:29%;left:14%}/* 파주 */ .map_gyeonggi li:nth-child(22) {top:73%;left:64%}/* 이천 */ .map_gyeonggi li:nth-child(23) {top:88%;left:52%}/* 안성 */ .map_gyeonggi li:nth-child(24) {top:40%;left:0%}/* 김포 */ .map_gyeonggi li:nth-child(25) {top:78%;left:21%}/* 화성시 */ .map_gyeonggi li:nth-child(26) {top:62%;left:54%}/* 광주 */ .map_gyeonggi li:nth-child(27) {top:31%;left:32%}/* 양주 */ .map_gyeonggi li:nth-child(28) {top:20%;left:50%}/* 포천 */ .map_gyeonggi li:nth-child(29) {top:67%;left:80%}/* 여주 */ .map_gyeonggi li:nth-child(30) {top:13%;left:29%}/* 연천군 */ .map_gyeonggi li:nth-child(31) {top:29%;left:61%}/* 가평군 */ .map_gyeonggi li:nth-child(32) {top:52%;left:73%}/* 양평군 */ /*부산*/ .map_busan li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_busan li:nth-child(2) {top:65%;left:44%}/* 중구 */ .map_busan li:nth-child(3) {top:60%;left:39%}/* 서구 */ .map_busan li:nth-child(4) {top:59%;left:48%}/* 동구 */ .map_busan li:nth-child(5) {top:71%;left:48%}/* 영도구 */ .map_busan li:nth-child(6) {top:53%;left:43%}/* 부산진구 */ .map_busan li:nth-child(7) {top:42%;left:51%}/* 동래구 */ .map_busan li:nth-child(8) {top:60%;left:58%}/* 남구 */ .map_busan li:nth-child(9) {top:37%;left:42%}/* 북구 */ .map_busan li:nth-child(10) {top:46%;left:64%}/* 해운대구 */ .map_busan li:nth-child(11) {top:66%;left:27%}/* 사하구 */ .map_busan li:nth-child(12) {top:34%;left:54%}/* 금정구 */ .map_busan li:nth-child(13) {top:57%;left:16%}/* 강서구 */ .map_busan li:nth-child(14) {top:48%;left:52%}/* 연제구 */ .map_busan li:nth-child(15) {top:53%;left:59%}/* 수영구 */ .map_busan li:nth-child(16) {top:53%;left:31%}/* 사상구 */ .map_busan li:nth-child(17) {top:26%;left:72%}/* 기장군 */ /***** 인천 *****/ .map_incheon li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_incheon li:nth-child(2) {top:48%;left:54%}/* 중구 */ .map_incheon li:nth-child(3) {top:48%;left:69%}/* 동구 */ .map_incheon li:nth-child(4) {top:53%;left:75%}/* 미추홀구 */ .map_incheon li:nth-child(5) {top:61%;left:67%}/* 연수구 */ .map_incheon li:nth-child(6) {top:56%;left:89%}/* 남동구 */ .map_incheon li:nth-child(7) {top:47%;left:83%}/* 부평구 */ .map_incheon li:nth-child(8) {top:39%;left:85%}/* 계양구 */ .map_incheon li:nth-child(9) {top:39%;left:72%}/* 서구 */ .map_incheon li:nth-child(10) {top:20%;left:46%}/* 강화군 */ .map_incheon li:nth-child(11) {top:16%;left:4%}/* 옹진군 */ /***** 대구 *****/ .map_daegu li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_daegu li:nth-child(2) {top:61%;left:43%}/* 중구 */ .map_daegu li:nth-child(3) {top:52%;left:51%}/* 동구 */ .map_daegu li:nth-child(4) {top:61%;left:31%}/* 서구 */ .map_daegu li:nth-child(5) {top:67%;left:40%}/* 남구 */ .map_daegu li:nth-child(6) {top:53%;left:33%}/* 북구 */ .map_daegu li:nth-child(7) {top:67%;left:49%}/* 수성구 */ .map_daegu li:nth-child(8) {top:67%;left:25%}/* 달서구 */ .map_daegu li:nth-child(9) {top:78%;left:23%}/* 달성군 */ .map_daegu li:nth-child(10) {top:24%;left:51%}/* 군위군 */ .map_daegu li:nth-child(11) {top:60%;left:16%}/* 달성군 */ /***** 광주 *****/ .map_gwangju li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_gwangju li:nth-child(2) {top:57%;left:75%}/* 동구 */ .map_gwangju li:nth-child(3) {top:50%;left:50%}/* 서구 */ .map_gwangju li:nth-child(4) {top:63%;left:55%}/* 남구 */ .map_gwangju li:nth-child(5) {top:40%;left:65%}/* 북구 */ .map_gwangju li:nth-child(6) {top:45%;left:25%}/* 광산구 */ /***** 대전 *****/ .map_daejeon li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_daejeon li:nth-child(2) {top:48%;left:65%}/* 동구 */ .map_daejeon li:nth-child(3) {top:60%;left:48%}/* 중구 */ .map_daejeon li:nth-child(4) {top:65%;left:25%}/* 서구 */ .map_daejeon li:nth-child(5) {top:40%;left:20%}/* 유성구 */ .map_daejeon li:nth-child(6) {top:27%;left:52%}/* 대덕구 */ /***** 울산 *****/ .map_ulsan li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_ulsan li:nth-child(2) {top:41%;left:60%}/* 중구 */ .map_ulsan li:nth-child(3) {top:51%;left:65%}/* 남구 */ .map_ulsan li:nth-child(4) {top:51%;left:85%}/* 동구 */ .map_ulsan li:nth-child(5) {top:32%;left:77%}/* 북구 */ .map_ulsan li:nth-child(6) {top:43%;left:30%}/* 울주군 */ /***** 강원 *****/ .map_gangwon li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_gangwon li:nth-child(2) {top:44%;left:25%}/* 춘천 */ .map_gangwon li:nth-child(3) {top:69%;left:34%}/* 원주시 */ .map_gangwon li:nth-child(4) {top:51%;left:71%}/* 강릉시 */ .map_gangwon li:nth-child(5) {top:58%;left:84%}/* 동해시 */ .map_gangwon li:nth-child(6) {top:75%;left:76%}/* 태백시 */ .map_gangwon li:nth-child(7) {top:32%;left:63%}/* 속초시 */ .map_gangwon li:nth-child(8) {top:66%;left:88%}/* 삼척시 */ .map_gangwon li:nth-child(9) {top:50%;left:40%}/* 홍천군 */ .map_gangwon li:nth-child(10) {top:59%;left:41%}/* 횡성군 */ .map_gangwon li:nth-child(11) {top:73%;left:52%}/* 영월군 */ .map_gangwon li:nth-child(12) {top:56%;left:55%}/* 평창군 */ .map_gangwon li:nth-child(13) {top:65%;left:65%}/* 정선군 */ .map_gangwon li:nth-child(14) {top:32%;left:6%}/* 철원군 */ .map_gangwon li:nth-child(15) {top:34%;left:22%}/* 화천군 */ .map_gangwon li:nth-child(16) {top:31%;left:37%}/* 양구군 */ .map_gangwon li:nth-child(17) {top:39%;left:47%}/* 인제군 */ .map_gangwon li:nth-child(18) {top:26%;left:56%}/* 고성군 */ .map_gangwon li:nth-child(19) {top:40%;left:64%}/* 양양군 */ /***** 충북 *****/ .map_chungbuk li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_chungbuk li:nth-child(2) {top:47%;left:11%}/* 청주시 */ .map_chungbuk li:nth-child(3) {top:23%;left:42%}/* 충주시 */ .map_chungbuk li:nth-child(4) {top:15%;left:57%}/* 제천시 */ .map_chungbuk li:nth-child(5) {top:56%;left:28%}/* 보은군 */ .map_chungbuk li:nth-child(6) {top:67%;left:28%}/* 옥천군 */ .map_chungbuk li:nth-child(7) {top:77%;left:34%}/* 영동군 */ .map_chungbuk li:nth-child(8) {top:35%;left:21%}/* 증평군 */ .map_chungbuk li:nth-child(9) {top:32%;left:7%}/* 진천군 */ .map_chungbuk li:nth-child(10) {top:38%;left:39%}/* 괴산군 */ .map_chungbuk li:nth-child(11) {top:25%;left:16%}/* 음성군 */ .map_chungbuk li:nth-child(12) {top:23%;left:75%}/* 단양군 */ /***** 충남 *****/ .map_chungnam li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_chungnam li:nth-child(2) {top:30%;left:66%}/* 천안시 */ .map_chungnam li:nth-child(3) {top:47%;left:56%}/* 공주시 */ .map_chungnam li:nth-child(4) {top:58%;left:27%}/* 보령시 */ .map_chungnam li:nth-child(5) {top:28%;left:50%}/* 아산시 */ .map_chungnam li:nth-child(6) {top:32%;left:18%}/* 서산시 */ .map_chungnam li:nth-child(7) {top:68%;left:61%}/* 논산시 */ .map_chungnam li:nth-child(8) {top:62%;left:70%}/* 계룡시 */ .map_chungnam li:nth-child(9) {top:25%;left:30%}/* 당진시 */ .map_chungnam li:nth-child(10) {top:71%;left:81%}/* 금산군 */ .map_chungnam li:nth-child(11) {top:64%;left:43%}/* 부여군 */ .map_chungnam li:nth-child(12) {top:73%;left:33%}/* 서천군 */ .map_chungnam li:nth-child(13) {top:53%;left:43%}/* 청양군 */ .map_chungnam li:nth-child(14) {top:43%;left:26%}/* 홍성군 */ .map_chungnam li:nth-child(15) {top:36%;left:42%}/* 예산군 */ .map_chungnam li:nth-child(16) {top:30%;left:0%}/* 태안군 */ /***** 전북 *****/ .map_jeonbuk li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_jeonbuk li:nth-child(2) {top:40%;left:40%}/* 전주시 */ .map_jeonbuk li:nth-child(3) {top:32%;left:17%}/* 군산시 */ .map_jeonbuk li:nth-child(4) {top:26%;left:33%}/* 익산시 */ .map_jeonbuk li:nth-child(5) {top:52%;left:29%}/* 정읍시 */ .map_jeonbuk li:nth-child(6) {top:66%;left:60%}/* 남원시 */ .map_jeonbuk li:nth-child(7) {top:40%;left:24%}/* 김제시 */ .map_jeonbuk li:nth-child(8) {top:32%;left:49%}/* 완주군 */ .map_jeonbuk li:nth-child(9) {top:39%;left:61%}/* 진안군 */ .map_jeonbuk li:nth-child(10) {top:33%;left:80%}/* 무주군 */ .map_jeonbuk li:nth-child(11) {top:52%;left:69%}/* 장수군 */ .map_jeonbuk li:nth-child(12) {top:54%;left:50%}/* 임실군 */ .map_jeonbuk li:nth-child(13) {top:62%;left:36%}/* 순창군 */ .map_jeonbuk li:nth-child(14) {top:61%;left:9%}/* 고창군 */ .map_jeonbuk li:nth-child(15) {top:49%;left:11%}/* 부안군 */ /***** 전남 *****/ .map_jeonnam li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_jeonnam li:nth-child(2) {top:44%;left:18%}/* 목포시 */ .map_jeonnam li:nth-child(3) {top:47%;left:81%}/* 여수시 */ .map_jeonnam li:nth-child(4) {top:36%;left:68%}/* 순천시 */ .map_jeonnam li:nth-child(5) {top:36%;left:37%}/* 나주시 */ .map_jeonnam li:nth-child(6) {top:33%;left:81%}/* 광양시 */ .map_jeonnam li:nth-child(7) {top:21%;left:50%}/* 담양군 */ .map_jeonnam li:nth-child(8) {top:24%;left:62%}/* 곡성군 */ .map_jeonnam li:nth-child(9) {top:23%;left:75%}/* 구례군 */ .map_jeonnam li:nth-child(10) {top:55%;left:67%}/* 고흥군 */ .map_jeonnam li:nth-child(11) {top:44%;left:59%}/* 보성군 */ .map_jeonnam li:nth-child(12) {top:35%;left:51%}/* 화순군 */ .map_jeonnam li:nth-child(13) {top:48%;left:47%}/* 장흥군 */ .map_jeonnam li:nth-child(14) {top:54%;left:40%}/* 강진군 */ .map_jeonnam li:nth-child(15) {top:62%;left:30%}/* 해남군 */ .map_jeonnam li:nth-child(16) {top:46%;left:33%}/* 영암군 */ .map_jeonnam li:nth-child(17) {top:38%;left:24%}/* 무안군 */ .map_jeonnam li:nth-child(18) {top:30%;left:26%}/* 함평군 */ .map_jeonnam li:nth-child(19) {top:20%;left:23%}/* 영광군 */ .map_jeonnam li:nth-child(20) {top:18%;left:38%}/* 장성군 */ .map_jeonnam li:nth-child(21) {top:70%;left:40%}/* 완도군 */ .map_jeonnam li:nth-child(22) {top:63%;left:15%}/* 진도군 */ .map_jeonnam li:nth-child(23) {top:35%;left:6%}/* 신안군 */ /***** 경북 *****/ .map_gyeongbuk li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_gyeongbuk li:nth-child(2) {top:57%;left:60%}/* 포항시 */ .map_gyeongbuk li:nth-child(3) {top:70%;left:55%}/* 경주시 */ .map_gyeongbuk li:nth-child(4) {top:55%;left:4%}/* 김천시 */ .map_gyeongbuk li:nth-child(5) {top:37%;left:37%}/* 안동시 */ .map_gyeongbuk li:nth-child(6) {top:50%;left:18%}/* 구미시 */ .map_gyeongbuk li:nth-child(7) {top:21%;left:27%}/* 영주시 */ .map_gyeongbuk li:nth-child(8) {top:59%;left:44%}/* 영천시 */ .map_gyeongbuk li:nth-child(9) {top:43%;left:5%}/* 상주시 */ .map_gyeongbuk li:nth-child(10) {top:31%;left:10%}/* 문경시 */ .map_gyeongbuk li:nth-child(11) {top:67%;left:35%}/* 경산시 */ .map_gyeongbuk li:nth-child(12) {top:45%;left:28%}/* 의성군 */ .map_gyeongbuk li:nth-child(13) {top:46%;left:49%}/* 청송군 */ .map_gyeongbuk li:nth-child(14) {top:32%;left:53%}/* 영양군 */ .map_gyeongbuk li:nth-child(15) {top:42%;left:62%}/* 영덕군 */ .map_gyeongbuk li:nth-child(16) {top:76%;left:33%}/* 청도군 */ .map_gyeongbuk li:nth-child(17) {top:73%;left:12%}/* 고령군 */ .map_gyeongbuk li:nth-child(18) {top:62%;left:11%}/* 성주군 */ .map_gyeongbuk li:nth-child(19) {top:58%;left:25%}/* 칠곡군 */ .map_gyeongbuk li:nth-child(20) {top:33%;left:24%}/* 예천군 */ .map_gyeongbuk li:nth-child(21) {top:24%;left:42%}/* 봉화군 */ .map_gyeongbuk li:nth-child(22) {top:24%;left:63%}/* 울진군 */ .map_gyeongbuk li:nth-child(23) {top:15%;left:82%}/* 울릉군 */ .map_gyeongbuk li:nth-child(24) {top:21%;left:96%}/* 독도 */ /***** 경남 *****/ .map_gyeongnam li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_gyeongnam li:nth-child(2) {top:53%;left:55%}/* 창원시 */ .map_gyeongnam li:nth-child(3) {top:53%;left:26%}/* 진주시 */ .map_gyeongnam li:nth-child(4) {top:72%;left:43%}/* 통영시 */ .map_gyeongnam li:nth-child(5) {top:63%;left:25%}/* 사천시 */ .map_gyeongnam li:nth-child(6) {top:48%;left:72%}/* 김해시 */ .map_gyeongnam li:nth-child(7) {top:36%;left:66%}/* 밀양시 */ .map_gyeongnam li:nth-child(8) {top:74%;left:58%}/* 거제시 */ .map_gyeongnam li:nth-child(9) {top:41%;left:83%}/* 양산시 */ .map_gyeongnam li:nth-child(10) {top:41%;left:39%}/* 의령군 */ .map_gyeongnam li:nth-child(11) {top:47%;left:47%}/* 함안군 */ .map_gyeongnam li:nth-child(12) {top:35%;left:50%}/* 창녕군 */ .map_gyeongnam li:nth-child(13) {top:64%;left:40%}/* 고성군 */ .map_gyeongnam li:nth-child(14) {top:77%;left:19%}/* 남해군 */ .map_gyeongnam li:nth-child(15) {top:57%;left:3%}/* 하동군 */ .map_gyeongnam li:nth-child(16) {top:43%;left:12%}/* 산청군 */ .map_gyeongnam li:nth-child(17) {top:31%;left:0%}/* 함양군 */ .map_gyeongnam li:nth-child(18) {top:22%;left:12%}/* 거창군 */ .map_gyeongnam li:nth-child(19) {top:32%;left:30%}/* 합천군 */ /***** 제주 *****/ .map_jeju li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;}/* 전체 */ .map_jeju li:nth-child(2) {top:43%;left:40%}/* 제주시 */ .map_jeju li:nth-child(3) {top:59%;left:35%}/* 서귀포시 */ /***** 세종 *****/ /* .map_sejong li:nth-child(1) {top:3%;left:4%;padding:.3rem 1rem;opacity: 1 !important;} *//* 전체 */ .map_sejong li:nth-child(1) {top:43%;left:40%}/* 세종시 */ /*Tab01>통계 테이블 우측*/ .tabcontent_wrap{display: flex;margin-bottom: 2rem;} #Tab01 .category{position: relative;display: flex;align-items: center;justify-content: center;width: 100%;min-height: 6rem;padding-left:8rem;word-break: keep-all;cursor:pointer;} /* #Tab01 .category:active{outline:1px solid #023b95;border:0;} */ #Tab01 .category::before{content: '';display: block;position: absolute;left:1rem;width:7rem;height: 100%;} #Tab01 .category div{text-align: center;} #Tab01 .cate_01::before{background: url(../images/main/cate_01.png)no-repeat center;} #Tab01 .cate_01:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_02::before{background: url(../images/main/cate_02.png)no-repeat center;} #Tab01 .cate_02:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_03::before{background: url(../images/main/cate_03.png)no-repeat center;} #Tab01 .cate_03:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_04::before{background: url(../images/main/cate_04.png)no-repeat center;} #Tab01 .cate_04:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_05::before{background: url(../images/main/cate_05.png)no-repeat center;} #Tab01 .cate_05:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_06::before{background: url(../images/main/cate_06.png)no-repeat center;} #Tab01 .cate_06:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_07::before{background: url(../images/main/cate_07.png)no-repeat center;} #Tab01 .cate_07:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_08::before{background: url(../images/main/cate_08.png)no-repeat center;} #Tab01 .cate_08:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_09::before{background: url(../images/main/cate_09.png)no-repeat center;} #Tab01 .cate_09:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_10::before{background: url(../images/main/cate_10.png)no-repeat center;} #Tab01 .cate_10:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_11::before{background: url(../images/main/cate_11.png)no-repeat center;} #Tab01 .cate_11:active::before{outline:1px solid #023b95;border:0;} #Tab01 .cate_12::before{background: url(../images/main/cate_12.png)no-repeat center;} #Tab01 .cate_12:active::before{outline:1px solid #023b95;border:0;} .num{font-size: 2.6rem;color:#333;font-weight: 700;letter-spacing: -0.1rem;} .unit{font-size: 1.4rem;color:#666;margin-top:0.5rem;white-space: nowrap;} .col_orange{color:#ee3722;} .col_green{color:var(--col_main_green);} /*Tab02_주제별*/ /* #Tab02 .layer_left{width: 45%;margin-right: 6rem;} #Tab02 .layer_right{width: 55%} #Tab02 .layer_left h2{color:#333;white-space: nowrap;font-weight: 300;margin:2rem 0;letter-spacing: -0.3rem;border-bottom: 2px solid #333;} #Tab02 .layer_left h2 button{background: var(--col_main_green);color: #fff;font-size: 1.8rem;float: right;padding:0.8rem 1rem;} #Tab02 .layer_right h2{color:#333;white-space: nowrap;margin:2rem 0;} #Tab01 .layer_right h2 .gu{color: var(--col_main_green);font-weight: 600;} */ /*Tab02_주제별 제목*/ #Tab02 .tit{position: relative;display: flex;align-items: center;justify-content: space-between;border-bottom: 2px solid #333;margin: 2rem 0;} .map_title {display: flex;align-items: center;gap: 8px;} .title_line1,.title_vs,.title_line2 {display: inline;} .title_line1{margin-right:1rem;} .title_line2{margin-left:0.3rem;} #Tab02 .tit h2 {color: #333;white-space: nowrap;font-weight: 300;letter-spacing: -0.1rem;} #Tab02 .tit .txt_info {font-size: 1.6rem;margin:1rem} #Tab02 .tit button{position: absolute;right:0;bottom:0.5rem;background: var(--col_main_green);color: #fff;font-size: 1.8rem;float: right;padding:0.8rem 1rem;} /*Tab02_주제별 검색박스*/ #Tab02 .search_box{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;background:#f4f4f4;padding:1rem;border-radius:0.5rem;} #Tab02 .search_box div{display: flex;align-items: center;} #Tab02 .search_box div:nth-of-type(1){width: 60%;} #Tab02 .search_box div:nth-of-type(2){width: 30%;} #Tab02 .search_box div:nth-of-type(3){width:10%} #Tab02 .search_box label{font-size: 1.8rem;margin:0 2rem 0 3rem;white-space: nowrap;} #Tab02 .search_box .vs{margin:0 2rem} #Tab02 .search_box select{font-size: 1.8rem;padding:0.8rem 3.6rem 0.8rem 1.2rem;} #Tab02 .search_box button{padding:0.8rem 0; width:10rem;font-size: 1.8rem;} #Tab02 .layer_left_map{position: relative;;width: 50%;} #Tab02 .layer_right h2{color:#333;white-space: nowrap;margin:2rem 0;} #Tab01 .layer_right h2 .gu{color: var(--col_main_green);font-weight: 600;} #Tab02 .layer_right_chart{display: flex;align-items: center;justify-content: center;width: 50%} .chart_container {width: 100%;max-width: 80rem;height: 50rem;margin: 5rem 2rem;} .txt_info{position: relative;letter-spacing: -0.1rem;padding-left:3rem} .txt_info:before{content: '';display: block;background: url(../images/main/icon_info.png)no-repeat center center;width:2rem;height:2rem;position: absolute;left:0;} /*통계주요지표>주제별*/ /* #Tab02 .map_box{position: relative;;display: flex;align-items: start;justify-content: center; height:59rem;margin:5rem 2rem} #Tab02 .map_box .map{position: relative;;background: url(../images/map/map_Korea_theme.svg)no-repeat center center;width:100%;height:100%;min-height: 50rem;} #Tab02 .map_box .map li {position: absolute;z-index: 1;padding: 0.3rem 0.7rem;background: rgba(0,0,0,0.7);font-size:1.5rem;color: #fff;border-radius: 10.25rem;cursor: pointer;font-weight: 500;line-height: normal;white-space: nowrap;} .map_korea li.inactive {opacity: 0.3;transition: opacity 0.3s ease;} .map_korea li.active {opacity: 1;transition: opacity 0.3s ease;} #Tab02 .map_box .data_box{font-size: 2.4rem;color: #333;font-weight: 500;padding: 0.5rem;width:auto;background: rgba(255, 255, 255, 0.8);border-radius: 0.5rem;border:1px solid #666} #Tab02 .map_box .data_box:hover{z-index: 999;cursor: pointer;background: rgba(0, 0, 0, .8);color:#fff;border:1px solid #666} #Tab02 .map_box .data_box:hover .num_data .unit{color: #fff;} #Tab02 .map_box .data_box .area{display: block;font-size: 1.4rem;white-space: nowrap;} #Tab02 .map_box .data_box .area .category{font-size: 1.2rem;padding: 0;} #Tab02 .map_box .data_box .num_data{position: relative;font-weight: 600;white-space: nowrap;} #Tab02 .map_box .data_box .num_data .unit{font-size: 1.6rem;color:#333;margin: 0 0 0 0.2rem;} */ #Tab02 .map_box{position: relative;;display: flex;align-items: start;justify-content: center; height:59rem;margin:5rem 0} #Tab02 .map_box .legend_box{position: absolute;top:-3rem;right:-14rem;background: rgba(0, 0, 0, .8);border-radius: 0.5rem;padding:0.7rem;color: #fff;font-size: 1.4rem;} #Tab02 .map_box .legend_box .legend_item_tit{color:#1eb19e} #Tab02 .map_box .map{position: relative;;background: url(../images/map/map_Korea_theme.svg)no-repeat center center;width:100%;height:100%;min-height: 50rem;} #Tab02 .map_box .map li {position: absolute;z-index: 1;padding: 0.3rem 0.7rem;background: rgba(0,0,0,0.7);font-size:1.4rem;color: #fff;border-radius: 10.25rem;cursor: pointer;font-weight: 500;line-height: normal;white-space: nowrap;} .map_korea li.inactive {opacity: 0.3;transition: opacity 0.3s ease;} .map_korea li.active {opacity: 1;transition: opacity 0.3s ease;} #Tab02 .map_box .data_box{font-size: 1.6rem;color: #333;font-weight: 500;padding: 0.5rem;width:auto;background: rgba(255, 255, 255, 0.8);border-radius: 0.5rem;border:1px solid #666} #Tab02 .map_box .data_box:hover{z-index: 999;cursor: pointer;background: rgba(0, 0, 0, .8);color:#fff;border:1px solid #666} #Tab02 .map_box .data_box:hover .num_data .unit{color: #fff;} #Tab02 .map_box .data_box .area{display: block;font-size: 1.4rem;white-space: nowrap;} #Tab02 .map_box .data_box .area .category{font-size: 1.2rem;padding: 0;} #Tab02 .map_box .data_box .num_data{position: relative;font-weight: 600;white-space: nowrap;line-height: 1.8rem;text-align: right;} #Tab02 .map_box .data_box .num_data .data_row{font-weight: 600;} #Tab02 .map_box .data_box .num_data .unit{font-size: 1.4rem;color:#333;margin: 0 0 0 0.2rem;} #Tab02 .map_box_in{position: relative;width: 38rem;height: 100%;display: flex;align-items: center;justify-content: center;} #Tab02 .map_box_table{display: none;width: 100%;} #Tab02 .map_box_table tr td:nth-of-type(1){width: 20%;white-space: nowrap;} #Tab02 .map_box_table tr td:nth-of-type(2){width: 20%;white-space: nowrap;} #Tab02 .map_box_table tr td:nth-of-type(3){width: 60%;white-space: nowrap;} #Tab02 .infoImgIcon{margin-right:2rem;position: absolute;cursor: pointer;width: 1.5rem;} /*통계주요지표 info 아이콘 css*/ /*서울*/ .map_box .seoul{position: absolute;top:-4%;left:13%;} .map_box .seoul:after{content: ''; display: block;position: absolute;top:100%;right:33%;border-left:1px dashed #333;height: 6rem;width:1px;} /*인천*/ .map_box .incheon{position: absolute;top:5%;right:96%;} .map_box .incheon:after{content: ''; display: block;position: absolute;top:125%;left:95%;border-top:1px dashed #333;height: 1px;width:4rem;transform: rotate(45deg);} /*경기*/ .map_box .gyeonggi{position: absolute;top:17%;right:100%;} .map_box .gyeonggi:after{content: ''; display: block;position: absolute;top:90%;left:100%;border-top:1px dashed #333;height: 1px;width:9.8rem;transform: rotate(12deg);} /*충북*/ .map_box .chungbuk{position: absolute;top:25%;left:89%;} .map_box .chungbuk::before{content: ''; display: block;position: absolute;top:76%;right:100%;border-top:1px dashed #333;height: 1px;width:14.3rem;transform: rotate(-7deg);} /*세종*/ .map_box .sejong{position: absolute;top:29%;right:98%;} .map_box .sejong:after{content: ''; display: block;position: absolute;top:90%;left:100%;border-top:1px dashed #333;height: 1px;width:10.8rem;transform: rotate(10deg);} /*충남*/ .map_box .chungnam{position: absolute;top:40%;right:100%;} .map_box .chungnam:after{content: ''; display: block;position: absolute;top:35%;left:100%;border-top:1px dashed #333;height: 1px;width:6.3rem;} /*대전*/ .map_box .daejeon{position: absolute;top:51%;right:98%;} .map_box .daejeon:after{content: ''; display: block;position: absolute;top:-5%;left:100%;border-top:1px dashed #333;height: 1px;width:11.5rem;transform: rotate(-13deg);} /*전북*/ .map_box .jeonbuk{position: absolute;top:62%;right:102%;} .map_box .jeonbuk:after{content: ''; display: block;position: absolute;top:-6%;left:100%;border-top:1px dashed #333;height: 1px;width:11rem;transform: rotate(-15deg)} /*광주*/ .map_box .gwangju{position: absolute;top:73%;right:102%;} .map_box .gwangju:after{content: ''; display: block;position: absolute;top:-4%;left:100%;border-top:1px dashed #333;height: 1px;width:7.3rem;transform: rotate(-25deg)} /*전남*/ .map_box .jeonnam{position: absolute;top:84%;right:103%;} .map_box .jeonnam:after{content: ''; display: block;position: absolute;top:-20%;left:95%;border-top:1px dashed #333;height: 1px;width:11rem;transform: rotate(-27deg);} /*강원*/ .map_box .gangwon{position: absolute;top:6%;left:77%;} .map_box .gangwon::before{content: ''; display: block;position: absolute;top:72%;right:100%;border-top:1px dashed #333;height: 1px;width:7.5rem;transform: rotate(-15deg);} /*경북*/ .map_box .gyeongbuk{position: absolute;top:37%;left:88%;} .map_box .gyeongbuk::before{content: ''; display: block;position: absolute;top:48%;right:100%;border-top:1px dashed #333;height: 1px;width:6.6rem;transform: rotate(-7deg);} /*대구*/ .map_box .daegu{position: absolute;top:49%;left:90%;} .map_box .daegu::before{content: ''; display: block;position: absolute;top:50%;right:100%;border-top:1px dashed #333;height: 1px;width:8rem;transform: rotate(-3deg);} /*울산*/ .map_box .ulsan{position: absolute;top:61%;left:91%;} .map_box .ulsan::before{content: ''; display: block;position: absolute;top:25%;right:100%;border-top:1px dashed #333;height: 1px;width:1.8rem;} /*경남*/ .map_box .gyeongnam{position: absolute;top:76%;left:50%;} .map_box .gyeongnam::before{content: ''; display: block;position: absolute;bottom:100%;right:84%;border-left:1px dashed #333;height: 5.3rem;width:1px;} /*부산*/ .map_box .busan{position: absolute;top:73%;left:91%;} .map_box .busan::before{content: ''; display: block;position: absolute;top:0%;right:100%;border-top:1px dashed #333;height: 1px;width:5rem;transform: rotate(17deg);} /*제주*/ .map_box .jeju{position: absolute;top:88%;left:35%;} .map_box .jeju::before{content: ''; display: block;position: absolute;top:50%;right:100%;border-top:1px dashed #333;height: 1px;width:2rem;} /*통계주요지표>주제별*/ /* 활성화된 지역 */ .data_box.active {opacity: 1;background: rgba(0, 0, 0, .8) !important;color: #fff !important;/*border: 0 !important;*/z-index: 999;} .data_box.active .unit{color: #fff !important;} /* 비활성화된 지역 */ .data_box.inactive {opacity: 0.3;filter: grayscale(50%);} /*자료실>산림기본통계*/ .gray_box{background: #f4f4f4;border-radius: 0.5rem;} .gray_box .btn img{width: 2rem;} .layer_top{display: flex;align-items: center;} .board_view .board_view_tit{display: flex;align-items: center;justify-content: center;padding:2.2rem;font-size: 2.8rem;border-bottom:2px solid #333;font-weight: 500;} .board_view .board_view_con ul li.bvc_row{display: flex;padding:1.5rem;border-bottom:1px solid #e0e4e7} .board_view .board_view_con ul li.bvc_row dl{display: flex;margin-right:5rem;} .board_view .board_view_con ul li.bvc_row dl dt{font-weight: 600;white-space: nowrap;} .board_view .board_view_con ul li.bvc_row dl dd{margin-left:0.5rem} .board_view .board_view_con ul li.bvc_row dl dd.file_download{position: relative;} /* .board_view .board_view_con ul li.bvc_row dl dd.file_download::after{content: '';display: block;background: url(../images/main/icon_file_download.png)no-repeat center center;width: 1.5rem;height:2rem;position: absolute;right:0;top:0} */ .board_view .board_view_con ul li.bvc_row dl dd.file_download a>img{padding-left:1.5rem;} .board_view .board_view_con ul li.con{min-height: 20rem;align-items: start;padding: 3rem 2rem} .board_view .board_view_con ul li.button {align-items: center;justify-content: center;padding:2rem 0 6rem 0} .board_view .board_view_con ul li.button img{width: 2rem;} .board_view .board_view_con ul li:last-child{border-bottom:0} .board_view .board_view_page ul{display: flex;border:1px solid #e0e4e7;} .board_view .board_view_page ul li{flex:1;display: flex;justify-content:center;} .board_view .board_view_page ul li a{display: block;color:#333;padding: 2rem 1rem;width: 100%;} .board_view .board_view_page ul li a.pre div:first-child{text-align: center;margin-bottom:1rem} .board_view .board_view_page ul li a.pre div:first-child span{position: relative;font-size: 2.4rem;padding-left:5.6rem} .board_view .board_view_page ul li a.pre div:first-child span::before{content:'';display: block;width:4.6rem;height:1.4rem;position: absolute;left:0;bottom:1rem;background:url(../images/main/icon_arrow_pre.png)no-repeat} .board_view .board_view_page ul li a.pre div:last-child{text-align: center;overflow: hidden;text-overflow: ellipsis;} .board_view .board_view_page ul li a.next{border-left:1px solid #e0e4e7;} .board_view .board_view_page ul li a.next div:first-child{text-align: center;margin-bottom:1rem} .board_view .board_view_page ul li a.next div:first-child span{position: relative;font-size: 2.4rem;padding:0 5.6rem 0 0} .board_view .board_view_page ul li a.next div:first-child span::after{content:'';display: block;width:4.6rem;height:1.4rem;position: absolute;right:0;bottom:1rem;background:url(../images/main/icon_arrow_next.png)no-repeat} .board_view .board_view_page ul li a.next div:last-child{text-align: center;} .book_con ul li a{display: block;} .book_con ul li{width:calc((100% / 5));float: left;text-align: center;margin:4rem 0 2rem;} .book_cover{display: inline-block;overflow: hidden;border:1px solid #333;box-shadow: 5px 5px #c1c1c1;height:21.7rem;max-width: 160px;} .book_cover img{width:100%;height:100%;scale:100%;transition: all .5s;} .book_cover:hover img{scale: 120%;transition: all .5s;} .book_tit{color:#333;margin:2rem 0 0 0;text-align: center;} /*자료실>통계간행물E-Book*/ .ebook_con ul{display:grid;grid-template-columns: repeat(5, 1fr);gap: 8rem 0;} .ebook_con ul li{text-align: center;} .ebook_con ul li a{display: block;} .ebook_cover{display: inline-block;overflow: hidden;border:1px solid #333;box-shadow: 5px 5px #c1c1c1;height:24rem;} .ebook_cover img{width:100%;height:100%;scale:100%;transition: all .5s;} .ebook_cover:hover img{scale: 120%;transition: all .5s;} .ebook_tit{color:#333;margin:3rem 0 0 0;text-align: center;} .board_search_box .input_search{width:calc(100% - 30.897rem)} .board_search_box .input_search_ebook{width:calc(100% - 34.897rem)} .board_search_box .input_search_info{width:calc(100% - 56.897rem)} .board_search_box .input_search_rele{width:calc(100% - 34.897rem)} /*보이는 통계*/ #statsDatas button{background: var(--col_main_green);color: #fff;font-size: 1rem;float: right;padding:0.4rem 1rem;margin-top:0.5rem;} .do_list{width: 100%;margin-bottom:2.5rem} .do_list ul{display: flex;flex-wrap: wrap;;border:1px solid #d5d5d5} .do_list ul li{width:calc(100% / 17);border-right:1px solid #d5d5d5} .do_list ul li:last-child{border-right:0} .do_list ul li a{display: block;color: #333;padding:1.5rem 0; text-align: center;} .do_list ul li a.active{background: var(--col_main_green);color:#fff} .do_stat{margin-bottom:3rem} .do_stat h3{margin-bottom:0.5rem;font-weight: 600;font-size:2rem;} .do_stat h3 span{color:var(--col_main_green);font-weight: 600;} .chart_view .layer_top h1{width: 100%;;text-align: center;margin:4rem 0 3.5rem 0} .chart_view .layer_con ul{display: flex;} .chart_view .layer_con ul li:nth-of-type(2n+1){flex:1;margin-right:1rem} .chart_view .layer_con ul li:nth-of-type(2n){flex:1;margin-left:1rem} .chart_view .layer_con .gray_line_box{position: relative;border:1px solid #d5d5d5;background: #f4f4f4;padding:3rem 0.9rem 0.9rem 0.9rem;margin-top:3rem;} .chart_view .layer_con .gray_line_box .tit{display: flex;width: 100%;white-space: nowrap;font-size: 2.2rem;} .chart_view .layer_con .gray_line_box .tit .btn_box{justify-content: end;} .chart_view .layer_con .gray_line_box .tit .btn_box div{padding:0 0 0 1rem} .chart_view .layer_con .gray_line_box .tit .btn_box button{font-size: 1.3rem; padding:0.2rem 1rem;border-radius: 0.3rem;height:auto} .chart_view .layer_con .gray_line_box .tit .btn_box button.excel span{position: relative;display: block;padding-left:2rem} .chart_view .layer_con .gray_line_box .tit .btn_box button.excel span::before{content: '';display: block;background:url(../images/main/icon_excel.png)no-repeat center center/15px;width:15px;height:15px;position: absolute;left:0;height: 100%;} .chart_view .layer_con .gray_line_box .tit .btn_box button.region span{position: relative;display: block;padding-left:2rem} .chart_view .layer_con .gray_line_box .tit .btn_box button.region span::before{content: '';display: block;background:url(../images/main/icon_chart.png)no-repeat center center/15px;width:15px;height:15px;position: absolute;left:0;height: 100%;} /*보이는 통계 see_search_box*/ .see_search_box .label{width:6.531rem} .see_search_box .wave{width: 2.002rem;} .see_search_box .check_select{position: relative;;width:calc(100% - 46.8972rem)} .see_search_box .btn_search{width:8.366rem} /*보이는통계 > 검색조건박스*/ .statistics-container {width: 100%;max-width: 600px;} .form-select {width: 100%;padding: 10px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;} .hierarchical-menu {position: absolute;left:0;top:3.7rem;width:100%;animation: slideDown 0.3s ease-out;z-index: 99;} @keyframes slideDown { from {opacity: 0;transform: translateY(0px);} to {opacity: 1;transform: translateY(0);} } @keyframes slideIn { from {opacity: 0;transform: translateX(-10px);} to {opacity: 1;transform: translateX(0);} } .hierarchical-menu .hierarchical-menu-box{display: flex;;flex-wrap: wrap;width:calc(100% - 1rem);height: 100%;margin: 0 auto;border: 1px solid #d5d5d5;background: #fff;box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);border-radius: 0.6rem;overflow: hidden;} .menu-column { display: flex;flex-direction: column;;flex: 1;border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;height: auto;} .menu-column:nth-of-type(4) {border-right: 0;} .menu-header {background-color: rgba(0,123,139,1);color:#fff;padding: 0.8rem 1rem;position: sticky;top: 0;z-index: 10;text-align: center;height: 3.4rem;font-size: 1.5rem;} .column-2 .menu-header {background-color: rgba(0,123,139,0.8);} .column-3 .menu-header {background-color: rgba(0,123,139,0.6);} .menu-item {position: relative;display: flex;cursor: pointer;transition: background-color 0.2s;border-bottom: 1px solid #eee;} .menu-item:last-child {border-bottom: none;} .menu-item:hover {background-color: rgba(218,238,240,0.5)/*#e8f5e9*/;} .menu-item.active {background-color:#ced4da/* #eee*/;} .menu-item.active::after{content: '';display: block;background: url(../images/main/icon_arrow_right.png)no-repeat center center;position: absolute;right:0.7rem;width:1rem;height:100%;} /* 하위 메뉴가 없는 항목은 화살표 숨기기 */ .menu-item.no-children.active::after, .column-3 .menu-item.active::after {display: none;} .menu-content {position: relative;;cursor: pointer;display: flex;width: 100%;align-items: center;gap: 5px;padding: 0.8rem 1rem;font-size: 1.5rem;} .menu-content input[type="checkbox"] {width: 1.8rem;height: 1.8rem;cursor: pointer;accent-color: var(--col_main_green);} .level3{overflow-y: auto;height: 30rem;} /* 스크롤바 스타일 */ .level3::-webkit-scrollbar {width: 0.6rem;} .level3::-webkit-scrollbar-track {background: #f1f1f1;} .level3::-webkit-scrollbar-thumb {background: #888;border-radius: 0.3rem;} .level3::-webkit-scrollbar-thumb:hover {background: #555;} .hierarchical-menu-box .btn_box{width: 100%;margin:0.5rem;} .hierarchical-menu-box .btn_box .excel{font-size: 1.3rem; padding:0.2rem 1rem;border-radius: 0.3rem;width:auto;float: right;} .hierarchical-menu-box .btn_box .excel span{position: relative;display: block;padding-left:2rem} .hierarchical-menu-box .btn_box .excel span::before{content: '';display: block;background:url(../images/main/icon_excel.png)no-repeat center center/15px;width:15px;height:15px;position: absolute;left:0;height: 100%;} .hierarchical-menu-box .select_box{display: flex;width: 100%;padding:0.5rem;background: #eee;} .hierarchical-menu-box .select_box div{flex:1;justify-content: start;} .hierarchical-menu-box .select_box select{font-size: 1.5rem;padding:0.2rem 3rem 0.2rem 1rem !important;background-position:right 1rem center;border-radius: 0.3rem} .hierarchical-menu-box .select_box .excel{font-size: 1.3rem; padding:0.2rem 1rem;border-radius: 0.3rem;width:auto;} .hierarchical-menu-box .select_box .excel span{position: relative;display: block;padding-left:2rem} .hierarchical-menu-box .select_box .excel span::before{content: '';display: block;background:url(../images/main/icon_excel.png)no-repeat center center/15px;width:15px;height:15px;position: absolute;left:0;height: 100%;} /*보여지는 통계 모달*/ .modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;} .modal.active {display: block;} .modal-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);} .modal-content {position: relative;background: white;max-width:120rem;margin: 5% auto;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);animation: modalSlideIn 0.3s ease;z-index: 1001;} @keyframes modalSlideIn { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header {display: flex;justify-content: space-between;align-items: center;padding:0 2rem;} .modal-header .navigation{width:100%} .modal-header .modal-close {background: url(../images/main/icon_x.png)no-repeat center center;width: 3rem;height: 30px;margin-left: auto;} .modal-body {padding: 2rem;} /* body에 모달이 열렸을 때 스크롤 방지 */ body.modal-open {overflow: hidden;} .checkbox-list li {position: relative;} /* 체크박스 숨기기 */ .checkbox-list input[type="checkbox"] {position: absolute;opacity: 0;width: 0;height: 0;} /* label 스타일 */ .checkbox-list label {display: block;background: #fff;cursor: pointer;transition: all 0.3s ease;user-select: none;padding: 1.5rem 0;text-align: center;} /* hover 효과 */ .checkbox-list label:hover {background: #f0f0f0;} /* 선택된 상태 (초록색 배경) */ .checkbox-list input[type="checkbox"]:checked + label {background: var(--col_main_green);color: white;} /* 선택된 상태 hover */ .checkbox-list input[type="checkbox"]:checked + label:hover {background: var(--col_main_green);} /*모달 지역비교 see_search_box*/ .m_see_search_box .select_year{width:calc(100% - 15.897rem)} /* 기존 CSS 추가(main2.css) */ /* 사용자의견 모달 스타일 (민진홍) */ .surveyModal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);justify-content: center;align-items: center;z-index:2101;} /*통계 연간일정*/ .schedule_box ul{display:flex; flex-wrap:wrap; padding-top:10px; padding-bottom:20px; background:#fff;} .schedule_box ul li{width:calc(100% /3); margin-top:10px} .schedule_box ul li .month_box{position:relative; margin:0 15px; padding:5px; border-radius: 5px; box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.3);} .schedule_box ul li:nth-child(1) .month_box{background:#449fcd;} .schedule_box ul li:nth-child(2) .month_box{background:#5bb8c2;} .schedule_box ul li:nth-child(3) .month_box{background:#67b888;} .schedule_box ul li:nth-child(4) .month_box{background:#5bb8c2;} .schedule_box ul li:nth-child(5) .month_box{background:#67b888;} .schedule_box ul li:nth-child(6) .month_box{background:#449fcd;} .schedule_box ul li:nth-child(7) .month_box{background:#67b888;} .schedule_box ul li:nth-child(8) .month_box{background:#449fcd;} .schedule_box ul li:nth-child(9) .month_box{background:#5bb8c2;} .schedule_box ul li:nth-child(10) .month_box{background:#449fcd;} .schedule_box ul li:nth-child(11) .month_box{background:#5bb8c2;} .schedule_box ul li:nth-child(12) .month_box{background:#67b888;} .schedule_box ul li h2{color:#fff;font-size: 22px;text-align: center;border-bottom: 0px;margin-bottom: 0;} .schedule_box ul li h2 em{font-size: 18px;} .schedule_box ul li .m_circle_l{position:absolute; left:10px; top:5px; display:block; width:6px; height:6px; border-radius:3px; background:#fff;} .schedule_box ul li .m_circle_r{position:absolute; right:10px; top:5px; display:block; width:6px; height:6px; border-radius:3px; background:#fff;} .schedule_box ul li .m_box{background:#fff; border-radius:5px; padding:15px 20px; height:calc(100% - 78px)} .schedule_box ul li .m_box span{display:block; border-bottom:1px dashed #ddd; font-size: 14.5px; font-weight: 600;} .schedule_box ul li .m_box span:last-child{border-bottom:0px} #listBody{cursor:pointer;} /* 기존 CSS 추가(main2.css) */ /* 차트 크기 지정 */ .chart_box { width: 520px; height: 400px; } /*설문 팝업 251203 대국민 개편하면서 CSS 삭제*/ .surveyModal{display: none;position: fixed;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index: 2101;} .surveyModal .surveyModal-content{position: absolute;top:50px;left:50%;transform: translate(-50%,0%);border-radius: 5px;width: 800px;margin:0 auto} .surveyModal .surveyModal-content h1{background:#078064;color:#fff;font-size: 20px;padding: 15px 20px;line-height: 20px;} .surveyModal .surveyModal-content h1 .close{position:absolute;top:0;right:0px;background: transparent;font-size: 20px;padding:15px;} .surveyModal .surveyModal-content .pop_box{background: #fff;padding:20px;width: 100%;height: calc(100% - 50px);overflow-y: auto;box-sizing: border-box;} .surveyModal .surveyModal-content .pop_box dl{margin-bottom:20px;} .surveyModal .surveyModal-content .pop_box dl *{box-sizing: border-box;} .surveyModal .surveyModal-content .pop_box dl dt{font-size: 16px;font-weight: 600;color:#000;padding-bottom: 5px;} .surveyModal .surveyModal-content .pop_box dl dd{display: flex;flex-wrap: wrap;padding-left:25px;font-size: 14px;} .surveyModal .surveyModal-content .pop_box dl dd span{margin-right:30px;line-height: 26px;} .surveyModal .surveyModal-content .pop_box dl dd input[type=radio]{width:18px;height:18px;} .surveyModal .surveyModal-content .pop_box dl dd input[type=text]{width: 100px;border-radius: 3px;} .surveyModal .surveyModal-content .pop_box dl dd textarea{width:100%;height:100px;font-size: 14px;} .surveyModal .surveyModal-content .pop_box h2{border-bottom: 1px solid #ddd;margin-bottom:20px;} .surveyModal .surveyModal-content .pop_box h2 span{display: inline-block;border-bottom:2px solid #000;margin-bottom:-1px;padding:0 20px;color:#000} .surveyModal .surveyModal-content .pop_box .txt_info{background: #f4f4f4;padding:10px;text-align: center;font-size: 16px;font-weight: 600;color:#000;line-height: 20px;} .surveyModal .surveyModal-content .btn_box{text-align: center;padding:15px 0} .surveyModal .surveyModal-content .btn_box button{width:120px;border-radius: 5px;} .surveyModal .surveyModal-content .btn_box .btn_line{border: 1px solid #333;background:transparent;color:#333} .surveyModal .surveyModal-content .btn_box .btn_green{background:#078064;color:#fff} .surveyModal .surveyModal-content .btn_box .btn_green_line{border:1px solid #078064;background:transparent;color:#333} .microDataSurveyModal{display: none;position: fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index: 2101;justify-content: center;align-items: center;} .microDataSurveyModal .microDataSurveyModal-content{position: absolute;top:50px;left:50%;transform: translate(-50%,0%);border: 1px solid #888;border-radius: 5px;width: 40%;height: 70%;margin: auto;background-color: #fefefe;} .microDataSurveyModal .microDataSurveyModal-content h1{background:#078064;color:#fff;font-size: 20px;padding: 15px 20px;line-height: 20px;} .microDataSurveyModal .microDataSurveyModal-content h1 .close{position:absolute;top:0;right:0px;background: transparent;font-size: 20px;padding:15px;} .microDataSurveyModal .microDataSurveyModal-content .btn_box{text-align: center;padding:15px 0} .microDataSurveyModal .microDataSurveyModal-content .btn_box button{width:120px;border-radius: 5px;} .microDataSurveyModal .microDataSurveyModal-content .btn_box .btn_line{border: 1px solid #333;background:transparent;color:#333} .microDataSurveyModal .microDataSurveyModal-content .btn_box .btn_green{background:#078064;color:#fff} .microDataSurveyModal .microDataSurveyModal-content .btn_box .btn_green_line{border:1px solid #078064;background:transparent;color:#333} #microDataSurveyListDivBtm {background: #fff;padding: 20px;padding-top : 0px;width: 100%;box-sizing: border-box;} #microDataSurveyInputForm .txt_info{background: #f4f4f4;padding: 10px;text-align: center;font-size: 16px;font-weight: 600;color: #000;line-height: 20px;} #microDataSurveyInputForm {overflow: auto;height: 100%;} #microDataSurveyListDiv{background: #fff;padding: 20px;padding-bottom: 0px;width: 100%;box-sizing: border-box;} #microDataAnswerListArea{display: flex;flex-wrap: wrap;padding-left: 25px;font-size: 14px;} #microDataAnswerListArea li{margin-right: 20px;line-height: 26px;} /** 1600 시작 **/ @media screen and (max-width:1600px){ .sub_contents_wrap .content_wrap{padding: 4rem 3rem} } /** 1600px 끝 **/ /** 1400 시작 **/ @media screen and (max-width:1400px){ .box1400 {padding:0 1rem} /*메인 퀵메뉴*/ .quick_menu{position: relative;width: 100%;height: 10rem;right:0} .quick_menu ul{flex-direction: row;} .quick_menu ul li{width: calc(100% / 4); margin-left:1px;} /*산림청 승인통계 6개*/ .section_2 .stat_item_box ul li{width: calc(16.6666666% - 2.92rem);} .section_2 .stat_item_box ul li:nth-of-type(6n){margin-right:0} .section_2 .stat_item_box ul li:nth-of-type(7n){margin: 0 3.5rem 2rem 0;} /*자료실>통계잔행물E-Book*/ .ebook_con ul{grid-template-columns: repeat(4, 1fr);} } /** 1400px 끝 **/ /** 1280 시작 **/ @media screen and (max-width:1280px){ .subcontent_wrap{flex-wrap: wrap;} /*section_1*/ .section_1{height:auto} .section_1 .slider .slide{justify-content: center;} .section_1 .slide .stat_box:first-child{margin-bottom:0} .section_1 .slide .stat_box:nth-of-type(2){margin:5rem 0 0 0} .section_1 .slide .stat_bottom{margin:2rem 0} /*주메뉴 감춤*/ .menu_box{display: none !important;} .search_menu_box{display: block !important;} .search_menu_box #gnb > ul{width:100%} .search_menu_box #gnb > ul > li{flex:1} .search_menu_box #gnb > ul > li > a{min-width:auto} /*하단배너*/ .banner-item {width: calc(100% / 4)!important;} /*보이는 통계 see_search_box*/ .see_search_box .label{width:6.531rem} .see_search_box .select_year{width:calc((100% - 8.533rem) / 2 )} .see_search_box .wave{width: 2.002rem;} .see_search_box .check_select{width:calc(100% - 8.366rem)} .see_search_box .btn_search{width:8.366rem} } /** 1280 끝 **/ /** 1200 시작 **/ @media screen and (max-width:1200px){ /*보이는 통계 차트*/ .chart_view .layer_con ul{display: block;} .chart_view .layer_con ul li:nth-of-type(2n+1){margin:0 0 5rem 0;width: 100%;} .chart_view .layer_con ul li:nth-of-type(2n){margin:0 0 5rem 0;width: 100%;} /*통계주요지표>주제별*/ #Tab02 .tit{display: block;} .tabcontent_wrap .layer_con{display: block;} #Tab02 .layer_left_map{width: 100%;} #Tab02 .layer_right_chart{width:100%} .chart_container{margin:5rem 0} } /** 1200 끝 **/ /** 1024 시작 **/ @media screen and (max-width:1024px){ /*산림청 승인통계 5개*/ .section_2 .stat_item_box ul li{width: calc(20% - 2.0rem);margin: 0 2.5rem 2rem 0;} .section_2 .stat_item_box ul li:nth-of-type(5n){margin-right:0} .section_2 .stat_item_box ul li:nth-of-type(6n){margin-right:2.5rem} .section_2 .stat_item_box ul li:nth-of-type(7n){margin-right:2.5rem} /*footer*/ footer .footer_bottom .copyright_box .txt ul{display: block;} /*서브페이*/ #lnb{display: none;} #container_wrap{width:100%} /*통계주요지표>행정구역*/ .tabcontent_wrap{display: block;} #Tab01 .layer_left{width: 100%;margin-right: 0 !important;} #Tab01 .layer_right{width: 100%;} #Tab02 .layer_left{width: 100%;margin-right: 0 !important;} #Tab02 .layer_right{width: 100%;} #Tab02 .layer_right_map{width: 100%;} /*통합검색 페이지 메뉴*/ .search_menu_box{display: none !important;} } /** 1024 끝 **/ /** 912 시작 **/ @media screen and (max-width:912px){ /*산림청 승인통계 4개*/ .section_2 .stat_item_box ul li{width: calc(25.14% - 2.0rem);margin: 0 2.5rem 2rem 0;} .section_2 .stat_item_box ul li:nth-of-type(4n){margin-right:0} .section_2 .stat_item_box ul li:nth-of-type(5n){margin-right:2.5rem} /*section_3*/ .section_3 .section_box .report_box ul li{width: calc(50% - 0.75rem);} .section_3 .section_box .report_box ul li:nth-of-type(3n){margin-right:1.5rem} .section_3 .section_box .report_box ul li:nth-of-type(2n){margin-right:0rem} /*하단배너*/ .banner-item {width: calc(100% / 3)!important;} } /** 912 끝 **/ /** 820 시작 **/ @media screen and (max-width:820px){ /*section_1*/ .section_1 .slider_wrap{width: calc(100% - 13rem);} .section_1 .prev-btn{margin:0 2rem 0 1rem} .section_1 .next-btn{margin:0 1rem 0 2rem} /*통계주요지표> 지역별 .map_box{background-size:38.5rem;margin:1rem} .map_box_in div{left:0 !important;font-size: 2rem !important;} .map_box_in div::before{left:8rem !important} .map_box_in div::after{margin-left:8rem !important;width:calc(100% - 8rem)}*/ /*산림기보통계 board_view*/ .board_view .board_view_con ul li.bvc_row{display: block;} .board_view .board_view_con ul li.bvc_row dl{margin-bottom: 1rem;} .board_view .board_view_con ul li.bvc_row dl:last-child{margin-bottom: 0;} /*자료실>통계잔행물E-Book*/ .ebook_con ul li{width:calc((100% / 3));} /*보이는 통계>산림자원통계*/ .do_list ul li{width: calc(100% / 9);border-bottom:1px solid #d5d5d5} .do_list ul li:last-child{border-right:1px solid #d5d5d5} .do_list ul li:nth-child(9){border-right: 0 !important;} .do_list ul li:nth-child(n+10){border-bottom: 0 !important;} } /** 820 끝 **/ /** 768 시작 **/ @media screen and (max-width:768px){ /*하단배너*/ .banner-item {width: calc(100% / 2)!important;} /*통합검색*/ #location_wrap .total_search_box form{width:100%} ul.part_tap_menu{flex-wrap:wrap;} ul.part_tap_menu li{flex:none;width:50%} ul.part_tap_menu li:nth-of-type(3),ul.part_tap_menu li:nth-of-type(4){margin-top:-1px} /*통계주요지표>주제별*/ /* #Tab02 .map_box{margin:5rem 2rem ;} #Tab02 .map_box{display: none;} #Tab02 .map_box_table{display: block;padding:0rem 2rem ;} */ } /** 768 끝 **/ /** 712px 시작 갤럭시탭 s4**/ @media screen and (max-width:712px){ /*산림청 승인통계 3개*/ .section_2 .stat_item_box ul li{width: calc(33.333% - 1.67rem);margin: 0 2.5rem 2rem 0;} .section_2 .stat_item_box ul li:nth-of-type(3n){margin-right:0 !important} .section_2 .stat_item_box ul li:nth-of-type(4n){margin-right:2.5rem} /*section_3*/ .section_3 .section_box{display: block;} .section_3 .section_box .notice_box{width: 100%;} .section_3 .section_box .report_box{width: 100%;} /*통계주요지표_지역별*/ #Tab02 .map_box .map_box_in{position: relative;} #Tab02 .map_box .num{font-size: 2.5rem;color: #fff;padding:2rem 0.5rem 0.5rem 0.5rem;} #Tab02 .map_box .num .unit{color: #fff;} /*통계주요지표>주제별*/ #Tab02 .tit h2{font-size: 3rem;} #Tab02 .map_box{margin:5rem 2rem ;} #Tab02 .map_box{display: none;} #Tab02 .map_box_table{display: block;padding:2rem 0;} #Tab02 .search_box label{margin:0 1rem} #Tab02 .search_box div:nth-of-type(1){width: 100%;margin-bottom:1rem} #Tab02 .search_box div:nth-of-type(2){width: 82%;} #Tab02 .search_box div:nth-of-type(3){width: 18%;} } /** 712px 끝 **/ /** 650px 시작**/ @media screen and (max-width:650px){ /*section_1*/ .section_1 .slide .stat_box{width: 100%;margin:3rem 0 4rem} /*통계보기>승인통계*/ .statlist_search_box{display: none;} .m_statlist_search_box{display: flex;margin-bottom: 2rem;} .form-select,.form-control{padding:1rem 3.6rem 1rem 1.2rem !important} .btn{--bs-btn-padding-y: 1rem!important;} /*보이는 통계*/ .hierarchical-menu{top:4.5rem} /*통계주요지표>주제별*/ .map_title {flex-direction: column;align-items: center;gap: 4px;text-align: center; } .title_line1, .title_vs, .title_line2 {display: block;} .title_vs {font-size: 0.9em;opacity: 0.7;} } /** 712px 끝 **/ /** 570 시작 **/ @media screen and (max-width:570px){ /*header*/ .headTop .head_box{margin-right: 2rem;} /*section_1*/ .section_1 .slide .stat_box .stat_num ul li{margin-right:1rem} .section_1 .slide .stat_box .stat_num ul li dl dd{font-size: 2.2rem;} /*footer*/ footer .footer_middle .box1400{padding:0} footer .footer_middle .work_link_box ul {display: block;} footer .footer_middle .work_link_box ul li{width: 100%;border-bottom:1px solid #ccc;border-left:0} footer .footer_middle .work_link_box ul li:nth-of-type(3){border-right: 0;} footer .footer_middle .work_link_box ul li a{justify-content: start;padding-left:2rem} footer .footer_bottom .copyright_box .txt{font-size: 1.4rem;} /*하단배너*/ .banner-item {width: calc(100% / 1)!important;} /*상단 네비게이션*/ #location_wrap{background:transparent} #location_wrap.search_page{background:linear-gradient(to right, rgba(0,54,127,1) 0%, rgba(0,123,139,1) 20%, rgba(0,144,131,1) 50%, rgba(0,123,139,1) 80%, rgba(0,54,127,1) 100%)} #location_wrap .home{padding:0;background: url(../images/main/icon_home_b.png)no-repeat center center/2rem;width:2rem;height:4.1rem;padding:1rem} #location_wrap ul{flex-wrap: wrap;border:0;margin-top:0} #location_wrap ul>li{border:0;min-width: auto !important;} #location_wrap ul>li:first-child{border-left:0;} #location_wrap ul>li>a{width: auto;min-width:auto;padding:1rem 2.3rem 1rem 1rem;} #location_wrap ul>li>a:after{right:0} #location_wrap ul>li>ul{top:4.1rem;width: auto;min-width:19rem;border-top: 1px solid #d5d5d5;} #location_wrap ul>li>ul>li>a{padding:1rem 1.5rem} #location_wrap ul>li>ul>li:first-child{border-top:0;border-left:1px solid var(--line_color_01);} #location_wrap ul>li>ul>li:first-child>a{margin-top:0} /*자료실>통계잔행물E-Book*/ .ebook_con ul li{width:calc((100% / 2));margin-bottom: 4rem;} .ebook_tit{margin:3rem 1rem 0 1rem;min-height: 5.7rem;} } /** 570 끝 **/ /** 540 시작 **/ @media screen and (max-width:540px){ /*검색*/ .total_search_box{display: none;} .m_search_box{display: block;height: 8rem;margin-right: 0.5rem;} .modal_overlay.active .m_search_box{} /*section_1*/ .section_1 .slider_wrap {width: calc(100% - 8rem);} .section_1 .slider .slide{padding:0 1rem} .section_1 .slide .stat_box h1{font-size: 3.3rem;margin-bottom:0.5rem} .section_1 .slide .stat_box .txt1{font-size:1.8rem;margin-bottom:0.5rem} .section_1 .slide .stat_box .txt2{font-size:1.6rem;margin-bottom:1rem} .section_1 .slide .stat_box .stat_num ul li dl dt{font-size: 1.6rem;padding:0.5rem} .section_1 .next-btn{margin:0 0 0 2rem;width: 2.0rem;} .section_1 .prev-btn{margin:0 2rem 0 0;width: 2.0rem;} /*산림청 승인통계 2개 section_2*/ .section_2 .stat_item_box ul li{width: calc(50% - 0.75rem);margin: 0 1.5rem 1.5rem 0;} .section_2 .stat_item_box ul li:nth-of-type(2n){margin-right:0 !important} .section_2 .stat_item_box ul li:nth-of-type(3){margin-right:1.5rem !important} .section_2 .stat_item_box ul li:nth-of-type(5){margin-right:1.5rem !important} .section_2 .stat_item_box ul li:nth-of-type(7){margin-right:1.5rem !important} .section_2 .stat_item_box ul li:nth-of-type(9){margin-right:1.5rem !important} /*통계주요지표*/ /*#Tab02 .map_box {background: url(../img/m_map_korea.png) no-repeat center center / 40.5rem;} #Tab02 .map_box .data_box{font-size: 2rem;}*/ /*서울*/ .map_box_in .seoul{position: absolute;top:10%;left:15%;} /*인천*/ .map_box_in .incheon{position: absolute;top:19%;left:-5%;} /*경기*/ .map_box_in .gyeonggi{position: absolute;top:21%;left:24%;} /*충북*/ .map_box_in .chungbuk{position: absolute;top:30%;left:40%;} /*세종*/ .map_box_in .sejong{position: absolute;top:34%;left:19%;} /*충남*/ .map_box_in .chungnam{position: absolute;top:40%;left:-5%;} /*대전*/ .map_box_in .daejeon{position: absolute;top:44%;left:21%;} /*전북*/ .map_box_in .jeonbuk{position: absolute;top:56%;left:10%;} /*광주*/ .map_box_in .gwangju{position: absolute;top:68%;left:5%;} /*전남*/ .map_box_in .jeonnam{position: absolute;top:78%;left:0%;} /*강원*/ .map_box_in .gangwon{position: absolute;top:11%;left:54%;} /*경북*/ .map_box_in .gyeongbuk{position: absolute;top:41%;left:59%;} /*대구*/ .map_box_in .daegu{position: absolute;top:52%;left:50%;} /*울산*/ .map_box_in .ulsan{position: absolute;top:57%;left:80%;} /*경남*/ .map_box_in .gyeongnam{position: absolute;top:63%;left:40%;} /*부산*/ .map_box_in .busan{position: absolute;top:67%;left:76%;} /*제주*/ .map_box_in .jeju{position: absolute;top:90%;left:25%;} } /** 540 끝 **/ /*500 시작*/ @media screen and (max-width:500px){ /*통계보기>승인통계*/ .container_midd_top ul{flex-wrap: wrap;float: none;} /*통계주요지표*/ .Title{width:auto;padding:1.15rem 2rem} .tab_tit ul li a{width:12rem;padding:0 2rem !important} #Tab01 .layer_left h2,#Tab02 .layer_left h2, #Tab01 .layer_right h2,#Tab02 .layer_right h2{font-size: 3rem;} #Tab02 .layer_left h2 button{padding: 0.5rem 1rem;} /*자료실*/ .board_search_box>form>div>*{width:100% !important} /*보이는 통계*/ .see_search_box .col-12{width:100%} .see_search_box .select_year{width: calc((100% - 2.002rem) / 2);min-width: auto;} .m_see_search_box .select_year{width: 100%;} .hierarchical-menu{top:10.5rem} /*보이는 통계> 차트*/ .chart_view .layer_con ul li .gray_line_box .tit{display: block;margin-top: 1rem;} .chart_view .layer_con ul li .gray_line_box .tit .btn_box{position: absolute;top: 0.5rem;right: 0.5rem;} .chart_view .layer_con ul li .gray_line_box .tit .btn_box div{width:auto} /*보이는 통계 모달차트*/ .chart_view .layer_con .gray_line_box .tit{display: block;margin-top: 1rem;} .chart_view .layer_con .gray_line_box .tit .btn_box{position: absolute;top: 0.5rem;right: 0.5rem;} .chart_view .layer_con .gray_line_box .tit .btn_box div{width:auto} } /** 520 시작 **/ @media screen and (max-width:520px){ #Tab01 .category{padding:5rem 0 0 0;} #Tab01 .category::before{content: '';display: block;position: absolute;top:0;left:0;width:100%;height: 100%;background-position: top center;} } /** 420 시작 **/ @media screen and (max-width:420px){ .section_1 .slide .stat_box .stat_num ul{display: flex;flex-wrap: wrap;} .section_1 .slide .stat_box .stat_num ul li dl dd{margin-bottom:2rem;} /*통계주요지표>주제별*/ #Tab02 .layer_left .txt{margin: 4rem 1rem !important;} #Tab02 .layer_left .layer_con{margin: 4rem 1rem !important;} /*자료실>통계간행물 E-Book*/ .ebook_cover{width:14rem} /*통계주요지표>지역별*/ .map li{font-size: 1.3rem;} /*통계주요지표>주제별 통계표조회*/ #Tab02 .map_box{margin:5rem 1rem} /*통합검색*/ ul.part_tap_menu li a{font-size: 1.6rem;} ul.part_tap_menu li span{display: block;} } @media screen and (max-width:375px){ /*타이틀*/ .headTop .head_box .ffs_logo img{width:18rem;} /*자료실>통계간행물 E-Book*/ #Tab02 .layer_left h2{margin-bottom: 5rem;} .ebook_cover{width:13rem} #Tab01 .layer_left .map_box{height: 44rem;} .map{height: auto;min-height: 40rem;} /*통계주요지표>주제별*/ .num{font-size: 2.4rem;} /*통계주요지표>주제별 통계표조회*/ #Tab02 .layer_left h2 button{margin-top:1rem} /*통계주요지표>주제별*/ #Tab02 .search_box label, #Tab02 .search_box span{width:5.5rem;margin:0 !important;text-align: center;} #Tab02 .search_box div:nth-of-type(1){width: 100%;margin-bottom:1rem;flex-wrap: wrap;} #Tab02 .search_box div:nth-of-type(1) select{width:calc(100% - 5.5rem)} #Tab02 .search_box div:nth-of-type(1) select:nth-of-type(1){margin-bottom:1rem} #Tab02 .search_box div:nth-of-type(2){width:70%} #Tab02 .search_box div:nth-of-type(2) select{width:calc(100% - 5.5rem)} #Tab02 .search_box div:nth-of-type(3){width:30%} } @media screen and (max-width:320px){ /*타이틀*/ .headTop .head_box .ffs_logo img{width:16rem;} /*자료실>통계간행물 E-Book*/ .ebook_cover{width:11rem} } @media screen and (max-width:280px){ }