table { width: 100%; border-collapse: collapse; }
:root { --border-color-: #d6dae8; --box-shadow-btn-color: rgba(0 0 77 / 0.11); --box-shadow-color: rgba(0 0 77 / 0.16); --box-shadow-light-color-: rgba(0 0 77 / 0.03); --btn-color-blue-: #1c7ef0; --btn-color-red-: #eb5858; --font-color-dark: #202124; --font-color-light: #6789aa; --font-color-normal: #70757a; --widget-font-color: #416d98; }
input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; }
input.radio + label { margin-right: 40px; font-size: 14px; font-weight: 600; }
input.radio + label::before { display: inline-block; width: 16px; height: 16px; margin-right: 4px; border: 1px solid var(--border-color-); border-radius: 50px; content: ""; vertical-align: sub; }
input.radio:checked + label::before { background: url(../../../images/tgis/common/ico-radio-checked.svg) no-repeat center; }
select { min-width: 100px; padding: 6px 24px 6px 8px; border: 1px solid #d6dae8; border-radius: 5px; background: #eff7ff url(../../../images/tgis/common/ico-select-arrow.svg) no-repeat center right 8px; font-size: 13px; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
input.type-check { position: relative; width: 1px; height: 0px; margin: 0px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); }
input.type-check + label { font-size: 14px; font-weight: 600; color: var(--font-color-normal); }
input.type-check + label::before { display: inline-block; width: 16px; height: 16px; margin-right: 12px; border: 1px solid var(--border-color-); border-radius: 3px; content: ""; vertical-align: sub; }
input.type-check:checked + label::before { background: #2680eb url(../../../images/tgis/common/ico-check.svg) no-repeat center; border-color: var(--btn-color-blue-); }
.btn { cursor: pointer; }
.btn.ico-search { width: 34px; height: 34px; border: 0; border-radius: 5px; background: url(../../../images/tgis/common/ico-search34_34.svg) no-repeat center; }
.btn.text-search { position: relative; width: 85px; padding: 8px; border: 0; border-radius: 5px; background: var(--btn-color-blue-); font-size: 14px; font-weight: 600; text-align: center; color: #fff; text-indent: 24px; }
.btn.text-search::before { position: absolute; top: 50%; left: 16px; display: block; width: 24px; height: 24px; background: url(../../../images/tgis/common/ico-search_white.svg) no-repeat center / 16px; content: ""; transform: translateY(-50%); }
.btn.search { width: 34px; height: 34px; border: 0; background: url(../../../images/tgis/common/ico-search34_34.svg) no-repeat center; }
.txt-r { text-align: right; }
body > .wrap { display: flex; width: 100%; height: 100%; overflow: hidden; }
#main-logo > span { letter-spacing: -0.5px; }
.map.wrap .right-box { position: absolute; top: 100px; right: 20px; }
.map.wrap .right-box > ul { display: flex; flex-direction: column; margin-bottom: 10px; border-radius: 5px; box-shadow: 3px 3px 10px var(--box-shadow-color); }
.map.wrap .right-box > ul > li { position: relative; width: 40px; height: 40px; background: #fff; }
.map.wrap .right-box > ul > li:hover { background-color: #dae2f9; }
.map.wrap .right-box > ul > li:not(:last-child) { border-bottom: 1px solid var(--border-color-); }
.map.wrap .right-box > ul > li:first-child { border-radius: 5px 5px 0 0; }
.map.wrap .right-box > ul > li:last-child { border-radius: 0 0 5px 5px; }
.map.wrap .right-box > ul > li > a { display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; }
.map.wrap .right-box > ul > li.hasdepth.on { background: var(--btn-color-blue-); }
.map.wrap .right-box > ul > li.on.hasdepth::before { background-image: url(../../../images/tgis/common/map-more_white.svg); }
.widget-map_style > a { background-image: url(../../../images/tgis/common/ico-widget-map_style.png); }
.widget-map_style.on > a { background-image: url(../../../images/tgis/common/ico-widget-map-map_style_white.png); }
.widget-map-split > a { background-image: url(../../../images/tgis/common/ico-widget-split.png); }
.widget-map-split.on > a { background-image: url(../../../images/tgis/common/ico-widget-map-split_white.png); }
.widget-map-split_2 > a::before { background-image: url(../../../images/tgis/common/ico-widget-split_2.png); }
.widget-map-split_3 > a::before { background-image: url(../../../images/tgis/common/ico-widget-split_3.png); }
.widget-map-split_4 > a::before { background-image: url(../../../images/tgis/common/ico-widget-split_4.png); }
.widget-map-split_2.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-split_2_blue.png); }
.widget-map-split_3.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-split_3_blue.png); }
.widget-map-split_4.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-split_4_blue.png); }
.widget-map-edit > a { background: url(../../../images/tgis/common/ico-widget-edit.png); }
.widget-map-edit.on > a { background: url(../../../images/tgis/common/ico-widget-map-edit_white.png); }
.ico-widget-dot > a::before { background-image: url(../../../images/tgis/common/ico-widget-dot.png); }
.ico-widget-polygon > a::before { background-image: url(../../../images/tgis/common/ico-widget-polygon.png); }
.ico-widget-square > a::before { background-image: url(../../../images/tgis/common/ico-widget-square.png); }
.ico-widget-line > a::before { background-image: url(../../../images/tgis/common/ico-widget-line.png); }
.ico-widget-text > a::before { background-image: url(../../../images/tgis/common/ico-widget-text.png); }
.ico-widget-curve > a::before { background-image: url(../../../images/tgis/common/ico-widget-curve.png); }
.ico-widget-circle > a::before { background-image: url(../../../images/tgis/common/ico-widget-circle.png); }
.ico-widget-buffer > a::before { background-image: url(../../../images/tgis/common/ico-widget-buffer.png); }
.ico-widget-dot.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-dot_blue.png); }
.ico-widget-polygon.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-polygon_blue.png); }
.ico-widget-square.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-square_blue.png); }
.ico-widget-line.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-line_blue.png); }
.ico-widget-text.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-text_blue.png); }
.ico-widget-curve.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-curve_blue.png); }
.ico-widget-circle.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-circle_blue.png); }
.ico-widget-buffer.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-buffer_blue.png); }
.widget-map-distance > a { background: url(../../../images/tgis/common/ico-widget-map-distance.png); }
.widget-map-distance.on > a { background: url(../../../images/tgis/common/ico-widget-map-distance_white.png); }
.ico-widget-area > a::before { background-image: url(../../../images/tgis/common/ico-widget-area.png); }
.ico-widget-distance > a::before { background-image: url(../../../images/tgis/common/ico-widget-distance.png); }
.ico-widget-radius > a::before { background-image: url(../../../images/tgis/common/ico-widget-radius.png); }
.ico-widget-pin > a::before { background-image: url(../../../images/tgis/common/ico-widget-pin.png); }
.ico-widget-area.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-area_blue.png); }
.ico-widget-distance.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-distance_blue.png); }
.ico-widget-radius.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-radius_blue.png); }
.ico-widget-pin.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-pin_blue.png); }
.widget-map-swipe > a { background: url(../../../images/tgis/common/ico-widget-map-swipe.png); }
.widget-map-swipe.on > a { background: url(../../../images/tgis/common/ico-widget-map-swipe_white.png); }
.widget-map-full_screen > a { background: url(../../../images/tgis/common/ico-widget-map-full_screen.png); }
.widget-map-download > a { background: url(../../../images/tgis/common/ico-widget-map-download.png); }
.widget-map-download.on > a { background: url(../../../images/tgis/common/ico-widget-map-download_white.png); }
.ico-widget-png > a::before { background-image: url(../../../images/tgis/common/ico-widget-png.png); }
.ico-widget-pdf > a::before { background-image: url(../../../images/tgis/common/ico-widget-pdf.png); }
.ico-widget-png.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-png_blue.png); }
.ico-widget-pdf.on > a::before { background-image: url(../../../images/tgis/common/ico-widget-pdf_blue.png); }
.widget-map-thema > a { background: url(../../../images/tgis/common/ico-widget-map-thema.png); }
.widget-map-thema.on > a { background: url(../../../images/tgis/common/ico-widget-map-thema_white.png); }
.widget-map-reset > a { background: url(../../../images/tgis/common/ico-widget-map-reset.png); }
.widget-map-index > a { background: url(../../../images/tgis/common/ico-widget-map-index.png); }
.widget-map-print > a { background: url(../../../images/tgis/common/ico-widget-map-print.png); }
.widget-map-share > a { background: url(../../../images/tgis/common/ico-widget-map-share.png); }
.widget-map-share.on > a { background: url(../../../images/tgis/common/ico-widget-share_white.png); }
.widget-map-bookmark > a { background: url(../../../images/tgis/common/ico-widget-map-bookmark.png); }
.widget-map-bookmark.on > a { background: url(../../../images/tgis/common/ico-widget-map-bookmark_white.png); }
.widget-map-pluse > a { background: url(../../../images/tgis/common/ico-widget-map-pluse.png); }
.widget-map-minus > a { background: url(../../../images/tgis/common/ico-widget-map-minus.png); }
.widget.text-box { white-space: nowrap; }
.widget .btn.normal { width: unset; white-space: nowrap; }
.flex-box { display: flex; align-items: center; }
.widget .flex-box { padding: 4px; gap: 4px; }
input.bookmark { height: 100%; padding: 8px; border: 1px solid var(--border-color-); border-radius: 5px; }
.map.wrap .right-box > ul > li > ul { display: none; }
.map.wrap .right-box > ul > li.hasdepth::before { position: absolute; bottom: 3px; left: 3px; display: block; width: 8px; height: 8px; background-image: url(../../../images/tgis/common/ico-widget-more.svg); background-position: center center; background-repeat: no-repeat; content: ""; }
.map.wrap .right-box > ul > li.on > ul { position: absolute; top: 0; right: 50px; display: flex; border-radius: 5px; background: #fff; box-shadow: 3px 3px 10px var(--box-shadow-color); }
.map.wrap .right-box > ul > li.on > div { display: block; }
.map.wrap .right-box > ul > li > ul > li { position: relative; text-align: center; }
.map.wrap .right-box > ul > li > ul > li.on::before { position: absolute; bottom: 0; left: 50%; display: block; width: 30px; height: 3px; border-radius: 5px 5px 0 0; background-color: var(--btn-color-blue-); content: ""; transform: translateX(-50%); }
.map.wrap .right-box > ul > li > ul > li.on > a { font-weight: 600; color: var(--btn-color-blue-); }
.map.wrap .right-box > ul > li > ul > li:not(:last-child)::after { position: absolute; top: 50%; right: 0; display: inline-block; width: 1px; height: 10px; background: var(--border-color-); content: ""; transform: translateY(-50%); }
.map.wrap .right-box > ul > li > ul > li > a { display: block; min-width: 40px; height: 100%; font-size: 10.5px; }
.map.wrap .right-box > ul > li > ul > li > a:hover { background-color: #dae2f9; }
.map.wrap .right-box > ul > li:not(.text-box) > ul > li > a::before { display: block; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; content: ""; }
.map.wrap .right-box > ul > li.text-box > ul > li > a { height: 40px; padding: 0 10px; font-size: 12px; line-height: 40px; word-break: keep-all; }
.left-box { position: absolute; top: 0; left: -276px; z-index: 1; width: 276px; height: 100%; background: #fff; box-shadow: 4px 0px 4px var(--box-shadow-color); transition: all 0.4s ease-in-out; }
.search-area .search-box { border-radius: 5px; box-shadow: 3px 3px 10px var(--box-shadow-color); }
.address-search-box { display: flex; align-items: center; padding: 1px 10px; border-radius: 5px; background: #fff; box-shadow: 3px 3px 10px var(--box-shadow-color); gap: 4px; }
.address-search-box::after { content: none; }
.address-search-box > li { position: relative; }
.address-search-box > li.arrow { display: flex; align-items: center; }
.address-search-box > li.arrow > span { display: inline-block; width: 16px; height: 16px; background: url(../../../images/tgis/common/ico-arrow-right_gray.svg) no-repeat center; }
.address-search-box > li > a { display: inline-block; padding: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; word-break: keep-all; color: var(--font-color-dark); }
.address-search-box > li > ul { position: absolute; top: 50px; display: none; background: #fff; }
.address-search-box > li > ul.on { top: 32px; left: -9px; display: flex; flex-direction: column; width: 130px; max-height: 200px; overflow-y: auto; }
.address-search-box > li > ul > li > a { display: block; width: 100%; height: 100%; padding: 4px 8px; }
.range_widget table td.range_active { background: #fff; }
.range_widget table.range_horizon td:not(.range_active, .range_dragTarget) { height: 28px; background-color: #e9ecf8; }
.range_widget table td { position: relative; }
.range_widget table td.range_active.range_dragTarget:hover { background-color: #135cb0; cursor: pointer; }
.range_widget table.range_horizon td:not(.range_left):after { position: absolute; top: 6px; left: 0; display: block; width: 1px; height: 16px; border-left: 1px solid #d6dae8; content: ""; }
.range_left { border-left: 2px solid #c7ccdf !important; }
.range_widget table td.range_active.range_dragTarget { background-color: var(--btn-color-blue-); }
table > caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); }
.range_widget table th { height: 30px; padding-bottom: 10px; }
.range_widget table th .range_balloon { position: relative; margin: 0; padding: 0 5px; border: 0; background: #e9ecf8; font: inherit; font-size: 13px; color: var(--widget-font-color); }
.range_widget table th .range_balloon:after { position: absolute; bottom: -3px; left: 50%; display: block; border-bottom: 3px solid transparent; border-left: 3px solid transparent; -webkit-transform: translateX(-50%) rotate(-45deg); border-color: transparent transparent #e9ecf8 #e9ecf8; border-style: solid; border-width: 3px; content: ""; transform: translateX(-50%) rotate(-45deg); }
.ui-datepicker { padding: 0; }
.ui-icon,
.ui-widget-content .ui-icon { background-image: none; }
.ui-icon-circle-triangle-w { background-position: unset; }
.ui-datepicker .ui-datepicker-prev span { background-image: url(../../../images/tgis/common/ico-arrow-left.svg); background-position: center; }
.ui-datepicker .ui-datepicker-next span { background-image: url(../../../images/tgis/common/ico-arrow-right.svg); background-position: center; }
.ui-widget.ui-widget-content { border: 0; }
.ui-widget-header { border: 0; border-radius: 0; background: #080f33; color: #fff; }
.ui-datepicker th { background: #737373; color: #fff; }
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active { border: 0; background: unset; text-align: center; }
.ui-state-default.ui-state-active { background: var(--btn-color-blue-); }
.ui-datepicker td { text-align: center; }
.ui-datepicker td span,
.ui-datepicker td a { display: inline-block; width: 24px; border-radius: 50px; }
.ui-datepicker td:hover span,
.ui-datepicker td:hover a { background-color: #dae2f9; }
header > .wrap { height: 100%; }
header .user-box { display: flex; flex-direction: column; height: 181px; padding-bottom: 16px; border-top: 1px solid var(--border-color-); gap: 8px; }
header .user-box > div { padding: 16px 0; text-align: center; }
header .user-box > div > div { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; margin: 0 auto; margin-bottom: 4px; border-radius: 50%; background-color: #aaa; }
header .user-box span.user { font-size: 13px; font-weight: 600; }
header .user-box .btn::before { display: inline-block; width: 26px; height: 26px; margin-right: 8px; border: 1px solid var(--border-color-); border-radius: 5px; background-position: center; background-repeat: no-repeat; content: ""; vertical-align: middle; }
header .user-box .btn.log-out::before { background-image: url(../../../images/tgis/common/ico-logout.svg); }
header .user-box .btn.my-info::before { background-image: url(../../../images/tgis/common/ico-my-info.svg); }
header .user-box .btn { width: 90px; margin-left: 24px; border: 0; background: transparent; font-weight: 500; text-align: left; color: var(--font-color-dark); }
nav::-webkit-scrollbar { display: none; }
nav ul.list > li { position: relative; width: 100%; padding: 14px 0; border-radius: 15px; text-align: center; cursor: pointer; }
nav ul.list > li:not(.on, .on + li)::after { position: absolute; top: -16px; left: 50%; display: block; width: 30px; height: 1px; border-bottom: 1px solid var(--border-color-); content: ""; transform: translateX(-50%); }
nav ul.list > li.on { background-image: linear-gradient(230deg, #8fc3ff, #4685ff); }
nav ul.list > li.on > a { color: #fff; }
nav ul.list > li.environment-info > a::before { background-image: url(../../../images/tgis/common/ico-main-environment-info.svg); }
nav ul.list > li.disease > a::before { background-image: url(../../../images/tgis/common/ico-main-disease.svg); }
nav ul.list > li.weather > a::before { background-image: url(../../../images/tgis/common/ico-main-weather.svg); }
nav ul.list > li.realTimeWether > a::before { background-image: url(../../../images/tgis/common/ico-main-weather.svg); }
nav ul.list > li.soil > a::before { background-image: url(../../../images/tgis/common/ico-main-soil.svg); }
nav ul.list > li.livestock > a::before { background-image: url(../../../images/tgis/common/ico-main-livestock.svg); }
nav ul.list > li.fruit_tree > a::before { background-image: url(../../../images/tgis/common/ico-main-fruit_tree.svg); }
nav ul.list > li.nongsaro > a::before { background-image: url(../../../images/tgis/common/ico-main-nongsaro.svg); }
nav ul.list > li.on.environment-info > a::before { background-image: url(../../../images/tgis/common/ico-main-environment-info_white.svg); }
nav ul.list > li.on.disease > a::before { background-image: url(../../../images/tgis/common/ico-main-disease_white.svg); }
nav ul.list > li.on.weather > a::before { background-image: url(../../../images/tgis/common/ico-main-weather_white.svg); }
nav ul.list > li.on.realTimeWether > a::before { background-image: url(../../../images/tgis/common/ico-main-weather_white.svg); }
nav ul.list > li.on.soil > a::before { background-image: url(../../../images/tgis/common/ico-main-soil_white.svg); }
nav ul.list > li.on.livestock > a::before { background-image: url(../../../images/tgis/common/ico-main-livestock_white.svg); }
nav ul.list > li.on.fruit_tree > a::before { background-image: url(../../../images/tgis/common/ico-main-fruit_tree_white.svg); }
nav ul.list > li.on.nongsaro > a::before { background-image: url(../../../images/tgis/common/ico-main-nongsaro_white.svg); }
.filebox { position: relative; width: 320px; height: 34px; }
.upfile { position: absolute; top: 50%; right: 0; width: 80px; height: 32px; border: 1px solid var(--btn-color-blue-); border-radius: 0 5px 5px 0; background-color: #fff; font-size: 14px; font-weight: 600; line-height: 32px; text-align: center; color: var(--btn-color-blue-); transform: translateY(-50%); }
.up-name { display: inline-block; width: 100%; height: 100%; padding-right: 85px; padding-left: 8px; border: 1px solid var(--border-color-); border-radius: 0 5px 5px 0; background-color: #fff; color: #c3c3c3; }
.sample::before { display: inline-block; width: 24px; height: 24px; margin-right: 4px; background: url(../../../images/tgis/common/ico-excel.svg) no-repeat center; content: ""; vertical-align: middle; }
.sample { margin-top: 16px; border: 0; background-color: #fff; font-size: 14px; font-weight: 600; color: var(--btn-color-blue-); }
.upload { display: inline-block; width: 100%; height: 34px; margin-top: 24px; border: 0; border-radius: 5px; background-color: var(--btn-color-blue-); }
.upload > span { font-size: 14px; font-weight: 600; color: #fff; }
.upload > span::before { display: inline-block; width: 24px; height: 24px; background: url(../../../images/tgis/common/ico-upload.svg) no-repeat center; content: ""; vertical-align: middle; }
.txt-left { text-align: left !important; }
.search-box { position: relative; }
.search-box > input { height: 34px; padding: 0 36px 0 8px; border: 1px solid var(--border-color-); border-radius: 5px; }
.search-box > .btn.search { position: absolute; top: 0; right: 0; }
.btn.text-btn { border: 0; background: transparent; text-align: left; text-decoration: underline; color: var(--btn-color-blue-); }
.mCSB_scrollTools .mCSB_draggerContainer { opacity: 0; transition: all 0.3s ease-in-out; }
.mCSB_inside > .mCSB_container { margin: 0; }
.left-box .scroll-list { height: 100%; }
.t-toc { height: 100%; }
.t-toc::after { content: none; }
.t-toc > li { display: none; width: 100%; height: 100%; padding: 32px 0px; }
.t-toc > li.on { display: block; }
.t-toc > li > .box:not(:last-child) { margin-bottom: 32px; }
.toc-title { display: flex; align-items: center; height: 28px; padding-left: 20px; font-size: 16px; font-weight: 600; color: var(--font-color-dark); }
.toc.list > li { width: 100%; border-bottom: 1px solid var(--border-color-); }
.toc.list > li:hover > a { background-color: #f2f5f6; }
.toc.list > li > a { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 20px; gap: 8px; }
.toc.list > li > a::after { display: inline-block; width: 16px; height: 16px; background: url(../../../images/tgis/common/ico-arrow-right_gray.svg) no-repeat center; content: ""; flex-shrink: 0; }
.toc.list > li.on > a::after { border-radius: 5px; background: var(--btn-color-blue-) url(../../../images/tgis/common/ico-arrow-down_white.svg) no-repeat center; }
.toc.list .hasdepth { display: none; }
.toc.list .hasdepth > li { padding-left: 10px; }
.toc.list > li > .hasdepth { position: relative; }
.hasdepth > li { float: none; width: 100%; }
.hasdepth > li > a { display: flex; align-items: center; width: 100%; padding: 12px 20px; font-size: 13px; font-weight: 500; color: var(--font-color-normal); gap: 4px; }
.hasdepth > li.on:not(.data) > a::after { position: absolute; right: 0; left: 0; z-index: -1; display: block; height: 45px; background-color: #f2f5f6; content: ""; }
.hasdepth > li:hover > a::after { position: absolute; right: 0; left: 0; z-index: -1; display: block; height: 45px; background-color: #f2f5f6; content: ""; }
.hasdepth > li > a::before { display: inline-block; width: 16px; height: 16px; margin-right: 4px; background: url(../../../images/tgis/common/ico-arrow-right_gray.svg) no-repeat center; content: ""; flex-shrink: 0; }
.hasdepth > li.on > a::before { background: url(../../../images/tgis/common/ico-select-arrow.svg) no-repeat center; }
.hasdepth > li.data > a::before { display: inline-block; width: 16px; height: 16px; padding-right: 6px; background: url(../../../images/tgis/common/ico-data-line.svg) no-repeat center; content: ""; }
.hasdepth > li.data.on > a::before { background: url(../../../images/tgis/common/ico-data-line_blue.svg) no-repeat center; }
.hasdepth > li.on.data > a { background: url(../../../images/tgis/common/img-data-on.png) no-repeat center right 0px; }
.toc.list > li.on > a { background-color: #f2f5f6; }
.toc.list > li.on > a,
.hasdepth > li.on > a { font-weight: 600; color: var(--btn-color-blue-); }
.scroll-list:hover .mCSB_scrollTools .mCSB_draggerContainer { opacity: 1; }
.t-toc > li > div.btn-box { padding: 0 20px; text-align: right; }
.t-toc > li > div.btn-box > .btn { border: 0; background: transparent; font-size: 14px; font-weight: 600; color: var(--btn-color-blue-); }
.btn.date { border: 0; background: transparent; }
.btn.date::before { display: inline-block; width: 16px; height: 16px; margin-right: 4px; background: url(../../../images/tgis/common/ico-date.svg) no-repeat center; content: ""; vertical-align: middle; }
.soil .btn.date { position: absolute; top: 32px; right: 20px; }
.modal-popup { position: absolute; top: 100px; left: 45%; display: none; padding: 16px 12px; border-radius: 10px; background-color: #fff; box-shadow: 3px 3px 10px var(--box-shadow-color); }
.modal-title { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 16px; font-weight: 600; }
.modal-popup.search-layer { width: 265px; }
.modal-popup.search-layer div.select-box { display: flex; flex-direction: column; width: 100%; gap: 4px; }
.modal-popup.search-layer div.select-box > div { display: flex; width: 100%; gap: 4px; }
.modal-popup.search-layer > .modal-body div.select-box select { flex: 1; }
.modal-popup .btn-box { display: flex; justify-content: space-between; margin-top: 24px; }
.btn.line.blue { width: 85px; box-sizing: border-box; padding: 8px; border: 1px solid var(--border-color-); border-radius: 5px; background: #fff; font-size: 14px; font-weight: 600; color: var(--btn-color-blue-); }
.modal-popup.widget-map-split { top: 0; right: 45px; left: unset; display: none; }
.widget-map-swipe.on .modal-popup.widget-map-split { display: block; }
.widget-map-split > .modal-body > div.split-box { position: relative; display: flex; gap: 24px; }
.widget-map-split > .modal-body > div.split-box > div.left::after { position: absolute; top: 8px; left: 50%; display: block; width: 1px; height: 130px; border-right: 1px dashed var(--border-color-); content: ""; transform: translateX(-50%); }
.widget-map-split > .modal-body > div.split-box > div > p:not(:first-child) { margin-top: 24px; }
.widget-map-split > .modal-body > div.split-box > div > p { margin-bottom: 8px; font-size: 13px; font-weight: 500; color: #416d98; }
.widget-map-split > .modal-body > div.split-box > div > p > span { font-weight: 600; }
.soil { position: relative; }
.soil > .list > li { padding: 12px 20px; }
.soil > .list > li > label { display: inline-block; width: calc(100% - 5px); }
.date-search { left: 20%; display: flex; align-items: center; padding: 12px 20px; gap: 32px; }
.date-search > .modal-title { margin-bottom: 0; }
.date-search > .modal-body { gap: 32px; }
.rangebox { gap: 12px; }
.rangebox > input { width: 50px; padding: 4px; border: 1px solid var(--border-color-); border-radius: 5px; font-size: 13px; font-weight: 600; text-align: center; color: var(--font-color-dark); }
#double-range-slider { width: 200px; }
.noUi-target { box-shadow: none; }
.noUi-handle:after,
.noUi-handle:before { content: none; }
.noUi-handle:after,
.noUi-handle:after { content: none; }
.noUi-horizontal { height: 6px; border: 0; background: #d6dae8; }
.noUi-horizontal .noUi-handle { top: -3px; right: -7px; width: 14px; height: 14px; border: 4px solid var(--btn-color-blue-); border-radius: 50%; box-shadow: unset; }
.noUi-connect { background: var(--btn-color-blue-); }
.left-box-depth .toc-title { padding: 0 0 8px 0; }
.left-box-depth .box-list { display: flex; margin-bottom: 12px; gap: 12px; }
.left-box-depth .box-list > div { flex: 1; }
.left-box-depth .box-list > div > select { width: 100%; }
.left-box-depth .box-list .title { width: 75px; padding: 4px 0; font-size: 14px; font-weight: 500; color: var(--font-color-normal); }
.style-box { padding: 12px; }
.style-box > li { display: flex; align-items: center; color: var(--font-color-normal); }
.style-box > li:not(:last-child) { margin-bottom: 6px; }
.style-box > li > .symbol-img { width: 16px; height: 16px; margin-right: 12px; border-radius: 5px; }
.style-box > li span { margin: 0 2px; font-weight: 600; color: var(--font-color-dark); }
.symbol.scroll-list { height: 110px; border: 1px solid var(--border-color-); border-radius: 5px; }
.style-box > li:nth-child(1) > .symbol-img { background-color: #ff0000; }
.style-box > li:nth-child(2) > .symbol-img { background-color: #ff008a; }
.range-setting > div { display: flex; align-items: center; gap: 4px; }
.range-setting > div > input { width: 55px; padding: 6px; border: 1px solid var(--border-color-); border-radius: 5px; }
.range-setting > div > .btn.line.blue { width: unset; padding: 5px; }
.left-box-depth .btn-box { display: flex; justify-content: end; margin-top: 24px; gap: 8px; }
.left-box-depth .tab-wrap { border: 1px solid var(--border-color-); }
.tab-wrap > .tab-btn { display: flex; align-items: center; }
.tab-wrap > .tab-btn .btn { position: relative; flex: 1; padding: 8px; border: 0; background: #f2f2f2; font-size: 14px; font-weight: 600; text-align: center; color: var(--font-color-normal); }
.tab-wrap > .tab-btn .btn.tab.on { background: #fff; color: var(--btn-color-blue-); }
.tab-wrap > .tab-btn .btn.tab.on::after { position: absolute; top: -1px; left: 0; display: block; width: 100%; height: 3px; background: var(--btn-color-blue-); content: ""; }
.left-box-depth .tab-wrap > ul > li { display: none; width: 100%; padding: 20px 14px; }
.left-box-depth .tab-wrap > ul > li.on { display: block; }
.opacity { font-size: 14px; font-weight: 600; }
.opacity input { width: 60px; padding: 4px 8px; border: 1px solid var(--border-color-); border-radius: 5px; text-align: right; }
.opacity span { margin-left: 4px; vertical-align: bottom; }
.btn.style_btnRangeSync { margin-top: 12px; padding: 4px 16px; border: 1px solid var(--btn-color-blue-); border-radius: 5px; background-color: transparent; font-size: 14px; font-weight: 500; color: var(--btn-color-blue-); }
.btn.style_btnRangeSync::before { display: inline-block; width: 16px; height: 16px; margin-right: 4px; background: url(../../../images/tgis/common/ico-synchronize.svg) no-repeat center; content: ""; vertical-align: text-bottom; }
.layer-opacity { align-items: center; }
.btn.download::before { display: inline-block; width: 24px; height: 24px; margin-right: 4px; background: url(../../../images/tgis/common/ico-file-download.svg) no-repeat center; content: ""; vertical-align: middle; }
.data-download-popup > .title > p::before { display: inline-block; width: 28px; height: 28px; margin-right: 8px; background: url(../../../images/tgis/common/ico-title-location.svg) no-repeat center; content: ""; vertical-align: middle; }
.btn.close { position: absolute; top: 50%; right: 20px; width: 40px; height: 40px; border: 0; background: url(../../../images/tgis/common/ico-close.svg) no-repeat center; transform: translateY(-50%); }
.popup-body { background: #f2f5f6; }
.map-area { margin-bottom: 40px; }
.map-area .conts > p { font-size: 16px; font-weight: 500; color: var(--font-color-normal); }
.tab-btn-list > li:not(:first-child) { margin-left: 16px; }
.tab-btn-list > li > .btn { padding: 12px 24px; border: 0; border-radius: 15px 15px 0 0; background: var(--border-color-); font-size: 16px; font-weight: 600; color: var(--font-color-normal); }
.tab-btn-list > li.on > .btn { background: #fff; color: var(--btn-color-blue-); }
.tab-list > li.on { display: block; }
.tab-list > li > .btn-box { margin-bottom: 16px; gap: 16px; }
.btn.open_all { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--btn-color-blue-) url(../../../images/tgis/common/ico-open_all.svg) no-repeat center; }
.btn.close_all { padding: 6px 12px; border: 1px solid var(--btn-color-blue-); border-radius: 10px; background-color: #fff; font-weight: 600; color: var(--btn-color-blue-); }
.tab-list .btn.date.type_white { padding: 2px 12px; border: 0; border-radius: 5px; background: var(--btn-color-blue-); font-weight: 600; color: #fff; }
.tab-list .btn.date.type_white::before { background: url(../../../images/tgis/common/ico-date_white.svg) no-repeat center / 16px; vertical-align: text-bottom; }
.btn.toggle-open { width: 24px; height: 24px; border: 0; border-radius: 5px; background: var(--btn-color-blue-) url(../../../images/tgis/common/ico-arrow-down_white.svg) no-repeat center / 14px; }
.cont-list { margin-bottom: 8px; padding: 12px 24px; border: 1px solid var(--border-color-); border-left: 3px solid var(--border-color-); border-radius: 0 5px 5px 0; }
.cont-list.on > ul { display: flex; flex-wrap: wrap; gap: 20px; }
.cont-list.on > .flex-box .btn.toggle-open { background: #909db1 url(../../../images/tgis/common/ico-arrow-right_white.svg) no-repeat center; }
.cont-list .title { font-size: 16px; font-weight: 600; color: var(--font-color-dark); }
.cont-list .btn.toggle-open { margin-right: 8px; }
.cont-list .btn.type_white { margin-left: 40px; }
.cont-list p.title { margin: 0 16px; padding: 20px 0 10px 0; border-bottom: 1px solid var(--border-color-); text-indent: 16px; }
.cont-list .scroll-list { height: 180px; }
.cont-list .scroll-list .mCSB_container { padding: 16px 24px; }
span.bug::before { display: inline-block; width: 18px; height: 18px; margin-right: 4px; background: url(../../../images/tgis/common/ico-bug.svg) no-repeat center; content: ""; vertical-align: text-bottom; }
span.disease::before { display: inline-block; width: 18px; height: 18px; margin-right: 4px; background: url(../../../images/tgis/common/ico-bacteria.svg) no-repeat center; content: ""; vertical-align: text-bottom; }
div.info-box:not(:last-child) { margin-bottom: 4px; }
div.info-box span.alarm { padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 600; vertical-align: middle; }
.living-environment p.title { display: flex; justify-content: space-between; margin: 0; padding: 10px 24px; border-bottom: 0; text-indent: 0; }
.bechance-map p.title { margin-bottom: 24px; font-size: 20px; font-weight: 600; }
.date-box { display: flex; align-items: center; padding: 6px 16px; border: 1px solid var(--border-color-); border-radius: 10px; background-color: #fff; gap: 12px; }
.date-box .date { width: 77px; border: 0; }
.date-box > div { position: relative; display: flex; align-items: center; padding: 8px; border: 1px solid var(--border-color-); border-radius: 5px; }
.date-box .date + label { display: inline-block; width: 20px; height: 20px; background: url(../../../images/tgis/common/ico-date.svg) no-repeat center; }
.date-box > span { margin: 0 -2px; }
.date-box .btn.search { width: unset; height: unset; padding: 9px 12px; border-radius: 5px; background: var(--btn-color-blue-); font-weight: 600; color: #fff; }
.date-box .btn.search::before { display: inline-block; width: 16px; height: 16px; margin-right: 4px; background: url(../../../images/tgis/common/ico-search_white.svg) no-repeat center / 16px; content: ""; vertical-align: text-bottom; }
.bechance-map span.title { margin-right: 24px; font-size: 14px; font-weight: 600; color: var(--font-color-dark); }
.ui-state-hover { background: var(--btn-color-blue-) !important; color: #fff !important; }
.flex-box.jusp { justify-content: space-between; }
.bechance-map .tab-wrap { margin-top: 40px; }
.bechance-map .tab-wrap > .btn-box.flex-box { margin-bottom: 16px; gap: 16px; }
.bechance-map .cont-list { background: #fff; }
.bechance-map .cont-list.on { background: #eef7fd; }
.type-data { padding: 12px 16px; border: 0; border-radius: 10px; background: var(--btn-color-blue-); font-size: 14px; font-weight: 600; color: #fff; }
.type-data::before { position: relative; top: -1px; display: inline-block; width: 20px; height: 20px; margin-right: 6px; background: url(../../../images/tgis/common/ico-see-data.svg) no-repeat center; content: ""; vertical-align: middle; }
.modal-popup.downloader { top: 0; left: 0; z-index: 6; display: block; width: 100%; height: 100%; padding: 0; border-radius: 0; background: rgba(0 0 0 / 0.5); }
.modal-popup.downloader .modal-title { position: relative; margin-bottom: 0; padding: 16px 24px; border-radius: 10px 10px 0 0; background-color: #255a8f; font-size: 16px; font-weight: 600; color: #fff; }
.modal-popup.downloader .modal-title > .btn.close { right: 16px; }
.modal-popup.downloader .modal-wrap { position: absolute; top: 50%; left: 50%; width: 600px; transform: translate(-50%, -50%); }
.modal-popup.downloader .modal-body { margin-top: -1px; padding: 32px; background-color: #fff; }
.modal-popup.downloader .modal-body > div { margin-bottom: 32px; }
.modal-popup.downloader .modal-body > div > p.title { margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--font-color-dark); }
.modal-popup.downloader .modal-body .date-box { padding: 0; border: 0; background: #fff !important; }
.modal-popup.downloader .modal-body .date-box > .title { border-radius: 5px; background: #f2f5f6; }
.modal-popup.downloader .modal-body span.title { display: inline-block; width: 92px; padding: 8px; font-weight: 500; color: var(--font-color-normal); }
.modal-popup.downloader .modal-body > div > p.title + div { display: flex; padding: 10px; border-radius: 10px; background-color: #f2f5f6; gap: 8px; }
.modal-popup.downloader .modal-body > div > p.title + div select { flex: 1; background-color: #fff; background-image: url(../../../images/tgis/common/ico-arrow-down_gray.svg); }
.modal-popup.downloader .modal-body > div > p.title + div.gray-box { flex-direction: column; }
.modal-popup.downloader .modal-body > div > p.title + div.gray-box > div { display: flex; gap: 8px; }
.modal-popup.downloader .modal-body > div > p.title + div.gray-box textarea { flex: 1; width: unset; padding: 10px; border-radius: 5px; }
.modal-popup.downloader .filebox { width: 100%; height: unset; }
.modal-popup.downloader .filebox .up-name { height: 36px; padding-left: 12px; border-radius: 10px; }
.modal-popup.downloader .filebox .upfile { right: 24px; width: unset; border: 0; background: transparent; text-align: right; }
.modal-popup.downloader .btn-box.file-down { justify-content: center; }
.modal-popup.downloader .btn-box.file-down > .btn.normal { width: 230px; }
.modal-popup.downloader .modal-body > div > p.title + div.table-box { display: block; border: 1px solid var(--border-color-); background: #fff; }
.modal-popup.downloader .modal-body > div > p.title + div.table-box .table-list { height: 150px; }
.modal-popup.downloader table > thead th { padding: 0 10px 10px 10px; color: #416d98; }
.modal-popup.downloader table > thead > tr { border-bottom: 1px solid var(--border-color-); }
.modal-popup.downloader table > tbody { text-align: center; }
.modal-popup.downloader table > tbody tr:hover td { background: #eef7fd; }
.modal-popup.downloader table > tbody tr:hover td:first-child { border-radius: 5px 0 0 5px; }
.modal-popup.downloader table > tbody tr:hover td:last-child { border-radius: 0 5px 5px 0; }
.modal-popup.downloader table > tbody td { padding: 10px 0px 10px 16px; font-weight: 500; text-align: left; color: var(--font-color-dark); }
.modal-popup.downloader table .type-check + label::before { position: relative; top: 1px; margin: 0; background-color: #fff; }
.modal-popup.downloader table .type-check:checked + label::before { background: #2680eb url(../../../images/tgis/common/ico-check.svg) no-repeat center; }
.col-1 { width: 50px; }
.certification { top: 0; left: 0; z-index: 6; display: block; width: 100%; height: 100%; padding: 0; border-radius: 0; background: rgba(0 0 0 / 0.5); text-align: center; }
.certification .modal-wrap { position: absolute; top: 50%; left: 50%; width: 430px; padding: 64px 40px; border-radius: 15px; background: #fff; transform: translate(-50%, -50%); }
.certification .close { position: unset; transform: unset; }
.certification p.title { font-size: 18px; font-weight: 600; color: var(--font-color-dark); }
.certification p:not(.title) { margin: 24px 0; font-size: 14px; font-weight: 400; }
.certification .btn-box { flex-direction: column; align-items: center; gap: 8px; }
.certification .btn-box > .btn.noraml { border: 0; background: var(--btn-color-blue-); color: #fff; }
.certification .btn-box > .btn { width: 230px; padding: 8px; border-radius: 10px; background: #ddd; font-size: 16px; font-weight: 600; color: var(--font-color-dark); }
.no-drag { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
.context-menu-area { position: fixed; z-index: 2; display: none; }
.context-menu-area .btn.text-search { width: 130px; }
nav { height: calc(100% - 200px); }
#map { height: 100%; background: none; }
.right-box > ul > li:hover { background-color: #dae2f9; }
.right-box > ul > li span { display: none; }
.right-box > ul > li button { display: block; width: 100%; height: 40px; min-height: 40px; background-position: center; background-repeat: no-repeat; }
.basemap_basemapArea .basemap_layer.basemap_active select { min-width: unset; padding: 0 5px; font-size: 13px; }
.right-box > ul > li.widget-map_style button { background-image: url(../../../images/tgis/common/ico-widget-map_style.png); }
.right-box > ul > li.widget-map_style:hover button.basemap_tool { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-map_style.png); }
.right-box > ul > li.widget-map_style .basemap_basemapArea { display: flex; align-items: center; height: 30px; margin: 5px 10px; gap: 5px; }
.right-box > ul > li.widget-map_style .basemap_basemapArea li img { display: none; }
.right-box > ul > li.widget-map_style .basemap_basemapArea span { padding: 0 !important; }
.right-box > ul > li.widget-map_style .basemap_basemapArea button { position: relative; padding: 0 !important; background: none; }
.right-box > ul > li.widget-map_style .basemap_basemapArea li button::after { position: absolute; top: 50%; right: 0; display: inline-block; width: 1px; height: 10px; background: var(--border-color-); content: ""; transform: translateY(-50%); }
ul.divideMap_widget > li.divideMap_basemap button { background-image: url(../../../images/tgis/common/ico-widget-map_style.png); }
ul.divideMap_widget > li.divideMap_basemap:hover button.basemap_tool { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-map_style.png); }
ul.divideMap_widget > li.divideMap_basemap .basemap_basemapArea { height: auto; margin: 0; }
ul.divideMap_widget > li.divideMap_basemap .basemap_basemapArea li img { display: none; }
ul.divideMap_widget > li.divideMap_basemap .basemap_basemapArea span { padding: 0 !important; }
ul.divideMap_widget > li.divideMap_basemap .basemap_basemapArea button { position: relative; padding: 0 !important; background: none; }
ul.divideMap_widget > li.divideMap_basemap .basemap_basemapArea li button::after { position: absolute; top: 50%; right: 0; display: inline-block; width: 1px; height: 10px; background: var(--border-color-); content: ""; transform: translateY(-50%); }
.right-box > ul > li.widget-map-split button { background-image: url(../../../images/tgis/common/ico-widget-split.png); background-position: center; }
.right-box > ul > li.widget-map-split:hover button.divideMap_tool { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-split.png); }
.right-box > ul > li.widget-map-split .divideMap_divideMapArea li button { display: block; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; content: ""; }
.right-box > ul > li.widget-map-split .divideMap_divideMapArea li:nth-child(1) button { background-image: url(../../../images/tgis/common/ico-widget-split_2.png) !important; }
.right-box > ul > li.widget-map-split .divideMap_divideMapArea li:nth-child(1) button:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-split_2.png) !important; }
.right-box > ul > li.widget-map-split .divideMap_divideMapArea li:nth-child(2) button { background-image: url(../../../images/tgis/common/ico-widget-split_3.png) !important; }
.right-box > ul > li.widget-map-split .divideMap_divideMapArea li:nth-child(2) button:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-split_3.png) !important; }
.right-box > ul > li.widget-map-split .divideMap_divideMapArea li:nth-child(3) button { background-image: url(../../../images/tgis/common/ico-widget-split_4.png) !important; }
.right-box > ul > li.widget-map-split .divideMap_divideMapArea li:nth-child(3) button:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-split_4.png) !important; }
.right-box > ul > li.widget-map-split .divideMap_divideMapArea li { position: relative; }
.right-box > ul > li.widget-map-split .divideMap_divideMapArea li:not(:last-child)::after { position: absolute; top: 50%; right: 0; display: inline-block; width: 1px; height: 10px; background: var(--border-color-); content: ""; transform: translateY(-50%); }
ul.divideMap_widget { width: 40px; }
ul.divideMap_widget > li { width: 100%; }
ul.divideMap_widget > li:hover { background-color: #dae2f9; }
ul.divideMap_widget > li > button > span { display: none !important; }
ul.divideMap_widget > li button { display: block; width: 100%; height: 100%; min-height: 40px !important; background-position: center; background-repeat: no-repeat; }
ul.divideMap_widget > li#divideMapWidget button { background-image: url(../../../images/tgis/common/ico-widget-split.png) !important; }
ul.divideMap_widget > li#divideMapWidget:hover button.basemap_tool { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-split.png) !important; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li button { display: block; width: 40px; height: 40px; background-position: center; background-repeat: no-repeat; content: ""; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li button span { display: none !important; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li:nth-child(1) button { background-image: url(../../../images/tgis/common/ico-widget-split_2.png) !important; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li:nth-child(1) button:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-split_2.png) !important; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li:nth-child(2) button { background-image: url(../../../images/tgis/common/ico-widget-split_3.png) !important; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li:nth-child(2) button:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-split_3.png) !important; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li:nth-child(3) button { background-image: url(../../../images/tgis/common/ico-widget-split_4.png) !important; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li:nth-child(3) button:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-split_4.png) !important; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li { position: relative; }
ul.divideMap_widget > li#divideMapWidget .divideMap_divideMapArea li:not(:last-child)::after { position: absolute; top: 50%; right: 0; display: inline-block; width: 1px; height: 10px; background: var(--border-color-); content: ""; transform: translateY(-50%); }
.divideMap_toc .divideMap_tocArea .rstcustom__rowWrapper div { overflow-x: initial; }
.divideMap_toc .divideMap_miniTOCFrame .divideMap_tocArea { width: 300px; max-height: 460px; overflow-y: auto; }
.rstcustom__node:has(.toc_depth2) { height: 0px !important; }
.toc_btnGroup:has(.toc_btnAllView) { display: none !important; }
.right-box > ul > li.widget-map-edit button { background-image: url(../../../images/tgis/common/ico-widget-edit.png); }
.right-box > ul > li.widget-map-edit:hover button.drawControl_toolBtn { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-edit.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_pointBtn { background-image: url(../../../images/tgis/common/ico-widget-dot.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_pointBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-dot.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_polygonBtn { background-image: url(../../../images/tgis/common/ico-widget-polygon.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_polygonBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-polygon.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_boxBtn { background-image: url(../../../images/tgis/common/ico-widget-square.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_boxBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-square.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_lineBtn { background-image: url(../../../images/tgis/common/ico-widget-line.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_lineBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-line.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_textBtn { background-image: url(../../../images/tgis/common/ico-widget-text.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_textBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-text.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_curveBtn { background-image: url(../../../images/tgis/common/ico-widget-curve.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_curveBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-curve.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_circleBtn { background-image: url(../../../images/tgis/common/ico-widget-circle.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_circleBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-circle.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_bufferBtn { background-image: url(../../../images/tgis/common/ico-widget-buffer.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button.drawControl_bufferBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-buffer.png); }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv { right: 50px; padding: 0; }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button { position: relative; }
.right-box > ul > li.widget-map-edit .drawControl_drawGrpDiv button:not(:last-child)::after { position: absolute; top: 50%; right: 0; display: inline-block; width: 1px; height: 10px; background: var(--border-color-); content: ""; transform: translateY(-50%); }
#odf-draw-textBox-button { padding: 8px; border: 0; border-radius: 5px; background: var(--btn-color-blue-); font-weight: 6; text-align: center; color: #fff; }
#odf-draw-textBox-input { width: 200px !important; height: 34px; box-sizing: border-box; margin-right: 6px !important; padding: 8px; border: 1px solid #e9e9e9; border-radius: 5px; }
.right-box > ul > li.widget-map-distance button { background-image: url(../../../images/tgis/common/ico-widget-map-distance.png); }
.right-box > ul > li.widget-map-distance:hover button.measureControl_toolBtn { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-map-distance.png); }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button.measureControl_areaBtn { background-image: url(../../../images/tgis/common/ico-widget-area.png); }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button.measureControl_areaBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-area.png); }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button.measureControl_distanceBtn { background-image: url(../../../images/tgis/common/ico-widget-distance.png); }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button.measureControl_distanceBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-distance.png); }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button.measureControl_circleBtn { background-image: url(../../../images/tgis/common/ico-widget-radius.png); }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button.measureControl_circleBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-radius.png); }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button.measureControl_spotBtn { background-image: url(../../../images/tgis/common/ico-widget-pin.png); }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button.measureControl_spotBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-pin.png); }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv { right: 50px; padding: 0; }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button { position: relative; }
.right-box > ul > li.widget-map-distance .measureControl_measureGrpDiv button:not(:last-child)::after { position: absolute; top: 50%; right: 0; display: inline-block; width: 1px; height: 10px; background: var(--border-color-); content: ""; transform: translateY(-50%); }
.right-box > ul > li.widget-map-full_screen button { width: 100% !important; background: url(../../../images/tgis/common/ico-widget-map-full_screen.png) no-repeat center; }
.right-box > ul > li.widget-map-full_screen:hover button.measureControl_toolBtn { background: #dae2f9 url(../../../images/tgis/common/ico-widget-map-full_screen.png) no-repeat center; }
#fullScreenControlBtn:hover { background: #dae2f9 url(../../../images/tgis/common/ico-widget-map-full_screen.png) no-repeat center; }
.right-box > ul > li.widget-map-swipe button { background-image: url(../../../images/tgis/common/ico-widget-map-swipe.png); }
.right-box > ul > li.widget-map-swipe:hover button.measureControl_toolBtn { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-map-swipe_white.png); }
.swiperControlWidget { position: absolute; top: 160px; right: 50px; display: flex; flex-direction: row; border-radius: 3px; background: #fff; box-shadow: 0.6px 0.8px 4px 0 rgb(0 0 0 / 35%); opacity: 1; word-break: keep-all; transition: 0.2s; visibility: visible; }
.swiperControlWidget .swiperControl_swiperBarLabel { font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 500; color: #416d98; }
.swiperControlWidget .swiperControl_swiperBar { width: calc(100% - 110px); }
.swiperControlWidget .swiperControl_leftSideDiv::after { position: absolute; top: 70px; left: 50%; display: block; width: 1px; height: 130px; border-right: 1px dashed var(--border-color-); content: ""; transform: translateX(-50%); }
.swiperControlWidget .swiperControl_rightSideDiv { margin-left: 25px; }
.swiperControlWidget .swiperControl_swiperControlContent { width: auto; }
.swiperControlWidget .swiperControl_colDiv > span { margin-bottom: 8px; font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 500; color: #416d98; }
.swiperControlWidget .swiperControl_colDiv select { width: 130px; min-width: 100px; padding: 6px 24px 6px 8px; border: 1px solid #d6dae8; border-radius: 5px; font-size: 13px; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
.swiperControlWidget .swiperControl_createBtn { position: relative; width: 85px; padding: 8px; border: 0; border-radius: 5px; background: var(--btn-color-blue-); font-size: 14px; font-weight: 600; text-align: center; color: #fff; }
.swiperControlWidget .swiperControl_deleteBtn { width: 85px; box-sizing: border-box; padding: 8px; border: 1px solid var(--border-color-); border-radius: 5px; background: #fff; font-size: 14px; font-weight: 600; color: var(--btn-color-blue-); }
.swiperControl_barDiv { display: flex; align-items: center; gap: 10px; }
.right-box > ul > li.widget-map-print button { background-image: url(../../../images/tgis/common/ico-widget-map-print.png); }
.right-box > ul > li.widget-map-print:hover button.measureControl_toolBtn { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-map-print.png); }
.right-box > ul > li.widget-map-download button { background-image: url(../../../images/tgis/common/ico-widget-map-download.png); }
.right-box > ul > li.widget-map-download:hover button.measureControl_toolBtn { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-map-download.png); }
.right-box > ul > li.widget-map-download .downloadControl_downloadGrpDiv button.downloadControl_downloadPngBtn { background-image: url(../../../images/tgis/common/ico-widget-png.png); }
.right-box > ul > li.widget-map-download .downloadControl_downloadGrpDiv button.downloadControl_downloadPngBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-png.png); }
.right-box > ul > li.widget-map-download .downloadControl_downloadGrpDiv button.downloadControl_downloadPDFBtn { background-image: url(../../../images/tgis/common/ico-widget-pdf.png); }
.right-box > ul > li.widget-map-download .downloadControl_downloadGrpDiv button.downloadControl_downloadPDFBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-pdf.png); }
.right-box > ul > li.widget-map-download .downloadControl_downloadGrpDiv { right: 50px; padding: 0; }
.right-box > ul > li.widget-map-download .downloadControl_downloadGrpDiv button { position: relative; }
.right-box > ul > li.widget-map-download .downloadControl_downloadGrpDiv button:not(:last-child)::after { position: absolute; top: 50%; right: 0; display: inline-block; width: 1px; height: 10px; background: var(--border-color-); content: ""; transform: translateY(-50%); }
.right-box > ul > li.widget-map-reset button { width: 100% !important; background: url(../../../images/tgis/common/ico-widget-map-reset.png) no-repeat center; }
.right-box > ul > li.widget-map-reset:hover button.measureControl_toolBtn { background: #dae2f9 url(../../../images/tgis/common/ico-widget-map-reset.png) no-repeat center; }
#clearBtn:hover { background: #dae2f9 url(../../../images/tgis/common/ico-widget-map-reset.png) no-repeat center; }
.right-box > ul > li.widget-map-bookmark button { background-image: url(../../../images/tgis/common/ico-widget-map-bookmark.png); }
.right-box > ul > li.widget-map-bookmark:hover button.measureControl_toolBtn { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-map-bookmark.png); }
.bookmarkDiv { top: 320px; right: -15px; }
.bookmarkDiv .bookMarkControl_bookMarkControlContent { flex-direction: row; padding: 5px; border-radius: 3px; background: #fff; box-shadow: 0.6px 0.8px 4px 0 rgb(0 0 0 / 35%); opacity: 1; word-break: keep-all; transition: 0.4s; visibility: visible; }
.bookmarkDiv .bookMarkControl_bookMarkInput,
.bookmarkDiv .bookMarkControl_bookmarkBtn { border: 1px solid var(--border-color-); border-radius: 5px; font-size: 14px; }
.bookmarkDiv .bookMarkControl_addBtn,
.bookmarkDiv .bookMarkControl_addBtn:hover { position: relative; padding: 8px; border: 0; border-radius: 5px; background: var(--btn-color-blue-) url(../../../images/tgis/common/ico-in-add.png) no-repeat 50%; font-weight: 600; text-align: center; color: #fff; cursor: pointer; }
.bookmarkDiv .bookMarkControl_bookmarkDeleteBtn,
.bookmarkDiv .bookMarkControl_bookmarkDeleteBtn:hover { box-sizing: border-box; padding: 19px; border: 1px solid var(--border-color-); border-radius: 5px; background: #fff url(../../../images/tgis/common/ico-in-remove.png) no-repeat center; font-size: 14px; font-weight: 600; color: var(--btn-color-blue-); }
.right-box > ul > li.widget-map-share button { background-image: url(../../../images/tgis/common/ico-widget-map-share.png); }
.right-box > ul > li.widget-map-share:hover button.measureControl_toolBtn { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-map-share.png); }
.zoomControl { position: absolute; top: 500px; right: 0 !important; z-index: 1; }
.zoomControl button { position: relative; width: 40px; height: 40px; background: #fff; }
.zoomControl_inBtn { border-bottom: 1px solid var(--border-color-); background: url(../../../images/tgis/common/ico-widget-map-pluse.png) no-repeat center !important; }
.zoomControl_outBtn { background: url(../../../images/tgis/common/ico-widget-map-minus.png) no-repeat center !important; }
.zoomControl.viewZoomControl { top: 90px; right: unset; left: 30px !important; width: 40px; }
.right-box > ul > li.widget-map-select button { background-image: url(../../../images/tgis/common/ico-widget-map-thema.png); }
.right-box > ul > li.widget-map-select:hover button.drawControl_toolBtn { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-map-thema.png); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button.drawControl_pointBtn { background-image: url(../../../images/tgis/common/ico-widget-dot.png); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button.drawControl_pointBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-dot.png); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button.drawControl_polygonBtn { background-image: url(../../../images/tgis/common/ico-widget-polygon.png); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button.drawControl_polygonBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-polygon.png); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button.drawControl_boxBtn { background-image: url(../../../images/tgis/common/ico-widget-square.png); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button.drawControl_boxBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-square.png); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button.drawControl_circleBtn { background-image: url(../../../images/tgis/common/ico-widget-circle.png); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button.drawControl_circleBtn:hover { background-color: #dae2f9; background-image: url(../../../images/tgis/common/ico-widget-circle.png); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button { position: relative; }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv button:not(:last-child)::after { position: absolute; top: 50%; right: 0; display: inline-block; width: 1px; height: 10px; background: var(--border-color-); content: ""; transform: translateY(-50%); }
div.info-box span:not(.alarm) { display: inline-block; margin-right: 8px; padding: 8px; border-radius: 10px; background-color: #fff; font-size: 16px; font-weight: 600; color: var(--font-color-dark); vertical-align: middle; }
div.info-box span.alarm.lv99 { float: right; background-color: rgba(176, 176, 176, 0.2); color: #676767; }
div.info-box span.alarm.lv5 { float: right; background-color: rgba(255 130 44 / 0.25); color: #ff7600; }
div.info-box span.alarm.lv4 { float: right; background-color: rgba(255 64 64 /0.15); color: #ff4040; }
div.info-box span.alarm.lv3 { float: right; background-color: rgba(255 153 0 /0.15); color: #ff9900; }
div.info-box span.alarm.lv2 { float: right; background-color: rgba(65 109 152 /0.15); color: #416d98; }
div.info-box span.alarm.lv1 { float: right; background-color: rgba(28 126 240 /0.15); color: #1c7ef0; }
.targetNtnBrnchNoList { margin: 5px; }
.data-download-popup .viewMapArea { width: 50%; height: 400px; }
.odf_administrativeDistrictSearch_widget { width: max-content; height: fit-content; border: 1px solid #e9e9e9; border-radius: 5px; background: #fff; box-shadow: 0.5px 0.9px 4px 0 rgba(0, 0, 0, 0.27); }
.odf_addressSearch_widget { border: 1px solid #e9e9e9; border-radius: 5px; background: #fff; box-shadow: 0.5px 0.9px 4px 0 rgba(0, 0, 0, 0.27); }
.search-area li { float: none; }
.administrativeDistrictSearch_cScroll::-webkit-scrollbar { width: 4px; }
.left-box-depth { position: absolute; top: 0; left: -180px; z-index: 1; display: block !important; width: 300px; height: auto; max-height: 100%; background: #fff; box-shadow: 3px 3px 10px var(--box-shadow-color); overflow: auto; transition: all 0.3s ease-in-out !important; }
.left-box-depth.active { left: 434px !important; }
.left-box-depth .layerDetail_inner { height: auto; padding: 32px 20px; }
.left-box-depth .layerDetail_tabContWrap.layerDetail_type01 > .layerDetail_tabNav .layerDetail_tabList li { flex: none; height: 31px; box-sizing: border-box; margin: 0; background: none; font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif; font-size: 16px !important; font-weight: 600; color: var(--font-color-dark) !important; }
.left-box-depth .layerDetail_tabNav { padding: 0 0 8px 0; }
.left-box-depth .layerDetail_inner.layerDetail_layer { padding: 0; }
.left-box-depth .style_choice > label { width: 75px; font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 500; line-height: 30px; text-align: left; letter-spacing: 0; white-space: pre; color: var(--font-color-normal); }
.left-box-depth .style_choice .style_pick select { min-width: 100px; height: 31px; padding: 6px 24px 6px 8px; border: 1px solid #d6dae8; border-radius: 5px; background: #eff7ff url(../../../images/tgis/common/ico-select-arrow.svg) no-repeat center right 8px; font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif; font-size: 13px; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
.left-box-depth .style_choice .style_pick .style_checkbox { margin-top: 0; margin-bottom: 5px; }
.left-box-depth .style_choice .style_pick .style_checkbox label { font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif; font-size: 12px; }
.left-box-depth .style_previewItem .style_previewItem_name { width: 100%; font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; color: #555; }
.left-box-depth .style_previewItem .style_previewItem_icon.style_svgIcon { width: 16px; height: 16px; }
.left-box-depth .style_choice .style_pick .style_list li { align-items: center; margin-bottom: 5px; padding-left: 0; font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; line-height: 21px; color: #555; }
.left-box-depth .style_choice .style_pick .style_list ul { padding: 5px; list-style: none; }
.left-box-depth .layerDetail_tabContWrap.layerDetail_type01 .layerDetail_tabCont { border: none; }
.left-box-depth .style_choice { justify-content: flex-end; align-items: center; margin-bottom: 12px; gap: 8px; }
.left-box-depth .style_choice.style_type02 .style_pick .style_comboBox,
.style_choice.style_type02 .style_pick select { height: auto; line-height: normal; }
.style_scroll { max-height: fit-content; }
.style_scroll::-webkit-scrollbar { width: 4px; }
.left-box-depth.style_scroll::-webkit-scrollbar,
.left-box-depth .style_scroll::-webkit-scrollbar { width: 4px; }
.left-box-depth .style_choice .style_pick .style_list { height: 110px; border: 1px solid var(--border-color-); border-radius: 5px; }
.left-box-depth .style_list.style_preview > .style_scroll { display: flex; flex-direction: column; max-height: 108px; }
.left-box-depth .style_pick { flex-direction: inherit; gap: 4px; }
.left-box-depth .style_choice.style_ab .style_pick { flex-direction: inherit; width: 100%; }
.left-box-depth .style_choice .style_pick input.style_miniInput { width: 55px; }
.left-box-depth .style_choice .style_pick input[type="number"] { width: 55px; height: 33px; margin-right: 0; padding: 3px; }
.left-box-depth .style_btn.style_mini { width: unset !important; height: 33px; box-sizing: border-box; padding: 5px; border: 1px solid var(--border-color-); border-radius: 5px; background: #fff; font-size: 14px; font-weight: 600; color: var(--btn-color-blue-); }
.left-box-depth .style_tabContWrap.style_type02 > .style_tabNav .style_tabList li { position: relative; flex: 1; height: auto; padding: 8px; border: 0; border-radius: 0; background: #f2f2f2; font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; line-height: normal; text-align: center; color: var(--font-color-normal); cursor: pointer; }
.left-box-depth .style_tabContWrap.style_type02 > .style_tabNav .style_tabList li.style_active { background: #fff; color: var(--btn-color-blue-); }
.left-box-depth .style_tabContWrap.style_type02 > .style_tabNav .style_tabList li.style_active::after { position: absolute; top: -1px; left: 0; display: block; width: 100%; height: 3px; background: var(--btn-color-blue-); content: ""; }
.left-box-depth .style_tabContWrap { border: 1px solid var(--border-color-); }
.left-box-depth .style_tabContWrap.style_type02 .style_tabCont { padding: 0; border: none; }
.left-box-depth .style_tabContWrap .style_inner { height: fit-content; padding: 20px 14px 10px 14px; }
.left-box-depth .style_choice.style_type02 > label { text-align: left; }
.left-box-depth .range_widget table.range_horizon td { height: 28px; }
.left-box-depth .range_widget table.range_horizon td:not(.range_active, .range_dragTarget) { background-color: #e9ecf8; }
.left-box-depth .style_btnRangeSync { float: right; width: auto; height: auto; padding: 4px 16px; border: 1px solid var(--btn-color-blue-); border-radius: 5px; background-color: transparent; font-size: 14px; font-weight: 500; color: var(--btn-color-blue-); }
.left-box-depth .style_btnRangeSync::before { display: inline-block; width: 16px; height: 16px; margin-right: 4px; background: url(../../../images/tgis/common/ico-synchronize.svg) no-repeat center; content: ""; vertical-align: text-bottom; }
.left-box-depth .style_choice.style_ab { flex-direction: column; align-items: flex-start; margin-top: 10px; }
.left-box-depth .style_choice > label.style_wide { line-height: 30px; letter-spacing: 0; }
.left-box-depth .style_btnArea.style_flexCenter { display: flex; justify-content: end; margin-top: 24px; gap: 8px; }
.left-box-depth .style_btn.style_normal1 { justify-content: space-around; width: 85px; box-sizing: border-box; padding: 8px; border: 1px solid var(--border-color-); border-radius: 5px; background: #fff; font-size: 14px; font-weight: 600; color: var(--btn-color-blue-); }
.left-box-depth .style_btn.style_hilight1 { position: relative; justify-content: space-around; width: 85px; padding: 8px; border: 0; border-radius: 5px; background: var(--btn-color-blue-); font-size: 14px; font-weight: 600; text-align: center; color: #fff; cursor: pointer; }
.left-box-depth .style_checkbox label:before { display: inline-block; width: 16px; height: 16px; margin-right: 8px; border: 1px solid var(--border-color-); border-radius: 3px; content: ""; vertical-align: sub; }
.left-box-depth .style_checkbox input[type="checkbox"]:checked + label:before { background: #2680eb url(../../../images/tgis/common/ico-check.svg) no-repeat center; border-color: var(--btn-color-blue-); }
.left-box-depth input.style_noFill { vertical-align: middle; }
.left-box-depth .style_symbolEditor .style_pick input { width: 100px; }
.left-box-depth .style_symbolEditor .style_pick label { line-height: 1.2; }
.left-box-depth .style_divPopupHeader .style_closeBtn { float: right; color: white; }
.style_normal .style_patternPickerArea .style_divPopup { left: -109px; }
.loader-list { position: absolute; z-index: 10; display: none; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0 0 0 / 0.75); }
.loader-list li { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; }
.cont-bottom .pagenation .page > a:first-child { border-radius: 5px 5px 5px 5px; }
.cont-bottom .pagenation .page > a:last-child { border-radius: 5px 5px 5px 5px; }
.flex-2 { flex: 2 !important; }
.statistics .cont-box .split-box { flex: 1; white-space: nowrap; overflow-x: auto; }
.split-box > div:not(.btn-box, .list) { height: 550px; border: 1px solid var(--border-color-); border-radius: 15px; background-color: #fff; white-space: nowrap; overflow: auto; }
.rstcustom__node { height: 65px; margin-bottom: 3px; }
.toc_tocContentBox .toc_children.toc_depth1 .rstcustom__rowContents { margin-bottom: 10px; background-color: #ffffff; }
.toc_tocContentBox .toc_layerContent .rstcustom__rowTitle > div > span { margin-top: -12px; }
.toc_tocContentBox .toc_layerContent .rstcustom__rowToolbar { justify-content: flex-end; margin-top: -14px; margin-left: 6px; border-top: 1px dashed var(--border-color-); }
.toc_tocContentBox .toc_children.toc_depth2 .rstcustom__rowContents { margin-bottom: 10px; background-color: #ffffff; }
.split-box.registration { display: flex; flex-direction: column; justify-content: space-between; min-width: 970px; height: 550px; margin-top: 31px; padding: 32px; border: 1px solid var(--border-color-); border-radius: 15px; background: #fff; font-size: 16px; }
.split-box.registration .list-box > .list { display: flex; margin-bottom: 25px; gap: 30px; }
.split-box.registration .list-box { height: auto; border: none; border-radius: 0; background-color: #fff; overflow: auto; }
#tocWidget { height: 100%; background-color: #eff7ff; }
.toc_expandedBoxOpen { left: 5px; background: url(../../../images/tgis/common/ico-toc-file_open.svg) no-repeat; }
.toc_expandedBoxOpen::after { position: absolute; left: -20px; display: block; width: 16px; height: 16px; border-radius: 5px; background: #1c7ef0 url(../../../images/tgis/common/ico-arrow-down_white.svg) no-repeat center; content: ""; }
.toc_expandedBoxClosed { left: 5px; background: url(../../../images/tgis/common/ico-toc-file.svg) no-repeat; }
.toc_expandedBoxClosed::after { position: absolute; left: -20px; display: block; width: 16px; height: 16px; border-radius: 5px; background: url(../../../images/tgis/common/ico-toc-arrow-right._light-gray.svg) no-repeat center; content: ""; }
.toc_expandedBoxOpen + span { font-weight: 600 !important; }
.toc_depth1 .toc_expandedBoxOpen + span { font-weight: 500 !important; }
.toc_expanded + span { font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif !important; font-size: 14px !important; }
.toc_tocContentBox
.toc_layerContent
> .rstcustom__rowContents
> .rstcustom__rowToolbar
> .rstcustom__toolbarButton
> button { border: none; }
.toc_legend { background: url(../../../images/tgis/common/ico-toc-legend.svg) no-repeat; }
.toc_legend.toc_on { background: url(../../../images/tgis/common/ico-toc-legend_on.svg) no-repeat; }
.toc_tocContentBox .toc_layerContent .rstcustom__rowTitle .toc_layerText { display: -webkit-box; width: 261px; height: 30px; margin-top: -22px; font-family: "Pretendard", "AppleGothic", "Malgun Gothic", "留묒? 怨좊뵓", "?뗭쓬", "Dotum", "Apple SD Gothic Neo", Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 400; line-height: 36px; white-space: normal; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.rstcustom__rowTitle div span i { display: inline-block; width: 13px !important; height: 13px !important; }
.rstcustom__node:has(.toc_expanded) { height: 40px !important; }
.toc_tocContentBox .toc_groupContent .rstcustom__rowTitle { margin-top: 5px; }
.legend_area.legend_active { display: flex; flex-direction: column; gap: 5px; }
.legend_area > li { align-items: center; margin: 0; line-height: 14px; }
.legend_title { width: auto; font-size: 14px; font-weight: 500; }
.legend_title::before { display: inline-block; width: 16px; height: 16px; margin-right: 8px; background-image: url(../../../images/tgis/common/ico-toc-legend.svg); background-position: center; background-repeat: no-repeat; content: ""; vertical-align: middle; }
.legend_title:has(.legend_active) { font-weight: 600; color: var(--btn-color-blue-); }
.legend_title:has(.legend_active)::before { background-image: url(../../../images/tgis/common/ico-toc-legend_on.svg); }
.legend_activeBtn { float: unset; }
.legend_activeBtn span { display: none; }
.legend_activeBtn::after { display: inline-block; width: 16px; height: 16px; background-image: url(../../../images/tgis/common/ico-toc-arrow-right._light-gray.svg); background-position: center; background-repeat: no-repeat; content: ""; vertical-align: middle; }
.legend_activeBtn.legend_active::after { border-radius: 3px; background: #1c7ef0 url(../../../images/tgis/common/ico-arrow-down_white.svg) no-repeat center; }
.legend_condition { font-size: 14px; }
.legend_conditionIcon { width: 14px; height: 14px; }
.oui-popup .popupDiv.poi .head .popup-comboBox { width: fit-content; }
.oui-popup .popupDiv.poi .head .btnGroup .popup-btn-minmax { width: 24px; height: 24px; background: url(../../../images/tgis/common/down-square.svg) no-repeat center; background-size: 100%; }
.oui-popup .popupDiv.poi .head .btnGroup .popup-btn-closed { width: 24px; height: 24px; background: url(../../../images/tgis/common/x-square.svg) no-repeat center; background-size: 100%; }
.oui-popup .popupDiv .head .btnGroup { display: flex; align-items: center; margin-right: 10px; }
.manager-page .list.txt-red .title,
.flex-box.version > div:not(.new) .list.txt-red p,
.manager-page .list.txt-red .title + div > p { color: red; }
.toc_depth1 .toc_expandedBoxOpen { display: none !important; }
.toc_tocContentBox .toc_groupContent.toc_depth1 .rstcustom__rowTitle span { left: 15px; }
.toc_depth0 .rstcustom__rowToolbar { display: none !important; }
.scroll-custom::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-custom::-webkit-scrollbar-thumb { height: 30%; border-radius: 50px; background: #667080; }
.scroll-custom::-webkit-scrollbar-track { border-radius: 100px; background: #c2c6cc; }
.batch_file:hover { text-decoration: underline; color: blue; }
.legend_searchBtn .legend_pop_open_btn { display: flex; justify-content: center; align-items: center; width: auto; margin-bottom: 5px; padding: 9px; border-radius: 10px; background-color: #1c7ef0; font-size: 15px; cursor: pointer; gap: 5px; }
.legend_searchBtn .legend_pop_open_btn span { color: #fff; }
.right-top-box { position: absolute; top: 20px; right: 20px; z-index: 1; }
.right-top-box .size-wrap { display: flex; align-items: center; width: 40px; height: 40px; border: 1px solid #487dae; line-height: 40px; }
.right-top-box .ico-full-screen { width: 28px; height: 28px; background: url("../../images/toolbar/ico-full-screen.png"); background-size: cover; }
.right-top-box .ico-nav-bar { width: 28px; height: 28px; padding-bottom: 4px; background: url("../../images/toolbar/ico-nav-bar.png"); background-size: cover; }
.gridd-size-box { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; padding: 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.7); box-shadow: 1px 1px 3px 0px rgba(40, 70, 98, 0.3); font-weight: 700; color: #477bad; backdrop-filter: blur(2px); transition: filter 0.1s ease; }
.right-top-box .gridd-size-box:hover { filter: brightness(0.95); }
.gridd-size-box .size-wrap span { width: 100%; font-size: 13px; text-align: center; }
.right-bottom-box .size-wrap { display: flex; align-items: center; width: 38x; height: 36px; border: 1px solid #487dae; }
.gridd-size-text { color: #487dae; }
.right-bottom-box .gridd-size-box .bd { width: 100%; border-bottom: 1px solid #487dae; }
.drawer-handle { display: none; }
a.arrow span { position: absolute !important; top: auto; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#main-logo > span:nth-child(2) { font-size: 13px; font-weight: 400; text-align: center; word-break: keep-all; color: #999; }
nav ul.list > li > a { font-size: 14px; font-weight: 600; text-align: center; word-break: keep-all; color: #9d9d9d; }
.hdbtntit { position: relative; display: flex; justify-content: space-between; align-items: center; height: 5rem; min-height: 5rem; }
.mobile .ol-overlay-container.ol-selectable { position: absolute; bottom: 0 !important; left: 0 !important; z-index: 10; width: 100%; }
.mobile .ol-overlay-container.ol-selectable .oui-popup .popupDiv.poi { min-width: 100%; max-width: 100%; }
nav ul.list > li > a::before { display: block; width: 40px; height: 40px; margin: 0 auto; margin-bottom: 4px; background-position: center; background-repeat: no-repeat; content: ""; }
.toc_tocContentBox .toc_groupContent .rstcustom__rowTitle span { left: 63px; width: 180px; }
.cont-list.on { display: flex; flex-direction: column; padding: 12px; background-color: #eef7fd; gap: 10px; }
.blue_btn span { font-size: 14px; font-weight: 700; color: #fff; }
.choose_box { position: absolute; top: 80px; left: 20px; z-index: 1; display: flex; flex-direction: column; width: 250px; height: auto; padding: 7px 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.4); box-shadow: 1px 1px 3px 0px rgba(40, 70, 98, 0.3); backdrop-filter: blur(2px); gap: 5px; }
.choose_tit { display: flex; flex-direction: row; justify-content: space-between; }
.choose_tit span { font-weight: 700; color: #477bad; }
.choose_tit div p { font-size: 12px; color: var(--btn-color-blue-); }
.conment { display: flex; justify-content: center; align-items: flex-end; gap: 8px; }
.choose_tit img { display: none; }
.draw_box { display: flex; justify-content: space-between; width: 100%; }
.draw { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: calc(100% / 4.5); height: 50px; padding: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.5); gap: 2px; }
.draw::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: 50% 4px; background-repeat: no-repeat; content: ""; }
.draw.pointBtn::before { background-image: url("../../../images/tgis/common/dot.png"); }
.draw.polygonBtn::before { background-image: url("../../../images/tgis/common/polygon.png"); }
.draw.boxBtn::before { background-image: url("../../../images/tgis/common/square.png"); }
.draw.circleBtn::before { background-image: url("../../../images/tgis/common/circle.png"); }
.draw span { font-size: 12px; color: #477bad; }
.draw:hover { background: #477bad; }
.draw:hover span { color: #fff; }
.draw.pointBtn:hover::before { background-image: url("../../../images/tgis/common/dot_w.png"); }
.draw.polygonBtn:hover::before { background-image: url("../../../images/tgis/common/polygon_w.png"); }
.draw.boxBtn:hover::before { background-image: url("../../../images/tgis/common/square_w.png"); }
.draw.circleBtn:hover::before { background-image: url("../../../images/tgis/common/circle_w.png"); }
.dbyData .detail_outer { display: flex; flex-direction: column; width: 100% !important; border: none !important; gap: 10px; }
.dbyData .tit_box { display: flex; justify-content: center; align-items: center; width: 165px; padding: 3px; border-radius: 50px 0px; background: #1c7ef0; }
.dbyData .tit_box.lv2 { background: #416d98; }
.dbyData .content_box.lv2 { background: rgba(65, 109, 152, 0.1); }
.dbyData .tit_box.lv3 { background: #f90; }
.dbyData .content_box.lv3 { background: rgba(255, 153, 0, 0.1); }
.dbyData .tit_box.lv4 { background: #ff4040; }
.dbyData .content_box.lv4 { background: rgba(255, 64, 64, 0.1); }
.dbyData .tit_box.lv5 { background: #9ca3af; }
.dbyData .content_box.lv5 { background: rgba(156, 163, 175, 0.1); }
.dbyData .tit_box span { font-size: 20px; font-weight: 700; color: #fff; }
.dbyData .tit_box img { cursor: pointer; }
.dbyData .content_box { display: flex; align-items: center; width: 100%; padding: 20px; background: rgba(212, 233, 255, 0.5); gap: 10px; }
.dbyData .content_box ul { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 10px; }
.dbyData .content_box.lv1 ul li { border: 1px solid rgba(28, 126, 240, 0.3); }
.dbyData .content_box.lv2 ul li { border: 1px solid rgba(65, 109, 152, 0.3); }
.dbyData .content_box.lv3 ul li { border: 1px solid rgba(255, 153, 0, 0.3); }
.dbyData .content_box.lv4 ul li { border: 1px solid rgba(255, 64, 64, 0.3); }
.dbyData .content_box.lv5 ul li { border: 1px solid rgba(156, 163, 175, 0.3); }
.dbyData .content_box ul::after,
.dbyData::after,
.dbyData8::after { display: none !important; }
.dbyData_outer { display: flex; flex-direction: column; width: 100% !important; border: none !important; background: none !important; gap: 5px; }
.dbyData_outer .tit_box { display: flex; justify-content: center; padding: 5px; border-radius: 5px; background: #667080; text-align: center; }
.dbyData_outer .tit_box span { font-size: 20px; font-weight: 700; color: #fff; }
.dbyData_outer .num_box { width: 100%; padding: 10px; border-radius: 10px; background: #ddecfd; text-align: center; color: #1c7ef0; }
.dbyData_outer .content_outer { display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 10px 5px; border: 1px solid #667080; border-radius: 10px; gap: 10px; }
.dbyData_outer .content_box { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; padding: 10px 5px; border: 1px solid #d6dae8; border-radius: 10px; background: #fff; gap: 10px; }
.dbyData_outer .num_box.lv1 { background: #ddecfd; color: #1c7ef0; }
.dbyData_outer .num_box.lv2 { background: #ffe3e3; color: #ff4040; }
.dbyData_outer .num_box.lv3 { background: rgba(103, 103, 103, 0.15); color: #676767; }
.dbyData_outer .num_box.lv4 { background: #e3e9f0; color: #416d98; }
.dbyData5conts { background-color: transparent !important; }
.border_box { position: relative; display: block; width: 100% !important; padding: 20px; border: 1px solid #1c7ef0 !important; border-radius: 10px; background-color: transparent !important; }
.border_box .dbyData5 { display: flex; flex-direction: column; width: 100%; gap: 24px; }
.border_box .dbyData5::after { display: none; }
.border_box .dbyData5 .dbyData_outer { width: 100% !important; }
.border_box .year { position: absolute; top: -14px; left: 20px; display: flex; justify-content: center; align-items: center; width: 150px; padding: 0px 10px; background: #eef7fd; font-size: 22px; font-weight: 700; color: #416d98; }
.border_box .dbyData_outer.n5 .tit_box { display: flex; justify-content: center; width: 100%; padding: 5px; border-radius: 5px; background: #1c7ef0; text-align: center; }
.border_box .dbyData_outer.n5 .content_outer { padding: 10px; border: 1px solid #1c7ef0; border-radius: 10px; gap: 10px; }
.border_box .dbyData_outer.n5 .content_box { width: 100%; }
.content_box span { font-size: 16px; word-break: keep-all; }
.dbyData_outer.n5 .num_box { border-radius: 50px; }
.dbyData_outer.n5 .num_box.area1 { background: rgba(103, 103, 103, 0.15); }
.dbyData_outer.n5 .num_box.area2 { background: rgba(28, 126, 240, 0.15); }
.dbyData_outer.n5 .num_box.area3 { background: rgba(255, 153, 0, 0.15); }
.dbyData_outer.n5 .num_box.area1 span { font-size: 13px; color: #676767; }
.dbyData_outer.n5 .num_box.area2 span { font-size: 13px; color: #1c7ef0; }
.dbyData_outer.n5 .num_box.area3 span { font-size: 13px; color: #f90; }
.border_box.current { border: 1px solid #074081 !important; }
.border_box.current .year { color: #074081; }
.border_box.current .dbyData_outer.n5 .tit_box { background: #074081; }
.border_box.current .dbyData_outer.n5 .content_outer { border: 1px solid #074081; }
.lvbox { display: flex; justify-content: center; align-items: center; padding: 10px 15px; border-radius: 5px; word-break: keep-all; }
.lvbox.lv1 { background: #ddecfd; }
.lvbox.lv2 { background: #e3e9f0; }
.lvbox.lv3 { background: #fff0d9; }
.lvbox.lv4 { background: #ffe3e3; }
.lvbox.lv5 { background: #ffe0ca; }
.lvbox span { font-size: 20px; font-weight: 700; }
.lvbox.lv1 span { color: #1c7ef0; }
.lvbox.lv2 span { color: #416d98; }
.lvbox.lv3 span { color: #f90; }
.lvbox.lv4 span { color: #ff4040; }
.lvbox.lv5 span { color: #ff7600; }
.dbyData.n6 { display: flex; flex-direction: row; width: 100%; padding: 10px !important; gap: 10px !important; }
.dbyData.n6 .content_box { flex-wrap: wrap; padding: 0; background-color: #fff; }
.dbyData.n6 .content_box::after { display: none; }
.dbyData.n6 .content_box li { width: 100%; padding: 7px 5px; border: 1px solid #d6dae8; border-radius: 10px; background-color: #fff; font-size: 16px; text-align: center; }
.dbyData.n7 { width: 100%; gap: 10px !important; }
.dbyData.n7 .address_box { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px 10px 15px; border-radius: 8px; background: rgba(65, 109, 152, 0.2); }
.dbyData.n7 .address_box span { font-size: 20px; font-weight: 700; color: #416d98; }
.dbyData.n7 .address_box img { cursor: pointer; }
.toggleBtn.active { transform: rotate(180deg); }
.dbyData.n7 .content_outer { display: flex; flex-direction: column; gap: 24px; }
.dbyData.n7 .content_box { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 5px; border: 1px solid #d6dae8; border-radius: 10px; background: #fff; gap: 10px; }
.dbyData.n7 .content_box .detail_tit { width: 100%; padding: 5px 0px; border-radius: 10px; background: #e3e9f0; text-align: center; }
.dbyData.n7 .content_box .detail_tit span { font-size: 16px; color: #202124; }
.dbyData.n7 .content_box .detail_cont { text-align: center; }
.cont-list.on > ul::after { display: none; }
.zoom_outer { display: flex; justify-content: flex-end; margin-bottom: 5px; }
.zoom_box { display: flex; justify-content: center; align-items: center; width: 130px; padding: 10px 8px; border: 1px solid #477bad; border-radius: 10px; background: #477bad; cursor: pointer; gap: 5px; }
.zoom_box span { font-size: 16px; color: #fff; }
.dbyData.nodat { padding: 0 !important; background-color: #eef7fd; }
.nodata_outer { display: flex; justify-content: center; align-items: center; width: 100% !important; border: none !important; background-color: #eef7fd; }
.nodata_box { display: flex; justify-content: center; align-items: center; width: 100%; padding-bottom: 0; background-color: #eef7fd; gap: 10px; }
.nodata_box p { font-size: 16px; font-weight: 700; color: rgba(71, 123, 173, 0.5); }
header { position: relative; z-index: 3; width: 141px; height: 100%; box-sizing: border-box; border-right: 1px solid var(--border-color-); background: #fff; flex-shrink: 0; }
#main-logo > span:nth-child(1) { display: block; margin-bottom: 0; font-size: 16px; font-weight: 600; text-align: center; word-break: keep-all; color: var(--btn-color-blue-); }
.map.wrap { position: relative; width: calc(100% - 141px); height: 100%; }
#main-logo { padding: 20px; }
.search-area { position: absolute; top: 20px; left: 20px; z-index: 1; display: flex; flex-direction: row; gap: 30px; transition: all 0.3s ease-in-out; }
.toc_btnLayerDetail { display: flex; }
.left-box.on { left: 141px; z-index: 2; width: 293px; }
.rstcustom__rowContents { min-width: 230px; }
.toolbar { position: absolute; top: 0; right: 0px; z-index: 2; }
.data-download-popup { position: absolute; top: 0; left: 0; z-index: 71; width: 100%; min-width: auto; height: 100%; background-color: #f2f5f6; overflow: auto; }
.popup-body > div > .mCSB_container { padding: 40px; }
.map-area .title { margin-bottom: 24px; font-size: 20px; font-weight: 600; }
.btn.normal { position: relative; width: 85px; padding: 8px; border: 0; border-radius: 5px; background: var(--btn-color-blue-); font-size: 14px; font-weight: 600; text-align: center; color: #fff; }
.data-download-popup .viewMapArea,
.data-download-popup .ntnBtnArea { width: 50%; height: 400px; }
.popup-body .map-area { display: flex; flex-direction: row; margin-bottom: 20px; padding: 10px 20px; border-radius: 15px; background: #fff; box-shadow: 3px 3px 10px var(--box-shadow-color); gap: 20px; }
.tab-list > li { display: none; width: 100%; height: auto; padding: 40px; background: #fff; }
.cont-list > ul { display: none; padding: 20px; }
.cont-list > ul > li { width: calc(100% / 2 - 10px); border: 1px solid var(--border-color-); border-radius: 10px; background: #fff; }
.living-environment .cont-list > ul > li { width: 315px; }
.data-download-popup > .title { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 16px 20px; background: #202124; gap: 30px; }
.data-download-popup > .title > p { padding-top: 0; font-size: 20px; font-weight: 600; color: #fff; }
.btn.close.dataViewClose { position: absolute; top: 50%; right: 20px; width: 40px; height: 40px; border: 0; background: url(../../../images/tgis/common/ico-close.svg) no-repeat center; transform: translateY(-50%); }
.right-box > ul > li.widget-map-select .drawControl_drawGrpDiv { right: 50px; flex-direction: row; padding: 0; }
.data-download-popup .targetList { height: calc(100% - 100px); overflow: auto; gap: 5px; }
.databtn-box { margin-top: 10px; }
div.info-box { padding: 7px 5px; }
.zoomControl .zoomControl_zoomControlContent { display: block; width: auto; }
.targetList { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; width: 100%; overflow-x: auto; overflow-y: auto; }
.databtn-box .targetList .btn { width: 80px; }
.btn.download { display: block; width: auto; padding: 8px 16px; border: 0; border-radius: 5px; background: var(--btn-color-blue-); font-size: 14px; font-weight: 600; color: #fff; }
.informtxt { display: none; margin-left: 5px; color: #45deff; }
.btn_box { padding: 10px; }
.btn_box .blue_btn { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 90px; padding: 3px 7px; border-radius: 15px; background: #1c7ef0; gap: 10px; }
.blue_btn img { display: block; }
.dbyData .content_box ul li { width: calc(100% / 2 - 5px); height: 39px; padding: 8px 5px 10px 5px; border: 1px solid rgba(28, 126, 240, 0.3); border-radius: 10px; background: #fff; font-size: 16px; text-align: center; }
.dbyData { display: flex; flex-direction: column; width: 100%; padding: 20px !important; background: #fff; }
.dbyData8 { display: flex; flex-direction: row; width: 100%; padding: 20px !important; gap: 24px; }
.right-bottom-box { position: absolute; right: 20px; bottom: 20px; display: block; }
.legend_frame { right: 220px; left: auto; }
.scroll-list .header-menu { display: flex; flex-direction: column; gap: 2rem; padding: 1rem; }
@media (min-width: 768px) {
.dbyData.n6 .content_box li { width: calc(100% / 2 - 5px); }
.dbyData.n7 .content_outer { flex-direction: row; flex-wrap: wrap; }
.dbyData.n7 .content_box { width: calc(100% / 2 - 12px); }
.dbyData_outer .content_box { width: calc(100% / 4); }
.dbyData_outer .content_outer { flex-direction: row; gap: 5px; }
.dbyData_outer.data8 .content_box { width: calc(100% / 6); }
.nodata_box { padding-bottom: 20px; }
}
@media (min-width: 1023px) {
.dbyData .content_box ul li { width: calc(100% / 5 - 8px); }
.dbyData.n6 .content_box li { width: calc(100% / 4 - 8px); }
}
@media (min-width: 1150px) {
.dbyData.n7 .content_box { width: calc(100% / 3 - 17px); }
.dbyData_outer { width: calc(100% / 2 - 12px) !important; }
.border_box .dbyData5 { flex-direction: row; flex-wrap: wrap; }
.border_box .dbyData5 .dbyData_outer { width: calc(100% / 2 - 12px) !important; }
.dbyData_outer.data8 { width: calc(100% / 2 - 15px) !important; }
}
@media (min-width: 1420px) {
.cont-list > ul > li { width: 32%; }
.dbyData .content_box ul li { width: calc(100% / 8 - 9px); }
.border_box .dbyData5 { flex-direction: row; }
.dbyData.n6 .content_box li { width: calc(100% / 6 - 20px); }
.dbyData.n7 .content_box { width: 100%; }
.dbyData.n7 .content_outer { flex-direction: row; flex-wrap: nowrap; }
}
@media (min-width: 1820px) {
.cont-list > ul > li { width: calc(100% / 5 - 16px); }
.dbyData_outer { width: calc(100% / 4 - 15px) !important; }
.border_box .dbyData5 .dbyData_outer { width: calc(100% / 5 - 20px) !important; }
.dbyData.n6 .content_box li { width: calc(100% / 8 - 9px); }
.dbyData.n7 .content_outer { flex-direction: row; }
.dbyData_outer.data8 { width: calc(100% / 3 - 15px) !important; }
}
@media (max-width: 640px) {
nav ul.list > li { display: flex; justify-content: center; align-items: center; min-width: 86px; height: 100%; padding: 0; border-radius: 5px; background: linear-gradient(230deg, #ffffff, #f5f5f5); }
.map.wrap { width: 100%; }
.left-box { position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; height: calc(45% - 8rem); transition: all 0.4s ease-in-out; }
.left-box.on { position: absolute; top: 55%; left: 0; z-index: 1; width: 100%; height: calc(45% - 8rem); box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2); transition: all 0.4s ease-in-out; }
.hdbtntit .drawer-handle { position: absolute; top: -2px; left: 50%; display: block; width: 40px; height: 4px; margin: 8px auto; border-radius: 999px; background-color: #9aa1ae; transform: translateX(-50%); }
.legend_frame { right: 10px; bottom: 90px; }
.right-top-box { top: 10px; right: 10px; }
.right-top-box .ico-full-screen { width: 28px; height: 28px; }
.right-top-box .ico-nav-bar { width: 28px; height: 28px; }
.gridd-size-box { width: 40px; height: 40px; }
.legend_condition { width: auto; font-size: 12px; }
.toc_tocContentList { height: 100%; margin-top: 0; }
.toc_tocContentBox { height: 100%; }
.legend_searchBtn, .search-area,
#headerSearchBox, .gnb-login, .right-box,
.zoomControl, .btn_box, .choose_box { display: none !important; }
nav ul.list > li > a { font-size: 11px; }
#farmmapBtn { top: 10px; left: 10px; width: 110px; font-size: 13px; }
.fm__theme-label { font-size: 12px; }
.fm__theme-item { padding: 4px 10px; }
.fm__theme-button { padding: 8px 12px 8px 10px; font-size: 13px;}
.legend_title { border: none; border-bottom: 1px solid #ccc; font-size: 12px; }
.legend_area { padding: 5px 0; }
.oui-popup .popupDiv .head.blue { height: 20px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.oui-popup .popupDiv.poi .head .btnGroup .popup-btn-closed { width: 14px; height: 14px; }
.oui-popup .popupDiv.poi .head .btnGroup .popup-btn-minmax { display: none; }
.oui-popup .popupDiv.poi { min-width: 60vw; max-width: 60vw; }
.oui-popup .popupDiv .cont { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.oui-popup .popupDiv.poi .cont .innerCont { padding: 8px; }
.oui-popup .popupDiv.poi .cont .titSec .btnGroup { display: none; }
.oui-popup .section.type02 .titSec { margin-bottom: 5px; }
.oui-popup .section.type02 .titSec strong { font-size: 13px; }
.oui-popup .table table td, .oui-popup .table table th { padding: 0; }
.oui-popup .table table tbody tr td, .oui-popup .table table tbody tr th { font-size: 12px; }
.oui-popup .txt-center { max-height: 18vh; scrollbar-color: #c1c7d0 transparent; scrollbar-width: thin; }
.fw-feature-label-box { margin-bottom: 5px; padding: 0 6px; font-size: 10px; }
.fw-pop { width: 85vw; height: 25vh; padding: 5px; border-radius: 5px; }
.fw-pop__title { font-size: 13px; }
.fw-pop__tm { padding-bottom: 0; font-size: 11px; }
.fw-pop__cont { padding: 5px; border-radius: 5px; overflow: auto; gap: 5px; scrollbar-color: #c1c7d0 transparent; scrollbar-width: thin; }
.fw-pop__content-box { padding: 5px; font-size: 10px; }
.fw-pop__content-title { font-size: 13px; }
.fw-pop__content-title-box > .fw-date-btn { height: 22px; font-size: 11px; }
.fw-pop__table th, .fw-pop__table td { font-size: 10px; }
.fw-pop__table-box { width: 100%; }
.scroll-list .header-menu { display:flex; flex-direction: row; gap: 0.5rem; padding: 0; overflow: auto; height: 100%; scrollbar-width: thin; scrollbar-gutter: stable;}
.spsfc__theme-button { font-size: 13px; padding: 8px 12px 8px 10px;}
#spsfcUseAreaBtn { top:10px; left: 130px; width: 140px;}
}