@charset "utf-8";

/* reset 시작 */
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 12px;
    font-family: 'Roboto', 'Open Sans', AppleGothic, helvetica, sans-serif;
    color: #3f3f3f;
    -webkit-text-size-adjust: none;
}

body, p,
h1, h2, h3, h4, h5, h6,
ul, ol, li,
dl, dt, dd,
table, th, td,
form, fieldset, legend, input, textarea, button, select, figure, figcaption {
    margin: 0;
    padding: 0
}

header, hgroup, article, nav, footer, figure, figcaption, canvas, section, time {
    display: block
}

button {
    cursor: pointer;
    font-family: inherit;
}

img {
    border: 0;
}

*html body img {
    margin: none;
    padding: none;
}

/*for IE 6*/
a {
    color: inherit;
    text-decoration: none;
    outline: none;
}

a:hover,
a:active {
    text-decoration: none;
}

input,
button,
textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 3px;
    outline: none;
}

input[type='checkbox'] {
    -webkit-appearance: checkbox
}

input[type='radio'] {
    -webkit-appearance: radio
}

div {
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

tr {
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

td {
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

/* user class */
.clear {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
}

.hide {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    font: 0/0 Arial;
}

.pointer {
    cursor: pointer;
}

.input {
    height: 26px;
    color: #121212;
    font-size: 12px;
    padding: 0 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

select.input {
    padding: 0 3px;
}

textarea.input {
    height: auto;
    overflow: auto;
}

.unerline {
    text-decoration: underline;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

/* button class 시작 */
.btn-pack {
    display: inline-block;
    width: 130px;
    height: 30px;
    margin: 0 2px;
    text-align: center;
    color: #666;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 26px;
    background: #fff;
    border: 2px solid #666;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.btn-pack.focus {
    color: #2fb3ff;
    border: 2px solid #2fb3ff;
}
/* button class 끝 */

/* header 시작 */
.headerDiv {
    height: 56px;
    padding: 0 30px;
    background: #30343b url(../../images/newIho/header_bg.jpg) 0 0 no-repeat;
}

.headerDiv:after {
    content: " ";
    display: block;
    clear: both;
}

.headerDiv .headerTitle {
    float: left;
    margin: 11px 0 0 0;
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: -.03em;
}

.headerDiv .headerTitle img {
    vertical-align: middle;
    margin: -.2em 3px 0 0;
}

.headerDiv .headerTitle span {
    display: inline-block;
    vertical-align: middle;
    margin: -.2em 0 0 0;
}

.headerDiv .headerTitle b {
    font-weight: 500;
}

.headerDiv .headerTitle small {
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    display: inline-block;
    vertical-align: top;
}

.headerDiv .headerLeftMenu {
    float: left;
    margin-left: 14px;
    margin-top: 11px
}

.headerDiv .headerLogo {
    margin-right: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
}

.headerDiv .headerLogo img {
    vertical-align: middle;
    margin: -.2em 3px 0 0;
}

.headerDiv .headerLogo span {
    display: inline-block;
    vertical-align: middle;
    margin: -.2em 0 0 0;
}

.headerDiv .headerRightMenu {
    float: right;
    margin-top: 11px;
}

.headerDiv .headerHello {
    float: left;
    padding: 0 14px 0 24px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 34px;
    background: url(../../images/newIho/top_user.png) 0 50% no-repeat;
    cursor: pointer;
}

.headerDiv .headerHello .user_id {
    color: #67c7ff;
}

.headerDiv .headerButton {
    float: left;
    height: 34px;
    padding: 0 25px;
    margin-left: 6px;
    vertical-align: middle;
    border: 2px solid #fff;
    border-radius: 50px;
    font-family: inherit;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
    transition: all 0.2s ease-in-out;
}

.headerDiv .headerButton .ico {
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin: -.2em 4px 0 0;
}

.headerDiv .headerButton .ico1 {
    background: url(../../images/newIho/top_icon1.png) 50% 50% no-repeat;
}

.headerDiv .headerButton .ico2 {
    background: url(../../images/newIho/top_icon2.png) 50% 50% no-repeat;
}

.headerDiv .headerButton .ico3 {
    background: url(../../images/newIho/top_icon3.png) 50% 50% no-repeat;
}

.headerDiv .headerButton .ico4 {
    background: url(../../images/newIho/top_user.png) 50% 50% no-repeat;
}

.headerDiv .headerButton:hover {
    background: #1766ff;
    border-color: #1766ff;
}
/* header 끝 */

/* content */
.content .map {
    position: fixed;
    top: 56px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f4f4f4;
}

/* 매니저 전용 메뉴 시작 */
.managerMenu {
    position: absolute;
    top: 76px;
    left: 20px;
    width: 70px;
    background: #30343b;
    border-radius: 3px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    z-index: 999;
}

.managerMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.managerMenu ul li a {
    display: block;
    position: relative;
    padding: 24px 0;
    text-align: center;
    color: #909eb7;
    font-size: 12px;
}

.managerMenu ul li:first-child {
    position: relative;
}

.managerMenu ul li:first-child::after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 1px;
    background: #1c222d;
}

.managerMenu ul li:first-child a {
    border-radius: 3px 3px 0 0;
}

.managerMenu ul li:nth-child(2) a {
    border-radius: 0 0 3px 3px;
}

.managerMenu ul li a .ico {
    display: block;
    margin: 0 auto 8px;
    width: 20px;
    height: 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.managerMenu ul li a .ico.ico1 {
    background-image: url(../../images/newIho/menu_icon1.png);
}

.managerMenu ul li a .ico.ico2 {
    background-image: url(../../images/newIho/menu_icon2.png);
}

.managerMenu ul li a .ico.ico3 {
    background-image: url(../../images/newIho/menu_icon3.png);
}

.managerMenu ul li:hover:first-child::after,
.managerMenu ul li.on:first-child::after {
    display: none;
}

.managerMenu ul li a:hover,
.managerMenu ul li.on a {
    background-color: #1766ff;
    color: #fff;
}

.managerMenu ul li a:hover::after,
.managerMenu ul li.on a::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: -6px;
    margin-top: -6px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #1766ff;
}

.managerMenu ul li a:hover .ico.ico1,
.managerMenu ul li.on a .ico.ico1 {
    background-image: url(../../images/newIho/menu_icon1_on.png);
}

.managerMenu ul li a:hover .ico.ico2,
.managerMenu ul li.on a .ico.ico2 {
    background-image: url(../../images/newIho/menu_icon2_on.png);
}

.managerMenu ul li a:hover .ico.ico3,
.managerMenu ul li.on a .ico.ico3 {
    background-image: url(../../images/newIho/menu_icon3_on.png);
}
/* 매니저 전용 메뉴 끝 */

/* 지도위 레이어들 */
.mapChangeDiv {
    position: absolute;
    top: 83px;
    right: 190px;
}

.mapChangeDiv .toggle {
    width: 42px;
    height: 42px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    background-color: #fff;
    border: 3px solid #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 50px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    transition: all 0.2s ease-in-out;
}

.mapChangeDiv .toggle.Basic {
    background-image: url(../../images/newIho/map_list1.png);
}

.mapChangeDiv .toggle.OpenStreet {
    background-image: url(../../images/newIho/map_list2.png);
}

.mapChangeDiv .toggle.GEBCO {
    background-image: url(../../images/newIho/map_list3.png);
}

.mapChangeDiv .toggle.Arctic {
    background-image: url(../../images/newIho/map_list4.png);
}

.mapChangeDiv .toggle.Antarctic {
    background-image: url(../../images/newIho/map_list5.png);
}

.mapChangeDiv .toggle:hover {
    background-color: #1766ff !important;
    border: 0;
    background-image: url(../../images/newIho/map_ctr_list_on.png) !important;
}

.mapChangeDiv .toggleMenu {
    display: none;
    position: absolute;
    top: 0;
    right: 0px;
    width: 500px;
    padding: 5px 13px 6px 21px;
    height: 31px;
    background: #1766ff;
    border-radius: 30px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    z-index: 999;
}

.mapChangeDiv .toggleMenu .mapChangeText {
    float: left;
    margin-right: 5px;
    color: #fff;
    font-size: 12px;
    line-height: 31px;
}

.mapChangeDiv .toggleMenu .mapChangeButton {
    float: left;
    margin-right: 12px;
    padding: 0;
    border: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    background: none;
    transition: all 0.2s ease-in-out;
}

.mapChangeDiv .toggleMenu .mapChangeButton img {
    vertical-align: middle;
    border: 3px solid transparent;
    border-radius: 50%;
}

.mapChangeDiv .toggleMenu .mapChangeButton.selected {
    color: #67c7ff;
}

.mapChangeDiv .toggleMenu .mapChangeButton.selected img {
    border-color: #2fb3ff
}

.mapChangeDiv .toggleMenu .mapChangeClose {
    float: left;
    margin: 5px 0 0 -5px;
    width: 20px;
    height: 20px;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    cursor: pointer;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
}

.mapChangeDiv.active .toggle {
    display: none;
}

.mapChangeDiv.active .toggleMenu {
    display: block;
}

.mapChangeDiv .btn {
    margin-left: 5px;
    width: 42px;
    height: 42px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    background-color: #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 50px;
    border: 0;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    transition: all 0.2s ease-in-out;
}

.mapChangeDiv button.ctrSetting {
    top: 112px;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_map.png);
}

.mapChangeDiv button.ctrSetting:hover {
    background-image: url(../../images/newIho/map_ctr_map_on.png);
    background-color: #1766ff;
}

.mapToolbarDiv {
    position: absolute;
    top: 133px;
    right: 30px;
    z-index: 999;
}

.mapToolbarDiv button {
    position: absolute;
    width: 42px;
    height: 42px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    background-color: #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 50px;
    border: 0;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    transition: all 0.2s ease-in-out;
}

.mapToolbarDiv button.ctrPrev {
    top: 0;
    right: 50px;
    background-image: url(../../images/newIho/map_ctr_prev.png);
}

.mapToolbarDiv button.ctrNext {
    top: 0;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_next.png);
}

.mapToolbarDiv button.ctrZoomIn {
    top: 56px;
    right: 50px;
    background-image: url(../../images/newIho/map_ctr_zoomIn.png);
}

.mapToolbarDiv button.ctrZoomOut {
    top: 56px;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_zoomOut.png);
}

.mapToolbarDiv button.ctrSetting {
    top: 112px;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_set.png);
}

.mapToolbarDiv button.ctrLayer {
    top: 112px;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_layer.png);
}

.mapToolbarDiv button.ctrInfo {
    top: 168px;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_info.png);
}

.mapToolbarDiv button:hover {
    background-color: #1766ff;
}

.mapToolbarDiv button.ctrPrev:hover {
    background-image: url(../../images/newIho/map_ctr_prev_on.png);
}

.mapToolbarDiv button.ctrNext:hover {
    background-image: url(../../images/newIho/map_ctr_next_on.png);
}

.mapToolbarDiv button.ctrZoomIn:hover {
    background-image: url(../../images/newIho/map_ctr_zoomIn_on.png);
}

.mapToolbarDiv button.ctrZoomOut:hover {
    background-image: url(../../images/newIho/map_ctr_zoomOut_on.png);
}

.mapToolbarDiv button.ctrSetting:hover {
    background-image: url(../../images/newIho/map_ctr_set_on.png);
}

.mapToolbarDiv button.ctrLayer:hover {
    background-image: url(../../images/newIho/map_ctr_layer_on.png);
}

.mapToolbarDiv button.ctrInfo:hover {
    background-image: url(../../images/newIho/map_ctr_info_on.png);
}

.mapToolbarLayer {
    display: none;
    position: absolute;
    top: 240px;
    right: 30px;
    padding: 11px 11px 11px 21px;
    height: 20px;
    background: #1766ff;
    border-radius: 30px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    z-index: 999;
}

.mapToolbarLayer .layerText {
    float: left;
    margin-right: 10px;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    margin-right: 10px;
}

.mapToolbarLayer .layerButton {
    float: left;
    margin-right: 5px;
    position: relative;
    padding: 0 20px;
    border: 0;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 10px;
    background: #fff;
    transition: all 0.2s ease-in-out;
}

