@charset "utf-8";
@import "../bootstrap/component.css";


/**************** font */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 200;
    src: local('Noto Sans Light'),
    url(../../fonts/NotoSans-Light.woff) format('woff');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans Light')
    url(../../fonts/NotoSans-Light.woff) format('woff');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans Regular'),
    url(../../fonts/NotoSans-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Noto Sans Medium'),
    url(../../fonts/NotoSans-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Noto Sans Bold'),
    url(../../fonts/NotoSans-Bold.woff) format('woff');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 900;
    src: local('Noto Sans Black')
    url(../../fonts/NotoSans-Black.woff) format('woff');
}



/**************** reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, button, select, input, hr {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    box-sizing: border-box;
    outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption {
    visibility: hidden;
    overflow: hidden;
    width:0;
    height: 0;
    font-size: 0;
    line-height: 0;
}

nav,ol, ul, li {
    list-style: none;
}

img {
    vertical-align: top;
}

hr {
    display: block;
    height: 2px;
}

button {
    cursor: pointer;
    vertical-align: middle;
}

strong {
    font-weight: 600;
}

/**************** common */
html, body {
    width: 100%;
    height: 100%;
    min-width: 1024px;
}

body,
h1,h2,h3,h4,h5,h6,
input,
select,
textarea,
button, 
a {
    font-family: "Noto Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: #333;
}

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

a:visited {
    color: #333;
}

h2 {
    font-size: 24px;
    font-weight: 600;
}

h3 {
    font-size: 15px;
}

select { 
    border-radius: 0;     
    color: white;
    background: url(../../image/sctArrow_gray.png) calc(100% - 5px) center no-repeat;
    padding: 2px 24px 2px 11px;
    -webkit-appearance: none;
    -moz-appearance: none; 
    appearance: none;    
}

::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background: transparent;
}
::-webkit-scrollbar-track{
/*     background-color: #3C558B; */
}
::-webkit-scrollbar-thumb {
    background-color: #183463;
}

input {
    color: #fff;
}

input[type="text"]::placeholder {
    color: #355EAE;
    font-weight: 600;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    transition: background-color 5000s ease-in-out 0s;
}

/**************** layout */
#wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

#header {
    width: 100%;
    height: 68px;
    position: relative;
    z-index: 101;
    background-color: #173D9A;
    box-shadow: 0 3px 9px rgba(0,0,0,.4);
}

#topInfoPopup {
    display: none;
    width: 70%;
    height: 250px;
    position: absolute;
    z-index: 9990;
    top: 50px;
    left: 50%;
    margin-left: -30%; 
    background-color: rgba(0,0,0,.5);
}

#rightInfoPopup {
    display: none;
    float: left;
    width: 300px;
    height: calc( 100% - 200px );
}

#bottomInfoPopup {
    display: none;
    width: 100%;
    height: 200px;
}

#contentContainer {
    background-color: #666;
    width: 100%;
    height: calc( 100% - 68px );
    position: relative;
}

.content-viewport {
    float: left;   
    width: 100%;
    height: 100%;
    /* width: calc( 100% - 300px );
    height: calc( 100% - 200px ); */
}

.map-container {    
    width: 100%;
    height: 100%;
    float: left;
    position: relative;
    overflow: hidden;
}

.map-container .map-viewport {
    background-color: #999;
    width: 100%;
    height: 100%;
    background-size: cover;
	background-size: 181px 181px;
	background-repeat: repeat;
}

.map-container .nav-wrap {
    width: 232px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -232px;
}

.map-container .nav-wrap .icon-menu {
    background-color: rgba(0,0,0,.5);
    width: 36px;
    position: absolute;
    top: 15px;
    left: 248px;
    border-radius: 100px;
    padding: 2px 2px;
}

.map-container .nav-wrap .icon-menu ul {
    display: inline-block;
    position: relative;
    z-index: 999;
}

.map-container .scale-wrap {
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 35px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.right-side-wrap, .right-side-wrapDual{
    position: absolute;
    top: 15px;
    right: 15px;
    text-align: right;
}

.loading-area{
	float: left;
}
/**************** header */
/* layout */
#header:after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 100%;
    vertical-align: middle;
}

.title-wrap,
.center-wrap,
.right-wrap {
    display: inline-block;
    vertical-align: middle;
}

.title-wrap {  
    color: #fff;
    font-size: 24px;
    padding: 0 35px 0 17px;
}

.center-wrap{
    height: 100%;
   	float: left;
   	width: 100%;
   	position: absolute;
   	z-index: 500;
/*     text-align: center; */
}

.right-wrap {
	position : absolute;
    float: right;
    width: 22%;
    max-width: 421px;
    height: 100%;
    text-align: right;
    right:0px;
}

/* .title-wrap */
.title-wrap span {
    display: inline-block;
    vertical-align: middle;
}

.title-wrap span.logo {
    padding-right: 17px;
}

.title-wrap span.logo-title {
    font-size: 19px;
}

/* header-menu */
.header-menu {
    height: 100%;
    border: 1px solid #516EB4;
    border-top: 0;
    border-bottom: 0;
}
.header-menu::after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 100%;
    vertical-align: middle;
}

.header-menu > li {
    display: inline-block;
    height: 100%;
    position: relative;
    padding: 0 35px; 
    margin-right: -3px;
    vertical-align: middle;
    border-right: 1px solid #516EB4 ;
}

.header-menu > li:last-child {
    padding: 0 11px 0 20px;
}

.header-menu > li:last-child {
    border-right: 0;
}

.header-menu > li:after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 100%;
    vertical-align: middle;
}

.header-menu > li > a,
.header-menu .btn-change-mode {
    width: auto;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    vertical-align: middle;
}

.header-menu .btn-change-mode span{    
    font-size: 16px;
    font-weight: 400;
}

.header-menu .btn-change-mode .switch-slider {
    background-color: #00186B;
}

.header-menu .btn-change-mode .switch-slider::before { 
    background-color: #fff;
}

.header-menu > li > a span{
    padding-left: 25px;
}

.header-menu > li:nth-child(1) > a{
    background: url("../../image/h_ico_go-to.png") 0 6px no-repeat;
}

.header-menu > li:nth-child(2) > a{
    background: url("../../image/h_ico_s100online.png") 0 6px no-repeat;
}

.header-menu > li:nth-child(3) > label{
    background: url("../../image/h_ico_dualMap.png") 0 center no-repeat;
    padding: 0 55px 0 40px;
    text-align: left;
}

