/* reset */ body { line-height: 1.2; } button, input, a, select, textarea { font: inherit; letter-spacing: inherit; } img { vertical-align: top; } /* * env-00426 * 2024-01-24 * 데이터셋 바로가기 링크 추가 */ #dataLink img { vertical-align: middle; margin-left: 3px; margin-bottom: 3px;} .hidden-chkbox { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Text */ .text_top { vertical-align: top !important; } .text_middle { vertical-align: middle !important; } .text_bottom { vertical-align: bottom !important; } .text_center { text-align: center !important; } .text_left { text-align: left !important; } .text_right { text-align: right !important; } /* 공통 - 테이블 */ .t-type1 { border-top: 1px solid #1872dc; margin: 15px 0; } .t-type1 table { width: 100%; table-layout: fixed; border-left: hidden; border-right: hidden; background-color: #fff; border-top: hidden; } .t-type1 th, .t-type1 td { border: 1px solid #dfdfdf; font-size: 13px; font-weight: 400; text-align: left; padding: 5px 8px; height: 35px; vertical-align: middle; } .t-type1 th { background: #f2f9fe; font-weight: bold; } .t-type1.t-th-center th { text-align: center; } .t-type1.t-td-center td { text-align: center; } .t-type1.bg-type1 th { background: #ebf1fa; } /* 공통 - 배경 색상 - data-label-color */ [class*="si1-cate"][data-label-color="color1"], [class*="chk-label"][data-label-color="color1"] input[type="checkbox"]:checked ~ .custom-chkbox, #ground-water .nav-menu-list > li.menu1.active > a { background: #444 !important; } [class*="si1-cate"][data-label-color="color2"], [class*="chk-label"][data-label-color="color2"] input[type="checkbox"]:checked ~ .custom-chkbox, #ground-water .nav-menu-list > li.menu2.active > a { background: #1872dc !important; } [class*="si1-cate"][data-label-color="color3"], [class*="chk-label"][data-label-color="color3"] input[type="checkbox"]:checked ~ .custom-chkbox, #ground-water .nav-menu-list > li.menu3.active > a { background: #2b3fa0 !important; } [class*="si1-cate"][data-label-color="color4"], [class*="chk-label"][data-label-color="color4"] input[type="checkbox"]:checked ~ .custom-chkbox, #ground-water .nav-menu-list > li.menu4.active > a { background: #27c1cd !important; } /* * env-00352 * 생성 2023-11-01 * 병물생산 탭 색상 추가 */ [class*="si1-cate"][data-label-color="color5"], [class*="chk-label"][data-label-color="color5"] input[type="checkbox"]:checked ~ .custom-chkbox, #ground-water .nav-menu-list > li.menu5.active > a { background: #529e2c !important; } /* 공통 - 타이틀 */ .title-s1 { display: block; font-size: 16px; font-weight: bold; color: #222; } /* 공통 - 리스트 */ .list-s1 > li { display: flex; align-items: center; margin-bottom: 13px; font-size: 14px; color: #444; } .list-s1 > li:last-child { margin-bottom: 0; } .list-s1 > li:before { content: ""; display: block; width: 16px; height: 16px; flex: 0 0 auto; margin-right: 10px; background-repeat: no-repeat; background-position: center; } .list-s1 > li.address:before { background-image: url(/images/ground_water/common/icon_address.png); } .list-s1 > li.tel:before { background-image: url(/images/ground_water/common/icon_tel.png); } .list-s1 > li.mark:before { background-image: url(/images/ground_water/common/icon_mark.png); } /* 공통 - 모듈 아이템 */ .set-item1 .si1-title { display: flex; align-items: center; margin-bottom: 15px; align-items: flex-start; } .set-item1 .si1-cate { background: #ccc; color: #fff; border-radius: 3px; padding: 5px 12px; font-size: 12px; margin-right: 7px; flex:0 0 auto; } .set-item1 .si1-name { font-weight: bold; font-size: 18px; color: #222; line-height: 24px; } .set-item1 .si1-name .num { font-size: 14px; font-weight: 400; color: #666; } .set-item1 .si1-name .link_naver { display: inline-block; width: 23px; height: 23px; background: url(/images/ground_water/common/icon_naver.png); border-radius:100%; text-indent: 100%; overflow: hidden; white-space:nowrap; vertical-align: bottom; margin-left: 5px; } /* 지하수를 찾아줘 */ #ground-water { position: relative; font-family: '맑은 고딕', 'Malgun Gothic'; display: flex; margin-top: 70px; height: calc(100vh - 70px); min-height: 750px; letter-spacing: -0.5px; overflow: hidden; min-width: 1300px; } /* 왼쪽 사이드 메뉴 */ #ground-water .side-menu { width: 430px; position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex: 0 0 auto; transition: transform 0.3s ease-in-out; z-index: 5; } #ground-water .side-menu.on { transform: translateX(-100%); } /* 왼쪽 사이드 메뉴 - 메뉴 */ #ground-water .nav-menu { position: relative; width: 80px; flex: 0 0 auto; background: #fff; z-index: 5; } #ground-water .nav-menu:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; border-right: 1px solid #e1e1e1; z-index: -1; } #ground-water .nav-menu-list > li { border-bottom: 1px solid #e1e1e1; font-size: 13px; } #ground-water .nav-menu-list > li > a { display: flex; flex-direction: column; padding: 20px 5px; text-align: center; color: #222; min-height: 102px; justify-content: center; align-items: center; } #ground-water .nav-menu-list > li.active > a { color: #fff; } #ground-water .nav-menu-list > li > a:before { content: ""; display: block; width: 17px; height: 17px; margin: 0 auto; margin-bottom: 15px; background-position: center; background-repeat: no-repeat; } #ground-water .nav-menu-list > li.menu1 > a:before { background-image: url(/images/ground_water/menu/menu1.png); } #ground-water .nav-menu-list > li.menu2 > a:before { background-image: url(/images/ground_water/menu/menu2.png); } #ground-water .nav-menu-list > li.menu3 > a:before { background-image: url(/images/ground_water/menu/menu3.png); } #ground-water .nav-menu-list > li.menu4 > a:before { background-image: url(/images/ground_water/menu/menu4.png); } #ground-water .nav-menu-list > li.menu5 > a:before { background-image: url(/images/ground_water/menu/menu5.png); } #ground-water .nav-menu-list > li.active.menu1 > a:before { background-image: url(/images/ground_water/menu/menu1_on.png); } #ground-water .nav-menu-list > li.active.menu2 > a:before { background-image: url(/images/ground_water/menu/menu2_on.png); } #ground-water .nav-menu-list > li.active.menu3 > a:before { background-image: url(/images/ground_water/menu/menu3_on.png); } #ground-water .nav-menu-list > li.active.menu4 > a:before { background-image: url(/images/ground_water/menu/menu4_on.png); } #ground-water .nav-menu-list > li.active.menu5 > a:before { background-image: url(/images/ground_water/menu/menu5_on.png); } /* 왼쪽 사이드 메뉴 - 검색 영역 */ #ground-water .search-area { position: relative; width: 350px; flex: 0 0 auto; background: #f7f7f7; box-shadow: 5px 9px 10px 0px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; z-index: 5; } #ground-water .search-fixed { padding: 20px; border-bottom: 1px solid #e3e3e3; background-color: #fff; flex: 0 0 auto; } #ground-water .search-fixed .input-form { height: 45px; line-height: normal; font-size: 15px; padding: 0 20px; border: 1px solid #bababa; color: #666; margin-bottom: 10px; } #ground-water .search-fixed select.input-form { background: url(/images/ground_water/common/icon_select.png) no-repeat right 19px center; } #ground-water .search-fixed .input-submit { display: block; width: 100%; height: 45px; background-color: #2c6af4; color: #fff; font-weight: bold; font-size: 16px; cursor: pointer; } #ground-water .search-fixed .input-submit span { background: url(/images/ground_water/common/icon_search.png) no-repeat left top 4px; padding-left: 25px; } /* * env-00426 * 2024-01-24 * 데이터셋 바로가기 링크 추가 */ #ground-water .search-contents { margin-top: 5px; border-top: 1px solid #e3e3e3; background-color: #fff; flex: 1 1 auto; overflow: auto; height: 100% } /* 왼쪽 사이드 메뉴 - 검색 영역 - 업체리스트 */ #ground-water .search-contents .company-list { margin-top: -1px; } #ground-water .search-contents .company-list > li { position: relative; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; margin-bottom: -1px; } #ground-water .search-contents .company-list > li > a { display: block; padding: 20px; } #ground-water .search-contents .company-list .company-cate { flex: 0 0 auto; } #ground-water .search-contents .company-list > li.active { border-top: 1px solid #ced7ec; border-bottom: 1px solid #ced7ec; background-color: #f6f9fa; z-index: 1; } /* 왼쪽 사이드 메뉴 - 검색 영역 - 지역 수질정보 */ #ground-water .search-contents .water-quality-info:first-of-type { border-top: transparent; } #ground-water .search-contents .water-quality-info { position: relative; display: block; padding: 20px; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; margin-top: -1px; } #ground-water .search-contents .water-quality-info.active { border-top: 1px solid #ced7ec; border-bottom: 1px solid #ced7ec; background-color: #f6f9fa; z-index: 1; } #ground-water .search-contents .water-quality-info .wqi-cate { flex: 0 0 auto; } #ground-water .search-contents .water-quality-info > li.active { border-top: 1px solid #bcd1ff; border-bottom: 1px solid #bcd1ff; background-color: #ecf7fe; } #ground-water .search-contents .water-quality-info .wqi-info > li { display: flex; align-items: center; margin-bottom: 13px; font-size: 14px; color: #444; } #ground-water .search-contents .water-quality-info .wqi-info > li:last-child { margin-bottom: 0; } #ground-water .search-contents .water-quality-info .wqi-info > li:before { content: ""; display: block; width: 16px; height: 16px; flex: 0 0 auto; margin-right: 10px; background-repeat: no-repeat; background-position: center; } #ground-water .search-contents .water-quality-info .wqi-info > li.address:before { background-image: url(/images/ground_water/common/icon_address.png); } #ground-water .search-contents .water-quality-info .wqi-info > li.tel:before { background-image: url(/images/ground_water/common/icon_tel.png); } #ground-water .search-contents .water-quality-info .wqi-info > li.mark:before { background-image: url(/images/ground_water/common/icon_mark.png); } #ground-water .search-contents .water-quality-info .water-quality .wq-title { display: block; font-weight: bold; font-size: 16px; color: #222; margin-bottom: 10px; } #ground-water .search-contents .water-quality-info .water-quality .wq-info-wrap { display: flex; align-items: center; } #ground-water .search-contents .water-quality-info .water-quality .wq-info-wrap .wq-drinking { width: 135px; flex: 0 0 auto; text-align: center; } #ground-water .search-contents .water-quality-info .water-quality .wq-info-wrap .wq-drinking .wq-desc { display: block; font-size: 14px; font-weight: bold; color: #222; margin-top: 10px; } #ground-water .search-contents .water-quality-info .water-quality .wq-info-wrap .wq-info-list > li { font-size: 14px; color: #444; margin-bottom: 7px; } #ground-water .search-contents .water-quality-info .water-quality .wq-info-wrap .wq-info-list > li em { font-weight: bold; } #ground-water .search-contents .water-quality-info .water-quality .wq-info-wrap .wq-info-list > li:last-child { margin-bottom: 0; } /* 왼쪽 사이드 메뉴 - 메뉴 열고 닫는 버튼 */ #ground-water .side-menu .side-menu-control { position: absolute; display: block; left: 100%; top: 50%; margin-top: -27.5px; width: 20px; height: 55px; background: #fff url(/images/ground_water/menu/menu_close.png) no-repeat center; box-shadow: 5px 9px 10px 0px rgba(0, 0, 0, 0.05); white-space: nowrap; text-indent: 100%; overflow: hidden; padding: 0; z-index: 5; cursor: pointer; } #ground-water .side-menu.on .side-menu-control { background: #fff url(/images/ground_water/menu/menu_close_on.png) no-repeat center; } /* 지도 */ #ground-water .ground-water-map { position: relative; display: flex; flex: 1 1 auto; z-index: 4; } #ground-water .ground-water-map .gw-map { flex: 1 1 auto; } /* 지도 - ◎레이어 - 왼쪽 하단 체크박스 리스트 */ #ground-water .ground-water-map .gw-map-chks { position: absolute; left: 450px; bottom: 20px; z-index: 1; transition: left 0.3s ease-in-out; } #ground-water .ground-water-map.on .gw-map-chks { left: 20px; } #ground-water .ground-water-map .gw-map-here { position: absolute; right: 20px; top: 20px; z-index: 1; } #ground-water .ground-water-map .gw-map-here .icon-here { display: block; width: 40px; height: 40px; border: 1px solid #ddd; background: #fff url(/images/ground_water/common/icon_here.png) no-repeat center; text-indent: 100%; overflow: hidden; white-space: nowrap; } #ground-water .ground-water-map .gw-map-chks-list { display: flex; align-items: center; } #ground-water .ground-water-map .gw-map-chks-list > li { margin-right: 1px; flex: 0 0 auto; } #ground-water .ground-water-map .gw-map-chks-list > li:last-child { margin-right: 0; } #ground-water .ground-water-map .gw-map-chks-list .chk-label { cursor: pointer; -webkit-user-select: none; } #ground-water .ground-water-map .gw-map-chks-list .chk-label .custom-chkbox { display: flex; align-items: center; background: rgba(255, 255, 255, 0.9); padding: 9px 15px; font-size: 14px; color: #444; min-width: 220px; } #ground-water .ground-water-map .gw-map-chks-list .chk-label .custom-chkbox:before { content: ""; display: block; width: 22px; height: 22px; background: #fff url(/images/ground_water/common/icon_chk.png) no-repeat center; border: 1px solid #c0c0c0; margin-right: 9px; } #ground-water .ground-water-map .gw-map-chks-list .chk-label .custom-chkbox span { display: block; height: 20px; line-height: 20px; padding-left: 28px; background-repeat: no-repeat; background-position: left center; } #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color1"] .custom-chkbox span { background-image: url(/images/ground_water/common/chk_icon1.png); } #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color1"] input[type="checkbox"]:checked ~ .custom-chkbox span { background-image: url(/images/ground_water/common/chk_icon1_active.png); } #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color2"] .custom-chkbox span { background-image: url(/images/ground_water/common/chk_icon2.png); } #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color2"] input[type="checkbox"]:checked ~ .custom-chkbox span { background-image: url(/images/ground_water/common/chk_icon2_active.png); } #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color3"] .custom-chkbox span { background-image: url(/images/ground_water/common/chk_icon3.png); } #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color3"] input[type="checkbox"]:checked ~ .custom-chkbox span { background-image: url(/images/ground_water/common/chk_icon3_active.png); } #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color4"] .custom-chkbox span { background-image: url(/images/ground_water/common/chk_icon4.png); } #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color4"] input[type="checkbox"]:checked ~ .custom-chkbox span { background-image: url(/images/ground_water/common/chk_icon4_active.png); } /* * env-00352 * 생성 2023-11-01 * 병물생산 탭 아이콘 추가 */ #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color5"] .custom-chkbox span { background-image: url(/images/ground_water/menu/menu5.png); } #ground-water .ground-water-map .gw-map-chks-list .chk-label[data-label-color="color5"] input[type="checkbox"]:checked ~ .custom-chkbox span { background-image: url(/images/ground_water/menu/menu5_on.png); } #ground-water .ground-water-map .gw-map-chks-list .chk-label input[type="checkbox"]:checked ~ .custom-chkbox { color: #fff; } #ground-water .ground-water-map .gw-map-chks-list .chk-label input[type="checkbox"]:checked ~ .custom-chkbox:before { border-color: transparent; background: transparent url(/images/ground_water/common/icon_chk_transparent.png) no-repeat center; } /* 지도 - ◎레이어 - 팝업(지역수질정보) */ #ground-water .ground-water-map .gw-map-popup { position: relative; background: #fff; padding: 30px; border: 1px solid #b7b7b7; box-shadow: 5px 9px 14px 0px rgba(0, 0, 0, 0.2); } #ground-water .ground-water-map .gw-map-popup:before { content: ""; position: absolute; width: 18px; height: 10px; left: 50%; margin-left: -9px; top: 100%; background: url(/images/ground_water/common/icon_pop_bubble.png) no-repeat center; } #ground-water .ground-water-map .gw-map-popup.arrow-none:before { display: none; } #ground-water .ground-water-map .gw-map-popup.gw-map-width780 { width: 780px; } #ground-water .ground-water-map .gw-map-popup.gw-map-width370 { width: 370px; } #ground-water .ground-water-map .gw-map-popup .gw-map-popup-close { position: absolute; right: 30px; top: 30px; background: url(/images/ground_water/common/icon_close.png) no-repeat center; width: 20px; height: 20px; white-space: nowrap; overflow: hidden; text-indent: 100%; } /* 팝업(브라우저 위치정보권한 허용 안내) */ .basic-popup { display: none; position: absolute; left: calc(430px + 50%); top: 50%; width: 600px; height: 440px; background: #fff; margin-top: -220px; margin-left: -515px; border: 1px solid #b7b7b7; box-shadow: 5px 9px 14px 0px rgba(0, 0, 0, 0.2); } .basic-popup.modal-on { display: block; } .basic-popup .pop-header { padding: 0 30px; } .basic-popup .pop-header .header-title { display: block; height: 80px; line-height: 80px; font-weight: bold; font-size: 18px; color: #222; border-bottom: 1px solid #ddd; } .basic-popup .pop-content { line-height: 1.4; height: 360px; padding: 25px 30px; } .basic-popup .popup-close { position: absolute; right: 30px; top: 30px; background: url(/images/ground_water/common/icon_close.png) no-repeat center; width: 20px; height: 20px; white-space: nowrap; overflow: hidden; text-indent: 100%; } .location_information .browser-guide > li { position: relative; font-size: 16px; color: #222; padding-left: 10px; margin-bottom: 35px; } .location_information .browser-guide > li:before { content: ""; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 100%; background: #2b2b2b; } .location_information .browser-guide > li:last-child { margin-bottom: 0; } .location_information .browser-guide .desc { margin-bottom: 10px; } .location_information .browser-guide .desc2 { font-size: 14px; color: #444; } .location_information .browser-guide .definition-list { font-size: 14px; margin-bottom: 15px; } .location_information .browser-guide .definition-list:last-of-type { margin-bottom: 0; } .location_information .browser-guide .definition-list dt { display: inline-block; background: #e2e9f8; font-weight: bold; color: #2c6af4; padding: 3px 9px; border-radius: 100px; margin-bottom: 10px; } .location_information .browser-guide .definition-list dd { color: #444; } /* 검색 결과 없을 때, 검색 영역 기본 문구 */ .search-empty, .search-default { text-align: center; padding: 90px 30px; font-size: 16px; line-height: 1.5; } .search-empty:before, .search-default:before { content:""; display: block; width: 105px; height: 95px; background: url(/images/ground_water/common/icon_empty.png) no-repeat center; margin: 0 auto; margin-bottom: 30px; } .search-default { word-break: keep-all; } .search-default b { font-weight: bold; display: block; } /* * env-00369 * 2023-11-13 * 선택한 아이콘 활성화 * env-00373 * 2023-11-20 * 아이콘 마우스 오버시 활성화 표시 */ /* div:has(> img[src *= active]) { box-sizing:border-box; border-style:solid; border-radius:50%; animation:clickEffect 2s infinite alternate; width:60px; height:60px; border-width:5px;} */ /* div:has(> img[src *= icon_]):hover { box-sizing:border-box; border-style:solid; border-radius:50%; width:60px; height:60px; border-width:5px;} */ img[src *= active] { border-radius:50% !important; box-sizing:border-box !important; animation:clickEffect 2s infinite alternate; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);-webkit-backface-visibility: hidden;} img[src *= icon_] { transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } img[src *= icon_]:hover { transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); -webkit-backface-visibility: hidden; } @keyframes clickEffect{ 0%{ border: 5px solid #58ACFA; } 100%{ border: 5px solid #E0F2F7; } }