.mapToolbarLayer .layerButton .icon {
    position: absolute;
    top: 5px;
    right: 9px;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    background: url(../../images/newIho/icon_down2_off.png) 50% 50% no-repeat;
}

.mapToolbarLayer .layerButton:hover {
    background: #2fb3ff;
    color: #fff;
}

.mapToolbarLayer .layerButton:hover .icon {
    background-image: url(../../images/newIho/icon_down2_on.png);
}

.mapToolbarLayer .layerClose {
    float: left;
    width: 20px;
    height: 20px;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    cursor: pointer;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
}

.mapToolbarLayer .layerButtonWrap {
    float: left;
    position: relative;
    margin-right: 5px;
}

.mapToolbarLayer .layerButtonWrap .layerButton {
    margin-right: 0;
    min-width: 85px;
    text-align: left;
    padding: 0 25px 0 11px;
}

.mapToolbarLayer .layerButtonWrap .submenu {
    display: none;
    position: absolute;
    top: 21px;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #1b9ae3;
    padding: 10px 10px;
    box-sizing: border-box;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    width: 90px;
}

.mapToolbarLayer .layerButtonWrap .submenu button {
    background: none;
    border: 0;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}

.mapToolbarLayer .layerButtonWrap .submenu button:hover {
    color: #2fb3ff;
    text-decoration: underline;
}

.mapToolbarLayer .layerButtonWrap.active .layerButton {
    background: #2fb3ff;
    color: #fff;
}

.mapToolbarLayer .layerButtonWrap.active .layerButton .icon {
    background-image: url(../../images/newIho/icon_down2_on.png);
}

.mapToolbarLayer .layerButtonWrap.active .submenu {
    display: block;
}

.mapToolbarDiv_v2 {
    position: absolute;
    top: 83px;
    right: 30px;
    z-index: 999;
    transition: .3s;
}

.mapToolbarDiv-type {
    position: absolute;
    z-index: 999;
    transition: .3s;
}

.mapToolbarDiv_v2 button {
    position: absolute;
    width: 42px;
    height: 42px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    background-color: #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: 50px;
    border: 0;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    transition: all 0.2s ease-in-out;
}

.mapToolbarDiv_v2 button.ctrPrev {
    top: 0;
    right: 103px;
    background-image: url(../../images/newIho/map_ctr_prev2.png);
}

.mapToolbarDiv_v2 button.ctrNext {
    top: 0;
    right: 50px;
    background-image: url(../../images/newIho/map_ctr_next2.png);
}

.mapToolbarDiv_v2 button.ctrZoomIn {
    top: 0;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_zoomIn2.png);
}

.mapToolbarDiv_v2 button.ctrZoomOut {
    top: 56px;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_zoomOut2.png);
}

.mapToolbarDiv_v2 button.ctrRefresh {
    top: 112px;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_redo.png);
}

.mapToolbarDiv_v2 button.ctrLayer {
    height: 100px;
    top: 168px;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_layer2.png);
}

.mapToolbarDiv_v2 button.ctrLegend {
    height: 100px;
    top: 281px;
    right: 0;
    background-image: url(../../images/newIho/map_ctr_legend.png);
}

.mapToolbarDiv_v2 button:hover {
    background-color: #30343b;
}

.mapToolbarDiv_v2 button.ctrPrev:hover {
    background-image: url(../../images/newIho/map_ctr_prev_on.png);
}

.mapToolbarDiv_v2 button.ctrNext:hover {
    background-image: url(../../images/newIho/map_ctr_next_on.png);
}

.mapToolbarDiv_v2 button.ctrZoomIn:hover {
    background-image: url(../../images/newIho/map_ctr_zoomIn2_on.png);
}

.mapToolbarDiv_v2 button.ctrZoomOut:hover {
    background-image: url(../../images/newIho/map_ctr_zoomOut2_on.png);
}

.mapToolbarDiv_v2 button.ctrRefresh:hover {
    background-image: url(../../images/newIho/map_ctr_redo_on.png);
}

.mapToolbarDiv_v2 button.ctrLayer:hover {
    background-image: url(../../images/newIho/map_ctr_layer2_on.png);
}

.mapToolbarDiv_v2 button.ctrLegend:hover {
    background-image: url(../../images/newIho/map_ctr_legend_on.png);
}

.mapToolbarDiv_v2 button.ctrLayer.active {
    background-image: url(../../images/newIho/map_ctr_layer2_active.png);
    background-color: #30343b;
}

.mapToolbarDiv_v2 button.ctrLegend.active {
    background-image: url(../../images/newIho/map_ctr_legend_active.png);
    background-color: #30343b;
}

.legendDetail {
    display: none;
    position: absolute;
    right: 30px;
    top: 474px;
    width: 147px;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    z-index: 999;
}

.legendDetail h3 {
    background: #30343b;
    height: 43px;
    padding: 0 19px;
    font-size: 14px;
    font-weight: 400;
    line-height: 43px;
    color: #fff;
}

.legendDetail .cnt {
    padding: 14px 19px;
}

.legendDetail table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
}

.legendDetail td {
    height: 30px;
    padding: 0;
    color: #1766ff;
    font-size: 12px;
    line-height: 12px;
    word-break: break-all;
    letter-spacing: -.015em;
}

.legendDetail td.txt {
    color: #666;
    text-align: right;
    padding: 0 8px 0 0;
    white-space: nowrap;
}

.legendDetail td.img {
    text-align: right;
}

.legendDetail td.img .squareColor {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.legendDetail .close {
    position: absolute;
    top: 14px;
    right: 18px;
    cursor: pointer;
    width: 14px;
    height: 14px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
}

.legendDetail .close:hover {
    background-image: url(../../images/newIho/icon_close_on.png);
}

.mapLayers {
    position: fixed;
    top: 56px;
    right: -300px;
    bottom: 0;
    width: 200px;
    padding: 20px 20px 40px;
    background: #fff;
    transition: .3s;
    box-shadow: 5px 0 10px rgba(0, 0, 0, .42);
    z-index: 999;
}

.mapLayers .group {
    padding: 12px 0;
    border-bottom: 1px solid #ccc;
}

.mapLayers .group h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.015em;
}

.mapLayers .layers .cnt {
    margin: 0 -5px;
    text-align: center;
}

.mapLayers .layers .cnt .bt {
    display: inline-block;
    vertical-align: top;
    margin: 3px 1px;
    padding: 0 12px;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.mapLayers .layers .cnt .bt.on {
    background: #2fb3ff;
    color: #fff;
}

.mapLayers .group table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
}

.mapLayers .group table td {
    height: 27px;
    font-size: 90%;
}