.header-menu > li:nth-child(3) > label .switch-slider{    
    width: 42px;
    height: 23px;
    top: 50%;
    bottom: auto;
    left: auto;
    right: 0;
    margin-top: -10px;
}

.header-menu > li:nth-child(3) > label .switch-slider:before{    
    width: 17px;
    height: 17px;
    bottom: 3px;
    left: 3px;
}

.header-menu ul li:hover {
    border-color: #75AEF2;
}

.header-menu .depth {   
    display: none;   
    width: 246px;
    position: absolute;
    z-index: 100;
}

.view-style {
    background-color: #15191F;
    border-radius: 8px;
    border: 1px solid #5D6C7D;
}

.header-menu .depth.second {
    top: 63px;
    left: 50%;
    margin-left: -123px;
}

.header-menu .depth.second  li {
    width: 100%;
    display: inline-block;
    padding: 0 20px;
}

.header-menu .depth.second > li {
    position: relative;
}

.header-menu .depth.second li a {    
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 13px 0;
    color: #AAACAE;
    border-bottom: 1px solid rgba(112, 112, 112, .2);
}

.header-menu .depth.second li:hover > a {
    color: #75AEF2;
    border-bottom: 1px solid #75AEF2;
}

.header-menu .depth.second li:hover {
    color: #75AEF2;
}

.header-menu .depth.third {
    height: 150px;
    top: 0;
    left: 245px;
    padding-left: 5px;
}

.header-menu .depth.third .view-style {
    height: 100%;
    padding: 5px;
}

.header-menu .depth.third ul {
    display: inline-block;
    overflow-y: auto;
    height: 100%;
}

.header-menu .depth.third li a {   
    padding: 10px 0;
}

/* right-wrap ****************/
/* header-search*/
.header-search {
    width: 71%;
    max-width: 371px;
    margin-right: -4px;
}

.header-search-list .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.header-search-list .select2-dropdown.select2-dropdown--below{
    position: relative;
    z-index: 9999999;
}

.header-search-list .select2-results__option > div{
    display: inline-block;
    height: 100%;    
    vertical-align: middle;
}

.header-search-list .list-img {
    width: 10%;
    padding-right: 26px;
    margin-top: -12px;
}

.header-search-list .list-text {
    width: 86%;
    font-size: 11px;
    color: #999;
    letter-spacing: 1px;
}

.header-search-list .list-text .title {
    font-weight: 700;
    font-size: 16px;
    color: #666;
    padding-bottom: 2px;
    letter-spacing: 0.5px;
}

.watermark {
    display: inline-block;
    width: 27%;
    max-width: 108px;
    height: 100%;
    vertical-align: middle;
    background-color: #00186B;
    text-align: center;
}

.watermark .link-disclaimer {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: #75AEF2 !important;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 0 7px;
}

.watermark .img-wrap {
    display: inline-block;
    width: calc( 50% - 6px );
    text-align: center;
}

/**************** nav-wrap  */
.menu-contents {    
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    background-color: #183463;
}

/* icon-menu */
.icon-menu li {
    height: 36px;
    margin-bottom: 10px;
}

.icon-menu li:last-child {
    margin-bottom: 0;
    height: calc( 100% + 6px);
}

.icon-menu li a {
    display: inline-block;
    width: auto;
    position: relative;
    white-space: nowrap;
    color: #fff;
}

.icon-menu li a div,
.icon-menu li a div span{
    display: inline-block;
    position: relative;    
    z-index: 2;
    vertical-align: middle;
}

.icon-menu li a .icon-img {
    width: 32px;
    height: 32px;
    border-radius: 100px;
    text-align: center;
}

.icon-menu li a .icon-img:after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 100%;
    vertical-align: middle;
}

