body{display: flex; width: 100vw; height: 100vh; overflow: hidden;}
section.main{width: calc(100% - 25em); display: flex; position: relative;}
aside.sidebar{width: 25em; border-right: 1px solid rgba(0,0,0,0.1); display: flex;}
.tab-menu{width: 3em; height: 100%; background-color: #272C33; color: white;}
.tab-menu .item{width: 100%; height: 3em; border-bottom: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: bold;}
.tab-menu .item:hover{color: #009EFB;}
.tab-menu .item.active{background-color: #009EFB; color: white;}
.tab-menu .item.selector{position: relative; border-right: 1px solid rgba(255,255,255,0.2);}
.tab-menu .item:hover .sub-menu{left: 3em; color: white;}
.tab-menu .item .sub-menu{position: absolute; left: -9em; z-index: 1; display: flex; background-color: #272C33;}
.tab-menu .item .sub-menu .item{width: 3em; height: 3em; border-right: 1px solid rgba(255,255,255,0.2);}
.tab-menu .item .sub-menu .item:hover{background-color: #666; color: white;}
.tab-contents{width: calc(100% - 3em); height: 100%; overflow: hidden;}
.tab-contents .content{width: 100%; height: 100%; display: none;}
.tab-contents .content.active{display: block;}
.search-input{position: relative; height: 3em;}
.search-input textarea{width: 100%; height: 3em; border: none; outline: none; border-bottom: 1px solid rgba(0,0,0,0.1); overflow: hidden; padding: 1em 3em 1em 1em; position: absolute;}
.search-input textarea:focus{overflow-y: auto; height: 15em; padding: 1em; z-index: 10;}
.search-input .button{width: 3em; height: 100%; position: absolute; z-index: 10; right: 0; border: 1px solid rgba(0,0,0,0.1); border-top: none; border-right: none; display: flex; align-items: center; justify-content: center;}
.search-input .button:hover{background-color: #009EFB; color: white; cursor: pointer;}
.search-output{height: calc(100% - 3em); overflow-y: auto;}
.search-output .item{display: flex; padding: 0.5em; border-bottom: 1px solid rgba(0,0,0,0.1);}
.search-output .item .label-area{width: 2em; position: relative;}
.search-output .item .info-area{width: calc(100% - 2em);}
.search-output .item .info-area .address{padding-bottom: 0.5em; cursor: pointer;}
.search-output .item .info-area .address:hover{text-decoration: underline;}
.search-output .item .info-area .data{color: #DB2828; padding-bottom: 0.5em;}
.search-output .item .info-area .data span{margin-right: 0.5em;}
.list-form{height: 100%; overflow-y: auto;}
.list-form .item{border-bottom: 1px solid rgba(0,0,0,0.1); cursor: pointer; display: flex;}
.list-form .item:hover{background-color: rgba(0,0,0,0.1);}
.list-form .item .info{width: 100%; padding: 0.5em;}
.list-form .item .button{width: 3em; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(0,0,0,0.2);}
.list-form .item .button:hover{background-color: #009EFB; color: white;}
.list-form .item .timestamp{color: #DB2828;}
.link{display: flex;}
.link .item{display: flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin-right: 0.5em; font-weight: bold; box-shadow: 1px 1px 1px rgba(0,0,0,0.2); cursor: pointer;}
.link .item:hover{background-color: #009EFB; color: white;}
i.icon{margin: 0; width: auto; height: auto;}
i.icon.ruler{background: url('/images/ruler.png') no-repeat center/cover; width: 1em; height: 1em; display: block;}
i.icon.area{background: url('/images/area.png') no-repeat center/cover; width: 1em; height: 1em; display: block;}
.map-container{width: 100%; height: 100%; outline: none !important;}
.map-container .label-block{display: none;}
.map-container .label-block.active{display: flex;}
.sv-container{width: 0; height: 100%;}
.milestone{position: absolute; border-radius: 0.5em; box-shadow: 1px 1px 2px #888; background: rgba(255,255,255,0.85); padding: 0.5em; white-space: nowrap;}
.dot{position: absolute; width: 12px; height: 12px; border-radius: 6px; border: 3px solid red; background: white; display: block; box-sizing: border-box;}
.walker{height: 60px; width: 60px; background: url('/images/walker.png') no-repeat; cursor: pointer;}
.dropdown{position: absolute; z-index: 1; background-color: whitesmoke; box-shadow: 1px 2px rgba(0,0,0,0.3); width: 18em;}
.dropdown > .item{padding: 0.75em 1em; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.1);}
.dropdown > .item:last-child{border-bottom: none;}
.dropdown > .item:hover{background-color: #009EFB; color: white;}
.label-block{width: 1.5em; height: 1.5em; display: flex; align-items: center; justify-content: center; border: 1px solid black; cursor: pointer; color: white;}
.label-block.red{background-color: #DB2828;}
.label-block.orange{background-color: #F2711C;}
.label-block.yellow{background-color: #FBBD08;}
.label-block.green{background-color: #21bA45;}
.label-block.blue{background-color: #2185D0;}
.label-block.indigo{background-color: #6435C9;}
.label-block.purple{background-color: #A333C8;}
.fg-red{color: #DB2828;}
.fg-orange{color: #F2711C;}
.fg-yellow{color: #FBBD08;}
.fg-green{color: #21BA45;}
.fg-blue{color: #2185D0;}
.fg-indigo{color: #6435C9;}
.fg-purple{color: #A333C8;}
.color-picker{position: absolute; left: 0; top: 2em; z-index: 4; background-color: white; display: flex; box-shadow: 1px 1px 2px rgba(0,0,0,0.4); border-top: 1px solid rgba(0,0,0,0.1);}
.color-picker .item{width: 2em; height: 2em; cursor: pointer;}
.color-picker .item[color=red]{background-color: #DB2828;}
.color-picker .item[color=orange]{background-color: #F2711C;}
.color-picker .item[color=yellow]{background-color: #FBBD08;}
.color-picker .item[color=green]{background-color: #21BA45;}
.color-picker .item[color=blue]{background-color: #2185D0;}
.color-picker .item[color=indigo]{background-color: #6435C9;}
.color-picker .item[color=purple]{background-color: #A333C8;}
.color-picker .item[color=white]{background-color: white;}
.window-layer{position: absolute; width: 100%; height: 100%; display: flex; align-items: flex-start; pointer-events: none;}
.window-layer window{overflow-y: auto; background-color: white; border-right: 1px solid silver; border-bottom:  1px solid silver; pointer-events: auto; max-height: calc(100% - 2em); position: relative; z-index: 100;}
.window-layer window.three{width: calc(100%/3);}
window .actions{display: flex; position: absolute; top: 0; right: 0;}
window .actions .button{width: 2.5em; height: 2.5em; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #009EFB;}
window .contents .header{display: block; height: 2.5em; line-height: 2.5em; border-bottom: 1px solid #009EFB; color: #009EFB; text-align: center;}
window .contents .table{width: 100%; border-collapse: collapse;}
window .contents .table tr.clickable:hover{background-color: rgba(0,0,0,0.05); cursor: pointer;}
window .contents .table td{height: 2.5em; padding: 0 0.5em; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; min-width: 4em; max-width: 15em;}
window .contents .table td:last-child{border-right: none;}
window .contents .table td.label{background-color: rgba(0,0,0,0.05); font-weight: bold;}
window .contents .table:last-child tr:last-child td{border-bottom: none;}
window .contents .holder:empty{display: none;}
window .contents .table input{border: none; outline: none;}
window .contents .button{display: inline-block; background-color: #009EFB; color: white; padding: 0.25em 1em; margin: 0.5em 0.5em 0.5em 0; text-align: center; cursor: pointer;}
window .contents .button:hover{background-color: #ff2200;}
img[alt="NAVER"]{visibility: hidden;}
.brief-layer{position: absolute; width: 100%; pointer-events: none; max-height: 10em; bottom: 0; overflow-y: auto; display: none;}
.brief-layer.active{pointer-events: auto; display: block; z-index: 1;}
.brief-layer .table{background-color: rgba(0,0,0,0.8); color: white; width: 100%; border-collapse: collapse;}
.brief-layer .table tr.header{background-color: rgba(0,158,251,0.7);}
.brief-layer .table tr.data:hover{cursor: pointer; background-color: rgba(255,255,255,0.2);}
.brief-layer .table tr td{border-right: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); padding: 0.3em; text-align: center;}
.brief-layer .table tr td:last-child{border-right: none;}
.dimmer-layer{position: absolute; z-index: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; pointer-events: none;}
.dimmer-layer.active{z-index: 3; pointer-events: auto;}
.dimmer-layer > .text{font-size: 1.5em; color: white;}
.dimmer-layer > .text:after{content: "데이터를 불러오는 중입니다.";}
.wms-overlay{position: absolute; pointer-events: none !important;}
.wms-overlay > img{width: 100%; height: 100%; display: block; pointer-events: none !important;}
.control-layer{pointer-events: none; position: absolute; top: 0; right: 0; z-index: 1; padding: 0.5em; display: flex; flex-direction: column; align-items: flex-end;}
.control-layer > .block{pointer-events: auto; background-color: whitesmoke; display: flex; margin-bottom: 0.5em; border: 1px solid #666;}
.control-layer > .block:last-child{margin-bottom: 0;}
.control-layer > .block > .item{white-space: nowrap; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.control-layer > .block > .item.active{background-color: #009EFB; color: white;}
.control-layer > .map-type-control > .item{border-right: 1px solid rgba(0,0,0,0.1); width: 4em; height: 3em;}
.control-layer > .map-type-control > .item:last-child{border-right: none;}
.control-layer > .map-tools-control{display: none;}
.control-layer > .map-tools-control.active{display: flex;}
.control-layer > .map-tools-control > .item{border-right: 1px solid rgba(0,0,0,0.1); width: 3em; height: 2.5em;}
.control-layer > .map-tools-control > .item:last-child{border-right: none;}
.control-layer > .map-layer-control{padding: 1em; display: none; flex-direction: column; width: 15em; max-height: calc(100vh - 8em); overflow: auto;}
.control-layer > .map-layer-control.active{display: flex;}
.control-layer > .map-layer-control > .item{justify-content: flex-start; margin-bottom: 0.5em;}
.control-layer > .map-layer-control > .item:hover{font-weight: bold;}
.control-layer > .map-layer-control > .item:last-child{margin-bottom: 0;}
.control-layer > .map-layer-control > .item > input[type=checkbox]{margin-right: 0.5em; pointer-events: none;}
.control-layer > .map-layer-control > .legend{border: 1px solid black; margin-top: 0.5em;}
.control-layer > .map-layer-control > .legend:empty{display: none;}
.control-layer > .map-layer-control > .legend > img{width: 100%;}
.login-page{width: 100vw; height: 100vh; background: url(/images/bg.png) #fbf7dd no-repeat bottom/contain;  display: flex; justify-content: flex-end; align-items: flex-start;}
.login-page .form-box{width: 60em; background-color: rgba(255,255,255,0.3); margin-top: 8em; margin-right: 8em; padding: 1.5em; border: 3px double #DB2828;}
.login-page .form-box > .section.header{border-bottom: 3px double #DB2828; margin-bottom: 2em;}
.login-page .form-box > .section.header > .title{color: #DB2828; margin-bottom: 0.5em;}
.login-page .form-box > .section.header > .image{height: 3em;}
.login-page .section.form .row{display: flex; width: 100%; margin-bottom: 1em;}
.login-page .section.form .row:last-child{margin-bottom: 0;}
.login-page .section.form .row .column{width: 100%; margin-right: 1em;}
.login-page .section.form .row .column:last-child{margin-right: 0;}
.login-page .section.form .header{color: #DB2828; font-weight: bold; border-bottom: 1px solid #DB2828; margin-bottom: 1em;}
.login-page .section.form .input{width: 100%; margin-bottom: 1em;}
.login-page .section.form .input:last-child{margin-bottom: 0;}
.login-page .section.form .input > label{color: #DB2828; display: block; margin-bottom: 0.25em;}
.login-page .section.form .input > input{width: 100%; border: none; outline: none; padding: 0.5em; background-color: rgba(0,0,0,0.05); border-bottom: 1px transparent solid; border-top: 1px transparent solid;}
.login-page .section.form .input > input:focus{border-bottom-color: #DB2828;}
.login-page .section.form .input > input:read-only{background-color: rgba(0,0,0,0.2); pointer-events: none;}
.login-page .section.form .notice{background-color: rgba(0,0,0,0.3); padding: 1em; color: white; margin-top: 1em; border: 1px solid rgba(0,0,0,0.1);}
.login-page .section.form .notice .header{color: white; border-color: white;}
.login-page .button.start{padding: 0.5em; background-color: #DB2828; color: white; cursor: pointer; border: 1px transparent solid;}
.login-page .button.start:hover{background-color: #EA4335;}
.login-page .button.kakao{display: inline-block; cursor: pointer; width: 15em; background-color: #FFEB00; border: 1px solid rgba(0,0,0,0.2);}
.login-page .button.kakao:hover{border-bottom-color: black; border-right-color: black;}
.login-page .button.kakao > img{width: 100%; display: block;}
.login-page ul{padding-left: 2em; margin: 0;}
.control-layer .map-tools-control .item[tag=geoLocation]{display: none;}

.lg-01-01{content: "기타"; background-color: #ffffff; border-color: #6d6767;}
.lg-01-02{content: "광장"; background-color: #ffffff; border-color: #ff3737;}
.lg-01-03{content: "공원"; background-color: #339900; border-color: #ffe5c0;}
.lg-01-04{content: "녹지"; background-color: #339900; border-color: #ff3737; background: url(/images/legend/slash_green_bg_green_10.png) repeat;}
.lg-01-05{content: "유원지"; background-color: #339900; border-color: #ffe5c0; background: url(/images/legend/point_bg_green_10.png) repeat;}
.lg-01-06{content: "공공공지"; background-color: #ffffff; border-color: #ff3737;}
.lg-01-07{content: "철도"; background-color: #ffffff; border-color: #3737ff;}
.lg-01-08{content: "도로"; background-color: #ffffff; border-color: #ff3737;}
.lg-01-09{content: "교통시설"; background-color: #ffffff; border-color: #ff3737;}
.lg-02-01{content: "주요상권"; background-color: #a6cee3; border-color: #000001;}
.lg-03-01{content: "사업예정지구"; background-color: #00FFFF; border-color: #1D4E48;}

.lg-09-01{content: "일본인,창씨명등"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-02{content: "개인"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-03{content: "개인(관외)"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-04{content: "국유지"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-05{content: "외국인,외국공공기관"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-06{content: "시도유지"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-07{content: "군유지"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-08{content: "법인"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-09{content: "종중"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-10{content: "종교단체"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-11{content: "기타단체"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-09-12{content: "기타"; background-color: #00FFFF; border-color: #1D4E48;}

.lg-10-01{content: "5년이하"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-10-02{content: "5~10년"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-10-03{content: "10~15년"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-10-04{content: "15~20년"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-10-05{content: "20~25년"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-10-06{content: "25~30년"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-10-07{content: "30년이상"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-10-08{content: "기타"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-11-01{content: "주거용"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-11-02{content: "상업용"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-11-03{content: "농수산용"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-11-04{content: "공업용"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-11-05{content: "공공용"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-11-06{content: "문교사회용"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-11-07{content: "기타"; background-color: #00FFFF; border-color: #1D4E48;}
.lg-11-08{content: "미분류"; background-color: #00FFFF; border-color: #1D4E48;}




@media only screen and (max-width: 900px){
    body{display: inherit; height: 100%;}
    aside.sidebar{width: 100%; height: 15em; display: block;}
    .sidebar .tab-menu{width: 100%; height: 3em; display: flex;}
    .sidebar .tab-menu .item{border-right: 1px solid rgba(255,255,255,0.2); width: 3em;}
    .tab-menu .item[tag=save]{display: none;}
    .tab-menu .item[tag=share]{display: none;}
    .tab-menu .item[tag=resetColor]{display: none;}
    .tab-menu .item[tag=user]{display: none;}
    .tab-menu .item.selector{width: auto; display: flex;}
    .tab-menu .item.selected:hover .sub-menu{left: inherit;}
    .tab-menu .item.selector .selected{display: none;}
    .tab-menu .item.selector .sub-menu{position: inherit; left: inherit; height: 100%;}
    .tab-menu .item.selector .sub-menu .item{border-bottom: none;}
    .tab-menu .item.selector .sub-menu .item:last-child{border-right: none;}
    .control-layer .map-type-control .item[tag=streetView]{display: none;}
    .control-layer .map-type-control .item[tag=layer]{display: none;}
    .control-layer .map-tools-control .item{display: none;}
    .control-layer .map-tools-control .item[tag=geoLocation]{display: flex;}
    .control-layer .map-tools-control .item[tag=label]{display: flex;}
    .sidebar .tab-contents{width: 100%; height: calc(100% - 3em);}
    section.main{width: 100%; height: calc(100% - 15em);}
    .search-input .button{border-bottom: none;}
    .search-input textarea:focus + .button{border-bottom: 1px solid rgba(0,0,0,0.1);}
    .search-input textarea:focus{height: 12em;}
    .window-layer window{width: 100%;}
    .window-layer window.three{width: 100%; position: absolute;}
    .control-layer > .map-layer-control.active{display: none;}
    .brief-layer{display: none;}
}