.mapLayers .group table td .color {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.mapLayers .group table td * {
    vertical-align: middle;
}

.mapLayers .mapLayersScroll {
    position: relative;
    height: auto;
    margin-right: -12px;
    padding-right: 12px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* S-101 Scheme */
.scheme-container,
.catalogue-container{
    display: flex;
}

.btnLayersRedo {
    display: inline-block;
    width: 27px;
    height: 27px;
    border: 0;
    overflow: hidden;
    text-indent: -999em;
    border-radius: 100%;
    background: #ffffff url(../../images/newIho/icon_redo.png) 50% 50% no-repeat;
    border: #ccc 1px solid;
}

/*.btnLayersRedo {display:inline-block;width:27px;height:27px;border:0;overflow:hidden;text-indent:-999em;border-radius:100%;background:#f14646 url(../../images/newIho/map_ctr_redo_on.png) 50% 50% no-repeat;}*/
.btnLayersRedo.fr {
    margin-top: -6px;
}

/* .mapLayersOpen .mapChangeDiv {right:404px;} */
.mapLayersOpen .mapToolbarDiv_v2 {
    right: 244px;
}

.mapLayersOpen .mapToolbarDiv-type {
    right: 400px;
}

.mapLayersOpen .mapLayers {
    right: 0px;
}

.mapLayersOpen .legendDetail {
    right: 244px;
}

/* 검색 레이어 관련*/
.mapSearchWrap {
    position: absolute;
    top: 76px;
    left: 100px;
    width: 350px;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    z-index: 999;
}

.mapSearchWrap.open .mapSearchDiv {
    border-radius: 4px 4px 0 0;
}

.mapSearchWrap.open .searchClose {
    display: block;
}

.mapSearchDiv {
    position: relative;
    padding: 12px 0 12px 25px;
    background: #30343b;
    border-radius: 4px 4px 4px 4px;
    z-index: 50;
}

.mapSearchDiv:after {
    content: " ";
    display: block;
    clear: both;
}

.mapSearchDiv .searchLeft {
    float: left;
    width: 40px;
    margin-right: 12px;
}

.mapSearchDiv .searchMid {
    float: left;
    position: relative;
    width: 247px;
    border: 2px solid #fff;
    border-radius: 50px;
    overflow: hidden;
}

.mapSearchDiv .searchMid label {
    position: absolute;
    top: 12px;
    left: 20px;
    width: 100px;
    font-style: italic;
    font-size: 12px;
    line-height: 12px;
    color: #ccdeff;
    letter-spacing: -.02em;
}

.mapSearchDiv .searchMid input {
    float: left;
    display: block;
    width: 152px;
    height: 36px;
    background: transparent;
    border: 0;
    padding: 0 0 0 24px;
    font-size: 16px;
    color: #fff;
    outline: 0;
    box-sizing: border-box;
}

.mapSearchDiv .searchMid input::placeholder {
    color: #fff;
}

.mapSearchDiv .searchMid.active {
    background-color: #fff;
}

.mapSearchDiv .searchMid.active input {
    color: #1766ff
}

.mapSearchDiv .searchMid.active input::placeholder {
    color: #1766ff;
}

.mapSearchDiv .searchMid.active .resetBtn {
    background-image: url(../../images/newIho/icon_reset_on.png);
}

.mapSearchDiv .searchMid.active .searchBtn {
    background-image: url(../../images/newIho/icon_sch_on.png);
}

/* .mapSearchDiv .searchRight {float:left;width:40px;margin-left:12px;} */
.mapSearchDiv .searchDetailBtn {
    width: 40px;
    height: 40px;
    background: url(../../images/newIho/icon_sch_detail.png) 50% 50% no-repeat;
    border: 2px solid #fff;
    border-radius: 50px;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    letter-spacing: -999em;
}

.mapSearchDiv .searchDetailBtn:hover {
    background-color: #fff;
    background-image: url(../../images/newIho/icon_sch_detail_on.png);
}

.mapSearchDiv .searchBtn {
    position: absolute;
    top: 0;
    right: 8px;
    border: 0;
    width: 36px;
    height: 36px;
    background: url(../../images/newIho/icon_sch.png) 50% 50% no-repeat;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    letter-spacing: -999em;
}

/* .mapSearchDiv .searchBtn:hover {background-color:#fff;background-image:url(../../images/newIho/icon_sch_on.png);} */
.mapSearchDiv .resetBtn {
    float: right;
    width: 16px;
    height: 16px;
    margin: 10px 45px 0 0;
    background: url(../../images/newIho/icon_reset.png) 50% 50% no-repeat;
    border: 0;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    letter-spacing: -999em;
}

.mapSearchDiv .searchClose {
    display: none;
    position: absolute;
    top: 0;
    right: -32px;
    width: 34px;
    height: 30px;
    border-radius: 0 15px 15px 0;
    cursor: pointer;
    background: #30343b url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    letter-spacing: -999em;
}

.mapSearchDiv .searchClose:hover {
    background-image: url(../../images/newIho/icon_close_on.png);
}

.mapSearchDiv .searchList {
    width: 40px;
    height: 40px;
    background: url(../../images/newIho/icon_list.png) 50% 50% no-repeat;
    border: 2px solid #fff;
    border-radius: 50px;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    letter-spacing: -999em;
}

.mapSearchDiv .searchList:hover {
    background-color: #fff;
    background-image: url(../../images/newIho/icon_list_on.png);
}

/* 검색어 추천 시작 */
.mapSearchDiv .searchKeyword {
    display: none;
    position: absolute;
    width: 196px;
    background-color: #fff;
    left: 77px;
    top: 54px;
    border: 1px solid #2b70f4;
    border-radius: 15px;
}

.mapSearchDiv .searchKeyword ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 6px 0;
}

.mapSearchDiv .searchKeyword ul li {
    font-size: 12px;
    line-height: 16px;
    padding: 3px 10px;
    cursor: pointer;
}

.mapSearchDiv .searchKeyword ul li:hover {
    color: #1766ff;
    text-decoration: underline;
}

.mapSearchDiv .searchKeyword ul li .NC {
    background-color: #808187;
    color: #fff !important;
    width: 24px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    text-decoration: none !important;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.mapSearchDiv .searchKeyword ul li .ENC {
    background-color: #4f6df2;
    color: #fff !important;
    width: 24px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    text-decoration: none !important;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.mapSearchDiv .searchKeyword ul li .S-101 {
    background-color: #dff040;
    color: #fff !important;
    width: 30px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    text-decoration: none !important;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.mapSearchDiv .searchKeyword ul li .S100 {
    background-color: #f24f6d;
    color: #fff !important;
    width: 24px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    text-decoration: none !important;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}
/* 검색어 추천 끝 */

/* 검색결과 */
.searchContent {
    display: none;
    background: #fff;
    padding: 20px;
    border-radius: 0 0 4px 4px;
}

.searchResultTab {
    margin-bottom: 15px;
}

.searchResultTab ul {
    display: table;
    width: 100%;
    height: 48px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.searchResultTab ul:after {
    content: " ";
    display: block;
    clear: both;
}

.searchResultTab ul li {
    display: table-cell;
    position: relative;
    width: 25%;
    height: 100%;
    color: #666;
    font-size: 13px;
    background: #f4f4f4;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid #ccc;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    cursor: pointer;
}

.searchResultTab ul li span {
    position: absolute;
    top: -9px;
    right: 5px;
    min-width: 15px;
    padding: 0 5px;
    color: #1766ff;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 16px;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    z-index: 2;
}

.searchResultTab ul li:first-child {
    border-left: 1px solid #ccc;
    border-radius: 3px 0 0 0;
}

.searchResultTab ul li:last-child {
    border-right-color: #ccc;
    border-radius: 0 3px 0 0;
}

.searchResultTab ul li.selected {
    color: #2b70f4;
    background: #fff;
    font-weight: 700;
    border-bottom: 0;
}

.searchResultTab ul li.selected:after {
    content: " ";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: #2b70f4;
}

.searchResultTab ul li.selected span {
    background: #1766ff;
    border-color: #1766ff;
    color: #fff;
}

.searchResultTab.col-x2 ul li {
    width: 50%;
}

.searchResultTab.col-x3 ul li {
    width: 33.333%;
}

.searchContentScroll {
    position: relative;
    height: auto;
    margin-right: -12px;
    padding-right: 12px;
    overflow-x: hidden;
    overflow-y: auto;
}

.detailSearchCate {
    margin-bottom: 13px;
}

.detailSearchCate h3 {
    margin: 15px 0 6px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchCate ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #ccc;
}

.detailSearchCate ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchCate ul li {
    float: left;
    position: relative;
    width: 50%;
    height: 25px;
    text-align: center;
    font-size: 12px;
    line-height: 25px;
    color: #222;
    font-weight: 500;
    cursor: pointer;
}

.detailSearchCate ul li.selected {
    color: white;
    background-color: #0da0f5;
}

.detailSearchCate ul li.selected:after {
    content: " ";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: #2fb3ff;
}

.miniMap {
    position: relative;
    height: 139px;
    padding-top: 4px;
    border-bottom: 1px solid #ccc;
}

.miniMap .bt {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #878787;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    z-index: 3;
}

.miniMap .bt.on,
.miniMap .bt:hover {
    margin: -2px 0 0 -2px;
    background: #2fb3ff;
    border: 2px solid rgba(255, 255, 255, 1);
}

.miniMap .bt.A {
    top: 36px;
    left: 7px;
}

.miniMap .bt.B {
    top: 52px;
    left: 45px;
}

.miniMap .bt.C1 {
    top: 91px;
    left: 101px;
}

.miniMap .bt.C2 {
    top: 90px;
    left: 45px;
}

.miniMap .bt.D {
    top: 12px;
    left: 116px;
}

.miniMap .bt.E {
    top: 21px;
    left: 162px;
}

.miniMap .bt.F {
    top: 45px;
    left: 148px;
}

.miniMap .bt.G {
    top: 41px;
    left: 119px;
}

.miniMap .bt.H {
    top: 91px;
    left: 179px;
}

.miniMap .bt.I {
    top: 37px;
    left: 194px;
}

.miniMap .bt.J {
    top: 67px;
    left: 215px;
}

.miniMap .bt.K {
    top: 37px;
    left: 284px;
}

.miniMap .bt.L {
    top: 91px;
    left: 256px;
}

.miniMap .bt.M {
    top: 115px;
    left: 147px;
}

.miniMap .bt.N {
    top: 0;
    left: 147px;
}

.miniMap .bt.M10 {
    top: 111px;
    left: 219px;
    width: 41px;
}

.miniMap .bt.ALL {
    top: 111px;
    left: 264px;
    width: 41px;
}

.miniMap .miniMap_img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.miniMap .miniMap_layer {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 1;
}

.detailSearchSummary {
    padding: 0 0 15px;
    color: #666;
    font-size: 12px;
    line-height: 16px;
    border-bottom: 1px solid #ccc;
    letter-spacing: -.015em;
}

.detailSearchScaleArea {
    position: relative;
    padding: 10px 0 13px;
    border-bottom: 1px solid #ccc;
}

.detailSearchScaleArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchScaleArea ul {
    list-style: none;
    padding: 0;
    margin: 0 -3px 0 -4px;
}

.detailSearchScaleArea ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchScaleArea ul li {
    float: left;
    width: 33.33333333%;
    padding: 0 3px 7px 4px;
    box-sizing: border-box;
}

.detailSearchScaleArea ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSearchScaleArea ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchScaleArea .all {
    position: absolute;
    top: 22px;
    right: 0;
    color: #666;
    font-size: 12px;
}

.detailSearchScaleArea .all input {
    vertical-align: middle;
    margin: -.2em 0 0 0;
}

.detailSearchScaleArea ul.fl {
    float: left;
    margin: -1px 0 0 3px;
}

.detailSearchScaleArea ul.fl li {
    width: 100px;
}

.detailSearchS101ScaleArea {
    position: relative;
    padding: 10px 0 13px;
    border-bottom: 1px solid #ccc;
}

.detailSearchS101ScaleArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchS101ScaleArea ul {
    list-style: none;
    padding: 0;
    margin: 0 -3px 0 -4px;
}

.detailSearchS101ScaleArea ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchS101ScaleArea ul li {
    float: left;
    width: 33.33333333%;
    padding: 0 3px 7px 4px;
    box-sizing: border-box;
}

.detailSearchS101ScaleArea ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSearchS101ScaleArea ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchS101ScaleArea .all {
    position: absolute;
    top: 22px;
    right: 0;
    color: #666;
    font-size: 12px;
}

.detailSearchS101ScaleArea .all input {
    vertical-align: middle;
    margin: -.2em 0 0 0;
}

.detailSearchS101ScaleArea ul.fl {
    float: left;
    margin: -1px 0 0 3px;
}

.detailSearchS101ScaleArea ul.fl li {
    width: 100px;
}

.bt-sm-all {
    display: inline-block;
    vertical-align: middle;
    padding: 0 8px;
    height: 15px;
    color: #fff;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    border: 0;
    background: #878787;
    border-radius: 20px;
}

.bt-sm-all:hover,
.bt-sm-all.on {
    background: #07b3ff
}

.bt-sm-all.fl {
    margin: 1px 0 0 10px;
}

.chartScaleDefind {
    display: inline-block;
    padding-left: 17px;
    line-height: 16px;
    background: url(../../images/newIho/icon_map.png) 0 50% no-repeat;
}

.chartScaleDefind:hover {
    color: #0da0f5;
    background-image: url(../../images/newIho/icon_map_on.png);
}

.switch-button {
    display: inline-block;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.switch-button input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-button .txt {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    font-size: 12px;
}

.switch-button .slider {
    display: inline-block;
    vertical-align: middle;
    width: 46px;
    height: 20px;
    background: url(../../images/newIho/switch_off.png) 0 50% no-repeat;
}

.switch-button input:checked+.txt,
.switch-button input:checked+.slider+.txt {
    color: #07b3ff
}

.switch-button input:checked+.txt+.slider,
.switch-button input:checked+.slider {
    background-image: url(../../images/newIho/switch_on.png);
}

.detailSearchRegioneArea {
    position: relative;
    padding: 10px 0 10px;
    border-bottom: 1px solid #ccc;
}

.detailSearchRegioneArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchRegioneArea ul {
    list-style: none;
    padding: 0;
    margin: 0 -2px 0 -3px;
}

.detailSearchRegioneArea ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchRegioneArea ul li {
    float: left;
    width: 16.66666666%;
    padding: 0 2px 7px 3px;
    box-sizing: border-box;
}

.detailSearchRegioneArea ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSearchRegioneArea ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchRegioneArea ul li button:disabled {
    background: #dfdfdf;
    color: #666;
    opacity: 0.3;
}

/* s100 시작 */
.detailSearchS100 {
    position: relative;
    padding: 20px 0 13px;
    border-bottom: 1px solid #ccc;
}

.detailSearchS100 h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchS100 ul {
    list-style: none;
    padding: 0;
    margin: 0 -3px 0 -4px;
}

.detailSearchS100 ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchS100 ul li {
    float: left;
    width: 33.33333333%;
    padding: 0 3px 7px 4px;
    box-sizing: border-box;
}

.detailSearchS100 ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSearchS100 ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchS100 .all {
    position: absolute;
    top: 22px;
    right: 0;
    color: #666;
    font-size: 12px;
}

.detailSearchS100 .all input {
    vertical-align: middle;
    margin: -.2em 0 0 0;
}

.detailSearchS100 ul.fl {
    float: left;
    margin: -1px 0 0 3px;
}

.detailSearchS100 ul.fl li {
    width: 100px;
}
/* s100 끝 */

/* S-100 GEOM 시작 */
#pointBtn,
#polygonBtn,
#circleBtn {
    height: 25px;
    color: #666;
    margin: 0 10px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
    width: 100px;
    cursor: pointer;
}

#pointBtn.on,
#polygonBtn.on,
#circleBtn.on {
    background: #2fb3ff;
    color: #fff;
}
/* S-100 GEOM 끝 */

/* ENCs Publication */
.detailSearchENC {
    position: relative;
    padding: 10px 0 2px;
    border-bottom: 1px solid #ccc;
}

.detailSearchENC h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchENC ul {
    list-style: none;
    padding: 0;
    margin: 0 -3px 0 -4px;
}

.detailSearchENC ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchENC ul li {
    float: left;
    width: 33.33333333%;
    padding: 0 3px 7px 4px;
    box-sizing: border-box;
}

.detailSearchENC ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSearchENC ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchENC .all {
    position: absolute;
    top: 22px;
    right: 0;
    color: #666;
    font-size: 12px;
}

.detailSearchENC .all input {
    vertical-align: middle;
    margin: -.2em 0 0 0;
}

.detailSearchENC ul.fl {
    float: left;
    margin: -1px 0 0 3px;
}

.detailSearchENC ul.fl li {
    width: 100px;
}

.detailSearchRencArea {
    position: relative;
    padding: 15px 0 8px;
    border-bottom: 1px solid #ccc;
}

.detailSearchRencArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchRencArea ul {
    list-style: none;
    padding: 0;
    margin: 0 -3px 0 -4px;
}

.detailSearchRencArea ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchRencArea ul li {
    float: left;
    padding: 0 3px 7px 4px;
    box-sizing: border-box;
}

.detailSearchRencArea ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSearchRencArea ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchRencArea .select_input {
    display: block;
    width: 150px;
    height: 26px;
    padding: 0 30px 0 10px;
    color: #666;
    font-size: 12px;
    border: 1px solid #ccc;
    background: url(../../images/newIho/slct_off.png) 94% 50% no-repeat;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchRencArea .select_input.selected {
    color: #2fb3ff;
    border-color: #2fb3ff;
    background-image: url(../../images/newIho/slct_on.png);
}

.detailSearchRencArea .select_condi {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 26px;
    width: 150px;
    height: 103px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}


.detailSearchStatusArea {
    position: relative;
    padding: 15px 0 8px;
    border-bottom: 1px solid #ccc;
}

.detailSearchStatusArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchStatusArea ul {
    list-style: none;
    padding: 0;
    margin: 0 -3px 0 -4px;
}

.detailSearchStatusArea ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchStatusArea ul li {
    float: left;
    width: 33.33333333%;
    padding: 0 3px 7px 4px;
    box-sizing: border-box;
}

.detailSearchStatusArea ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSearchStatusArea ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchStatusArea .select_input {
    display: block;
    width: 150px;
    height: 26px;
    padding: 0 30px 0 10px;
    color: #666;
    font-size: 12px;
    border: 1px solid #ccc;
    background: url(../../images/newIho/slct_off.png) 94% 50% no-repeat;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchStatusArea .select_input.selected {
    color: #2fb3ff;
    border-color: #2fb3ff;
    background-image: url(../../images/newIho/slct_on.png);
}

.detailSearchStatusArea .select_condi {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 26px;
    width: 150px;
    height: 103px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}


.detailSearchProducerArea {
    position: relative;
    padding: 10px 0 8px;
    border-bottom: 1px solid #ccc;
}

.detailSearchProducerArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchProducerArea ul {
    list-style: none;
    padding: 0;
    margin: 0 -3px 0 -4px;
}

.detailSearchProducerArea ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchProducerArea ul li {
    float: left;
    width: 33.33333333%;
    padding: 0 3px 7px 4px;
    box-sizing: border-box;
}

.detailSearchProducerArea ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSearchProducerArea ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchProducerArea .select_input {
    display: block;
    width: 150px;
    height: 26px;
    padding: 0 30px 0 10px;
    color: #666;
    font-size: 12px;
    border: 1px solid #ccc;
    background: url(../../images/newIho/slct_off.png) 94% 50% no-repeat;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchProducerArea .select_input.selected {
    color: #2fb3ff;
    border-color: #2fb3ff;
    background-image: url(../../images/newIho/slct_on.png);
}

.detailSearchProducerArea .select_condi {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 26px;
    width: 150px;
    height: 103px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchNationYearArea {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.detailSearchNationYearArea:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchNationYearArea .col {
    float: left;
    width: 50%;
}

.detailSearchNationYearArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchNationYearArea .select_input {
    display: block;
    width: 150px;
    height: 26px;
    padding: 0 30px 0 10px;
    color: #666;
    font-size: 12px;
    border: 1px solid #ccc;
    background: url(../../images/newIho/slct_off.png) 94% 50% no-repeat;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchNationYearArea .select_input.selected {
    color: #2fb3ff;
    border-color: #2fb3ff;
    background-image: url(../../images/newIho/slct_on.png);
}

.detailSearchNationSelectArea .select_condi {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 26px;
    width: 150px;
    height: 103px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchYearSelectArea .select_condi {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 26px;
    width: 150px;
    height: 103px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchStatusSelectArea .select_condi {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 85px;
    width: 150px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchNationYearArea .detailSearchNationSelectArea {
    position: relative;
}

.detailSearchNationYearArea .detailSearchYearSelectArea {
    position: relative;
}

.detailSearchProducerYearArea {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
}

.detailSearchProducerYearArea:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchProducerYearArea .col {
    float: left;
    width: 50%;
}

.detailSearchProducerYearArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchProducerYearArea .select_input {
    display: block;
    width: 150px;
    height: 26px;
    padding: 0 30px 0 10px;
    color: #666;
    font-size: 12px;
    border: 1px solid #ccc;
    background: url(../../images/newIho/slct_off.png) 94% 50% no-repeat;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchProducerYearArea .select_input.selected {
    color: #2fb3ff;
    border-color: #2fb3ff;
    background-image: url(../../images/newIho/slct_on.png);
}

.detailSearchProducerSelectArea .select_condi {
    display: none;
    position: absolute;
    left: 0px;
    bottom: 26px;
    width: 150px;
    height: 103px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}

.detailSearchProducerYearArea .detailSearchProducerSelectArea {
    position: relative;
}

.detailSearchProducerYearArea .detailSearchYearSelectArea {
    position: relative;
}

.selectOverlapData {
    padding: 15px 0 8px;
    border-bottom: 1px solid #ccc;
}

.selectOverlapData h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.selectOverlapData .group {
    position: relative;
    padding-left: 113px;
    margin-bottom: 7px;
}

.selectOverlapData .group p {
    position: absolute;
    top: 0;
    left: 0;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
}

.selectOverlapData .group2 {
    padding-left: 75px;
}

.selectOverlapData button {
    display: inline-block;
    width: 97px;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSelectArea {
    padding: 15px 0;
    /* border-bottom:1px solid #ccc; */
}

.detailSelectAreaTop {
    margin-bottom: 6px;
}

.detailSelectAreaTop:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSelectAreaTop h3 {
    float: left;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSelectToggle {
    float: right;
    margin-top: -4px;
}

.detailSelectToggle .txt {
    float: left;
    color: #666;
    font-size: 12px;
    line-height: 20px;
}

.detailSelectToggle .txt.selected {
    color: #2fb3ff;
    font-weight: 500;
}

.detailSelectToggle .toggle {
    float: left;
    margin: 0 6px;
}

.detailSelectToggle .toggle button {
    width: 46px;
    height: 20px;
    border: 0;
    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.detailSelectToggle .toggle-between {
    background-image: url(../../images/newIho/toggle_btn_left.png);
}

.detailSelectToggle .toggle-by {
    background-image: url(../../images/newIho/toggle_btn_right.png);
}

.detailSelectToggle .toggle-by:disabled {
    opacity: 0.3
}

.detailSelectAreaOptions {
    padding-bottom: 2px;
}

.detailSelectAreaOptions .group {
    position: relative;
    padding-left: 60px;
    margin-bottom: 8px;
}

.detailSelectAreaOptions .group p {
    position: absolute;
    top: 0;
    left: 0;
    color: #666;
    font-size: 12px;
    line-height: 26px;
    white-space: nowrap;
}

.detailSelectAreaOptions .group select {
    width: 100%;
    height: 26px;
    color: #666;
    font-size: 12px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.detailSelectAreaOptions .group select option:disabled {
    background: #cccccc;
}

.detailSelectAreaNations {
    padding: 10px;
    background: #eeeeee;
    border-radius: 4px
}

.detailSelectAreaNations .wrap {
    max-height: 72px;
    margin-right: -4px;
    padding-right: 4px;
}

.detailSelectAreaNations .wrap .inner:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSelectAreaNations .wrap2 {
    max-height: 72px;
    margin-right: -4px;
    padding-right: 4px;
}

.detailSelectAreaNations .wrap2 .inner:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSelectAreaNations button {
    float: left;
    position: relative;
    margin: 0 6px 6px 0;
    padding: 2px 18px 2px 10px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -.015em;
    color: #fff;
    background: #878787;
    border: 0;
    border-radius: 3px;
}

.detailSelectAreaNations button .ico {
    position: absolute;
    top: 7px;
    right: 5px;
    width: 7px;
    height: 7px;
    background: url(../../images/newIho/icon_del.png) 0 0 no-repeat;
}

.detailSelectAreaNations button:hover {
    background: #2fb3ff;
}

.detailEventPeriodArea {
    padding: 15px 0;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.detailEventPeriodArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailEventPeriodArea .group:after {
    content: "";
    display: block;
    clear: both;
}

.detailEventPeriodArea .group select {
    float: left;
    width: 147px;
    height: 26px;
    color: #666;
    font-size: 12px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.detailEventPeriodArea .group select:focus {
    border-color: #2fb3ff;
    color: #2fb3ff;
}

.detailEventPeriodArea .group span {
    float: left;
    width: 16px;
    text-align: center;
    font-size: 12px;
    line-height: 26px;
}

.detailEventTypeArea {
    position: relative;
    padding: 15px 0 2px;
    border-bottom: 1px solid #ccc;
}

.detailEventTypeArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailEventTypeArea .group {
    position: relative;
    padding-left: 60px;
    margin-bottom: 8px;
}

.detailEventTypeArea .group p {
    position: absolute;
    top: 0;
    left: 0;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
}

.detailEventTypeArea .group p.line-2 {
    top: -2px;
    line-height: 12px;
}

.detailEventTypeArea ul {
    list-style: none;
    padding: 0;
    margin: 0 -2px 0 -2px;
}

.detailEventTypeArea ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailEventTypeArea ul li {
    float: left;
    width: 33.33333333%;
    padding: 0 2px 7px 2px;
    box-sizing: border-box;
}

.detailEventTypeArea ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -.015em;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailEventTypeArea ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailEventTypeArea .all {
    position: absolute;
    top: 17px;
    right: 0;
    color: #666;
    font-size: 12px;
    padding-left: 18px;
    background: url(../../images/newIho/scale_all.png) 0 50% no-repeat;
}

.detailLocationArea {
    padding: 15px 0 7px;
    border-bottom: 1px solid #ccc;
}

.detailLocationArea h3 {
    margin-bottom: 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailLocationArea .group {
    position: relative;
    padding-left: 44px;
    margin-bottom: 8px;
}

.detailLocationArea .group p {
    position: absolute;
    top: 0;
    left: 0;
    color: #666;
    font-size: 12px;
    line-height: 26px;
    white-space: nowrap;
}

.detailLocationArea .group select {
    width: 100%;
    height: 26px;
    color: #666;
    font-size: 12px;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.detailIHOMemberArea {
    padding: 15px 0 2px;
    border-bottom: 1px solid #ccc;
}

.detailIHOMemberArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailIHOMemberArea .group {
    position: relative;
    padding-left: 56px;
}

.detailIHOMemberArea .group p {
    position: absolute;
    top: 0;
    left: 0;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
}

.detailIHOMemberArea ul {
    list-style: none;
    padding: 0;
    margin: 0 -2px 0 -2px;
}

.detailIHOMemberArea ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailIHOMemberArea ul li {
    float: left;
    width: 50%;
    padding: 0 2px 7px 2px;
    box-sizing: border-box;
}

.detailIHOMemberArea ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -.015em;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailIHOMemberArea ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.selectOverlapData button.on {
    background: #2fb3ff;
    color: #fff;
}

.toleranceSetting {
    padding: 15px 0;
    color: #666;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
}

.toleranceSetting h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.toleranceSetting .select_input {
    width: 150px;
    height: 26px;
    padding: 0 30px 0 10px;
    color: #666;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

.snalysisSummary {
    padding: 0 0 12px;
    margin: 0 0 16px;
    border-bottom: 1px solid #ccc;
}

.snalysisSummary h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 16px;
    font-weight: 500;
}

.snalysisSummary .cnt:after {
    content: " ";
    display: block;
    clear: both;
}

.snalysisSummary .left {
    float: left;
}

.snalysisSummary .right {
    float: right;
}

.snalysisSummary .areaTit {
    color: #222;
    font-size: 14px;
    line-height: 27px;
    margin-bottom: 2px;
}

.snalysisSummary .areaTit .num {
    margin-left: 8px;
    font-size: 12px;
    color: #2fb3ff;
}

.snalysisSummary .areaTit .num strong {
    font-size: 16px;
}

.snalysisSummary .areaBox {
    display: inline-block;
    width: 100px;
    padding: 8px 2px;
    border-radius: 2px;
    font-size: 12px;
    letter-spacing: -.015em;
    color: #222;
    border: 1px solid #ccc;
    text-align: center;
    margin-right: 2px;
}

.snalysisSummary .areaBox .num {
    padding-top: 5px;
    color: #666;
}

.snalysisSummary .areaBox .num strong {
    font-size: 14px;
}

.snalysisSummary .areaBox.small {
    width: 64px;
    margin-right: 2px;
    margin-bottom: 2px
}

.snalysisSummary2 {
    padding: 0 0 12px;
    margin: 0 0 16px;
    border-bottom: 1px solid #ccc;
}

.snalysisSummary2 h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 16px;
    font-weight: 500;
}

.snalysisSummary2 .cnt:after {
    content: " ";
    display: block;
    clear: both;
}

.snalysisSummary2 .left {
    float: left;
    width: 226px;
}

.snalysisSummary2 .right {
    float: right;
}

.snalysisSummary2 .areaTit {
    color: #222;
    font-size: 14px;
    line-height: 27px;
    margin-bottom: 2px;
}

.snalysisSummary2 .areaTit .num {
    margin-left: 8px;
    font-size: 12px;
    color: #2fb3ff;
}

.snalysisSummary2 .areaTit .num strong {
    font-size: 16px;
}

.snalysisSummary2 .areaBox {
    display: inline-block;
    width: 74px;
    padding: 6px 2px;
    border-radius: 2px;
    font-size: 12px;
    letter-spacing: -.015em;
    color: #222;
    border: 1px solid #ccc;
    text-align: center;
    margin-bottom: 4px;
}

.snalysisSummary2 .areaBox .num {
    padding-top: 3px;
    color: #666;
    font-size: 11px;
}

.searchList>ul>li {
    padding: 16px 0;
    border-bottom: 1px solid #ccc;
    letter-spacing: -.015em;
    cursor: pointer;
}

.searchList>ul>li:first-child {
    padding-top: 0;
}

.searchList>ul>li:hover .chartTitleDiv2 {
    color: #1766ff;
    text-decoration: underline;
}

.searchList .chartSubjectDiv .chartNoDiv {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 16px;
    color: #222;
    letter-spacing: -.015em;
    margin-right: 2px;
}

.searchList .chartSubjectDiv .chartTitleDiv {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    line-height: 16px;
    color: #222;
    letter-spacing: -.015em;
}

.searchList .chartSubjectDiv .chartTitleDiv2 {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
    line-height: 16px;
    color: #222;
    letter-spacing: -.015em;
}

.searchList .chartInfoDiv {
    padding-top: 10px;
}

.searchList .chartInfoDiv:after {
    content: " ";
    display: block;
    clear: both;
}

.searchList .chartInfoDiv .km {
    float: left;
    color: #666;
    font-size: 12px;
    line-height: 20px;
}

.searchList .chartInfoDiv .labels {
    float: right;
}

.searchList .chartInfoDiv .labels.fl {
    float: left;
}

.searchList .chartInfoDiv .labels.fl .label {
    margin: 0 4px 0 0;
}

.searchList .label {
    float: left;
    margin: 0 0 0 4px;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    padding: 2px 0;
    text-align: center;
    border-radius: 3px;
}

.searchList .label-gray {
    background: #ababab;
}

.searchList .label-sky {
    background: #72bceb;
}

.searchList .label-red {
    background: #f38956;
}

.searchList .label-green {
    background: #81bc34;
}

.searchList .label-blue {
    background: #659af3;
}

.searchList .label-orange {
    background: #f0a33f;
}

.searchList .label-purple {
    background: #bd84e5;
}

.searchList .label-sm {
    width: 22px;
}

.searchList .label-md {
    width: 36px;
}

.searchList .label-md2 {
    width: 60px;
}

.searchList .label-lg {
    width: 66px;
}

.searchList .label-lg2 {
    width: 69px;
}

.searchList .label-auto {
    padding: 2px 10px;
}

.searchList .none {
    padding: 40px 0;
    color: #999;
    text-align: center;
    cursor: default;
}

.searchList.cnp {
    margin: 0px !important;
}

.searchList.cnp .chartInfoDiv {
    padding-top: 0px !important;
}

.searchList.cnp .chartSubjectDiv {
    float: left;
    margin-left: 6px;
}

.detailSearchBtnArea {
    padding: 20px 0 14px;
    text-align: right;
}

.detailSearchBtnArea .detailSearchBtn {
    color: #222;
    font-size: 12px;
    background: transparent;
    border: 0;
    text-decoration: underline;
}

.detailSearchBtnArea2 {
    padding: 15px 0 0;
    text-align: center;
}

.detailSearchBtnArea2 .detailSearchBtn2 {
    display: inline-block;
    width: 130px;
    height: 30px;
    margin: 0 2px;
    text-align: center;
    color: #666;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    border: 2px solid #666;
    border-radius: 20px;
}

.detailSearchBtnArea2 .detailSearchBtn2 .ico {
    display: inline-block;
    vertical-align: middle;
    margin: -.2em 2px 0 0;
    width: 15px;
    height: 15px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.detailSearchBtnArea2 .detailSearchBtn2:hover {
    background: #666;
    color: #fff;
}

.detailSearchBtnArea2 .detailSearchBtn2.search {
    border-color: #2fb3ff;
    color: #2fb3ff;
}

.detailSearchBtnArea2 .detailSearchBtn2.search .ico {
    background-image: url(../../images/newIho/icon_sch2.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.forward .ico {
    background-image: url(../../images/newIho/icon_forward.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.download {
    border-color: #2fb3ff;
    color: #2fb3ff;
}

.detailSearchBtnArea2 .detailSearchBtn2.download .ico {
    background-image: url(../../images/newIho/icon_down.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.download2 {
    border-color: #2fb3ff;
    color: #2fb3ff;
}

.detailSearchBtnArea2 .detailSearchBtn2.download2 .ico {
    background-image: url(../../images/newIho/icon_down2.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.back .ico {
    background-image: url(../../images/newIho/icon_back.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.search:hover {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchBtnArea2 .detailSearchBtn2.search:hover .ico {
    background-image: url(../../images/newIho/icon_sch2_on.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.redo .ico {
    background-image: url(../../images/newIho/icon_redo.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.redo:hover .ico {
    background-image: url(../../images/newIho/icon_redo.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.forward:hover .ico {
    background-image: url(../../images/newIho/icon_forward_on.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.download:hover {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchBtnArea2 .detailSearchBtn2.download:hover .ico {
    background-image: url(../../images/newIho/icon_down_on.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.download2:hover {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchBtnArea2 .detailSearchBtn2.download2:hover .ico {
    background-image: url(../../images/newIho/icon_down2_on.png);
}

.detailSearchBtnArea2 .detailSearchBtn2.back:hover .ico {
    background-image: url(../../images/newIho/icon_back_on.png);
}

.detailDownloadArea .select_condi {
    display: block;
    position: absolute;
    left: 0;
    bottom: 31px;
    width: 130px;
    color: #666;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    padding: 5px 2px 5px 15px;
    border: 1px solid #1b9ae3;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
}

.detailDownloadArea .select_condi ul {
    margin: 6px 0;
    list-style: none;
    padding: 0 5px 0 0;
}

.detailDownloadArea .select_condi ul li {
    padding: 0;
    margin: 0;
}

.detailDownloadArea .select_condi a:hover {
    color: #2fb3ff;
    text-decoration: underline;
}

.detailDownloadArea .select_condi .scrollbar {
    max-height: 72px;
    overflow-x: hidden;
    overflow-y: auto;
}

.detailDownloadArea .select_condi.open {
    display: block;
}

.detailSearchDownload {
    display: inline-block;
    position: relative;
}

.detailSearchDownload .detailSearchBtn2.download2 .ico {
    margin: -.2em -4px 0 24px;
}

.detailSearchDownload .select_condi {
    display: none;
    position: absolute;
    left: 0;
    bottom: 31px;
    width: 130px;
    color: #666;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    padding: 5px 2px 5px 15px;
    border: 1px solid #1b9ae3;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
}

.detailSearchDownload .select_condi ul {
    margin: 6px 0;
    list-style: none;
    padding: 0 5px 0 0;
}

.detailSearchDownload .select_condi ul li {
    padding: 0;
    margin: 0;
}

.detailSearchDownload .select_condi a:hover {
    color: #2fb3ff;
    text-decoration: underline;
}

.detailSearchDownload .select_condi .scrollbar {
    max-height: 72px;
    overflow-x: hidden;
    overflow-y: auto;
}

.detailSearchDownload .select_condi.open {
    display: block !important;
}


/* CNP Upload */
.cnpUploadWrap {
    position: absolute;
    top: 76px;
    left: 100px;
    height: auto;
    width: 470px;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 5px 5px 10px 1px rgb(0 0 0 / 42%);
    z-index: 999;
    background: #fff;
    padding: 10px;
    border: 4px solid #194bb3;
}

.cnpUploadContent {
    padding: 5px;
    float: left;
    width: 98%;
}

.cnpUpload-header {
    font-size: 15px;
    padding: 3px 6px 0px 0px;
    float: left;
    width: 330px;
}

#cnpFeature,
#cnpMeta {
    padding: 10px;
}

.topLabel {
    width: 75px;
    padding: 6px;
    background: linear-gradient(to bottom, #2f5fd6, #2f4d8b);
    color: white;
    font-size: 15px;
    text-align: center;
    box-shadow: 0px 1px 4px grey;
    margin-bottom: 7px;
}

.cnpTable {
    border-collapse: collapse;
    border: hidden;
    width: 100%;
    text-align: center;
    font-size: 14px;
    width: 425px;
}

.cnpTable td:nth-child(1) {
    padding: 8px;
    width: 65%;
    border: 1px solid;
}

.cnpTable td:nth-child(2) {
    padding: 8px;
    width: 35%;
    border: 1px solid;
}

.cnpUploadArea {
    text-align: center;
    float: left;
}

/*.cnpUpload{position:absolute;} */
.cnpUpload {
    position: absolute;
    right: 35px;
}

.cnpBtn {
    display: inline-block;
    height: 30px;
    margin: 0 2px;
    text-align: center;
    color: #2fb3ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    border: 2px solid #2fb3ff;
    border-radius: 20px;
}

.cnpBtn.upload {
    width: 100px;
}

.cnpBtn .ico {
    display: inline-block;
    vertical-align: middle;
    margin: -.2em 2px 0 0;
    width: 15px;
    height: 15px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.cnpBtn.upload .ico {
    background-image: url(../../images/newIho/icon_down2.png);
}

.cnpBtnArea {
    width: fit-content;
    ;
    margin: auto;
    padding-top: 10px;
}

.backArea {
    float: left;
}

.saveArea {
    float: left;
}

.cnpBtn.back {
    width: 120px;
    border-color: #666;
    color: #666;
}

.cnpBtn.back:hover {
    background: #666;
    color: #fff;
}

.cnpBtn.back .ico {
    background-image: url(../../images/newIho/icon_back.png);
}

.cnpBtn.back:hover .ico {
    background-image: url(../../images/newIho/icon_back_on.png);
}

.cnpBtn.save {
    width: 120px;
}

.cnpBtn:hover {
    background: #2fb3ff;
    color: #fff;
}

.cnpBtn:hover .ico {
    background-image: url(../../images/newIho/icon_down2_on.png);
}

.cnpUpload .select_condi {
    z-index: 200;
    display: none;
    position: absolute;
    text-align: center !important;
    width: 100px;
    color: #666;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    padding: 5px;
    border: 1px solid #1b9ae3;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
}

.cnpUpload .select_condi ul {
    margin: 6px 0;
    list-style: none;
    padding: 0 5px 0 0;
}

.cnpUpload .select_condi ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    margin: 0;
}

.cnpUpload .select_condi a:hover {
    color: #2fb3ff;
    text-decoration: underline;
}

.cnpUpload .select_condi .scrollbar {
    max-height: 72px;
    overflow-x: hidden;
    overflow-y: auto;
}

.cnpUpload .select_condi .open {
    display: block;
}

#cnpFileChooseArea {
    padding: 10px 0px 20px 20px;
}

.cnpFileBtnArea {
    float: right;
    margin-right: 10px;
}

.cnpFileBtnArea,
#cnpFileChooseArea input {
    float: left;
}

.cnpFileBtn {
    display: inline-block;
    height: 27px;
    margin: 0 2px;
    width: 60px;
    text-align: center;
    color: #2fb3ff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    border: 2px solid #2fb3ff;
    border-radius: 20px;
}

.cnpFileBtn.cancel {
    border-color: #666;
    color: #666;
}

#cnpFileOK:hover {
    cursor: pointer;
    background: #16a1f1;
    color: #fff;
}

#cnpPopUp {
    position: absolute;
    top: 41%;
    width: 200px;
    height: 100px;
    background: red;
    left: 8%;
    text-align: center;
    font-size: 17px;
}

/* CNP */
.detailSearchProductArea {
    position: relative;
    padding: 10px 0 13px;
    border-bottom: 1px solid #ccc;
}

.detailSearchProductArea h3 {
    margin: 0 0 10px;
    color: #222;
    font-size: 14px;
    font-weight: 500;
}

.detailSearchProductArea ul {
    list-style: none;
    padding: 0;
    margin: 0 -3px 0 -4px;
}

.detailSearchProductArea ul:after {
    content: " ";
    display: block;
    clear: both;
}

.detailSearchProductArea ul li {
    float: left;
    width: 33.33333333%;
    padding: 0 3px 7px 4px;
    box-sizing: border-box;
}

.detailSearchProductArea ul li a {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

.detailSearchProductArea ul li button {
    display: block;
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 0;
    background: #dfdfdf;
    border-radius: 20px;
}

.detailSearchProductArea ul li button.on {
    background: #2fb3ff;
    color: #fff;
}

.detailSearchProductArea .all {
    position: absolute;
    top: 22px;
    right: 0;
    color: #666;
    font-size: 12px;
}

.detailSearchProductArea .all input {
    vertical-align: middle;
    margin: -.2em 0 0 0;
}

.detailSearchProductArea ul.fl {
    float: left;
    margin: -1px 0 0 3px;
}

.detailSearchProductArea ul.fl li {
    width: 100px;
}

.detailDownloadArea {
    position: relative;
    display: inline-block;
}

.uploadTab {
    margin-bottom: 15px;
}

.uploadTab ul {
    display: table;
    width: 100%;
    height: 48px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.uploadTab ul:after {
    content: " ";
    display: block;
    clear: both;
}

.uploadTab ul li {
    display: table-cell;
    position: relative;
    width: 25%;
    height: 100%;
    color: #666;
    font-size: 13px;
    background: #f4f4f4;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid #ccc;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    cursor: pointer;
}

.uploadTab ul li span {
    position: absolute;
    top: -9px;
    right: 5px;
    min-width: 15px;
    padding: 0 5px;
    color: #1766ff;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 16px;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    z-index: 2;
}

.uploadTab ul li:first-child {
    border-left: 1px solid #ccc;
    border-radius: 3px 0 0 0;
}

.uploadTab ul li:last-child {
    border-right-color: #ccc;
    border-radius: 0 3px 0 0;
}

.uploadTab ul li.selected {
    color: #fff;
    background: #66B2FF;
    font-weight: 700;
    border-bottom: 0;
}

/* .uploadTab ul li.selected:after {content:" ";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:#2b70f4;} */
.uploadTab ul li.selected span {
    background: #1766ff;
    border-color: #1766ff;
    color: #fff;
}

.uploadTab.col-x3 ul li {
    width: 33.33%;
}

/* uploadCNP dateList */
.uploadDataList {
    width: 610px;
    height: 430px;
    overflow-y: auto;
    display: block;
    border: 1px solid #66B2FF
}

.uploadDataList {
    width: 100%;
}

.uploadDataList table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
}

.uploadDataList tr {
    border: 1px solid #66B2FF;
}

.uploadDataList td,
.uploadDataList th {
    padding: 8px;
    font-size: 14px;
    text-align: center;
    height: 15px;
    word-break: break-all;
}

.uploadDataList th {
    position: sticky;
    top: -1px;
    background-color: #66B2FF;
}

#uploadENCDataList td:nth-child(1),
#uploadPaperDataList td:nth-child(1) {
    width: 22%;
}

#uploadENCDataList td:nth-child(2),
#uploadPaperDataList td:nth-child(2) {
    width: 13%;
}

#uploadENCDataList td:nth-child(3),
#uploadPaperDataList td:nth-child(3) {
    width: 13%;
}

#uploadENCDataList td:nth-child(4),
#uploadPaperDataList td:nth-child(4) {
    width: 14%;
}

#uploadENCDataList td:nth-child(5),
#uploadPaperDataList td:nth-child(5) {
    width: 25%;
}

#uploadENCDataList td:nth-child(6),
#uploadPaperDataList td:nth-child(6) {
    width: 12%;
}

#uploadNCDataList td:nth-child(1) {
    width: 28%;
}

#uploadNCDataList td:nth-child(2) {
    width: 16%;
}

#uploadNCDataList td:nth-child(3) {
    width: 30%;
}

#uploadNCDataList td:nth-child(4) {
    width: 13%;
}

#uploadNCDataList td:nth-child(5) {
    width: 12%;
}

#detailFeature {
    margin-top: 45px;
}

/* .cnpBackdrop{opacity:.5; background:#000;} */
/* Layer Information */
#activetooltip_GroupDiv {
    padding: 8px 8px;
    width: 125px;
    background: #fff;
    font-size: 11px;
    line-height: 16px;
    border-radius: 3px;
    border: 1px solid #2b70f4;
}

/* Information Detail */
#chartDtl {
    display: none;
    padding-left: 14px;
}

#chartDtl:after {
    content: " ";
    position: absolute;
    top: 15px;
    left: 0;
    width: 14px;
    height: 14px;
    background: url(../../images/newIho/chartDtl_point.png) 0 0 no-repeat;
    display: none;
}

#chartDtl_GroupDiv {
    position: relative;
    width: 250px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    overflow: hidden;
}

.newChartDtlTitle {
    background: #30343b;
    height: 43px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 43px;
    color: #fff;
}

.newChartDtl {
    padding: 20px;
}

.newChartDtl table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    border-top: 2px solid #659af3;
}

.newChartDtl td {
    height: 20px;
    padding: 0 5px 0 0;
    color: #1766ff;
    font-size: 11px;
    text-align: right;
    border-bottom: 1px solid #dfdfdf;
    word-break: break-all;
    letter-spacing: -.015em;
}

.newChartDtl td.tdTitle {
    color: #666;
    text-align: left;
    padding: 0 0 0 5px;
    white-space: nowrap;
}

#chartDtl_close {
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    cursor: pointer !important;
    width: 14px !important;
    height: 14px !important;
    overflow: hidden !important;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
}
.chartDtl_close {
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    cursor: pointer !important;
    width: 14px !important;
    height: 14px !important;
    overflow: hidden !important;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
}

#chartDtl_close:hover {
    background-image: url(../../images/newIho/icon_close_on.png);
}
.chartDtl_close:hover {
    background-image: url(../../images/newIho/icon_close_on.png);
}

#searchDtl {
    display: none;
    padding-left: 14px;
}

#searchDtl:after {
    content: " ";
    position: absolute;
    top: 15px;
    left: 0;
    width: 14px;
    height: 14px;
    background: url(../../images/newIho/chartDtl_point.png) 0 0 no-repeat;
    display: none;
}

#searchDtl_GroupDiv,
#cnpSearchDtl_GroupDiv {
    position: relative;
    width: 250px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    overflow: hidden;
}

#searchDtl_GroupDiv {
    position: relative;
    width: 250px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    overflow: hidden;
}

#searchDtl_close {
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    cursor: pointer !important;
    width: 14px !important;
    height: 14px !important;
    overflow: hidden !important;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
}

#searchDtl_close:hover {
    background-image: url(../../images/newIho/icon_close_on.png);
}

#overlapPopup:befor {
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
}

#overlapPopup:after {
    content: " ";
    position: absolute;
    top: 15px;
    left: 0;
    width: 14px;
    height: 14px;
    background: url(../../images/newIho/chartDtl_point.png) 0 0 no-repeat;
    display: none;
}

#overlapPopup_GroupDiv {
    position: relative;
    width: 250px;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
}

#overlapPopup_close {
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    cursor: pointer !important;
    width: 14px !important;
    height: 14px !important;
    overflow: hidden !important;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
}

#overlapPopup_close:hover {
    background-image: url(../../images/newIho/icon_close_on.png);
}

#cnpSearchDtl:after {
    content: " ";
    position: absolute;
    top: 15px;
    left: 0;
    width: 14px;
    height: 14px;
    background: url(../../images/newIho/chartDtl_point.png) 0 0 no-repeat;
    display: none;
}

#cnpSearchDtl_GroupDiv,
#cnpSearchDtl_GroupDiv {
    position: relative;
    width: 250px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    overflow: hidden;
}

#cnpSearchDtl_close {
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    cursor: pointer !important;
    width: 14px !important;
    height: 14px !important;
    overflow: hidden !important;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
}

#cnpSearchDtl_close:hover {
    background-image: url(../../images/newIho/icon_close_on.png);
}


/* Event Detail 시작 */
#eventDtl {
    display: none;
    padding-left: 14px;
}

#eventDtl:after {
    content: " ";
    position: absolute;
    top: 15px;
    left: 0;
    width: 14px;
    height: 14px;
    background: url(../../images/newIho/chartDtl_point.png) 0 0 no-repeat;
    display: none;
}

#eventDtl_GroupDiv {
    position: relative;
    width: 250px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    overflow: hidden;
}

#eventDtl_close {
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    cursor: pointer !important;
    width: 14px !important;
    height: 14px !important;
    overflow: hidden !important;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
}

#eventDtl_close:hover {
    background-image: url(../../images/newIho/icon_close_on.png);
}
/* Event Detail 끝 */

/* Chart List 시작 */
#chartList {
    display: none;
}

#chartList:hover {
    cursor: pointer;
}

#chartList_GroupDiv {
    padding: 11px;
    width: 106px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, .42);
    border: 3px solid #30343b;
}