.icon-menu li a div span{
    /* font-size: 0; */
    display: inline-block;    
    /* text-indent: -99999px; */
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.icon-menu li a .product-list span{
    background-image: url('../../image/ico_Product-List.png');
}

.icon-menu li a .interoperability span{
    background-image: url('../../image/ico_Interoperability.png');
}

.icon-menu li a .icon-img.portrayal-harmonization span {
    background-image: url('../../image/ico_Lab.png');
}

.icon-menu li a .icon-img.ais span {
    background-image: url('../../image/ico_AIS.png');
}

.icon-menu li a .icon-img.vector-plot span {
    background-image: url('../../image/ico_vector-Plot.png');
}

.icon-menu li a .icon-img.route-planning span {
    background-image: url('../../image/ico_Route-Planning.png');
}

.icon-menu li a .icon-img.go-to-area span {
    background-image: url('../../image/ico_gotoArea.png');
}

.icon-menu li a .icon-img.s57-Electronic-Chart span {
    background-image: url('../../image/ico_S-57-Electronic-Chart.png');
}

.icon-menu li a .icon-img.setting span {
    background-image: url('../../image/ico_Setting.png');
}

.icon-menu li a.btn-menu-toggle .icon-img span {
    background-image: url('../../image/ico_Show-Menu.png');
    background-color: #15191F;
    border: 1px solid #5D6C7D;
    border-radius: 100px;
}

.icon-menu li a.btn-menu-toggle .icon-img.active span {
    background-image: url('../../image/ico_Hide-Menu.png');
}



.icon-menu li a.btn-menu-toggle .icon-img.active span {
    background-image: url('../../image/ico_Hide-Menu.png');z
}


.icon-menu li a .menu-title {
    display: none;
    padding: 0 15px 0 0;
    color: #fff;
    text-shadow: 0 0 4px #000;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.icon-menu li a.active:after,
.icon-menu li a:hover:after {
    display: inline-block;
    content: "";
    width: 100%;
    height: 36px;
    position: absolute;
    top: 50%;
    left: -3px;
    z-index: 1;
    /* padding: 1px 5px; */
    border-radius: 100px;
    background-color: #fff;
    margin-top: -18px;
}

.icon-menu li a.active .icon-img ,
.icon-menu li a:hover .icon-img {
    background-color: #FFBE3B;
}

.icon-menu li a.active .menu-title ,
.icon-menu li a:hover .menu-title {
    font-size: 14px;
    font-weight: 800;
    color: rgba(0,0,0,.8);
    text-shadow: none;
    letter-spacing: 0;
}

/* panel-box s102 */
.panel-box.s102 .panel-dropdown,
.panel-box.s102 .img-rainbow {
    vertical-align: top;
}

.panel-box.s102 .img-rainbow {
    display: inline-block;
    width: 50%;
    height: 44px;
    margin-right: -3px;
    padding-left: 1px;
}

.panel-box.s102 .img-rainbow img {
    width: 100%;
    height: 100%;
}

/* panel-range-slider */
.panel-range-slider {
    padding-top: 4px;
}

.panel-range-slider .btn-wrap {
    display: inline-block;
    width: 82px;
}

.panel-range-slider .btn-blue {
    font-size: 0;
    text-indent: -99999px;
    width: 39px;
    height: 44px;
}

.panel-range-slider .btn-blue.play {
    font-size: 0;
    text-indent: -99999px;
    width: 39px;
    height: 44px;
}

.panel-range-slider .btn-blue.download {
    padding-top: 4px;
}

.panel-range-slider .range-slider {
    display: inline-block;
    width: 109px; /*122*/
    height: 44px;
    vertical-align: middle;
    padding: 22px 0 0 10px;
}

/* time-play-slider */
.time-play-slider {
    display: none;
    position: absolute;
    top: 15px;
    width: 550px;
    right: 80px;
}

.time-play-slider .slider-top {
    width: 100%;
    height: 50px;
    padding: 5px 13px;
    border-bottom: 1px solid #5D6C7D ;
}

.time-play-slider .slider-top > div {
    float: left;
}

.time-play-slider .slider-top .slider-select {
    height: 100%;
}

.time-play-slider .slider-top .select-transparant {
    margin-left: 10px;
}

.time-play-slider .slider-top .present-value {
    float: right;
    height: 100%;
    padding-top: 2px;
    letter-spacing: 1px;
    font-size: 11px;
}

.time-play-slider .slider-top .present-value span {
/*     font-weight: 300; */
}

.time-play-slider .slider-top .present-value select {
	width: 55px;
}

.time-play-slider .slider-btn {
    height: 100%;
}

.time-play-slider .slider-btn button{
    width: 24px;
    height: 100%;
    font-size: 0;
    text-indent: -99999px;
}

.time-play-slider .slider-content {
    padding: 16px 14px 0;
    height: 52px;
}

.time-play-slider .slider-content .slider-bar {    
    padding: 0 16px 0 12px;
}

.time-play-slider .time-slide-value:after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 100%;
    vertical-align: middle;
}

.time-play-slider .slider-timeline {
    position: relative;
    margin-top: 10px;
}

.time-play-slider .slider-timeline ul {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 10px;
    width: 100%;
}

.time-play-slider .slider-timeline li {
    float: left;
    font-size: 11px;
    padding-right: 15.5px;
}

.time-play-slider .slider-timeline li:last-child {
    padding-right: 0;
}

.time-play-slider .btn-close {
    position: absolute;
    top: 0;
    left: -40px;
}

.time-play-slider .present-pointer {
    width: 5px;
    height: 4px;
    background-color: #FF0000;
    position: absolute;
    top: 0;
    left: 30%;
    z-index: 2;
}

.time-play-slider .slider-select select {
    letter-spacing: 0.5px;
}

.time-play-slider .basic-selectbox.transparent {    
    display: inline-block;
    height: 100%;
}

.time-play-slider select option {
	background: rgba(39,45,55,0.8);
}

/**************** right-side-wrap  */
/* location-info */
.location-info {
    width: 146px;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
}

.location-info li {
    padding: 11px 0 6px;
    letter-spacing: 0.5px;
}

.location-info li:first-child {
    padding: 0 0 8px;
    border-bottom: 1px solid #AFB5B9;
    color: #AFB5B9;
    font-size: 11px;
    letter-spacing: 0;
}

.location-info li:last-child {
    padding-top: 0;
}

/* zoom-wrap */
.zoom-wrap {
    display: flex;
    /* width: 35px; */
    height: 108px;
    margin: 20px 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.zoom-wrap .btn-darkgray {
    width: 20px;
    height: 20px;    
    border-radius: 5px;
    font-size: 0;
    text-indent: -999999px;
    background-repeat: no-repeat;    
    background-position: center;
}

.zoom-wrap .zoom-bar {    
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    padding-bottom: 46px;
}

.zoom-wrap .btn-darkgray.zoom-in {
    background-image: url("../../image/ico_zoomIn.png");
}

.zoom-wrap .btn-darkgray.zoom-out {
    background-image: url("../../image/ico_zoomOut.png");
}

/**************** range slider */
.zoom-wrap .zoom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 4px;
    background: rgba(0,0,0,.4);
    outline: none;
    -webkit-transition: .2s;
    transition: opacity .2s; 
    border-radius: 5px;
    transform: rotate(180deg);
}

.zoom-wrap .zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    height: 14px;
    cursor: pointer;
    border-radius: 5px;
    background: #fff;
}

.zoom-wrap .zoom-slider::-moz-range-thumb {
    width: 6px;
    height: 14px;
    cursor: pointer;
    border: none;
    background: #fff;
}

/* sync button */
.right-side-wrap .btn-darkgray.sync {
    font-size: 0;
    text-indent: -999999px;
    background-repeat: no-repeat;    
    background-position: center;
    width: 40px;
    height: 40px;
    margin-right: -5px;
    border-radius: 100px;
}

/**************** scale-wrap  */
.scale-wrap {
    padding: 0 18px;
}

.scale-wrap > div {
    display: inline-block;
    vertical-align: middle;
}

.scale-wrap:after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 100%;
    vertical-align: middle;
}

/* select-wrap */
.scale-wrap .basic-selectbox .select2-container {
    height: 20px;
}

.scale-wrap .basic-selectbox .select2-container .select2-selection--single .select2-selection__rendered {
    display: inline-block;
    width: 108px;
    font-size: 11px;
}

/* inner-scale */
.inner-scale {
    position: relative;
    padding: 0 15px 0px;
    margin-left: 10px;
}

.inner-scale:after {
    display: inline-block;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    border: 1px solid #fff;
    border-top: none;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;   
}

.inner-scale span {
    display: inline-block;
    margin-bottom: 5px;
}


/* s101 간격 조정 */
/* .panel-box.s101 .panel-contents > .basic-selectbox:last-child { */
/*     padding-top: 10px; */
/* } */

/* panel setting */
#panelSetting .box-black {
    margin-top: 0;
}