.newChartList {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
}

.newChartList td {
    height: 20px;
    color: #666;
    font-size: 12px;
    border-top: 1px solid #dfdfdf;
    word-break: break-all;
    letter-spacing: -.015em;
}

.newChartList tr:first-child td {
    border-top: 0;
}

.newChartList tr:hover td {
    background: #c6d9ef;
}

.newChartList tr td:first-child {
    padding-left: 3px;
}

.newChartList .NC {
    background-color: #808187;
    color: #fff;
    width: 40px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.newChartList .ENC {
    background-color: #4f6df2;
    color: #fff;
    width: 24px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.newChartList .S-101 {
    background-color: #dff040;
    color: #fff;
    width: 30px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.newChartList .PO {
    background-color: #f7e26f;
    color: #fff;
    width: 24px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.newChartList .IM {
    background-color: #4f9208;
    color: #fff;
    width: 24px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.newChartList .WE {
    background-color: #fda117;
    color: #fff;
    width: 24px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.newChartList .S-102,
.newChartList .S-104,
.newChartList .S-111,
.newChartList .S-124,
.newChartList .S-129 {
    color: #fff;
    width: 30px;
    font-size: 11px;
    line-height: 12px;
    margin-right: 4px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px;
}

.newChartList .S-102 { background-color: #2F9D27; } /* green */
.newChartList .S-104 { background-color: #FFBB00; } /* orange */
.newChartList .S-111 { background-color: #5CD1E5; } /* blue */
.newChartList .S-124 { background-color: #F15F5F; } /* red */
.newChartList .S-129 { background-color: #FF73EE; } /* pink */

#chartList_close {
    position: absolute !important;
    top: -3px !important;
    right: -31px !important;
    width: 31px !important;
    height: 30px !important;
    border-radius: 0 15px 15px 0 !important;
    cursor: pointer;
    background: #30343b url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    letter-spacing: -999em;
}

#chartList_close:hover {
    background-image: url(../../images/newIho/icon_close_on.png);
}
/* Chart List 끝 */

/* 페이지목록 */
#paging_div {
    margin: 10px 0 0 0;
    padding: 0 44px;
    position: relative;
    text-align: center;
    line-height: normal;
}

#paging_div .paging_align {
    display: inline-block;
    vertical-align: top;
}

#paging_div .paging_align li {
    display: inline;
    height: 22px;
    vertical-align: top;
    overflow: hidden;
    letter-spacing: -.025em;
}

#paging_div .paging_align li a {
    float: left;
    width: 20px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
    color: #666;
    text-decoration: none;
}

#paging_div .paging_align li strong {
    float: left;
    width: 20px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
    color: #2fb3ff;
}

#paging_div .paging_align li a.first {
    position: absolute;
    top: 0;
    left: 0;
    width: 21px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px 0 0 3px;
    background: #fff url(../../images/newIho/page_first.png) 50% 50% no-repeat;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    overflow: hidden;
}

#paging_div .paging_align li a.prev {
    position: absolute;
    top: 0;
    left: 22px;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    background: #fff url(../../images/newIho/page_prev.png) 50% 50% no-repeat;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    overflow: hidden;
}

#paging_div .paging_align li a.next {
    position: absolute;
    top: 0;
    right: 22px;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px 0 0 3px;
    background: #fff url(../../images/newIho/page_next.png) 50% 50% no-repeat;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    overflow: hidden;
}

#paging_div .paging_align li a.last {
    position: absolute;
    top: 0;
    right: 0;
    width: 21px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    background: #fff url(../../images/newIho/page_last.png) 50% 50% no-repeat;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    overflow: hidden;
}

#paging_div_cnp {
    margin: 10px 0 0 0;
    padding: 0 44px;
    position: relative;
    text-align: center;
    line-height: normal;
}

#paging_div_cnp .paging_align {
    display: inline-block;
    vertical-align: top;
}

#paging_div_cnp .paging_align li {
    display: inline;
    height: 22px;
    vertical-align: top;
    overflow: hidden;
    letter-spacing: -.025em;
}

#paging_div_cnp .paging_align li a {
    float: left;
    width: 20px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
    color: #666;
    text-decoration: none;
}

#paging_div_cnp .paging_align li strong {
    float: left;
    width: 20px;
    height: 22px;
    font-size: 12px;
    line-height: 22px;
    color: #2fb3ff;
}

#paging_div_cnp .paging_align li a.first {
    position: absolute;
    top: 0;
    left: 0;
    width: 21px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px 0 0 3px;
    background: #fff url(../../images/newIho/page_first.png) 50% 50% no-repeat;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    overflow: hidden;
}

#paging_div_cnp .paging_align li a.prev {
    position: absolute;
    top: 0;
    left: 22px;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    background: #fff url(../../images/newIho/page_prev.png) 50% 50% no-repeat;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    overflow: hidden;
}

#paging_div_cnp .paging_align li a.next {
    position: absolute;
    top: 0;
    right: 22px;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px 0 0 3px;
    background: #fff url(../../images/newIho/page_next.png) 50% 50% no-repeat;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    overflow: hidden;
}