.display-mode .box-black {
    padding: 0;
}

.display-mode .type-of-mode,
.display-mode .box-contents > ul{
    display: inline-block;
    width: 100%;
    padding: 12.5px 10px;
}

.display-mode .type-of-mode {
    border-bottom: 1px solid #465365;
    height: 65px;
}

.display-mode .type-of-mode button{
    width: calc(33.3333% - 3px);
    height: 100%;
    font-size: 0;
    text-indent: -99999px;
    background-position: center;
    background-repeat: no-repeat;
}

.display-mode .type-of-mode button.day{
    background-image: url("../../image/mode_day.png");
}
.display-mode .type-of-mode button.dusk{
    background-image: url("../../image/mode_dusk.png");
}
.display-mode .type-of-mode button.night{
    background-image: url("../../image/mode_night.png");
}

.display-mode .type-of-mode button.day.active,
.display-mode .type-of-mode button.day:hover{
    background-image: url("../../image/mode_day_on.png");
}
.display-mode .type-of-mode button.dusk.active,
.display-mode .type-of-mode button.dusk:hover{
    background-image: url("../../image/mode_dusk_on.png");
}
.display-mode .type-of-mode button.night.active,
.display-mode .type-of-mode button.night:hover{
    background-image: url("../../image/mode_night_on.png");
}

.panel-box.depths .box-black li .label {
    float: left;
}

.panel-box.depths .box-black li .input-underline {
    width: 47px;
    text-align: right;
    float: right;
}

.panel-box.depths .btn-blue {
    width: 100%;
    height: 44px;
    margin-top: 5px;
}

/**************** Route Planning  */
.panel-list.route-planning .panel-box {
    padding: 0 0 8px;
}

.panel-list.route-planning .panel-contents {
    padding-top: 0;
}

.panel-list.route-planning .panel-header {
    padding: 0 10px; 
}

.panel-list.route-planning .tab-menu {
    height: 39px;
}

.panel-list.route-planning .tab-menu a {
    float: left;
    width: 50%;
    height: 100%;
    text-align: center;
    background-color: #233E70;
}

.panel-list.route-planning .tab-menu a:after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 100%;
    vertical-align: middle;
}

.panel-list.route-planning .tab-menu a:hover,
.panel-list.route-planning .tab-menu a.active {
    background-color: #3C558B;
}

/* tab-paenl */
.panel-list.route-planning  .route-option{
    padding: 10px 0;
}

.panel-list.route-planning .route-option .btn-wrap.add-reset {
    padding: 5px 10px 0;
}

.panel-list.route-planning .route-option .btn-wrap.add-reset button{
    width: calc(50%  - 2px);
    height: 32px;
    padding-left: 30px;
    background-repeat: no-repeat;
}

.panel-list.route-planning .route-option .btn-wrap.add-reset button.add{
    background-image: url("../../image/add.png");
    background-position: 29px center;
}
.panel-list.route-planning .route-option .btn-wrap.add-reset button.reset{
    background-image: url("../../image/reset.png");
    background-position: 24px center;
}

.panel-list.route-planning .route-title-wrap {
    padding: 8px 0 4px 52px;
}

.panel-list.route-planning .route-title-wrap span {
    font-size: 12px;
}

.panel-list.route-planning .route-title-wrap span:first-child {
    padding-right: 19px;
}

.panel-list.route-planning .route-list .route-item {
    padding-left: 6px;
}

.panel-list.route-planning .route-list .route-item {
    width: 100%;
}

.panel-list.route-planning .route-list .route-item .item-bottom-wrap {
    padding: 5px 38px 5px 0;
    font-size: 11px;
    letter-spacing: 0.8px;
}

.panel-list.route-planning .route-list .route-item .item-bottom-wrap span {
    float: right;
    height: 20px;
    line-height: 20px;
    padding-right: 5px;
}

.panel-list.route-planning .route-list .route-item .item-bottom-wrap .btn-blue.goto {    
    float: right;
    width: 20px;
    height: 20px;
    font-size: 0;
    text-indent: -99999px;
    background: url("../../image/ico_goto.png") center no-repeat;
    border: 0 !important;
    vertical-align: middle;
}

.panel-list.route-planning .route-list .route-item .item-wrap {
    display: inline-block;
    width: calc(100% - 1px);
    height: 32px;
    vertical-align: middle;
}

.panel-list.route-planning .route-list .route-item .item-wrap > div {
    float: left;
    height: 100%;
}

.panel-list.route-planning .route-list .route-item .btn-wrap {
    height: 100%;
}

.panel-list.route-planning .route-list .route-item .btn-wrap.move {
    width: 18px;
}

.panel-list.route-planning .route-list .route-item .btn-wrap.move button {
    width: 100%;
    height: 100%;
    font-size: 0;
    text-indent: -99999px;
    background: url("../../image/move.png") center no-repeat;
    cursor: move;
}

.panel-list.route-planning .route-list .route-item .btn-wrap.delete {
    width: 20px;
}

.panel-list.route-planning .route-list .route-item .btn-blue.delete {
    width: 20px;
    height: 20px;
    margin: 6px 0 0 5px;
    vertical-align: middle;
    border-radius: 100px !important;
    font-size: 0;
    text-indent: -99999px;
    background: url("../../image/delete.png") center no-repeat;
}


.panel-list.route-planning .route-list .route-item .btn-wrap.delete:after {
    display: inline-block;
    content: "";
    width: 1px;
    height: 100%;
    vertical-align: middle;
}

.panel-list.route-planning .route-list .route-item .route-info ul {
    display: inline-block;
    width: 172px;
    height: 100%;
    background-color: #47679F;
    border-radius: 4px;
    padding: 3px 0;
}

.panel-list.route-planning .route-list .route-item .route-info li {
    float: left;
    height: 100%;
    text-align: center;
    border-right: 1px solid #3C558B;
}

.panel-list.route-planning .route-list .route-item .route-info li:nth-child(1) {
    width: 20px;
    line-height: 27px;
    color: #91A4C5;
}

.panel-list.route-planning .route-list .route-item .route-info li:nth-child(2) {
    width: 77px;
}

.panel-list.route-planning .route-list .route-item .route-info li:nth-child(3) {
    width: 75px;
    border-right: 0;
}

.panel-list.route-planning .route-list .route-item .route-info li input[type="text"] {
    width: 75px;
    width: 100%;
    height: 100%;
    padding: 0 5px;
    text-align: center;
}