#paging_div_cnp .paging_align li a.last {
    position: absolute;
    top: 0;
    right: 0;
    width: 21px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 0 3px 3px 0;
    background: #fff url(../../images/newIho/page_last.png) 50% 50% no-repeat;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    overflow: hidden;
}

/* 결과 테이블 */
.ResultDetailTable {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1000;
}

.ResultDetailToggle {
    padding: 1px 0;
    background: #eee;
    cursor: pointer;
}

.ResultDetailToggle span {
    display: block;
    margin: 0 auto;
    width: 64px;
    height: 11px;
    background-color: #fafafa;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    background-image: url(../../images/newIho/angle_up.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.ResultDetailToggle:hover span {
    background-image: url(../../images/newIho/angle_up_on.png);
}

.ResultDetailCnt {
    display: none;
    position: relative;
    height: 362px;
    background: #fff;
    padding: 16px 30px 0 20px;
}

.ResultDetailCnt .menuBar {
    border-bottom: 2px solid #2fb3ff
}

.ResultDetailCnt .menuBar:after {
    content: " ";
    display: block;
    clear: both;
}

.ResultDetailCnt .menuBar .check {
    float: left;
    padding: 10px 6px 0 10px;
    font-size: 14px;
    color: #666;
}

.ResultDetailCnt .menuBar .check label {
    float: left;
    margin-right: 14px;
    cursor: pointer;
}

.ResultDetailCnt .menuBar .check label.on {
    color: #222;
}

.ResultDetailCnt .menuBar .check input[type="radio"] {
    vertical-align: middle !important;
    margin: -2px 2px 0 0 !important;
}

.ResultDetailCnt .menuBar .tab {
    float: left;
    list-style: none;
}

.ResultDetailCnt .menuBar .tab li {
    float: left;
    padding: 0;
    margin: 0 3px 0 0;
}

.ResultDetailCnt .menuBar .tab li a {
    display: block;
    color: #222;
    font-size: 14px;
    line-height: 35px;
    padding: 2px 15px 0 15px;
    background: #eee;
    text-align: center;
    border-radius: 3px 3px 0 0;
    transition: all 0.2s ease-in-out;
}

.ResultDetailCnt .menuBar .tab li.active a {
    background: #2fb3ff;
    color: #fff;
    font-weight: 500;
}

.ResultDetailCnt .menuBar .btns {
    float: right;
}

.btns .layerButtonWrap {
    float: left;
    position: relative;
    margin-right: 5px;
}

.ResultDetailCnt .menuBar .btns button {
    /* float:left; */
    margin-left: 6px;
    padding: 0 23px;
    height: 29px;
    background: #fff;
    border: 2px solid #666;
    font-size: 14px;
    color: #666;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
}

.ResultDetailCnt .menuBar .btns button:hover {
    color: #fff !important;
}

.ResultDetailCnt .menuBar .btns button.type1 {
    border-color: #666666;
    color: #666666;
}

.ResultDetailCnt .menuBar .btns button.type2 {
    border-color: #16a1f1;
    color: #16a1f1;
}

.ResultDetailCnt .menuBar .btns button.type3 {
    border-color: #3385f5;
    color: #3385f5;
}

.ResultDetailCnt .menuBar .btns button.type1:hover {
    background: #666666;
}

.ResultDetailCnt .menuBar .btns button.type2:hover {
    background: #16a1f1;
}

.ResultDetailCnt .menuBar .btns button.type3:hover {
    background: #3385f5;
}

.ResultDetailCnt .tab-content {
    position: absolute;
    top: 56px;
    left: 20px;
    right: 20px;
    height: calc(100% - 55px);
}

.tab-content input {
    border: 1px solid #c6c6c6;
    border-radius: 0px;
}

.resultTable {
    border-collapse: collapse;
    border-spacing: 0px;
}

.resultTable th {
    height: 38px;
    border-bottom: 2px solid #dfdfdf;
    color: #222;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.015em;
}

.resultTable td {
    height: 30px;
    border-bottom: 1px solid #dfdfdf;
    color: #666;
    font-size: 12px;
    letter-spacing: -.015em;
    text-align: center;
}

.resultTable td.intno {
    background: #f5f3d9;
    color: #444;
}

.resultTable input[type="radio"] {
    vertical-align: middle !important;
    margin: -2px 0 0 0 !important;
}

.ResultDetailTable.active .ResultDetailToggle span {
    background-image: url(../../images/newIho/angle_down.png);
}

.ResultDetailTable.active .ResultDetailToggle:hover span {
    background-image: url(../../images/newIho/angle_down_on.png);
}

.ResultDetailTable.active .ResultDetailCnt {
    display: block;
}

#fixArea {
    position: absolute;
    float: left;
    width: 252px;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 300px;
}

#scrollArea {
    position: absolute;
    top: 0;
    left: 257px;
    width: calc(100% - 257px);
    float: right;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 307px;
}

.scrollbar::-webkit-scrollbar-track {
    border-radius: 4px;
    background-color: #eee;
}

.scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #eee;
}

.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #a8b0b4;
}

/* front(user page) css */
body.front .iho_header .headerDiv {
    background: #2b70f4 url(../../images/newIho/header_bg2.jpg) 0 0 no-repeat;
}

body.front .headerDiv .headerButton:hover {
    background: #fff;
    border-color: #fff;
    color: #1766ff;
}

body.front .headerDiv .headerButton:hover .ico1 {
    background-image: url(../../images/newIho/top_icon1_on.png);
}

body.front .headerDiv .headerButton:hover .ico2 {
    background-image: url(../../images/newIho/top_icon2_on.png);
}

body.front .headerDiv .headerButton:hover .ico3 {
    background-image: url(../../images/newIho/top_icon3_on.png);
}

body.front .headerDiv .headerButton:hover .ico4 {
    background-image: url(../../images/newIho/top_user_on.png);
}

body.front .mapToolbarDiv button.ctrInfo {
    top: 225px;
}

body.front .mapSearchWrap {
    left: 20px;
}

body.front .mapSearchWrap .mapSearchDiv {
    background: #2b70f4;
}

body.front .mapSearchWrap .mapSearchDiv .searchClose {
    background-color: #2b70f4;
}

body.front .mapSearchWrap .mapSearchDiv .searchClose:hover {
    background-image: url(../../images/newIho/icon_close.png);
}

body.front .newChartDtlTitle {
    background: #2b70f4;
}

body.front #chartDtl_close:hover {
    background-image: url(../../images/newIho/icon_close.png);
}
body.front .chartDtl_close:hover {
    background-image: url(../../images/newIho/icon_close.png);
}

body.front #chartList_GroupDiv {
    border: 3px solid #2b70f4;
}

body.front #chartList_close {
    background-color: #2b70f4;
}

body.front #chartList_close:hover {
    background-image: url(../../images/newIho/icon_close.png);
}

/* 정보수정 팝업레이어 */
.popUserInfo {
    position: relative;
    padding: 29px;
    width: 320px;
}

.popUserInfo h1 {
    color: #121212;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3em;
    margin: 0 0 25px;
}

.popUserInfo table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    border-top: 2px solid #2fb3ff;
}

.popUserInfo table th {
    height: 30px;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    line-height: 18px;
    letter-spacing: -.015em;
    border-bottom: 1px solid #dfdfdf;
}

.popUserInfo table td {
    font-size: 12px;
    color: #999;
    line-height: 18px;
    letter-spacing: -.015em;
    border-bottom: 1px solid #dfdfdf;
}

.popUserInfo .buttons {
    margin-top: 20px;
    text-align: center;
}

.popUserInfo .popClose {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    background: url(../../images/newIho/icon_close2.png) 50% 50% no-repeat;
    overflow: hidden;
}

.popManagerInfo {
    *zoom: 1;
    position: relative;
    width: 511px;
}

.popManagerInfo:after {
    content: "";
    display: block;
    clear: both;
}

.popManagerInfo .popClose {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    background: url(../../images/newIho/icon_close2.png) 50% 50% no-repeat;
    overflow: hidden;
}

.popManagerInfoLeft {
    float: left;
    width: 134px;
    height: 438px;
    background: #30343b;
    border-radius: 4px 0 0 4px;
}

.popManagerInfoLeft ul {
    padding: 7px 20px;
    margin: 0;
    list-style: none;
}

.popManagerInfoLeft ul li {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #1c222d;
}

.popManagerInfoLeft ul li a {
    display: block;
    position: relative;
    padding: 19px 0 19px 7px;
    color: #909eb7;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -.015em;
}

.popManagerInfoLeft ul li a:hover,
.popManagerInfoLeft ul li.on a {
    color: #2fb3ff;
    font-weight: 500;
}

.popManagerInfoLeft ul li a:hover::after,
.popManagerInfoLeft ul li.on a:after {
    content: "";
    position: absolute;
    top: 50%;
    right: -35px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    background: url(../../images/newIho/menu_on.png) 50% 50% no-repeat;
}

.popManagerInfoRight {
    margin-left: 134px;
    padding: 32px 29px 29px;
}

.popManagerInfoRight h1 {
    color: #121212;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3em;
    margin: 0 0 25px;
}

.popManagerInfoRight table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    border-top: 1px solid #dfdfdf;
}

.popManagerInfoRight table th {
    height: 30px;
    text-align: left;
    font-size: 12px;
    font-weight: 400;
    color: #666;
    line-height: 18px;
    letter-spacing: -.015em;
    border-bottom: 1px solid #dfdfdf;
}

.popManagerInfoRight table td {
    font-size: 12px;
    color: #999;
    line-height: 18px;
    letter-spacing: -.015em;
    border-bottom: 1px solid #dfdfdf;
}

.popManagerInfoRight table td .link {
    color: #2fb3ff;
    text-decoration: underline;
}

.popManagerInfoRight .buttons {
    margin-top: 20px;
    text-align: center;
}

.popManagerManual {
    padding: 0;
    margin: 0;
    min-height: 267px;
    list-style: none;
    border-top: 1px solid #dfdfdf;
}

.popManagerManual li {
    position: relative;
    padding: 6px 45px 6px 0;
    margin: 0;
    font-size: 12px;
    color: #999;
    line-height: 14px;
    letter-spacing: -.015em;
    border-bottom: 1px solid #dfdfdf;
}