.panel-list.route-planning .total-wrap {
    border: 1px solid #47679F;
    padding: 10px;
    text-align: right;
}

.panel-list.route-planning .total-wrap > div{
    display: inline-block;
    vertical-align: middle;
}

.panel-list.route-planning .total-wrap .title {
    font-size: 16px;
    padding-right: 8px;
}

.panel-list.route-planning .total-wrap .basic-selectbox.dark{
    width: 65px;
}

/* simulating */
.optimal-route {
    display: none;
}

.optimal-route .route-top-wrap {
    padding: 10px;
}

.optimal-route .route-top-wrap h3 {
    padding-bottom: 10px;
}

.optimal-route .route-top-wrap > .basic-selectbox.dark:last-child{
    margin-top: 8px;
}

.panel-list.route-planning .optimal-route .route-option {
    padding: 0 0 10px 0;
}

.optimal-route .route-bottom-wrap {
    display: none;
}

/* 재정의 */
a:visited {    
    color: #fff;
    text-decoration: none;
}

.time-play-slider .basic-selectbox.transparent .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 24px;
}

.zoom-wrap .btn-darkgray:hover {
    transform: scale(1.2);
    transition: 0.2s;
}

.scale-wrap .basic-selectbox .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 20px;
}

/* dual mode */
#dualMode {
    display: none;
    position: absolute;
    left: 100%;
    top:0;    
    width: 50% !important;
}

/* btn sync */
.right-side-wrap .btn-darkgray.sync {
    display: none;
    padding: 6px 8px 8px 24px;
    width: auto;
    height: auto;
    border: 1px solid #fff;
    border-radius: 13px;
    text-indent: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: url("../../image/ico_sync.png") 9px center no-repeat;
}

/* 재정의 */
.icon-menu li a.active .menu-title, .icon-menu li a:hover .menu-title {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 0 7px #000; 
    letter-spacing: 1px;
}

.icon-menu li a.active:after, .icon-menu li a:hover:after {
    width: 38px;
    height: 38px;
    margin-top: -19px;
    animation: softScale 0.2s;
}
.icon-menu li a.active .icon-img, .icon-menu li a:hover .icon-img {    
    animation: softScale 0.2s;
}

#wrapper {
    overflow: hidden;
}

#topInfoPopup {
    position: absolute;
    z-index: 9990;
    width: 787px;
    height: 113px !important;
    top: 83px;
    right: 176px;
    left: auto;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    z-index: 1009;
}

#rightInfoPopup {
    width: 165px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -160px;
    background-color: #183463;
    box-shadow: 0 -5px 10px rgba(0,0,0,.5);
    z-index: 1000;
    border-left: 1px solid #5D6C7D;
}

#bottomInfoPopup {
    position: absolute;
    height: 180px;
    bottom: -180px;
    right: 0;
    background-color: #0D2651;
    box-shadow: 0 -5px 10px rgba(0,0,0,.5);
    z-index: 1000;
    border-top: 1px solid #5D6C7D;
}

#mapInfoPopup {
    display: none;
    height: 113px !important;
    position: absolute;
    bottom: 50px;
    right: 15px;
    width: 787px;
    z-index: 1000;
}

.box-opaque-black .btn-close{
    position: absolute;
    top: 0;
    left: -40px;
}

.content-viewport {
    position: relative;
}

.map-container .nav-wrap {
    z-index: 10;
}

/* input 클릭시 placeholder 바로 사라짐  */
input:focus::placeholder { 
    color: transparent; 
}


@keyframes softScale{
    0% { opacity: 0;}
    100% { opacity: 1;}
}

/* 미디어쿼리 */
@media (max-width: 1218px){
    .right-wrap {
        width: 25%;
    }

    .header-search-list .list-img {
        margin-top: 0;
    }  
}

@media (max-width: 1202px){
    .title-wrap {
        padding: 0 8px 0 17px;
    }

    .header-menu > li {
        padding: 0 12px;
    }
    
    .right-wrap {
        width: 301px;
    }
    
    .header-menu > li:last-child {
        padding: 0 8px 0 17px;
    } 
}

@media (max-width: 1076px){
    .title-wrap {
        padding: 0 10px;
    }
    .header-menu > li {
        padding: 0 10px;
    }
    .right-wrap {
        width: 262px;
    }    
    
    .header-menu > li:last-child {
        padding: 0 6px 0 15px;
    } 
    

    
}

/*230717 switch-alter 팝업*/
.alter-close{
	margin-right: 4px;
    cursor: pointer;
    float: right;
    height: 1px;
}
.switch-alter{
	display:none;
	font-size:20px;
	background-color: rgba(0,0,0,.5);
	margin-top: 17px;
    width: 291.5px;
    height: 94px;
    line-height: 25px;
    padding-left: 5px;
    position: absolute;
    left: 593px;
    top: 543px
}
#alter-detail{
	font-size:18px;
	padding:6%;
	line-height: 1.6;
}

#alterClose{
	margin-right: 9px;
	height:25px;
}

#alter-detailDual{
	font-size:18px;
	padding:6%;
	line-height: 1.6;
}

#alterCloseDual{
	margin-right: 9px;
	height:25px;
}


  /*객체조회용*/ 