.popManagerManual li .pdf {
    color: #000;
}

.popManagerManual li .link {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -7px;
    color: #2fb3ff;
    text-decoration: underline;
}

/* 로그인 팝업레이어 */
.popLoginWrap {
    position: relative;
    width: 540px;
    height: 355px;
    background: #30343b;
    border-radius: 4px;
}

.popLoginWrap .popClose {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    font-size: 0;
    line-height: 0;
    text-indent: -999em;
    background: url(../../images/newIho/icon_close.png) 50% 50% no-repeat;
    overflow: hidden;
}

.popLoginInner {
    padding: 35px 40px;
}

.loginTopName {
    margin: 0 0 18px;
    color: #fff;
    font-size: 30px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: -.03em;
}

.loginTopName b {
    font-weight: 500;
}

.loginTopText {
    margin: 0 0 18px;
    color: #909eb7;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -.015em;
}

.loginTopText strong {
    font-weight: 500;
    font-size: 16px;
}

.loginForm {
    position: relative;
    height: 87px;
    padding: 0 145px 0 0;
    margin: 0 0 28px;
    border-bottom: 1px solid #41464f;
}

.loginForm .group {
    position: relative;
    padding-left: 96px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    overflow: hidden;
}

.loginForm .group label {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 20px;
    color: #fff;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: -.015em;
    background-position: 0 50%;
    background-repeat: no-repeat;
}

.loginForm .group .icon_user {
    background-image: url(../../images/newIho/login_icon_user.png);
}

.loginForm .group .icon_pw {
    background-image: url(../../images/newIho/login_icon_pw.png);
}

.loginForm .group input {
    width: 100%;
    padding: 3px 8px;
    border: 0;
    height: 26px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 3px;
    background: #fff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.loginForm .submit {
    position: absolute;
    top: 0;
    right: 0;
    width: 135px;
    height: 60px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: 0;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(252, 247, 192, .26);
    background: #3babec;
    background: -webkit-linear-gradient(top, #4ebeff 0%, #2899d9 100%);
    background: -moz-linear-gradient(top, #4ebeff 0%, #2899d9 100%);
    background: -ms-linear-gradient(top, #4ebeff 0%, #2899d9 100%);
    background: -o-linear-gradient(top, #4ebeff 0%, #2899d9 100%);
    background: linear-gradient(top, #4ebeff 0%, #2899d9 100%);
    overflow: hidden;
}

.loginForm .submit .ico {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: -.2em 3px 0 0;
    background: url(../../images/newIho/login_icon_btn.png) 50% 50% no-repeat;
}

.loginBottomText h3 {
    float: left;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: -.015em;
}

.loginBottomText p {
    margin-left: 127px;
    color: #909eb7;
    font-size: 12px;
    line-height: 18px;
}

.loginBottomText .underline {
    color: #2fb3ff;
    text-decoration: underline;
}

.olImageLoadError {
    display: none;
}

.versionbtn {
    background: white;
    color: gray;
    font: 100 12px Arial;
    padding: 0 5px;
    border: 1px solid gray;
    border-radius: 10px;
    margin: 0 0 0 3px;
}

.versionbtn:hover {
    background: gray;
    color: white;
    font: 100 12px Arial;
    padding: 0 5px;
    border: 1px solid gray;
    border-radius: 10px;
    margin: 0 0 0 3px;
}

.help_icon {
    position: absolute;
    width: 20px;
    height: 20px;
    /* margin: -18px 0px 0px 128px; <- 기존코드 */
    right: 8px;
    top: 30%;
    background: url(../../images/newIho/help_icon1.png) 0 50% no-repeat;
    background-size: 20px;
}

.help_icon:hover {
    position: absolute;
    width: 20px;
    height: 20px;
    /* margin: -18px 0px 0px 128px; <- 기존코드 */
    right: 8px;
    top: 30%;
    background: url(../../images/newIho/help_icon2.png) 0 50% no-repeat;
    background-size: 20px;
}

.arrow-css {
    float: right;
    width: 15px;
    height: 10px;
    background: url(../../images/newIho/btn_down_off.png) 0 50% no-repeat;
}

.arrow-css.on {
    float: right;
    width: 15px;
    height: 10px;
    background: url(../../images/newIho/btn_up_off.png) 0 50% no-repeat;
}

/*layer popup */
/*팝업 박스*/
.popup_box {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 750px;
    transform: translate(-50%, -50%);
    z-index: 1002;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.35);
}

/*컨텐츠 영역 시작*/
.popup_box .popup_cont {
    overflow: auto;
    width: 750px;
    height: 100%;
    line-height: 2.0rem;
    font-size: 18px;
    word-break: break-word;
}

.popup_box .popup_cont h2 {
    padding: 15px 0;
    color: #333;
    margin: 0;
    text-align: center;
}

.popup_box .popup_cont p {
    border-top: 1px solid #666;
    padding-top: 30px;
}
/*컨텐츠 영역 끝*/

/*버튼영역 시작*/
.popup_box .popup_btn {
    display: table;
    width: 100%;
    height: 70px;
    background: #5d5d5d;
    word-break: break-word;
}

.popup_box .popup_btn a {
    position: relative;
    display: table-cell;
    height: 70px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    background: #102c5c;
}

.popup_box .popup_btn a:before {
    content: '';
    display: block;
    position: absolute;
    top: 26px;
    right: 29px;
    width: 1px;
    height: 21px;
    background: #fff;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.popup_box .popup_btn a:after {
    content: '';
    display: block;
    position: absolute;
    top: 26px;
    right: 29px;
    width: 1px;
    height: 21px;
    background: #fff;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.popup_box .popup_btn a.close_day {
    background: #5d5d5d;
}

.popup_box .popup_btn a.close_day:before,
.popup_box .popup_btn a.close_day:after {
    display: none;
}
/*버튼영역 끝*/

/*오버레이 뒷배경*/
.popup_overlay {
    position: fixed;
    top: 0px;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.5);
}

/*emodenet, gmtds tooltip*/
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 110px;
    background-color: white;
    color: #666;
    text-align: center;
    border: solid 1px;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    top: -30px;
    left: -42px;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

#fileUploadForm {
    overflow-y: auto;
    height: 320px;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#fileUploadForm::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera*/
}

#shipToggle {
    margin-top: 8px;
}

#mousePosition {
    background-color: #ffffff;
    color: #000000;
    opacity: 0.7;
    position: absolute;
    z-index: 1000000;
    right: 5px;
    bottom: 5px;
    width: 160px;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
}

#dbVersion {
    position: absolute;
    z-index: 100;
    right: 5px;
    font-weight: bold;
    bottom: 40px;
    font-size: 11px;
}

#dbVersionTitle {
    width: 80px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    z-index: 1000000;
    font-weight: bold;
    opacity: 0.7;
}

.dbVersionTxt {
    padding-left: 12px;
    background-color: #ffffff;
    color: #000000;
    opacity: 0.7;
}

.range-month-div {
    display: inline-block;
    margin-bottom: 8px;
}


/* exchangeset upload */
.progressContainer {
    position: relative;
    height: 30px;
    /*
	width:100%;
	padding:20px 10px;
	border: 1px solid #eee;
	margin-top: 15px;
	background:#000;
	height:20px;
	*/
}

.progress {
    position: absolute;
    width: calc(100% - 20px);
    height: 30px;
    border-radius: 10px;
    /*height: 20px;*/
}

.progressTotal {
    background: white;
    border: 2px solid #2B70F4;
    font-weight: 300;
    font-size: 12px;
    text-align: center;
}

.progressTotal span {
    line-height: 30px;
    vertical-align: middle;
}

.progressPercent {
    font-size: 12px;
    text-align: center;
    height: 32px;
}

.progressPercent span {
    line-height: 32px;
    vertical-align: middle;
}

.cnpUploadMenuTab {
    margin-bottom: 15px;
}

.cnpUploadMenuTab ul {
    display: table;
    width: 100%;
    height: 48px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cnpUploadMenuTab ul:after {
    content: " ";
    display: block;
    clear: both;
}

.cnpUploadMenuTab ul li {
    display: table-cell;
    position: relative;
    width: 25%;
    height: 100%;
    color: #666;
    font-size: 13px;
    background: #f4f4f4;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid #ccc;
    border-right: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    cursor: pointer;
}

.cnpUploadMenuTab ul li span {
    position: absolute;
    top: -9px;
    right: 5px;
    min-width: 15px;
    padding: 0 5px;
    color: #1766ff;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    line-height: 16px;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    z-index: 2;
}

.cnpUploadMenuTab ul li:first-child {
    border-left: 1px solid #ccc;
    border-radius: 3px 0 0 0;
}

.cnpUploadMenuTab ul li:last-child {
    border-right-color: #ccc;
    border-radius: 0 3px 0 0;
}

.cnpUploadMenuTab ul li.selected {
    color: #2b70f4;
    background: #fff;
    font-weight: 700;
    border-bottom: 0;
}

.cnpUploadMenuTab ul li.selected:after {
    content: " ";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    background: #2b70f4;
}

.cnpUploadMenuTab ul li.selected span {
    background: #1766ff;
    border-color: #1766ff;
    color: #fff;
}

.cnpUploadMenuTab.col-x2 ul li {
    width: 50%;
}

.conver-mb-20 {
    margin-bottom: 20px;
}

.convert-product {
    width: 100%;
}

.convert-label {
    font-size: 15px;
    font-weight: 400;
}

#convertingProduct {
    width: 58%;
    margin-left: 22px;
    cursor: pointer;
}

.fileForm {
    cursor: pointer;
}

.convert_file_div {
    width: 100%;
    display: inline-block;
    line-height: 33px;
}

.convert_file_name {
    height: 28px;
    display: block;
    float: left;
    width: 58%;
    border: 1px solid;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
}

.convert_file_name span {
    padding-left: 3px;
}

.convert_file_img {
    padding: 0 0 0 2px;
    width: 33px;
    margin-left: 15px;
    vertical-align: middle;
    cursor: pointer;
}

.convert_file_input {
    font-size: 29px;
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    cursor: pointer;
}

#btnConvert {
    width: 23%;
    margin-left: 13px;
    border-radius: 15px;
}

#btnUpload {
    margin-left: 13px;
}

#cnpFileName {
    height: 28px;
    display: block;
    float: left;
    width: 55%;
    cursor: pointer;
    margin-left: 10px;
    border: 1px solid;
    border-radius: 5px;
}

.div-meta-down {
    display: flex;
    /* justify-content: flex-start; */
}

/* edit 체크 */
.blank-tab {
    border: 2px solid red;
}


/* 차트 오버레이 팝업 */
.popup-overlay {
    position: relative;
    background-color: #fff;
    border: 3px solid #333;
    border-radius: 4px;
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #333;
    max-width: 200px;
    line-height: 1.4;
}

/* 차트 오버레이 미니 팝업 닫기 버튼 */
.popup-overlay .popup-closer {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #333;
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 10;
}
.popup-overlay .popup-closer:hover {
    background-color: #1766FF;
}

/* 차트 상세 팝업 닫기 버튼 */
.popup-exit {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #333;
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 10;
}

.popup-exit:hover {
    background-color: #1766FF;
}

/* 사용자 마커 그리기로 검색된 feature hover했을 때 간단 팝업 */
.detail-tooltip {
    display: none;
    background: #FFFFFF;
    color: black;
    border: 1px solid #1766FF;
    padding: 10px 10px;
    border-radius: 2px;
    font-size: 10px;
    width: 120px;
    height: 30px;
    min-width: 100px;
    min-height: 20px;
    white-space: pre-wrap;
    position: absolute;
    pointer-events: auto;
}

/* 차트 상세보기 */
.chartDtlPopup,
.n_chartDtlPopup,
.m_chartDtlPopup {
    z-index: 999 !important;
}

/* 버튼 비활성화 - 250625 */
.disabled-button {
    opacity: 0.5;
    cursor: default;
    /*pointer-events: none;*/
}

    /* disabled 하면 자동 생성되는 검은 네모 -> 안보이게*/
    .sp-replacer.sp-disabled {
        display: none;
    }
/* 버튼 비활성화 끝- 250625 */