.ResultDetailTable {display: none; z-index:9;height:136px; position:absolute;width:54%;padding-left:0px;bottom:105px;}/*230808*/
/* .ResultDetailToggle {position:absolute; padding: 1px 0; background: #eee; cursor: pointer; color: black; font-size: 15px; width:44%} */
.ResultDetailToggle {padding: 1px 0; background: #3C558B; opacity: 0.8; cursor: pointer; color: black; font-size: 15px; width:100%}

/*.ResultDetailToggle span {display:block;margin:0 auto;width:64px;height:18px;overflow:hidden;font-size:0;line-height:0;text-indent:-999em;background-image:url(../../resources/image/angle_up_on.png);background-position:50% 50%;background-repeat:no-repeat;}*/
.ResultDetailToggle span {display:block;margin:0 auto;width:64px;height:18px;overflow:hidden;font-size:0;line-height:0;text-indent:-999em;background-image:url('../../img/angle_up_on.png');background-position:50% 50%;background-repeat:no-repeat;}
.ResultDetailTable.active .ResultDetailToggle span {background-image:url('../../img/angle_down_on.png');}

/* .details{display:none; bottom: 210px; background-color: CCE4FC; width: 40%; float: right;height: 138px; position: relative;} */

/* .sectionDiv{ background-color: #CCE4FC;  height:100%; width:100%; float:left;margin-top: 19px;} */
.sectionDiv{ 
		height:100%; 
		width:100%; 
		float:left;
		-webkit-user-select:none;
		 -moz-user-select:none;
		 -ms-user-select:none;
		 user-select:none;
	}
	
.sectionDiv .sectionHead{background-color:#5187bd; height:30px; padding:9px}
.sectionTitle{background-color:white; background-color:#3C558B; width:40%; height:30px; float:left; }
.sectionDiv .sectionTitle p{font-weight:bold; font-size:18px; color:black}	
.sectionDiv .sectionTitle .selectBox{color: white;font-size: 15px;padding: 5px;font-weight: normal;}
.sectionDiv .sectionTitle .titleItem{float:left;}		
.chkList{display:none; position: absolute; width: 115px; border: 1px solid gray; background: white; color: black;}
.chkDivOdd{height: 25px; padding: 3px; background: #A4C4E4;}
.chkDivEven{height: 25px; padding: 3px; background: #e8f4ff}
.chkboxs {margin-left: 20px;}
		
.identifierTree { background-color: #556279; opacity: 0.9; color: #79859C; font-size: 13px; overflow: hidden; overflow-y:auto; height: 100%}

.identifierTree::-webkit-scrollbar{width: 8px;}
.identifierTree::-webkit-scrollbar-thumb{background-color: #173D9A;}
.identifierTree::-webkit-scrollbar-track{background-color: #5187bd;}

/* .detailInfo { color: black; font-size: 18px; overflow: hidden; overflow-y:auto; height: 76%; background-Color: #1A1F28;opacity: 0.9;} */
.detailInfo { padding: 0 10px 0 10px;}
/*
.detailInfo tr{cursor : row-resize;}
*/
.detailInfo::-webkit-scrollbar{width: 8px;}
.detailInfo::-webkit-scrollbar-thumb{background-color: #173D9A;}
.detailInfo::-webkit-scrollbar-track{background-color: #5187bd;}
	
/*  .infoTable { width: 100%;}  */
.attrTable td { 
/* 	border: 1px solid #ffffff;  */
/* 	text-align: center;  */
/* 	padding: 8px;  */
	/* word-break: break-all; */
}
		
.td1{ padding:5px;}
.td2 {cursor: pointer; }
.trDetail.selected {background-color: #20252E; color: #648BA6; }
.trDetailDup.selected {background-color: #20252E; color: #648BA6; }

.attrTable>tr>td{ font-size: 12px; word-break: break-all; padding-right: 19px;}
.attrKey { width: 200px; text-align: left; }
.attrValue { width: 50%; text-align: center;}
		
 select, .seriesUl { 
 		/* height: 100px;  */
 		overflow: auto; 
 		/* width: 200px;  */
 		/* border: 1px solid #000;  */
 		}
.seriesUl{ list-style-type: none; margin: 0; padding: 0; overflow-x: hidden; }
.seriesLi{ margin: 0; padding: 0;}
	
.btnSelect{ color: black; border: 1px solid black; padding: 5px; }
.btnSelect.active { background: black; color: white; border: 1px solid black; padding: 5px; }
	
.btnSelect:hover { background: black; color: white; border: 1px solid black; padding: 5px; }
		
.selectArea { display:inline-block; background: #3C558B; width: 115px;}
.selectArea .selectBox { color: white; font-size: 15px; padding: 5px; font-weight: normal;}
.selectBox span { color: black; float:right; }

.divWait{ display: none; position:absolute; vertical-align: middle; width: 100%; height: 100%; background-color: #FFFFFF; opacity: .5; padding: 2px; z-index: 9999999; text-align: center;}


.disOp { transform: rotate(90deg); margin-left: 78px }
.displayOp-slider { cursor:pointer; }
.disOpDual { transform: rotate(90deg); margin-left: 78px }
.displayOp-sliderDual { cursor:pointer; }



.attrTable tr.ui-resizable > .attrTable div.ui-resizable-s{
  border: 1px solid red;
  position:absolute;
}

/* .detailInfoView { */
/* 	background-color: #787F92; */
/* 	position: absolute; */
/* 	width: 29.2%; */
/* } */

.detailInfoView > div:nth-child(1) {
	background: #8996A0;
    color: #1A1F28;
    font-weight: bold;
    text-align:center;
}

/* .detailInfoView > div:nth-child(1) { */
/* } */

.ui-resizable-s {
    position: absolute !important;
    background: #ccc;
}

.navTab{
	width:54%;
	float: left;
    height: 20px;
    background-Color: #556279;
    opacity: 0.9;
    color: #afc4d8;
    font-weight:bold;
    float:left;
}

.summaryDiv{
	width: 46%;
	height: 20px;
	float:right;
	background-Color: #1A1F28;
	opacity: 0.9;
/* 	text-align: center; */
	color: #afc4d8;
	font-weight: bold;
}

.navTab>span:nth-child(1){
	margin-left: 20px;
}
.navTab>span:nth-child(2){
	margin-left: 36px;
}
.navTab>span:nth-child(3){
	margin-left: 115px;
}
.navTab>span:nth-child(4){
	margin-left: 65px;
}
.navTab>span:nth-child(5){
	margin-left: 110px;
}
.sectionTitle {
	width:40%;
	float:left;
}
.titleProduct{
	width: 60%;
    float: right;
    height: 30px;
    background-color: #556279;
    opacity: 0.9;
    line-height: 30px;
}
.txtCenter {
	text-align: center;
	color: #afc4d8;
	font-weight: bold;
}

/* .npName{ */
/*     float: left; */
/*     margin: 6px 2px 0 10px; */
/*     display: inline-block; */
/*     padding: 0 10px; */
/*     height: 19px; */
/*     font-weight: bold; */
/*     color: black; */
/*     font-size: 13px; */
/*     font-weight: 400; */
/*     letter-spacing: -.03em; */
/*     transition: .2s; */
/*     border: 0; */
/*     cursor: pointer; */
/*     background: #8896AE; */
/*     border-radius: 12px; */
/*     line-height: 19px; */
/*     padding-right:10px; */
/* 	cursor: pointer; */
/* } */

/* .npName:hover{ */
/* 	background-color: #677894; */
/* } */
/* .npName.active{ */
/* 	background-color:yellow !important;	 */
/* } */


.npButton{
    float: left;
    margin: 6px 2px 0 10px;
    display: inline-block;
    padding: 0 10px;
    height: 19px;
    font-weight: bold;
    color: black;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -.03em;
    transition: .2s;
    border: 0;
    cursor: pointer;
    background: #8896AE;
    border-radius: 12px;
    line-height: 19px;
    padding-right:10px;
	cursor: pointer;
}

.npButton:hover{
	background-color: #677894;
}
.npButton.active{
	background-color:yellow !important;	
}


#basicModeIdentifierTree{
	width:54%;
	float:left;
	
}

#basicModeDetails{
/* 	width:46%; */
	width : 100%;
	height: 139px;
/* 	height: 44%; */
/* 	float:right; */
	background-color:#1A1F28;
	opacity: 0.9;
/* 	float:left; */
	color: #afc4d8;
	font-weight: bold;
	overflow-y: auto;
/* 	padding: 0 10px 0 10px; */
}


#dualModeDetails{
/* 	width:46%; */
	width : 100%;
	height: 133px;
/* 	height: 44%; */
/* 	float:right; */
	background-color:#1A1F28;
	opacity: 0.9;
/* 	float:left; */
	color: #afc4d8;
	font-weight: bold;
	overflow-y: auto;
/* 	padding: 0 10px 0 10px; */
}



/*230808 pick report창-베이직모드*/
#basicModeTreeTable{
    text-align: left ;
   	word-break: break-all; /*자동 줄바꿈*/
   	table-layout: fixed;
}
.trPoductID{
	background-color: black;
}
.tdPoductID {
    text-align: center;
    padding-left: 173px;
}

/*  */
.tdDetail1{
	text-align: center;
    width: 50px;
}
.tdDetail2{
	width: 254px;
	padding-left: 28px;		
}
.tdDetail3{
	width: 108px;
	padding-right: 7px;
}
.tdDetail4{
    width: 148px;
    padding-right: 8px;
    padding-left: 27px;
}


.trDetail1:hover{
	background-color: #2E2E2E;
}

.trDetail2:hover{
	background-color: #2E2E2E;
}

.trDetail3:hover{
	background-color: #2E2E2E;
}

.trDetail4:hover{
	background-color: #2E2E2E;
}

.trDetail5:hover{
	background-color: #2E2E2E;
}


/*230814 pick report창-듀얼모드*/
#dualModeIdentifierTree{
    text-align: left ;
   	word-break: break-all; /*자동 줄바꿈*/
   	table-layout: fixed;
}

/*
.trDetail1Dual td:nth-child(1){
	width: 66px;	
	padding-left: 17px;
}
.trDetail1Dual td:nth-child(2){
	width: 204px;		
}

.trDetail1Dual td:nth-child(3){
	width: 122px;		
}

.trDetail1Dual td:nth-child(4){
	width: 144px;		
}

.trDetail2Dual td:nth-child(1){
	padding-left: 17px;
	width: 33px;	
}
.trDetail2Dual td:nth-child(2){
	width: 212px;	
	
}
*/

.trDetail1Dual:hover{
	background-color: #2E2E2E;
}

.trDetail2Dual:hover{
	background-color: #2E2E2E;
}

.trDetail3Dual:hover{
	background-color: #2E2E2E;
}

.trDetail4Dual:hover{
	background-color: #2E2E2E;
}

.trDetail5Dual:hover{
	background-color: #2E2E2E;
}




.details{
/* 	width:46%; */
	width : 100%;
	height: 133px;
/* 	height: 44%; */
/* 	float:right; */
	background-color:#1A1F28;
	opacity: 0.9;
/* 	float:left; */
	color: #afc4d8;
	font-weight: bold;
	padding: 6px 10px 0 10px;
	-webkit-user-select:none;
  	-moz-user-select:none;
  	-ms-user-select:none;
  	user-select:none;
}

.detailInfoView{
/* 	width: 34.7%; */
/*     position: absolute; */
/*     top: 128px; */
/*     height: 57%; */
	width: 100%;
/* 	top: 100%; */
    background-color:#1A1F28;
	opacity: 0.9;
	position: relative;
}

.summaryDiv>div:nth-child(1) {
	text-align:center;
}

.detailAttr {
	overflow: scroll;
    height: 0px;
    padding: 6px 20px 0 20px;
}

.icon-warning {/*.basicModeWarning*/
	position: absolute;
    left: 250px;
    top: 240px;
    z-index: 20;
    
    width: 32px;
    height: 32px;
    
}


/*230712*/
.icon-warning span{
	background-image: url('../../img/getfeatureinfoBlack.png');
    width: 30px;
    height: 30px;
    display: block;

}

.icon-warning.active span{
	background-image: url('../../img/getfeatureinfoColor.png');
	
}

.icon-warning.dualModeWarning {
	position: absolute;
   left: 252px;
    top: 240px;
    z-index: 20;
}


.imgWarning>div{
	left: 22px;
    position: absolute;
}

.imgWarning {
	position: absolute;
    left: 259px;
    width: 32px;
    top: 286px;
    height: 32px;
    float: left;
    line-height: 30px;
/*     cursor:pointer; */
    background-color: rgba(0,0,0,.5);
    border-radius: 15px;
}

.imgWarning .active{
	background-color:Yellow;	
}

.imgWarning:hover .active{
	background-color:Yellow;	
}

.point{
	float: left;
    margin: 6px 2px 0 10px;
    display: inline-block;
    padding: 0 10px;
    height: 19px;
    font-weight: bold;
    color: black;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -.03em;
    transition: .2s;
    border: 0;
    cursor: pointer;
    background: Yellow;
    border-radius: 12px;
    line-height: 19px;
}

/* .point:hover { */
/* 	background-color: #677894; */
/* } */

/* .point.active{ */
/* 	background-color: yellow; */
/* } */

.identifierTree {
	color: #fff;
}

.basicModeDetailAttr {
	padding: 0 10px 0 10px;
	background-color:#1A1F28;
}

.basicModeAttrTableView>tr>.attrKey {
	overflow: hidden;
}

.basicModeAttrTableView>tr>.attrValue{
	margin-left: 15px;
}

.trDetail>td>span {
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	display:inline-block;
}

.trDetail>td>span:nth-child(1){
	margin-left:10px;
	width: 33px;
}
.trDetail>td>span:nth-child(2){
	margin-left:5px;
	width: 152px;
}
.trDetail>td>span:nth-child(3){
/* 	margin-left:30px; */
	width: 83px;
}
.trDetail>td>span:nth-child(4){
/* 	margin-left:30px; */
	width: 70px;
}

/* 230926 s104 */
.trDetail104 > td{
	padding-left:9px;
}

.trDetail111 > td{
	padding-left:9px;
}

.trDetail128 > td {
    padding-left: 9px;
}

/*
.trDetail128 > td:first-of-type {
    padding-left: initial;
}
*/

.trDetailDup>td>span {
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	display:inline-block;
}

.trDetailDup>td>span:nth-child(1){
	margin-left:10px;
	width: 33px;
}
.trDetailDup>td>span:nth-child(2){
	margin-left:5px;
	width: 152px;
}
.trDetailDup>td>span:nth-child(3){
/* 	margin-left:30px; */
	width: 83px;
}
.trDetailDup>td>span:nth-child(4){
/* 	margin-left:30px; */
	width: 70px;
}
.trDup{
	font-weight: bold;
}
.trDup>span:nth-child(1){
	margin-left: 5px;
}
.regend-table{
	border-collapse: separate;
    border-spacing: 5px;
    width: 100%;
    table-layout: fixed;
}

.regend-table td:nth-child(1){
	width: 50px;
	text-align: center;
}

.harf-width td:nth-child(1){
	width: 25px;
	text-align: center;
	
}

.regend-table td:nth-child(2){
	padding: 4px;
/* 	width: 160px; */
	width: 130px;
	padding-left: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.trDetailDup{
	display: none;
}

#basicModeAttrTable, #dualModeAttrTable {
	margin-top: 7px;
}

.regend-table img{
	height: 20px;
}

.regend-over{
	height:290px;
	overflow: scroll;
}

.pagination-center{
	display: flex;
  	justify-content : center;
}

#popup_layer {position:fixed;top:0;left:0;z-index: 10000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4);} 
/*팝업 박스*/
.popup_box{position: relative;top:50%;left:50%; width:500px;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 {padding:35px;line-height:1.4rem;font-size:14px;word-break: break-word;}
.popup_box .popup_cont h2 {padding:15px 0;color:#333;margin:0;}
.popup_box .popup_cont p{ border-top: 1px solid #666;padding-top: 30px; color:black; }
/*버튼영역*/
.popup_box .popup_btn {display:table;table-layout: fixed;width:100%;height:60px;background:#5d5d5d;word-break: break-word;}
.popup_box .popup_btn a {position: relative; display: table-cell; 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);}

.catalogue-div{
	padding-top:5px;
}

.catalogue-info{
	position: absolute;
    left: 260px;
    top: 245px;
    float: left;
    line-height: 30px;
    background-color: rgba(60,85,139,0.8);
    display : none;
}

.catalogue-info table{
	margin: 12px;
   /* width: 215px;*/
    width: 310px;
    height: 145px;
    text-align : center;
    border: none;    
    background-color: rgba(0,0,0,0.4);
}

.catalogue-info table td{
	border-bottom: 1px solid white;
    border-left: 1px solid white;
    padding: 10px;
    
}

.catalogue-info table td:first-child {
  border-left: none;    
}

.catalogue-close{
	margin-right: 4px;
    cursor: pointer;
    float: right;
    height: 1px;
}
.version-information{
	display:none;
	float: right; 
	font-size:20px;
	background-color: rgba(0,0,0,.5);
	margin-top: 17px;
    width: 287px;
    line-height: 25px;
    padding-left: 5px;
}
#version-detail{
	font-size:18px;
	padding:3%;
}
#version-detail ul{
	padding-left:10%;
}
#version-detail li{
	list-style: square;
}
#logInfoClose{
	margin-right: 9px;
	height:25px;
}


.interoperability-info{
	position: absolute;
    left: 260px;
    top: 245px;
    line-height: 30px;
    background-color: rgba(0,0,0,.5);
     width: 100%;
    display: block;
    padding: 10px;
    display : none;
}

.interoperability-close{
	margin-right: 4px;
    cursor: pointer;
    float: right;
    height: 1px;
}

.icApplyLabel{
	color: #FFBE3B;
	float: right;
	display: inline-block;
	width:270px;
	font-weight: bold;
	margin-top: 7px;
	visibility : hidden;
}

/*230901 마우스 오버시 간단정보 표출 테이블*/
#simpleInfoDiv {
	color: black;
	border: 3px solid black;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.7); 
	font-weight: bold;
	table-layout: fixed;
	width: 180px;
	font-size: 13px;
}
#simpleInfoDiv111 {
	color: white;
	border: 3px solid black;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7); 
/* 	font-weight: bold; */
	table-layout: fixed;
	width: 180px;
	font-size: 16px;
	height: 75px
}


/*마우스 오버시 간단정보 표출 테이블*/
.border-solid {
	border-bottom: 3px solid black;
}

#simpleInfoDiv td {
	/*border: 3px solid #444444;*/
	height: 40px;
	padding: 10px;
}

.s111-solid {
	border-bottom: 3px solid black;
	padding-top: 5px;
}

.s111-direction{
	padding-top: 5px;
}


/*230920 듀얼모드 마우스 오버시 간단정보 표출 테이블*/
#simpleInfoDivDual {
	color: black;
	border: 3px solid black;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.7); 
	font-weight: bold;
	table-layout: fixed;
	width: 180px;
	font-size: 13px;

}
/*230920 듀얼모드  마우스 오버시 간단정보 표출 테이블*/
#simpleInfoDivDual td {
	height: 40px;
	padding: 10px;
}

#simpleInfoDiv111Dual {
	color: white;
	border: 3px solid black;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.7); 
/* 	font-weight: bold; */
	table-layout: fixed;
	width: 180px;
	font-size: 16px;
	height: 75px
}


/*230901 그래프
#graphDiv {
	width: 600px;
	height: 300px;	
}
*/
/*231024 피크리포트 로딩*/
.loading-display {
	 /* display: none;  */
}
.pick-report-loading {
	
}

.pick-report-loading img {
	width: 70px;
	height: 70px;
	position: absolute;
    top: 756px;
    left: 227px;
    z-index: 100;
}
.pick-report-loading-dual img {
	width: 70px;
	height: 70px;
	position: absolute;
    top: 756px;
    left: 227px;
    z-index: 100;
}