.file-wrapper {
    width: auto;
    min-width: 550px
}

.file-wrapper .input.view.file-add {
    display: inline-block;
    margin-left: 0
}

.file-wrapper button + .file-group {
    margin-top: 5px
}

.icon-file {
    display: block;
    padding-left: 16px;
    background-image: url("../images/icon_file_green.png");
    background-position: left center;
    background-repeat: no-repeat;
    font-size: 14px;
    line-height: 21px
}

.icon-file > span {
    position: relative;
    color: #818980
}

.icon-file > span span {
    color: #818980
}

.icon-file + .icon-file {
    margin-top: 3px
}

.icon-file .remove {
    display: inline-block;
    position: relative;
    width: 14px;
    height: 14px;
    margin-left: 20px;
    vertical-align: baseline;
    background-image: url("../images/icon_remove.png");
    background-position: center 4px;
    background-repeat: no-repeat;
    cursor: pointer
}

.tree-wrap {
    width: 100%
}

.tree-wrap .btn-create {
    width: 100%;
    padding: 12px 0;
    border: 1px solid #8fc31f;
    color: #8fc31f;
    font-size: 14px;
    line-height: 16px;
    border-radius: 10px;
    cursor: pointer
}

.tree-wrap .btn-create span {
    display: inline-block;
    padding-left: 20px;
    color: inherit;
    background: url(../images/bg_plus.png) no-repeat left center
}

.tree-wrap .btn-create[data-css="add2"] {
    width: 260px;
    height: 27px;
    padding: 4px 0
}

.tree-menu {
    overflow-y: auto;
    overflow-x: auto;
    height: calc(100% - 40px);
    max-height: 608px
}

.tree-menu li.jstree-node a {
    background: url(../images/icon_tree_folder.png) no-repeat left center
}

.tree-menu li.jstree-leaf a {
    background: url(../images/icon_tree_file.png) no-repeat left center
}

.tree-menu .jstree-container-ul > li + li {
    margin-top: 14px
}

.tree-menu .jstree-container-ul .jstree-node {
    position: relative;
    padding-left: 26px
}

.tree-menu .jstree-container-ul .jstree-node .jstree-ocl {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 18px;
    background: url(../images/bg_tree_close.png) no-repeat left center
}

.tree-menu .jstree-container-ul .jstree-node.jstree-open .jstree-ocl {
    background: url(../images/bg_tree_open.png) no-repeat left center
}

.tree-menu .jstree-container-ul .jstree-node.jstree-leaf {
    padding-left: 0
}

.tree-menu .jstree-container-ul .jstree-node.jstree-leaf .jstree-ocl {
    display: none
}

.tree-menu .jstree-container-ul .jstree-node.jstree-leaf .addBtn {
    background: 0;
    padding-left: 0
}

.tree-menu .jstree-children {
    padding-top: 14px
}

.tree-menu .jstree-children li + li {
    margin-top: 14px
}

.tree-menu .jstree-anchor {
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    line-height: 18px;
    color: #333
}

.tree-menu .jstree-anchor.jstree-clicked {
    color: #8fc31f
}

.relative {
    position: relative
}

.relative .btn-tree-toggle {
    position: absolute;
    top: 0;
    right: 0
}

.accordion-section .accordion-set.active > .accordion {
    background-color: #f7faf1
}

.accordion-section .accordion-set.active > .accordion .col-3 .date-arrow::after {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

.accordion-section .accordion-set.active .accordion-toggle {
    max-height: 650px;
    overflow: auto
}

.accordion-section .accordion-set.active .accordion-toggle .col-1 {
    background-color: #f4f6f8
}

.accordion-section .accordion-set .accordion-toggle {
    max-height: 0;
    overflow: hidden;
    border: 1px solid #e3e8e5;
    border-top: 0;
    border-bottom: 0;
    -webkit-transition: all ease-in-out .4s;
    transition: all ease-in-out .4s
}

.accordion-section .accordion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    transition: all .5s
}

.accordion-section .accordion .col {
    padding: 10px 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    color: #333;
    border-bottom: 1px solid #e3e8e5
}

.accordion-section .accordion .col.col-1 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 122px;
    flex: 0 0 122px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.accordion-section .accordion .col.col-2 {
    padding: 13px 20px;
    text-align: left
}

.accordion-section .accordion .col.col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
    width: 200px
}

.accordion-section .accordion .col.col-3 .date-arrow {
    position: relative;
    display: inline-block;
    position: relative;
    padding: 0 50px
}

.accordion-section .accordion .col.col-3 .date-arrow::after {
    display: block;
    content: "";
    width: 10px;
    height: 6px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -3px;
    background-image: url("../images/arrow_arrcodion.png");
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.accordion-section .accordion .col.col-3 .user-data {
    overflow: hidden;
    display: block;
    width: 100%;
    max-width: 200px
}

.accordion-section .accordion .col.col-3 .user-data span {
    overflow: hidden;
    width: 100%;
    max-width: 200px;
    display: block;
    line-height: 21px
}

.accordion-section .accordion .col .btn-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.accordion-section .accordion .col .btn-group button {
    width: 72px;
    padding: 8px 0;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    background-color: #6c716b
}

.accordion-section .accordion .col .btn-group button > span {
    position: relative;
    color: #fff
}

.accordion-section .accordion .col .btn-group button + button {
    margin-left: 10px;
    background-color: #fda601
}

.accordion-section .accordion .col .btn-group button + button > span {
    position: relative;
    color: #fff
}

.accordion-section .accordion .col .btn-group.center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.accordion-section .accordion .col .btn-group + .user-data {
    margin-top: 20px
}

.accordion-section .accordion.accordion-header {
    background-color: #f4f6f8;
    border-top: 1px solid #e3e8e5
}

.accordion-section .accordion.accordion-header .col {
    font-weight: 700
}

.accordion-section .accordion.accordion-header .col.col-2 {
    text-align: center
}

.accordion-section .accordion.active {
    background-color: #f7faf1
}

.accordion-section .text-box {
    padding: 2px 0
}

.accordion-section .text-box .pic {
    position: relative
}

.accordion-section .text-box .pic > span {
    display: block;
    position: relative
}

.accordion-section .text-box .pic > span > img {
    max-width: 70px
}

.accordion-section .text-box .pic > span .img-cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 14px;
    line-height: 16px
}

.accordion-section .text-box .pic + .icon-file {
    margin-top: 17px
}

.accordion-section .text-box .text {
    color: #6c716b;
    font-size: 14px;
    line-height: 20px
}

.accordion-section .text-box .text + .pic {
    margin-top: 18px
}

.accordion-section .text-box .text + .icon-file {
    margin-top: 15px
}

.accordion-section .no-result {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 150px;
    border-bottom: 1px solid #e3e8e5
}

.pop {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 20
}

.pop .pop-box {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 940px;
    min-height: 540px;
    background-color: #fff;
    border-radius: 10px
}

.pop .pop-box.height-678 {
    min-height: 618px
}

.pop .pop-box.height-678 .pop-cont {
    min-height: 618px
}

.pop .pop-box.height-387 {
    min-height: 387px
}

.pop .pop-box.height-387 .pop-cont {
    height: 327px
}

.pop .pop-box.width-936 {
    max-width: 936px
}

.pop .pop-box.width-1102 {
    max-width: 1102px
}

.pop .pop-box .pop-close {
    position: absolute;
    right: 22px;
    top: 21px;
    width: 20px;
    height: 21px;
    background-image: url("../images/btn_pop_close.png");
    background-position: center 0;
    background-repeat: no-repeat
}

.pop .pop-tit {
    padding: 16px 20px;
    background-color: #8fc31f;
    font-size: 20px;
    line-height: 28px;
    color: #fff;
    font-weight: 500;
    border-radius: 10px 10px 0 0
}

.pop .pop-cont {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 100%;
    height: 480px;
    max-height: 480px;
    padding: 30px 40px;
    background-color: #fff;
    border-radius: 0 0 10px 10px
}

.pop .pop-cont.padding-20 {
    padding: 20px
}

.pop.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.slide-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    width: 100%
}

.slide-wrap ul li {
    display: none
}

.slide-wrap ul li.active {
    display: block
}

.slide-wrap ul li.active > img {
    width: auto;
    max-width: 600px;
    height: auto;
    max-height: 420px
}

.slide-wrap .control-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    margin-top: -16px
}

.slide-wrap .control-btn button {
    position: absolute;
    left: -30px;
    top: 0;
    width: 18px;
    height: 36px;
    background-image: url("../images/btn_slide.png");
    background-position: center center;
    background-repeat: no-repeat
}

.slide-wrap .control-btn button + button {
    left: auto;
    right: -30px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.slide-wrap .control-btn.hidden {
    display: none
}

.detail-list-wrap {
    width: 100%
}

.detail-list-wrap.col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.detail-list-wrap.col .city-box + .table-list {
    width: 100%;
    margin-left: 20px
}

.detail-list-wrap.col .city-box .city-model {
    display: table;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #e9ece9;
    border-radius: 10px
}

.detail-list-wrap.col .city-box .city-model .th, .detail-list-wrap.col .city-box .city-model .td {
    display: table-cell;
    height: 41px;
    vertical-align: middle
}

.detail-list-wrap.col .city-box .city-model .th {
    background-color: #eaeef1;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border-radius: 10px 0 0 10px
}

.detail-list-wrap.col .city-box .city-model .td {
    font-size: 14px;
    padding: 5px 5px 5px 20px;
    border-radius: 0 10px 10px 0
}

.detail-list-wrap.col .table-list .column {
    min-height: 16px
}

.detail-list-wrap.col .table-list .column .country-wrap {
    margin-top: 0
}

.detail-list-wrap.col .table-list .column .right a {
    font-size: 14px;
    line-height: 16px
}

.detail-list-wrap.col .table-list .column .right a.active {
    color: #8fc31f
}

.detail-list-wrap.col .table-list .column .right a + a::before {
    display: inline-block;
    content: "";
    width: 1px;
    height: 12px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #e4e8e5
}

.detail-list-wrap .list-wrap {
    margin-bottom: 20px
}

.detail-list-wrap .list-wrap.filter ul li {
    width: calc(20% - 15px)
}

.detail-list-wrap .list-wrap > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

.detail-list-wrap .list-wrap > ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(25% - 15px);
    padding: 16px;
    color: #fff;
    border-radius: 10px
}

.detail-list-wrap .list-wrap > ul li > img {
    margin-right: 15px
}

.detail-list-wrap .list-wrap > ul li .status p {
    color: #fff;
    font-size: 14px;
    line-height: 16px
}

.detail-list-wrap .list-wrap > ul li .status p.number {
    font-size: 24px;
    line-height: 26px
}

.detail-list-wrap .list-wrap > ul li .status p + p {
    margin-top: 10px;
    font-weight: 300
}

.detail-list-wrap .list-wrap > ul li.gray2 {
    background-color: #6c716b
}

.detail-list-wrap .list-wrap > ul li.green {
    background-color: #8fc31f
}

.detail-list-wrap .list-wrap > ul li.blue {
    background-color: #0faafa
}

.detail-list-wrap .list-wrap > ul li.gray {
    background-color: #9fa69e
}

.detail-list-wrap .list-wrap > ul li.orange {
    background-color: #fdad01
}

.detail-list-wrap .list-wrap > ul li.red {
    background-color: #f94439
}

@keyframes loading {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-webkit-keyframes loading {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.loading-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 20
}

.loading-wrapper.solo {
    position: absolute
}

.loading-wrapper.solo .loading-text {
    display: none
}

.loading-wrapper > div {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.loading-wrapper.no-text .loading-text {
    display: none
}

.loading-wrapper .loading-text {
    margin-top: 10px;
    color: #fff;
    -webkit-animation: loading linear 0.8s infinite;
    animation: loading linear 0.8s infinite
}

.loading-wrapper.medium .loading {
    width: 115px !important;
    height: 115px !important;
    -webkit-transform: translate(-57.5px, -57.5px) scale(0.575) translate(57.5px, 57.5px);
    transform: translate(-57.5px, -57.5px) scale(0.575) translate(57.5px, 57.5px)
}

.loading-wrapper.small .loading {
    width: 29px !important;
    height: 29px !important;
    -webkit-transform: translate(-14.5px, -14.5px) scale(0.145) translate(14.5px, 14.5px);
    transform: translate(-14.5px, -14.5px) scale(0.145) translate(14.5px, 14.5px)
}

.loading-wrapper.small .loading-text {
    font-size: 10px
}

.loading {
    position: relative
}

.loading div {
    left: 94px;
    top: 20px;
    position: absolute;
    -webkit-animation: loading linear 1s infinite;
    animation: loading linear 1s infinite;
    background: #fda601;
    width: 12px;
    height: 40px;
    border-radius: 50%;
    -webkit-transform-origin: 6px 80px;
    transform-origin: 6px 80px
}

.loading div:nth-child(1) {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-animation-delay: -0.916666666666667s;
    animation-delay: -0.916666666666667s
}

.loading div:nth-child(2) {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-animation-delay: -0.833333333333333s;
    animation-delay: -0.833333333333333s
}

.loading div:nth-child(3) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-animation-delay: -0.75s;
    animation-delay: -0.75s
}

.loading div:nth-child(4) {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-animation-delay: -0.666666666666667s;
    animation-delay: -0.666666666666667s
}

.loading div:nth-child(5) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    -webkit-animation-delay: -0.583333333333333s;
    animation-delay: -0.583333333333333s
}

.loading div:nth-child(6) {
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s
}

.loading div:nth-child(7) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-animation-delay: -0.416666666666667s;
    animation-delay: -0.416666666666667s
}

.loading div:nth-child(8) {
    -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
    -webkit-animation-delay: -0.333333333333333s;
    animation-delay: -0.333333333333333s
}

.loading div:nth-child(9) {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
    -webkit-animation-delay: -0.25s;
    animation-delay: -0.25s
}

.loading div:nth-child(10) {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-animation-delay: -0.166666666666667s;
    animation-delay: -0.166666666666667s
}

.loading div:nth-child(11) {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
    -webkit-animation-delay: -0.083333333333333s;
    animation-delay: -0.083333333333333s
}

.loading div:nth-child(12) {
    -webkit-transform: rotate(330deg);
    transform: rotate(330deg);
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.loading {
    width: 200px !important;
    height: 200px !important;
    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px)
}

.relative {
    position: relative !important
}

input[type="text"]::-ms-clear {
    display: none
}

a:active, a:hover, a:focus {
    outline: none
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-track:horizontal {
    background: rgba(237, 237, 237, 0.4)
}

::-webkit-scrollbar-thumb {
    background: #d3dad3
}

::-webkit-scrollbar-thumb:hover {
    background: #999
}

.mtop-10 {
    margin-top: -10px !important
}

.mtop5 {
    margin-top: 5px !important
}

.mtop10 {
    margin-top: 10px !important
}

.mtop20 {
    margin-top: 20px !important
}

.mtop30 {
    margin-top: 30px !important
}

.mbottom10 {
    margin-bottom: 10px !important
}

.mbottom20 {
    margin-bottom: 20px !important
}

.mbottom30 {
    margin-bottom: 30px !important
}

.text-disabled {
    color: #a6a7a8;
    font-size: 14px
}

.text-disabled.point::before {
    content: "*";
    display: inline-block;
    width: 5px;
    height: 14px;
    line-height: 14px;
    vertical-align: middle;
    padding-right: 10px;
    text-align: left;
    color: #a6a7a8
}

.wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    font-size: 16px;
    color: #232425
}

.body {
    overflow: auto;
    width: calc(100% - 288px);
    height: calc(100vh - 50px);
    margin: 0 0 0 288px;
    background: #f4f6f8
}

.contents {
    position: relative;
    min-width: 1221px;
    width: 100%;
    height: max-content;
    padding: 20px 30px 60px
}

.header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    padding-left: 288px;
    line-height: 50px;
    text-align: center;
    background-color: #434f54;
    color: #d5d8cd
}

.header h1 {
    margin-left: 30px;
    font-size: 14px
}

.alarm-center {
    position: absolute;
    right: 70px;
    top: 80px;
    width: 370px;
    z-index: 20;
    line-height: 1;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.301961);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.301961);
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: 0.15s linear;
    transition: 0.15s linear
}

.alarm-center.inner {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: 10px;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-box-shadow: none;
    box-shadow: none;
    z-index: 2
}

.alarm-center.on {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1)
}

.alarm-top, .alarm-middle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.alarm-top p {
    font-size: 16px;
    color: #333;
    line-height: 24px
}

.alarm-top .icon-refresh {
    display: block;
    width: 14px;
    height: 15px;
    margin-left: 6px;
    background-image: url("../images/icon_refresh.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 14px 15px
}

.alarm-middle {
    padding: 6px 20px;
    border-top: 1px solid rgba(150, 150, 150, 0.301961);
    border-bottom: 1px solid rgba(150, 150, 150, 0.301961);
    font-size: 12px
}

.alarm-top .alarm-close {
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-image: url("../images/popup_close2.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 16px
}

.alarm-middle p::after {
    content: "";
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 1px;
    height: 11px;
    margin: 0 6px;
    opacity: 0.7;
    background: #333;
    vertical-align: middle
}

.alarm-center .alarm-confirm {
    width: auto;
    height: 24px;
    margin-left: auto;
    padding: 0 0 0 17px;
    background-image: url("../images/icon_confirm.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 14px;
    line-height: 24px;
    color: #7f8589;
    -webkit-transition: 0.15s;
    transition: 0.15s
}

.alarm-bottom {
    overflow: auto;
    max-height: 450px
}

.alarm-center .alarm-confirm:hover {
    color: #333;
    background-image: url("../images/icon_confirm_on.png");
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: 14px
}

.alarm-list {
    position: relative;
    height: 90px;
    padding-left: 70px
}

.alarm-list .alarm-status {
    position: absolute;
    left: 20px;
    top: 25px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: #fff;
    font-size: 14px;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
    text-align: center
}

.alarm-list:nth-child(even) {
    background: rgba(192, 210, 211, 0.14902)
}

.inner .alarm-list:nth-child(even) {
    background: none
}

.inner .alarm-list {
    border: 1px solid #e4e8e5
}

.inner .alarm-list + .alarm-list {
    border-top: none
}

.alarm-contents {
    padding: 8px 10px 8px 0;
    font-size: 12px;
    text-align: left
}

.alarm-contents .title {
    font-size: 14px;
    color: #333;
    line-height: 20px
}

.alarm-contents .alarm-info {
    line-height: 24px
}

.alarm-dates {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.alarm-dates p {
    color: #000;
    line-height: 24px
}

.alarm-dates .btn {
    margin-left: 6px
}

.inner .alarm-dates a {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -12px
}

.alarm-dates a {
    display: block;
    margin-left: auto;
    color: #000;
    line-height: 24px
}

.alarm-dates a::after {
    content: "\203A";
    margin-left: 4px;
    font-size: 18px
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.danger .alarm-status {
    background: rgba(239, 45, 23, 0.752941)
}

.danger .alarm-info {
    color: #d82410;
    font-weight: 700
}

.warning .alarm-status {
    background: rgba(240, 204, 24, 0.8)
}

.snb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    margin-left: auto;
    margin-right: 20px
}

.snb .alert {
    position: relative
}

.snb .user {
    position: relative
}

.snb .user p {
    padding: 0 20px 0 0;
    font-size: 14px;
    color: #d3dad3;
    background-image: url(../images/bg_select.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) 50%;
    background-size: 11px 6px
}

.snb .user > ul {
    display: none;
    position: absolute;
    right: -20px;
    top: 100%;
    width: 100px;
    color: #333;
    background-color: #fff;
    -webkit-box-shadow: 1px 2px 3px 1px rgba(192, 192, 192, 0.29);
    box-shadow: 1px 2px 3px 1px rgba(192, 192, 192, 0.29);
    font-size: 14px;
    line-height: 20px;
    border-radius: 10px
}

.snb .user > ul a {
    color: currentColor
}

.snb .user:hover ul, .snb .user.on ul {
    display: block
}

.snb > li:first-child::before {
    display: none
}

.snb > li::before {
    content: "";
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 1px;
    height: 22px;
    margin: 0 20px;
    background: #d3dad3;
    vertical-align: middle
}

.snb a {
    padding: 2px 0;
    color: #d5d8cd
}

.snb .lang {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle
}

.snb .lang a {
    font-weight: 700;
    color: #929293
}

.snb .lang a.on {
    color: #d5d8cd
}

.snb .lang a + a::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 6px 0 6px;
    background: #6d6d6e;
    vertical-align: middle;
    border-radius: 3px
}

.snb .alert > a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    padding: 2px 0 23px 34px;
    background: url(../images/icon_alert.png) no-repeat 50% 50%/21px 24px;
    vertical-align: middle
}

.snb .alert.on .header-box {
    display: block
}

.snb .alert.on > a::after {
    content: attr(data-alert);
    position: absolute;
    right: 8px;
    top: 0;
    width: 6px;
    height: 6px;
    background: #8fc31f;
    border-radius: 4px
}

.snb .logout > a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 4px 0 23px 32px;
    vertical-align: middle;
    background: url(../images/icon_logout.png) no-repeat 50% 50%/23px 24px
}

.lnb {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    padding-bottom: 40px;
    font-size: 16px;
    font-weight: 700;
    background: #434f54;
    z-index: 20;
    overflow: auto;
}

.logo {
    display: block;
    width: 288px;
    height: 60px;
    padding: 4px 24px 0;
    background: #434f54;
    text-align: center
}

.logo img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: calc(100% - 70px);
    padding-top: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.nav > li {
    position: relative;
    width: 100%
}

.nav > li:first-child {
    margin-top: 0
}

.nav > li > a {
    display: block;
    width: 100%;
    padding: 20px 0 20px 40px;
    line-height: 20px;
    background-repeat: no-repeat;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    text-align: left;
    background-position: 31px 19px, 249px 27px;
}

.nav > li > a > span {
    color: #cbcbcb;
    font-size: 16px
}

.nav > li > ul > li > a {
    display: block;
    width: 100%;
    padding: 10px 10px 10px 63px;
    line-height: 20px
}

.nav > li > a + ul {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.25s;
    transition: all 0.25s
}

.nav > li.on > a + ul {
    max-height: 100vh;
    -webkit-transition: all 1s;
    transition: all 1s
}

.nav {
    white-space: nowrap
}

.nav > ul > li {
    padding: 0
}

.nav > ul > li > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 62px;
    padding: 0 20px 0 18px;
    line-height: 62px;
    color: #fff
}

.nav > ul > li > a > span {
    visibility: visible;
    height: auto;
    margin-left: 8px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity 0.15s 0.1s, -webkit-transform;
    transition: opacity 0.15s 0.1s, -webkit-transform;
    transition: transform, opacity 0.15s 0.1s;
    transition: transform, opacity 0.15s 0.1s, -webkit-transform
}

.nav > ul > li.on > a, .nav > ul > li:hover > a {
    background-color: #8fc31f
}

.nav > ul li.active > ul {
    max-height: 100vh
}

.nav > ul li.active > ul li.on > span::before {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

/*.nav > li.nav-dash > a {*/
/*     background-image: url(../images/nav_dash.png)*/
/* }*/

/*.nav > li.nav-manage > a {*/
/*    background-image: url(../images/nav_manage.png), url(../images/nav_arrow.png)*/
/*}*/

/*.nav > li.nav-hist > a {*/
/*    background-image: url(../images/nav_hist.png), url(../images/nav_arrow.png)*/
/*}*/

/*.nav > li.nav-stati > a {*/
/*    background-image: url(../images/nav_stati.png), url(../images/nav_arrow.png)*/
/*}*/

/*.nav > li.nav-custom > a {*/
/*    background-image: url(../images/nav_custom.png), url(../images/nav_arrow.png)*/
/*}*/

/*.nav > li.nav-fota > a {*/
/*    background-image: url(../images/nav_fota.png), url(../images/nav_arrow.png)*/
/*}*/

/*.nav > li.nav-admin > a {*/
/*    background-image: url(../images/nav_admin.png), url(../images/nav_arrow.png)*/
/*}*/

/*.nav > li.nav-operation-management > a {*/
/*    background-image: url(../images/nav_operation_management.png), url(../images/nav_arrow.png)*/
/*}*/
.nav > li.nav-arrow-icon > a {background-image: url(../images/nav_arrow.png); background-position: 249px 27px;}
.nav > li.nav-arrow-icon.on > a {background-image: url(../images/nav_arrow_on.png);}

.nav > li > ul > li > a > span {
    color: #d3dad3;
    font-size: 14px
}

.nav > li > ul > li > a {
    background-image: url(../images/nav_2depth.png);
    background-position: 37px 15px;
    background-repeat: no-repeat
}

.nav > li > ul.depth2 > li > a > span {
    color: #d3dad3;
    font-size: 14px;
    font-weight: 400
}

.nav > li.on > a > span {
    color: #8fc31f
}

/*.nav > li.nav-dash.on > a {*/
/*    background-image: url(../images/nav_dash_on.png)*/
/*}*/

/*.nav > li.nav-manage.on > a {*/
/*    background-image: url(../images/nav_manage_on.png), url(../images/nav_arrow_on.png)*/
/*}*/

/*.nav > li.nav-hist.on > a {*/
/*    background-image: url(../images/nav_hist_on.png), url(../images/nav_arrow_on.png)*/
/*}*/

/*.nav > li.nav-stati.on > a {*/
/*    background-image: url(../images/nav_stati_on.png), url(../images/nav_arrow_on.png)*/
/*}*/

/*.nav > li.nav-custom.on > a {*/
/*    background-image: url(../images/nav_custom_on.png), url(../images/nav_arrow_on.png)*/
/*}*/

/*.nav > li.nav-fota.on > a {*/
/*    background-image: url(../images/nav_fota_on.png), url(../images/nav_arrow_on.png)*/
/*}*/

/*.nav > li.nav-admin.on > a {*/
/*    background-image: url(../images/nav_admin_on.png), url(../images/nav_arrow_on.png)*/
/*}*/

/*.nav > li.nav-operation-management.on > a {*/
/*    background-image: url(../images/nav_operation_management_on.png), url(../images/nav_arrow_on.png)*/
/*}*/

.nav > li > ul > li.on > a {
    background-image: url(../images/nav_2depth_on.png)
}

.nav > li > ul > li.on > a > span {
    color: #8fc31f
}

.login-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    height: 100vh;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: url(../images/bg_login.png) no-repeat right bottom #eff2e8;
    background-size: auto
}

.login-wrapper .type2 {
    background: #eef4f9
}

.login {
    display: block;
    position: relative;
    width: 100%;
    max-width: 634px;
    height: 554px;
    padding: 0 93px;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    -webkit-box-shadow: 5px 13px 14px 0 rgba(154, 167, 189, 0.2);
    box-shadow: 5px 13px 14px 0 rgba(154, 167, 189, 0.2);
    color: #202020
}

.login > h1 {
    margin: 43px 0 46px;
    color: #8fc31f;
    font-weight: 900
}

.login > h1 img {
    width: 293px
}

.login input {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0 auto 10px;
    padding: 16px 20px 10px 45px;
    border: 1px solid #d3dad3;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 2px 0 rgba(215, 227, 241, 0.501961);
    box-shadow: 0 0 2px 0 rgba(215, 227, 241, 0.501961);
    text-align: left;
    font-size: 18px
}

.login input[type="text"] {
    background: url("../images/icon_login_id.png") no-repeat 20px 17px
}

.login input[type="text"]:hover, .login input[type="text"]:focus {
    background: url("../images/icon_login_id_on.png") no-repeat 20px 17px
}

.login input[type="text"]::-webkit-input-placeholder {
    color: #959ca7;
    font-size: 16px
}

.login input[type="text"]:-ms-input-placeholder {
    color: #959ca7;
    font-size: 16px
}

.login input[type="text"]::-ms-input-placeholder {
    color: #959ca7;
    font-size: 16px
}

.login input[type="text"]::placeholder {
    color: #959ca7;
    font-size: 16px
}

.login input[type="password"] {
    background: url("../images/icon_login_pw.png") no-repeat 20px 17px
}

.login input[type="password"]:hover, .login input[type="password"]:focus {
    background: url("../images/icon_login_pw_on.png") no-repeat 20px 17px
}

.login input[type="password"]::-webkit-input-placeholder {
    color: #959ca7;
    font-size: 16px
}

.login input[type="password"]:-ms-input-placeholder {
    color: #959ca7;
    font-size: 16px
}

.login input[type="password"]::-ms-input-placeholder {
    color: #959ca7;
    font-size: 16px
}

.login input[type="password"]::placeholder {
    color: #959ca7;
    font-size: 16px
}

.login .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.login .flex a + a::before {
    content: "";
    width: 2px;
    height: 15px;
    margin: 6px 6px 0 3px;
    background: #232425;
    opacity: 0.7
}

.login .flex a .checkbox > span {
    color: #818980;
    font-size: 14px
}

.login .btn-login {
    display: block;
    width: 100%;
    height: 50px;
    margin: 28px 0 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    background: #8fc31f;
    color: #fff;
    border-radius: 10px;
    cursor: pointer
}

.login .login-text {
    margin: 0 auto 12px;
    color: #818980;
    font-size: 16px;
    letter-spacing: -0.5px
}

.consulting {
    width: 340px;
    height: 24px;
    margin: 0 auto;
    padding-left: 23px;
    background: url(../images/icon_cons.png) no-repeat 0 50%/16px;
    line-height: 24px;
    text-align: left
}

.consulting > span {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-top: 0;
    vertical-align: -2px
}

.login-wrapper.type2 .login {
    border-radius: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.login-wrapper.type2 .login.left {
    display: block;
    border-right: 1px solid #e3e3e3
}

.login-wrapper.type2 .logo-login {
    display: none
}

.login-wrapper.type2 h1 {
    margin-top: 82px
}

.login .link {
    display: block;
    width: 200px;
    height: 40px;
    margin: 20px auto 46px;
    background: #8fc31f;
    color: #fff;
    border-radius: 5px
}

.login .link img {
    width: 8px;
    height: 14px;
    vertical-align: -1px
}

.login .login-img {
    display: block;
    width: 371px;
    height: 246px;
    margin: 0 auto
}

.login-title {
    font-size: 28px;
    line-height: 41px;
    font-weight: 600
}

.login.left {
    padding-top: 84px
}

.login-wrapper .lang {
    width: 100%;
    margin-top: 28px
}

.login-wrapper .lang > a {
    font-weight: 700;
    color: #818980
}

.login-wrapper .lang > a.on {
    color: #8fc31f
}

.login-wrapper .lang > a + a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 11px 0 5px;
    background: #d3dad3;
    vertical-align: 0
}

.contents .contents-title {
    position: relative;
    height: 25px;
    margin: 0 0 15px;
    line-height: 21px;
    font-size: 18px;
    font-weight: 700
}

.contents .lnb-route {
    position: absolute;
    top: 22px;
    right: 32px
}

.contents .lnb-route > ul li {
    float: left;
    padding-left: 8px
}

.contents .lnb-route > ul li .home {
    overflow: hidden;
    display: block;
    width: 16px;
    height: 18px;
    text-indent: -999999px;
    background-image: url("../images/icon_home.png");
    background-position: 0 3px;
    background-repeat: no-repeat
}

.contents .lnb-route > ul li > a {
    margin-left: 4px;
    line-height: 15px;
    font-weight: 300;
    color: #818980;
    font-size: 12px
}

.contents .lnb-route > ul li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    background-image: url("../images/icon_top_arrow.png");
    background-position: 0 0;
    background-repeat: no-repeat
}

.contents .lnb-route > ul li:first-child::before {
    content: "";
    display: none
}

.contents .inner-title {
    margin: 0 0 5px;
    color: #333;
    font-size: 16px;
    line-height: 25px;
    font-weight: 600;
    letter-spacing: -0.2px
}

.contents .inner-title.type2 {
    margin: 0;
    padding: 9px 20px;
    border-bottom: 1px solid #e9ece9
}

.contents .inner-title.type3 {
    margin: 0;
    padding: 12px 20px;
    border-bottom: 1px solid #e9ece9
}

.contents .reset {
    position: absolute;
    top: 13px;
    right: 20px;
    width: 23px;
    height: 23px;
    background-image: url("../images/icon_reset.png");
    background-position: 0 0;
    background-repeat: no-repeat
}

.contents .box {
    position: relative;
    margin: 0 0 20px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eaecee;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.0470588);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.0470588)
}

.contents .box.type2 {
    padding: 0;
    height: auto
}

.contents .box.type3 {
    padding: 20px 20px 0
}

.contents .box.type4 {
    height: 100%;
    padding: 0
}

.contents .box.type4 .box-contens {
    padding: 20px 20px 0 20px
}

.contents .box.type4.height-auto {
    height: auto
}

.contents .box.type4.full {
    width: 100%
}

.contents .bg-box {position: relative;width: 100%; margin-bottom: 20px;background: #fff; border-radius: 10px; border: 1px solid #eaecee; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.0470588); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.0470588)}
.contents .flex-box-inner {flex-basis: 50%; border-bottom: 1px solid #eaecee;}
.contents .flex-box-inner + .flex-box-inner {border-left: 1px solid #eaecee;}
.flex-box-inner .box-contents {padding: 20px 40px;}
.flex-box-inner .box-contents .column {margin-bottom: 20px;}
.bottom-table-wrap {padding: 24px 32px 40px;}

.contents .layout-accrodion {
    position: relative;
    border-top: 1px solid #d3dad3;
    margin-top: 24px;
    padding: 23px 0 0
}

.contents .layout-accrodion > a {
    position: absolute;
    width: 32px;
    height: 32px;
    top: -17px;
    left: 50%;
    margin-left: -23px
}

.contents .layout-accrodion > a::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    width: 100%;
    background-image: url("../images/icon_detail_accordion.png");
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.contents .layout-accrodion .layout-accrodion-box {
    display: none;
    -webkit-transition: all 4s;
    transition: all 4s
}

.contents .layout-accrodion.active a::before {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

.contents .layout-accrodion.active .layout-accrodion-box {
    display: block;
    -webkit-transition: all 10s;
    transition: all 10s
}

.contents .layout-accrodion.type02 {
    margin-top: 4px
}

.contents .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.contents .flex.justify-end {justify-content: flex-end;}

.contents .flex.gap10 {gap: 10px; width: 100%;}

.contents .flex .box-left {
    width: 100%;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.contents .flex .box-left.width-430 {
    max-width: 430px
}

.contents .flex .box-left.width-521 {
    max-width: 521px
}

.contents .flex .box-left.width-504 {
    max-width: 504px
}

.contents .flex .box-left.width-504 + .width-504 {
    margin-left: 20px
}

.contents .flex .box-left.width-746 {
    max-width: 746px
}

.contents .flex .box-left.width-766 {
    max-width: 766px
}

.contents .flex .box-left + .box-right {
    margin-left: 20px
}

.contents .flex .box-right {
    width: 100%
}

.contents .flex .box-right .column + .column {
    margin-top: 20px
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.button-group-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    min-height: 40px;
    margin-bottom: 10px
}

.margin-top20 {
    margin-top: 20px
}

.button-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.button-group.left {
    position: absolute;
    left: 0;
    top: 10px
}

.button-group.right {
    margin-left: auto
}

.button-group.center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.contents.disappear .btn-tree-toggle {
    right: auto;
    left: -30px
}

.contents.disappear .left {
    position: absolute
}

.contents.disappear .left > .box {
    overflow: hidden;
    width: 0;
    opacity: 0
}

.contents.disappear .right {
    width: calc(100% - 30px);
    margin-left: 0;
    padding-right: 0
}

.btn {
    display: inline-block;
    width: auto;
    min-width: 140px;
    height: 40px;
    border-radius: 10px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
    line-height: 39px;
    background-color: #8fc31f;
    text-align: center
}

.btn > span {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #fff
}

.btn + .btn {
    margin-left: 10px
}

.input + .btn {
    margin-left: 20px
}

.box.full .input + .btn {
    margin-left: 10px
}

.btn.search {
    width: auto;
    min-width: 90px;
    padding-left: 36px;
    background-color: #8fc31f;
    background-size: 16px;
    background-image: url("../images/icon_search.png");
    background-position: 12px 50%;
    background-repeat: no-repeat;
    font-size: 14px;
    color: #fff
}

.btn.search.width-140 {
    min-width: 140px;
    background-position: 25% 50%
}

.btn.search.normal {
    width: 140px;
    padding-left: 28px;
    background-color: #8fc31f;
    background-size: 16px;
    background-image: url("../images/icon_search.png");
    background-position: 20px 56%;
    background-repeat: no-repeat
}

.btn.mini {
    width: auto;
    min-width: 64px;
    height: 32px;
    font-size: 14px;
    line-height: 30px
}

.btn.little {
    width: 72px;
    height: 32px;
    font-size: 14px;
    line-height: 30px
}

.btn.little.type02 {
    width: auto;
    min-width: 110px
}

.btn.small {
    min-width: 90px;
    font-size: 14px
}

.btn.white {
    color: #8fc31f;
    border: 1px solid #8fc31f;
    background-color: #fff
}

.btn.white > span {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #8fc31f
}

.btn.white:hover {
    color: #fff;
    border: 1px solid #8fc31f;
    background-color: #8fc31f
}

.btn.white:hover > span {
    color: #fff
}

.btn.gray {
    background-color: #6d716c
}

.btn.gray > span {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #fff
}

.btn.darkgray {
    background-color: #434f54
}

.btn.darkgray > span {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #fff
}

.btn.orange {
    color: #fff;
    background-color: #fca600
}

.btn.orange.white {
    background-color: #fff;
    border: 1px solid #fca600;
    color: #fca600
}

.btn.orange.white:hover {
    background-color: #fca600;
    color: #fff
}

.btn.orange > span {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #fff
}

.btn.black {
    border: 1px solid #434f54;
    background-color: #fff
}

.btn.black:hover {
    background-color: #434f54
}

.btn.black:hover > span {
    color: #fff
}

.btn.black > span {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    color: #434f54
}

.btn.excel {
    cursor: pointer;
    background-position: 14px 11px;
    background-repeat: no-repeat
}

.btn.excel.export {
    background-image: url(../images/icon_excel_export.png)
}

.btn.excel.import {
    background-image: url(../images/icon_excel_import.png)
}

.btn.excel > span {
    padding-left: 20px
}

.btn.excel:hover.export {
    background-image: url(../images/icon_excel_export_on.png)
}

.btn.excel:hover.import {
    background-image: url(../images/icon_excel_import_on.png)
}

.btn.download {
    width: 97px;
    height: 26px;
    padding-left: 22px;
    font-size: 14px;
    color: #8fc31f;
    border: 1px solid #8fc31f;
    background-image: url("../images/icon_download.png");
    background-position: 22px 7px;
    background-repeat: no-repeat;
    background-color: #fff
}

.btn.download > span {
    color: #8fc31f
}

.btn.download:hover, .btn.download.on {
    color: #fff;
    background-image: url("../images/icon_download_on.png");
    background-position: 22px 7px;
    background-repeat: no-repeat;
    background-color: #8fc31f
}

.btn.download:hover > span, .btn.download.on > span {
    color: #fff
}

.btn.download.type02 {
    border: 0;
    background-image: url("../images/icon_download02.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    padding-left: 0;
    min-width: 50px
}

.btn.download.type02:hover, .btn.download.type02.on {
    background-image: url("../images/icon_download02.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent
}

.btn.add {
    padding-left: 28px;
    background-image: url(../images/btn_plus.png);
    background-repeat: no-repeat;
    background-position: 21px 50%;
    background-size: 15px;
    font-size: 14px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.btn.add.normal {
    background-position: 48px 50%
}

.btn.all-control {
    position: relative;
    width: auto;
    min-width: 110px;
    padding-right: 27px
}

.btn.all-control span {
    font-size: 14px
}

.btn.all-control span.ko::before {
    content: "전체 펼침"
}

.btn.all-control span.en::before {
    content: "Open All"
}

.btn.all-control span::after {
    display: block;
    content: "";
    position: absolute;
    right: -9px;
    top: 13px;
    width: 10px;
    height: 6px;
    background-image: url("../images/icon_list_all.png");
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.btn.all-control:hover {
    background-color: #fff;
    color: #8fc31f
}

.btn.all-control:hover > span {
    color: #8fc31f
}

.btn.all-control.active > span.ko::before {
    content: "전체 닫힘"
}

.btn.all-control.active > span.en::before {
    content: "Close All"
}

.btn.all-control.active > span::after {
    display: block;
    content: "";
    position: absolute;
    right: -9px;
    top: 13px;
    width: 10px;
    height: 6px;
    background-image: url("../images/icon_list_all.png");
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

.list-accordion, .list-accordion-type02 {
    position: relative
}

.list-accordion .reset, .list-accordion-type02 .reset {
    position: absolute;
    right: 60px
}

.list-accordion .list-control, .list-accordion-type02 .list-control {
    position: absolute;
    top: 11px;
    right: 20px;
    padding: 7px 5px
}

.list-accordion .list-control::after, .list-accordion-type02 .list-control::after {
    display: block;
    content: "";
    width: 21px;
    height: 13px;
    background-image: url("../images/icon_list.png");
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 0.4s;
    transition: all 0.4s
}

.list-accordion .box-contens, .list-accordion-type02 .box-contens {
    overflow: hidden;
    max-height: 0;
    padding: 0 20px !important;
    border-top: 0;
    -webkit-transition: all .4s;
    transition: all .4s
}

.list-accordion.active .list-control::after, .list-accordion-type02.active .list-control::after {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

.list-accordion.active .box-contens, .list-accordion-type02.active .box-contens {
    overflow: hidden;
    max-height: 331px;
    padding: 20px !important
}

.btn-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: start;
    align-content: flex-start
}

.btn-wrap .btn.big {
    width: 48.5%;
    background-color: #ededed
}

.btn-wrap .btn.big > span {
    position: relative;
    display: inline;
    padding-left: 24px;
    color: #818980
}

.btn-wrap .btn.big:hover, .btn-wrap .btn.big.active {
    background-color: #8fc31f
}

.btn-wrap .btn.big:hover > span, .btn-wrap .btn.big.active > span {
    color: #fff
}

.btn-wrap .btn.big + .big {
    margin-left: 0;
    margin-top: 15px
}

.btn-wrap .btn.big:nth-child(2) {
    margin-top: 0
}

.device-detail > span {
    background-image: url("../images/icon_device_info.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.device-detail > span.control-list {
    background-image: url("../images/icon_device_control_list.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.device-detail > span.fota {
    background-image: url("../images/icon_device_fota.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.device-detail > span.push {
    background-image: url("../images/icon_device_push.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.device-detail > span.control {
    background-image: url("../images/icon_device_control.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.device-detail:hover > span, .device-detail.active > span {
    background-image: url("../images/icon_device_info_on.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.device-detail:hover > span.control-list, .device-detail.active > span.control-list {
    background-image: url("../images/icon_device_control_list_on.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.device-detail:hover > span.fota, .device-detail.active > span.fota {
    background-image: url("../images/icon_device_fota_on.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.device-detail:hover > span.push, .device-detail.active > span.push {
    background-image: url("../images/icon_device_push_on.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.device-detail:hover > span.control, .device-detail.active > span.control {
    background-image: url("../images/icon_device_control_on.png");
    background-position: 0 center;
    background-repeat: no-repeat
}

.button-group .btn-right {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-left: auto
}

.btn-status {
    display: inline-block;
    width: auto;
    min-width: 64px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-radius: 13px
}

.btn-status.save {
    background-color: #fca600
}

.btn-status.distribute {
    background-color: #8fc31f
}

.btn-status.end {
    background-color: #9fa69e
}

.search {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.abmn-view .column.full.search .btn.search {
    width: 140px;
    padding-left: 66px;
    background-position: 45px 56%;
    text-align: left;
    font-size: 16px
}

.input {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    font-size: 14px
}

.input .text-view {
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    line-height: 38px;
    font-size: 16px;
    border: 1px solid #dce1dc;
    border-radius: 5px;
    background-color: #f8fafb;
    color: #202020
}

.table .text-view {
    min-height: 30px;
    line-height: 28px
}

.radio .text-view {
    border: none;
    background: none
}

.input.text, .select.long {
    width: 100%;
    max-width: 350px
}

.input.text.calendar {
    max-width: 170px
}

.input.text.calendar.seconds {
    max-width: 185px
}

.input.text .textarea {
    overflow-y: auto;
    display: block;
    width: 100%;
    padding: 10px 10px 10px 19px;
    resize: none;
    line-height: 22px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #dce1dc;
    text-align: left;
    background-color: #fff;
    font-size: 14px;
    color: #333
}
.input.text .textarea::placeholder {color: #818980;}

.input.text input, .input.view {
    display: block;
    width: 100%;
    max-width: 350px;
    height: 40px;
    padding-left: 19px;
    border-radius: 8px;
    border: 1px solid #dce1dc;
    font-size: 1em;
    font-family: inherit;
    text-align: left;
    background-color: #fff
}

.input.file-add {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    max-width: 480px;
    padding-right: 40px
}

.input.file-add.width-380 {
    max-width: 380px !important
}

.table .input.text input {
    margin: 0 10px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    border-radius: 9px
}

.table .input.text input::-webkit-input-placeholder {
    color: #818980
}

.table .input.text input:-ms-input-placeholder {
    color: #818980
}

.table .input.text input::-ms-input-placeholder {
    color: #818980
}

.table .input.text input::placeholder {
    color: #818980
}

.abmn-view .table.type2 .view {
    width: 100%
}

.input.view > span:not(.remove) {
    display: inline-block;
    margin-left: 7px;
    line-height: 38px;
    vertical-align: middle;
    font-size: 14px
}

.input.view > .remove {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -6px;
    background: url(../images/icon_remove.png) no-repeat center;
    cursor: pointer
}

.input.view.file-add {
    overflow: hidden;
    width: 100%;
    max-width: 430px;
    margin-left: 10px;
    padding-right: 40px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.input.view + .btn {
    margin-left: 10px
}

.column > .show {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex
}

.input.text input[value] {
    color: #333;
}
.input.text input::placeholder {color: #818980;}

.input.text input[disabled], .input.text input[readonly] {
    cursor: not-allowed;
    background: #dce1dc;
    color: #202020
}

.input.text input[readonly] {
    cursor: default
}

.input.text input[disabled][placeholder] {
    color: #333
}

.text input:focus, .text input:active {
    border: 1px solid #8fc31f;
    -webkit-transition: border-color 0.8s;
    transition: border-color 0.8s
}

.input.text-center input {
    text-align: center
}

.text.medium {
    width: 100%;
    max-width: 310px
}

.text.medium2 {
    width: 100%;
    max-width: 343px
}

.text.short {
    width: 100%;
    max-width: 150px
}

.text.long {
    width: 100%;
    max-width: 630px
}

.text.long2 {
    width: 100%;
    max-width: 583px
}

.text.long3 {
    width: auto;
    min-width: 430px
}

.text.long4 {
    width: 100%;
    min-width: 530px
}

.text.long5 {
    max-width: 580px
}

.text.width420 {
    width: 100%;
    min-width: 420px
}

.select.long3 {
    width: 100%;
    min-width: 430px
}

.select.long4 {
    width: 100%;
    max-width: 530px
}

.select.long5 {
    width: 100%;
    max-width: 530px
}

.text.full {
    width: 100%;
    max-width: none
}

.text.long input, .text.long2 input, .text.long3 input, .text.long4 input, .text.long5 input, .text.width420 input, .select.long4 select, .select.long5 select, .text.medium2 input, .text.full input {
    max-width: none
}

.input.text .crc-data {
    width: 90px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    border-radius: 10px;
    background-color: #dce1dc;
    color: #333
}

.input.text .crc-result {
    color: #ec2b2b;
    font-size: 16px;
    height: 40px;
    line-height: 40px
}

.ex-text {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    color: #333;
    font-size: 16px;
    margin-left: 10px
}

.crc-data + .btn {
    margin-left: 10px
}

.btn + .crc-result {
    margin-left: 10px
}

.checkbox [type="checkbox"], .radio [type="radio"] {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0
}

.checkbox > span, .radio > span, .checkbox .check-view {
    height: 16px;
    padding-left: 24px;
    background: url(../images/checkbox.png) no-repeat 0 50%/16px;
    line-height: 16px
}

.check-group-wrapper .checkbox > span {
    padding-left: 24px
}

.checkbox input:checked + span, .checkbox .check-view.checked {
    background: url(../images/checkbox_on.png) no-repeat 0 50%/16px
}

.radio > span, .radio .check-view {
    height: 27px;
    padding-left: 24px;
    background: url(../images/radio.png) no-repeat 0 50%/16px;
    line-height: 27px
}

.radio input:checked + span, .radio .check-view.checked {
    background: url(../images/radio_on.png) no-repeat 0 50%/16px
}

.input.radio + .input.radio {
    margin-left: 15px
}

.input.radio + .input.checkbox {
    margin-left: 15px
}

.radio-group-wrapper .input.radio + .input.radio, .check-group-wrapper .input.checkbox + .input.checkbox {
    margin-left: 15px
}

.flex .checkbox-list {flex-basis: 50%;}
.checkbox-list {height: 196px; border: 1px solid #EAECEE; border-radius: 4px; overflow-x: hidden; overflow-y: auto;}
.checkbox-list .input.checkbox {display: block; width: 100%; padding: 10px 16px; border-bottom: 1px solid #EAECEE; background-color: #fff; box-sizing: border-box;}
.checkbox-list .input.checkbox:hover {background-color: #F7FAF1;}

.column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 40px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.column .right {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-left: auto
}

.column.txt-top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.column.txt-top > .label {
    padding-top: 13px
}

.column > div + div {
    margin-left: 10px
}

.label, .column .label {
    width: 100%;
    max-width: 130px;
    font-weight: 700;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.label.important::after {
    content: "";
    display: inline-block;
    margin-left: 0;
    width: 10px;
    height: 15px;
    background: url(../images/icon_important.png) no-repeat 0px 0
}

.error-ms {
    font-size: 14px;
    line-height: 16px;
    color: #ec2b2b
}

.abmn-list .column.full .text.calendar {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 150px;
    flex: 0 0 150px;
    margin-left: 10px
}

.text.calendar input {
    padding-left: 42px;
    background: url(../images/bg_calendar.png) no-repeat 16px 50%/18px
}

.text.calendar input[value] {
    color: #333
}

.text.calendar input[readonly] {
    background: url(../images/bg_calendar.png) no-repeat 16px 50%/19px;
    color: #333
}

.text.calendar + .swug {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 40px;
    margin-left: 5px;
    vertical-align: middle;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #dce1dc
}

.swug + .text.calendar {
    margin-left: 5px
}

.select {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-width: 146px;
    height: 40px;
    background: #fff;
    font-size: 0.875em;
    border: 1px solid #dce1dc;
    text-align: left;
    border-radius: 8px
}

.select.small {
    height: 26px;
    min-width: 96px;
    border-radius: 10px;
    color: #999;
    border: 1px solid #d3dad3
}

.select.small .selected {
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: #838a82
}

.select.small .select-list {
    border: 1px solid #d3dad3
}

.select.small .select-list li {
    height: 26px;
    line-height: 26px;
    font-size: 14px
}

.select.small.on .select-list {
    top: 25px
}

.select.small.revert .select-list {
    top: auto;
    bottom: 25px
}

.select.small.revert.on .select-list {
    top: auto;
    bottom: 25px;
    max-height: 104px;
    opacity: 1
}

.snb > li {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 40px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.snb .select {
    min-width: 75px;
    height: 40px;
    background: #434f54;
    font-size: 14px;
    border: 0;
    text-align: left
}

.select.list-view {
    min-width: 134px
}

.select.on {
    border-color: #8fc31f
}

.select.on .select-list {
    visibility: visible;
    top: 100%;
    max-height: 200px;
    opacity: 1
}

.select-list {
    visibility: hidden;
    background: #fff
}

.select-list li:hover {
    color: #8fc31f
}

.select-list li.on {
    color: #8fc31f
}

.select .select-list {
    overflow-y: auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-height: 0;
    -webkit-transition: opacity 0.15s;
    transition: opacity 0.15s;
    border: 1px solid #e4e8e5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    border-radius: 8px;
    z-index: 20
}

.select .selected {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 38px;
    padding: 0 42px 0 20px;
    line-height: 38px;
    background-color: #fff;
    background-image: url(../images/bg_select.png);
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) 50%;
    background-size: 11px 6px;
    z-index: 12;
    cursor: pointer;
    font-weight: 500;
    border-radius: 8px;
    color: #5c5c5c;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px
}

.snb .select .selected {
    color: #d3dad3;
    background-color: #434f54
}

.snb .select .select-list {
    border: 0;
    border-radius: 0
}

.snb .on.select .select-list {
    top: 49px;
    background: #f4f6f8;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    color: #333
}

.select.long .selected {
    background: #fff url(../images/bg_select.png) no-repeat 95% 50%/15px 9px;
    background: #fff url(../images/bg_select.png) no-repeat calc(100% - 15px) 50%/15px 9px
}

.select-list li {
    overflow: hidden;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    line-height: 40px;
    color: #5c5c5c;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px
}

.select select {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    opacity: 0
}

.select span {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    line-height: 36px;
    color: #343438
}

.revert .select-list {
    top: auto;
    bottom: 25px
}

.revert.on .select-list {
    top: 25px;
    max-height: 156px;
    opacity: 1
}

.search-nember {
    padding-left: 10px;
    height: 24px;
    line-height: 24px;
    background-image: url("../images/icon_search_nember.png");
    background-position: 0 9px;
    background-repeat: no-repeat
}

.search-nember .icon-none {
    background: none;
    padding-left: 0
}

.search-nember > sub {
    font-size: 14px;
    color: #818980
}

.search-nember.litter {
    height: 17px;
    line-height: 17px;
    background-position: 0 9px
}

.column .search-nember > span {
    font-weight: 600
}

.column .search-nember + .select {
    margin-left: 10px
}

.column + .table {
    margin-top: -10px
}

.type3 {
    position: relative
}

.type3 .table {
    margin-top: 20px
}

.type3 .btn.device {
    position: absolute;
    top: 8px;
    right: 20px;
    padding-left: 29px;
    background-image: url("../images/icon_device.png");
    background-position: 12px 12px;
    background-repeat: no-repeat
}

.type3 .btn.device > span {
    position: relative
}

.table-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px
}

.table-wrap.table-scroll {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: -10px
}

.table-wrap .table-Bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 43px;
    background: #f4f6f8;
    z-index: 1;
    border-top: 1px solid #e4e8e5
}

.table-wrap .table.row {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    min-height: calc(466px - 44px);
    max-height: calc(466px - 44px);
    margin-top: 0;
    margin-top: 42px
}

.table-wrap .table.row.row-400 {
    min-height: calc(422px - 42px);
    max-height: calc(422px - 42px)
}

.table-wrap .table.row.row-240 {
    min-height: calc(254px - 42px);
    max-height: calc(254px - 42px)
}

.table-wrap .table.row.row-170 {
    min-height: calc(170px - 42px);
    max-height: calc(170px - 42px)
}

.table-wrap .table.row th {
    height: 0;
    padding: 0;
    background: none
}

.table-wrap .table.row th > div {
    position: absolute;
    top: 0;
    width: inherit;
    height: 42px;
    font-size: 14px;
    color: #333;
    font-weight: 700;
    line-height: 16px;
    z-index: 2;
    display: flex; justify-content: center; align-items: center;
}

.table-wrap .table.row th > div.line {
    border-left: 1px solid #e4e8e5
}

.table-wrap .table.row tbody tr th.bg {
    background-color: #f4f6f8
}

.table {
    margin-top: 10px;
    background: #fff
}

.table.scroll-x {
    overflow-x: auto;
    width: 100%
}

.table.row .no-result td {
    height: 150px
}

.table.row .no-result:hover td, .table.row.no-hover tr:hover td, .table.row tr td.tab-box-td:hover {
    background: #fff;
    color: #222;
    cursor: default
}

.table.row .bg-red td, .body .table.row .bg-red:hover td {
    padding: 10px 5px;
    background: #f7b3b3
}

.table.row .bg-orange td, .body .table.row .bg-orange:hover td {
    padding: 10px 5px;
    background: #fce398
}

.table.row th {
    background: #f4f6f8;
    color: #333;
    font-size: 14px;
    font-weight: 700
}

.table.row:not(.default-table) td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px
}

.table.row td.line {
    border-left: 1px solid #e4e8e5
}

.table.row th, .table.row td {
    height: 42px;
    padding: 4px 0 5px;
    vertical-align: middle;
    text-align: center
}

.table.row th.text-disabled, .table.row td.text-disabled {
    color: #a6a7a8
}

.table.row th > div.text-disabled {
    color: #a6a7a8
}

.table.row td a.download {
    padding-right: 21px;
    background: url(../images/file_download.png) no-repeat 100% 50%/16px
}

.table.row td.text-left {
    text-align: left;
    padding: 0 20px
}

.table.row th.text-left {padding: 4px 16px; text-align: left;}

table {
    width: 100%;
    table-layout: fixed
}

.table.row table {
    border-top: 1px solid #e4e8e5
}

.table.row tbody {
    border-top: 1px solid #e4e8e5;
    border-bottom: 1px solid #e4e8e5
}

.table.row tbody tr {
    border-bottom: 1px solid #e4e8e5
}
.table.row tbody.border-bottom-none, .table.row tbody tr.border-bottom-none {border-bottom: 0;}

.table.row tbody tr:hover {
    cursor: pointer;
    background: #f7faf1
}

.table.row tbody tr:hover td a.download {
    background: url(../images/file_download_hover.png) no-repeat 100% 50%/16px
}

.table.row tbody tr.none:hover td {
    color: #232425;
    background: #fff
}

.table.row .btn {
    width: auto;
    height: 26px;
    margin: 0 auto;
    line-height: 24px
}

.table.row.input-table td {overflow: initial;}
.table.row.input-table .input.text input, .table.row.input-table .text.calendar input {height: 40px; line-height: 40px; margin: 0; border-radius: 8px;}
.table.row.input-table .input + .btn {margin-left: 20px;}
.table.row.input-table .input.view.file-add {display: inline-block;}
.table.row.input-table .btn {height: 40px; line-height: 40px; margin: 0;}

.table.col {
    margin: 0;
    padding: 0;
    border-radius: 10px
}

.table.col tr {
    border-bottom: 1px solid rgba(211, 218, 211, 0.5)
}

.table.col tr th {
    background-color: #eaeef1;
    padding: 15px 5px;
    text-align: center
}

.table.col tr td {
    padding: 5px 5px 5px 20px;
    font-size: 14px
}

.table.col tr:first-child > th:first-child {
    border-radius: 10px 0 0 0
}

.table.col tr:last-child > th:first-child {
    border-radius: 0 0 0 10px
}

.table.col.all-border {
    border: 1px solid #e4e8e5
}

.table.col.all-border tr:last-child {
    border-bottom: 0
}

.table.col.small {
    border-top: 1px solid rgba(211, 218, 211, 0.5)
}

.table.col.small tr th {
    padding: 12px 5px;
    background-color: #eaeaef
}

.table.col.small tr td {
    padding: 12px 5px 12px 20px;
    font-size: 14px
}

.table.col.scroll {
    overflow-y: auto;
    height: auto;
    max-height: 206px
}

.abmn-view .table.type2 .input input {
    height: 40px;
    line-height: 38px
}

.abmn-view .table.type2 .input.long {
    width: 742px;
    max-width: none
}

.abmn-view .table.type2 .input.long input {
    max-width: none
}

.abmn-view .table.type2 .input.search {
    width: 100%;
    max-width: 407px
}

.abmn-view .table.type2 .input.search .btn {
    width: 23px
}

.abmn-view .table.type2 .column {
    padding: 0
}

.abmn-view .table.type2 tr + tr th, .abmn-view .table.type2 tr + tr td {
    border-top: 1px solid #e4e8e5
}

.popup-bottom .paging {
    padding-bottom: 10px
}

.table .paging {
    padding-bottom: 10px
}

.paging-wrapper {
    position: relative
}

.paging {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%;
    padding: 20px 0 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.paging > span {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    overflow: hidden;
    border-radius: 4px
}

.paging a {
    display: block;
    width: 28px;
    height: 28px;
    border: 1px solid #edeff0;
    text-align: center;
    background-color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    border-radius: 6px
}

.paging > span a:hover {
    color: #333;
    background: #d3dad3;
    border-color: #d3dad3
}

.paging > span a.on {
    color: #fff;
    background: #8fc31f;
    border-color: #8fc31f
}

.paging a + a {
    margin-left: 2px
}

.paging .control {
    margin-right: 2px;
    background-image: url(../images/paging_db_prev.png);
    background-repeat: no-repeat;
    text-indent: -9999em;
    background-position: 6px 8px
}

.paging .control.prev {
    margin-right: 12px;
    background-image: url(../images/paging_prev.png);
    background-position: 5px 8px
}

.paging .control.next {
    margin-left: 12px;
    background-image: url(../images/paging_next.png);
    background-position: 6px 8px
}

.paging .control.db-next {
    background-image: url(../images/paging_db_next.png);
    background-position: 6px 8px
}

.abmn-list .label {
    margin-bottom: 12px
}

.abmn-list .box.search-area, .abmn-view .box.search-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.abmn-view .box.search-area.two, .contents .box.two {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.abmn-view .box.search-area.two .column, .contents .box.two .column {
    width: 720px
}
.abmn-view .box.search-area.three, .contents .box.three {gap: 0 40px;}
.abmn-view .box.search-area.three .column, .contents .box.three .column {
    width: 477px
}

.box.search-area .column.mgl-none {margin-left: 0 !important;}

.contents .box.menu {
    height: calc(100% - 50px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    overflow: auto
}

.abmn-view .box.search-area.three .column .input {
    width: 100%
}

.abmn-view .box.search-area.three .column.middle {
    width: 1006px
}

.abmn-view .box.search-area.three .column.full, .contents .box.three .column.full, .contents .box.two .column.full {
    width: 100%;
    margin-left: 0
}

.abmn-view .search-area .column, .contents .box.two .column, .contents .box.three .column {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-bottom: 20px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

.contents .box.full .column {
    margin-bottom: 20px
}

.contents .box.three .column:last-child, .contents .box.search-area.two .column.full.flex {
    margin-bottom: 10px
}

.abmn-view .search-area .column.column-btn {
    margin-bottom: 10px
}

.abmn-view .box.search-area .column .select {
    width: calc(100% - 130px);
    margin-left: 10px
}

.abmn-view .box.search-area .column.search {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 0
}

.abmn-view .box .column + .column.search {
    margin-top: 0
}

.abmn-view .column.middle .text.long {
    width: 100%;
    max-width: 866px
}

.abmn-view .box.search-area .column .select.middle {
    width: 100%;
    max-width: 160px
}

.status-graph {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.status-graph .graph-data + .graph-number {
    margin-left: 10px
}

.status-graph .line {
    overflow: hidden;
    float: left;
    width: 130px;
    height: 6px;
    margin-top: 5px;
    border-radius: 10px;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    background-color: rgba(252, 166, 0, 0.16)
}

.graph-number {
    float: left;
    color: #fca600
}

.status-graph .line.green + .graph-number {
    color: #8fc31f
}

.status-graph .line.gray + .graph-number {
    color: #9fa69e
}

.status-graph .line + .graph-number {
    margin-left: 9px
}

.status-graph .line.green {
    background-color: rgba(143, 195, 31, 0.16)
}

.status-graph .line.gray {
    background-color: rgba(159, 166, 158, 0.16)
}

.status-graph .line .line-color {
    width: 0;
    height: 100%;
    -webkit-transition: width 0.5s ease-in 0.1s;
    transition: width 0.5s ease-in 0.1s;
    background-color: #fca600
}

.status-graph .line.green .line-color {
    background-color: #8fc31f
}

.status-graph .line.gray .line-color {
    background-color: #9fa69e
}

.status-graph .graph-number + .status-text {
    margin-top: 3px
}

.status-text {
    display: block;
    float: left;
    width: 100%;
    max-width: 180px;
    padding-right: 50px;
    text-align: center;
    font-size: 12px;
    color: #818980
}

.dashboard.contents .box-left, .dashboard.contents .box-right {
    position: relative
}

.dashboard.contents .box.full .reset {
    top: 13px;
    right: 14px
}

.dashboard.contents .reset {
    top: 2px;
    right: 8px
}

.dashboard.contents button[data-select="productRegistration"], .dashboard.contents button[data-select="filterReplacement"] {
    background-color: #444f55;
    border: 1px solid #444f55
}

.dashboard.contents .layout-accrodion-box .select.on .select-list {
    top: 28px
}

.dashboard.contents .layout-accrodion-box .select .selected {
    height: 28px;
    line-height: 28px
}

.dashboard.contents .box .city-box {
    padding: 0 20px
}

.dashboard.contents .box .city-box .column {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 12px;
    margin-bottom: 0;
    padding: 10px 0 10px
}

.dashboard.contents .box .city-box .column:first-child {
    padding-top: 0;
    border-top: 0
}

.dashboard.contents .box .city-box .column .list-wrap {
    width: calc(100% - 280px);
    margin-left: 20px
}

.dashboard.contents .box .city-box .column .list-wrap .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 5px
}

.dashboard.contents .box .city-box .column .list-wrap .title .top5 {
    height: 32px;
    line-height: 32px;
    padding-left: 15px;
    background-image: url("../images/icon_arrow.png");
    background-position: 0 10px;
    background-repeat: no-repeat
}

.dashboard.contents .box .city-box .column .list-wrap .list > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.dashboard.contents .box .city-box .column .list-wrap .list > ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: calc(20% - 10px);
    padding: 18px 17px 17px;
    border: 1px solid #d3dad3;
    border-radius: 10px
}

.dashboard.contents .box .city-box .column .list-wrap .list > ul li:nth-child(1) .ranking {
    background-color: #8fc31f
}

.dashboard.contents .box .city-box .column .list-wrap .list > ul li .ranking {
    position: relative;
    width: auto;
    min-width: 30px;
    height: 30px;
    line-height: 30px;
    margin-right: 38px;
    font-size: 18px;
    text-align: center;
    border-radius: 15px;
    background-color: #9fa69e;
    color: #fff
}

.dashboard.contents .box .city-box .column .list-wrap .list > ul li .ranking::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 47px;
    width: 1px;
    height: 33px;
    background-color: #d3dad3
}

.dashboard.contents .box .city-box .column .list-wrap .list > ul li .list-amount {
    display: inline-block
}

.dashboard.contents .box .city-box .column .list-wrap .list > ul li .list-amount .country {
    line-height: 14px;
    color: #333;
    font-size: 14px
}

.dashboard.contents .box .city-box .column .list-wrap .list > ul li .list-amount .number {
    margin-top: 2px;
    line-height: 30px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.2px
}

.dashboard.contents .box .city-box .city-accordion-wrapper.active .city-accordion {
    display: block;
    -webkit-transition: width 2s, height 2s;
    transition: width 2s, height 2s
}

.dashboard.contents .box .city-box .city-accordion-wrapper.active .city-accordion + .button-group button.city {
    position: relative
}

.dashboard.contents .box .city-box .city-accordion-wrapper.active .city-accordion + .button-group button.city > span::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 15px;
    height: 15px;
    background-image: url("../images/icon_city_close.png");
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

.dashboard.contents .box .city-box .city-accordion-wrapper .city-accordion {
    display: none;
    -webkit-transition: width 4s, height 4s;
    transition: width 4s, height 4s
}

.dashboard.contents .box .city-box .city-accordion-wrapper .city-accordion .column {
    border-top: 1px solid #e9ece9
}

.dashboard.contents .box .city-box .city-accordion-wrapper .city-accordion .column:first-child {
    padding-top: 10px
}

.dashboard.contents .box .city-box .city-accordion-wrapper .city-accordion + .button-group {
    margin: 10px 0 30px
}

.dashboard.contents .box .city-box .city-accordion-wrapper .city-accordion + .button-group button.city {
    position: relative
}

.dashboard.contents .box .city-box .city-accordion-wrapper .city-accordion + .button-group button.city > span {
    width: auto;
    padding-left: 23px
}

.dashboard.contents .box .city-box .city-accordion-wrapper .city-accordion + .button-group button.city > span::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 15px;
    height: 15px;
    background-image: url("../images/icon_city_open.png");
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

.dashboard .box.graph-box {
    position: relative
}

.dashboard .box.graph-box .point {
    position: absolute;
    top: 20px;
    left: 20px
}

.dashboard .box.graph-box .left {
    position: absolute;
    top: 20px;
    left: 20px
}

.dashboard .box.graph-box .right {
    position: absolute;
    top: 20px;
    right: 20px
}

.dashboard .box.graph-box .right.top-6 {
    top: 6px
}

.dashboard .box.graph-box .right .vertical-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline
}

.dashboard .box.graph-box .right .vertical-box .select + .btn {
    margin-left: 7px
}

.dashboard .box.type4 .column {
    padding: 20px
}

.dashboard .box.type4.basic {
    margin-bottom: 0
}

.dashboard .box.type4 .right {
    position: absolute;
    right: 20px;
    top: 52px
}

.dashboard .column.width-726 {
    width: 100%;
    max-width: 726px
}

.dashboard .column.width-706 {
    width: 100%;
    max-width: 706px
}

.dashboard .column.height-350 {
    height: 320px
}

.dashboard .select.width-100 {
    min-width: 98px
}

.dashboard .select.small {
    height: 30px;
    line-height: 30px
}

.country-wrap {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    min-width: 260px;
    max-width: 260px;
    height: 112px;
    margin-top: 9px;
    padding: 10px 20px 20px;
    border-radius: 10px;
    background-color: #eaeef1
}

.country-wrap img {
    position: absolute;
    top: 10px;
    right: 20px
}

.total-data {
    position: absolute;
    top: 200px;
    left: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 201px;
    height: 100px;
    margin-left: -100px;
    border-radius: 105px 105px 0 0
}

.total-data .number {
    margin-top: 24px;
    line-height: 33px;
    color: #8fc31f;
    font-size: 24px;
    font-weight: 600;
    font-color: #333
}

.total-data .text {
    line-height: 25px;
    font-size: 14px
}

.country-name {
    padding-top: 9px;
    font-size: 14px
}

.total-amount {
    display: block;
    margin-top: 15px
}

.total-amount .text {
    width: calc(100% - 70px);
    line-height: 14px;
    color: #818980;
    font-size: 12px
}

.total-amount .text.type02 {
    font-size: 14px;
    color: #333
}

.total-amount .number {
    margin-top: 5px;
    line-height: 24px;
    font-size: 24px;
    font-weight: 700
}

.tab-box-td, .table.row.text-left-table table .tab-box-td {padding: 0;}
.tab-box-td > .tab-box-wrap {margin-top: 0;}
.tab-box-wrap {margin-top: -14px; margin-bottom: 20px; background-color: #f6f6f6;}
.tab-title-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, auto)); gap: -1px;}
.tab-title-list .tab-btn {display: block; width: 100%; height: 100%; padding: 10px; background-color: #fff; border: 1px solid #DCE1DC; color: #818980; box-sizing: border-box;}
.tab-title-list .tab-btn span {color: inherit;}
.tab-title-list > li.active .tab-btn {background-color: #8FC31F; border-color: #8FC31F; font-weight: bold; color: #fff;}
.tab-title-list > li.checked .tab-btn {position: relative; font-weight: bold; color: #426100;}
.tab-title-list > li.checked .tab-btn::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background-color: #426100;}
.tab-content-list {width: 100%;}
.tab-content-list > li {display: none; flex-wrap: wrap; gap: 24px 32px; padding: 20px 32px 32px;}
.tab-content-list > li.active {display: flex;}
.tab-content-list > li .check-all {flex-basis: 100%; width:
100%;}
.tab-flex-input {flex-basis: 100%; display: flex; gap: 10px;}
.tab-flex-input .label.icon {flex-shrink: 0; display: block; width: 14%; margin-top: 10px;}
.tab-flex-input .input.text {flex-grow: 1; max-width: none;}
.tab-flex-input .input.text input {width: 100%; max-width: none;}
.tab-flex-input .input.text textarea {width: 100%; height: 100px;}

.tab-box-wrap.model {margin: 0; background-color: #fff;}
.tab-box-wrap.model .tab-title-list {display: flex; flex-wrap: wrap;}
.tab-box-wrap.model .tab-title-list > li {flex-basis: 10%;}

.model-tab-box {width: 100%;}
.model-tab-box.close-tab-box + .column {margin-top: 16px;}
.model-title-list {display: flex;}
.model-title-list > li button {min-width: 190px; height: 46px; line-height: 22px; padding: 12px; border-radius: 6px 6px 0 0; background-color: #fff; color: #818980; border: 1px solid #EAECEE; border-bottom: 0;}
.model-title-list > li.active button {background-color: #434F54; font-weight: bold; color: #fff; border-color: #434F54;}
.model-content-wrap {background-color: #fff; border: 1px solid #EAECEE; border-radius: 0 0 10px 10px; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.047); box-shadow: 0 2px 4px rgba(0,0,0,0.047);}
.model-name-wrap {display: flex; align-items: center; gap: 10px; padding: 20px 30px; border-bottom: 1px solid #EAECEE;}
.model-name-wrap > label {display: block; width: 160px; font-size: 16px; font-weight: bold; color: #333;}
.model-import-btn {display: inline-block; height: 40px; padding: 12px 16px; border-radius: 6px; background-color: #8FC31F; font-size: 14px; font-weight: 500; color: #fff;}
.model-import-btn.search {padding-left: 40px; background: url("../images/icon_search.png") #8FC31F no-repeat left 12px center/16px;}
.input-sub-text {font-size: 13px; color: #EC2B2B;}
.model-content-list > li {display: none; width: 100%; padding: 20px 30px 30px;}
.model-content-list > li.active {display: block;}
.model-content-list .button-group-wrapper {margin-bottom: 0;}
.tab-content + .tab-content {margin-top: 30px;}
.tab-title-wrap {position: relative; display: flex; justify-content: flex-start; align-items: flex-end; gap: 10px; min-height: 34px;}
.tab-title-wrap.between {justify-content: space-between;}
.tab-title-wrap.align-center {align-items: center;}
.tab-title-wrap .btn {height: 34px; line-height: 34px;}
.contents .tab-title-wrap .inner-title {margin-bottom: 0;}
.contents .tab-title-wrap a.reset {position: static;}
.close-tab-box .model-title-list > li button {padding: 10px; height: 42px; line-height: 20px;}
.close-tab-box .model-title-list > li button.close-tab-btn {display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 10px 12px 10px 40px;}
.close-tab-text {flex-grow: 1; text-align: center;}
.close-tab-box .model-title-list > li.active button.close-tab-btn .close-tab-text {color: #fff;}
.close-tab-icon {position: relative; display: inline-block; width: 16px; height: 16px;}
.close-tab-icon::before, .close-tab-icon::after {content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background-color: #6D716C; border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg);}
.close-tab-icon::after {transform: translate(-50%, -50%) rotate(135deg);}
.close-tab-box .model-title-list > li.active .close-tab-icon::before,
.close-tab-box .model-title-list > li.active .close-tab-icon::after {background-color: #D5D8CD;}
.table.row.text-left-table th, .table.row.text-left-table td {padding: 8px 16px; text-align: left;}
.table.row.text-left-table td.vertical-top {vertical-align: top;}
.model-content-list .table.row .btn {min-width: 0; height: 34px; line-height: 16px; padding: 8px 12px; font-size: 14px; border-radius: 8px;}
.table-tab-list {display: flex;}
.table-tab-list > li {flex-grow: 1;}
.table-tab-list > li button {width: 100%; height: 42px; padding: 8px; background-color: #f4f6f8; border-top: 1px solid #ddd; font-size: 14px; text-align: center; color: #818980;}
.table-tab-list > li.active button {background-color: #434F54; font-weight: bold; color: #fff;}
.tab-content .btn-wrap {justify-content: flex-start; align-items: center; gap: 16px; padding: 20px; border: 1px solid #ddd;}
.tab-content .btn-wrap .btn.big {width: auto; min-width: 210px; background-color: #ededed; color: #818980;}
.tab-content .btn-wrap .btn.big + .big {margin: 0;}
.tab-content .btn-wrap .btn.big:hover, .tab-content .btn-wrap .btn.big.active {background-color: #8fc31f;}

.input-detail-table {width: 100%; border-top: 1px solid #E4E8E5;}
.input-detail-table th, .input-detail-table td {padding: 8px 16px; border-bottom: 1px solid #E4E8E5; font-size: 14px; vertical-align: middle; box-sizing: border-box;}
.input-detail-table th {background-color: #F4F6F8;}
.input-detail-table th.rowspan-th {border-right: 1px solid #E4E8E5; text-align: center;}
.input-detail-table th .label {max-width: none; font-size: 14px;}
.input-detail-table.border-bottom, .input-detail-table .border-bottom {border-bottom: 1px solid #ccc;}
.input-detail-table .border-left {border-left: 1px solid #E4E8E5;}
.input-detail-table.border-top, .input-detail-table .border-top {border-top: 1px solid #ccc;}
.input-detail-table .input.text {height: 36px; font-size: 14px;}
.input-detail-table .input.text input {height: 100%; margin: 0;}
.input-detail-table .select {height: 36px; margin-right: 10px; vertical-align: middle;}
.input-detail-table .select .selected {height: 34px; line-height: 34px;}
.input-detail-table .checkbox > span, .input-detail-table .radio > span, .input-detail-table .checkbox .check-view {font-size: inherit;}
.input-detail-table .btn.little {display: block; min-width: 0; height: auto; margin: 0 auto; padding: 8px; line-height: 1.2;}
.btn.little + .input-detail-table {margin-top: 16px;}
.btn.search + .error-ms {margin-top: 4px;}

.firmware-wrap {display: flex; margin-bottom: 16px;}
.firmware-wrap > li {border: 1px solid #ccc;}
.firmware-wrap > li + li {border-left: 0;}
.firmware-table-title {padding: 10px 16px; background-color: #ccc;}
.firmware-wrap .input-detail-table {padding: 16px;}
.firmware-wrap + .button-group-wrapper {margin-top: 10px;}
.firmware-wrap + .button-group-wrapper .select + .btn {margin-left: 10px;}

.input-detail-table.filter .btn.little {display: inline-block;}
.small-text {display: inline-block; font-size: 12px;}
.input-detail-table.filter .small-text {margin-left: 4px;}
.input-detail-table.filter + .button-group-wrapper {margin-top: 16px;}

.model-lang-table.table.row td {margin: 20px 0; overflow: inherit;}
.model-lang-table.table.row .input.text input {margin: 0 6px;}
.model-lang-table.table.row .select {min-width: 0; height: 25px; width: 100%; margin: 0 6px;}
.model-lang-table.table.row .select .selected {height: 23px; line-height: 23px; padding: 0 24px 0 12px; background-position: calc(100% - 10px) 50%;}
.model-lang-table.table.row + .button-group-wrapper {margin-top: 10px;}

.popup-bg {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); z-index: 19;}
.model-popup-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 572px; height: 580px; padding: 24px 40px; background-color: #fff; border-radius: 12px; box-sizing: border-box;}
.model-popup-content.regPopup {width: 722px; height: 523px;}
.model-popup-content.regPopup .table-wrap {height: initial;}
.popup-close-btn {position: absolute; top: 20px; right: 22px; width: 24px; height: 24px;}
.popup-close-btn::before, .popup-close-btn::after {content: ''; position: absolute; top: 50%; left: 50%; height: 28px; width: 2px; background-color: #6D716C; border-radius: 1px; transform: translate(-50%,-50%) rotate(45deg);}
.popup-close-btn::after {transform: translate(-50%,-50%) rotate(-45deg);}
.model-popup-title {margin-bottom: 48px; font-size: 20px; font-weight: 600; text-align: center; }
.model-popup-search {display: flex; gap: 10px; margin-bottom: 20px;}
.model-popup-search .input.text {flex-shrink: 0; flex-grow: 1; width: auto; max-width: none;}
.model-popup-search .input.text input {max-width: none;}
.model-popup-search .model-import-btn {flex-shrink: 0;}
.model-name-list {height: 340px; margin-bottom: 24px; border-top: 1px solid #E4E8E5; overflow-y: auto;}
.model-name-list > li {border-bottom: 1px solid #E4E8E5;}
.model-name-list > li .input.radio {width: 100%; padding: 12px 20px;}
.model-name-list > li .input.radio span {font-size: 14px;}
.model-name-list .no-data {padding: 32px 20px; text-align: center; font-size: 14px;}

.password-popup-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 572px; height: 240px; padding: 24px 40px; background-color: #fff; border-radius: 12px; box-sizing: border-box;}
.password-popup-title {margin-bottom: 48px; font-size: 20px; font-weight: 600; text-align: center; }
.password-popup-box {display: flex; gap: 10px; margin-bottom: 20px;}
.password-popup-box .input.text {flex-shrink: 0; flex-grow: 1; width: auto; max-width: none;}
.password-popup-box .input.text input {max-width: none;}

body.popup {
    width: auto
}

body.popup .popup-wrapper > div {
    min-width: 960px;
    max-width: 1070px;
    width: 100%
}

body.popup .popup-wrapper .line {
    height: 1px;
    background-color: #e8eceb;
    width: 100%
}

body.popup .popup-wrapper .popup-title {
    position: relative;
    height: 60px;
    padding-left: 20px;
    line-height: 60px;
    background: #8fc31f;
    text-align: left
}

body.popup .popup-wrapper .popup-title > p {
    font-size: 20px;
    color: #fff
}

body.popup .popup-wrapper .popup-top {
    padding-top: 22px
}

body.popup .popup-wrapper .popup-top .contents {
    padding: 0 20px;
    width: 100%;
    min-width: 960px;
    border: 0
}

body.popup .popup-wrapper .popup-top .contents .box {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 0
}

body.popup .popup-wrapper .popup-top .contents .box.two {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row
}

body.popup .popup-wrapper .popup-top .contents .box.two .column {
    width: calc(50% - 20px)
}

body.popup .popup-wrapper .popup-top .contents .box.two .column.even {
    margin-left: 40px
}

body.popup .popup-wrapper .popup-top .contents .box.two .column.full {
    width: 100%
}

body.popup .popup-wrapper .popup-top.padding-top0 {
    padding-top: 0
}

body.popup .popup-wrapper .popup-top + .popup-bottom {
    margin-top: 0
}

body.popup .popup-wrapper .popup-top + .popup-bottom .table {
    margin-top: 0
}

body.popup .popup-wrapper .table-Bg {
    z-index: 1;
    background-color: #f4f6f8
}

body.popup .popup-wrapper .table.col tr:first-child > th:first-child {
    border-radius: 0
}

body.popup .popup-wrapper .table.col.pop-small thead th {
    height: 0;
    padding: 0;
    background: none
}

body.popup .popup-wrapper .table.col.pop-small thead th > div {
    position: absolute;
    top: 0;
    width: inherit;
    font-size: 14px;
    color: #333;
    font-weight: 700;
    line-height: 40px;
    z-index: 2
}

body.popup .popup-wrapper .table.col.pop-small tbody tr th.bg {
    background-color: #f4f6f8;
    color: #333
}

body.popup .popup-wrapper .table.col.pop-small tbody tr th, body.popup .popup-wrapper .table.col.pop-small tbody tr td {
    height: 40px;
    vertical-align: middle;
    padding: 6px;
    text-align: center;
    font-size: 14px;
    border-radius: 0
}

body.popup .popup-wrapper .table.scroll {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    min-height: 240px;
    max-height: 241px;
    margin-top: 40px;
    padding-top: 0
}

body.popup .popup-wrapper .popup-bottom {
    margin-top: 20px;
    padding: 0 20px 20px
}

body.popup .popup-wrapper .popup-bottom .table {
    background: #fff
}

body.popup .popup-wrapper .popup-bottom .table.row td {
    padding: 4px 5px 5px
}

body.popup .popup-wrapper .popup-bottom .alert-box {
    position: relative;
    width: 100%;
    border-radius: 20px;
    padding: 11px 20px 12px 43px;
    background-image: url("../images/icon_close.png");
    background-position: right 13px;
    background-repeat: no-repeat
}

body.popup .popup-wrapper .popup-bottom .alert-box.success {
    background-image: url("../images/icon_success.png");
    background-position: 18px 13px;
    background-repeat: no-repeat;
    background-color: #eff4e3
}

body.popup .popup-wrapper .popup-bottom .alert-box.success > span {
    color: #8fc31f
}

body.popup .popup-wrapper .popup-bottom .alert-box.fail {
    background-image: url("../images/icon_fail.png");
    background-position: 18px 13px;
    background-repeat: no-repeat;
    background-color: #fdecec
}

body.popup .popup-wrapper .popup-bottom .alert-box.fail > span {
    color: #ec2b2b
}

body.popup .popup-wrapper .popup-bottom .alert-box > span {
    font-size: 14px;
    line-height: 16px
}

body.popup .popup-wrapper .popup-bottom .alert-box .close {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 11px;
    height: 11px;
    background-image: url("../images/icon_close.png");
    background-position: left 0;
    background-repeat: no-repeat
}

body.popup .popup-wrapper .popup-bottom .alert-box + .table-wrap {
    margin-top: 10px
}

body.popup .popup-wrapper .popup-bottom .table-wrap .row-240 {
    margin-top: 42px
}

body.popup .popup-wrapper .button-group.center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

body.popup .table.col tr td {padding: 8px 12px;}
body.popup .sample-img-wrap {display: flex; justify-content: flex-start; align-items: center; gap: 4px; flex-wrap: wrap;}
body.popup .sample-img {display: inline-block; width: 32%; height: auto; border: 1px solid #666;}

.header-box {
    display: none;
    position: absolute;
    width: auto;
    right: -20px;
    top: 36px;
    min-width: 315px;
    text-align: left;
    background: #fff;
    z-index: 20
}

.header-box .title-box {
    position: relative;
    padding: 0 20px;
    line-height: 40px;
    color: #333;
    font-size: 16px;
    border-radius: 10px 10px 0 0;
    background-color: #f4f6f8;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.11);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.11)
}

.header-box .title-box .title {
    padding-right: 20px;
    color: #333;
    font-weight: 600
}

.header-box .title-box .number {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    line-height: 19px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 12px;
    background-color: #8fc31f
}

.header-box a.close {
    position: absolute;
    width: 13px;
    height: 13px;
    top: 15px;
    right: 19px;
    padding: 0;
    cursor: pointer
}

.header-box a.close::before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    background-image: url("../images/icon_header_title_close.png");
    background-position: center center;
    background-repeat: no-repeat
}

.header-box .con-scroll {
    overflow-y: auto;
    max-height: 384px
}

.header-box .con-box {
    position: relative;
    padding: 13px 21px 13px 21px
}

.header-box .con-box:last-child {
    border-radius: 0 0 10px 10px
}

.header-box .con-box a.close::before {
    background-image: url("../images/icon_header_con_close.png");
    background-position: center center;
    background-repeat: no-repeat
}

.header-box .con-box .title {
    padding-left: 20px;
    line-height: 18px;
    font-size: 14px;
    letter-spacing: 0.5px
}

.header-box .con-box .con {
    margin-top: 4px;
    font-size: 12px;
    color: #333
}

.header-box .con-box .con .list {
    margin-bottom: 5px
}

.header-box .con-box .con .list li {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0
}

.header-box .con-box .con .list li + li {
    margin-top: 4px
}

.header-box .con-box .con .list li dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.header-box .con-box .con .list li dl dt, .header-box .con-box .con .list li dl dd {
    font-size: 12px;
    line-height: 16px
}

.header-box .con-box .con .list li dl dd {
    margin-left: auto;
    width: calc(100% - 44px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.header-box .con-box .detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    line-height: 13px
}

.header-box .con-box .detail .data {
    color: #818980;
    font-size: 12px;
    line-height: 21px
}

.header-box .con-box .link {
    margin-left: auto
}

.header-box .con-box .link a {
    display: inline-block;
    color: #434f54;
    line-height: 16px;
    font-size: 12px;
    font-weight: 400
}

.header-box .con-box .link a::after {
    content: "";
    display: block;
    height: 1px;
    background-color: #333
}

.header-box .con-box .link a + a {
    margin-left: 7px
}

.header-box .con-box .link a.view {
    position: relative;
    padding-right: 10px
}

.header-box .con-box .link a.view::before {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    width: 6px;
    height: 8px;
    background-image: url("../images/icon_head_arrow.png");
    background-position: center center;
    background-repeat: no-repeat
}

.header-box .con-box + .con-box {
    border-top: 1px solid rgba(211, 218, 211, 0.4)
}

.header-box .error {
    background-color: rgba(249, 68, 57, 0.05)
}

.header-box .error .title {
    background-image: url("../images/icon_error.png");
    background-position: 0 2px;
    background-repeat: no-repeat;
    color: #f94439
}

.header-box .warning {
    background-color: rgba(253, 173, 2, 0.05)
}

.header-box .warning .title {
    background-image: url("../images/icon_warning.png");
    background-position: 0 2px;
    background-repeat: no-repeat;
    color: #fdad02
}

.header-box .info {
    background-color: rgba(1, 167, 253, 0.05)
}

.header-box .info .title {
    background-image: url("../images/icon_info.png");
    background-position: 0 2px;
    background-repeat: no-repeat;
    color: #01a7fd
}

.width0 {
    width: 0% !important
}

.width1 {
    width: 1% !important
}

.width2 {
    width: 2% !important
}

.width3 {
    width: 3% !important
}

.width4 {
    width: 4% !important
}

.width5 {
    width: 5% !important
}

.width6 {
    width: 6% !important
}

.width7 {
    width: 7% !important
}

.width8 {
    width: 8% !important
}

.width9 {
    width: 9% !important
}

.width10 {
    width: 10% !important
}

.width11 {
    width: 11% !important
}

.width12 {
    width: 12% !important
}

.width13 {
    width: 13% !important
}

.width14 {
    width: 14% !important
}

.width15 {
    width: 15% !important
}

.width16 {
    width: 16% !important
}

.width17 {
    width: 17% !important
}

.width18 {
    width: 18% !important
}

.width19 {
    width: 19% !important
}

.width20 {
    width: 20% !important
}

.width21 {
    width: 21% !important
}

.width22 {
    width: 22% !important
}

.width23 {
    width: 23% !important
}

.width24 {
    width: 24% !important
}

.width25 {
    width: 25% !important
}

.width26 {
    width: 26% !important
}

.width27 {
    width: 27% !important
}

.width28 {
    width: 28% !important
}

.width29 {
    width: 29% !important
}

.width30 {
    width: 30% !important
}

.width31 {
    width: 31% !important
}

.width32 {
    width: 32% !important
}

.width33 {
    width: 33% !important
}

.width34 {
    width: 34% !important
}

.width35 {
    width: 35% !important
}

.width36 {
    width: 36% !important
}

.width37 {
    width: 37% !important
}

.width38 {
    width: 38% !important
}

.width39 {
    width: 39% !important
}

.width40 {
    width: 40% !important
}

.width41 {
    width: 41% !important
}

.width42 {
    width: 42% !important
}

.width43 {
    width: 43% !important
}

.width44 {
    width: 44% !important
}

.width45 {
    width: 45% !important
}

.width46 {
    width: 46% !important
}

.width47 {
    width: 47% !important
}

.width48 {
    width: 48% !important
}

.width49 {
    width: 49% !important
}

.width50 {
    width: 50% !important
}

.width51 {
    width: 51% !important
}

.width52 {
    width: 52% !important
}

.width53 {
    width: 53% !important
}

.width54 {
    width: 54% !important
}

.width55 {
    width: 55% !important
}

.width56 {
    width: 56% !important
}

.width57 {
    width: 57% !important
}

.width58 {
    width: 58% !important
}

.width59 {
    width: 59% !important
}

.width60 {
    width: 60% !important
}

.width61 {
    width: 61% !important
}

.width62 {
    width: 62% !important
}

.width63 {
    width: 63% !important
}

.width64 {
    width: 64% !important
}

.width65 {
    width: 65% !important
}

.width66 {
    width: 66% !important
}

.width67 {
    width: 67% !important
}

.width68 {
    width: 68% !important
}

.width69 {
    width: 69% !important
}

.width70 {
    width: 70% !important
}

.width71 {
    width: 71% !important
}

.width72 {
    width: 72% !important
}

.width73 {
    width: 73% !important
}

.width74 {
    width: 74% !important
}

.width75 {
    width: 75% !important
}

.width76 {
    width: 76% !important
}

.width77 {
    width: 77% !important
}

.width78 {
    width: 78% !important
}

.width79 {
    width: 79% !important
}

.width80 {
    width: 80% !important
}

.width81 {
    width: 81% !important
}

.width82 {
    width: 82% !important
}

.width83 {
    width: 83% !important
}

.width84 {
    width: 84% !important
}

.width85 {
    width: 85% !important
}

.width86 {
    width: 86% !important
}

.width87 {
    width: 87% !important
}

.width88 {
    width: 88% !important
}

.width89 {
    width: 89% !important
}

.width90 {
    width: 90% !important
}

.width91 {
    width: 91% !important
}

.width92 {
    width: 92% !important
}

.width93 {
    width: 93% !important
}

.width94 {
    width: 94% !important
}

.width95 {
    width: 95% !important
}

.width96 {
    width: 96% !important
}

.width97 {
    width: 97% !important
}

.width98 {
    width: 98% !important
}

.width99 {
    width: 99% !important
}

.width100 {
    width: 100% !important
}

.system-log .contents-title.with-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.system-log .contents-title.with-button .button {
    width: 110px;
    height: 30px;
    margin-left: 10px;
    border-radius: 10px
}

.system-log .contents-title.with-button .button > span {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 500
}

.system-log .contents-title.with-button .button:nth-of-type(1) {
    background-color: #fca600
}

.system-log .contents-title.with-button .button:nth-of-type(2) {
    background-color: #444f55
}

.system-log .inner-box {
    padding: 20px
}

.system-log .inner-box .column {
    margin-bottom: 20px
}

.system-log .inner-box .table-wrap {
    margin-top: 20px
}

.system-log .button {
    display: block
}

.system-log .btn.search.normal {
    margin-left: 20px;
    padding: 0;
    background-image: none
}

.system-log .btn.search.normal > span {
    width: auto;
    padding-left: 28px;
    background: url(../images/icon_search.png) no-repeat left center/16px
}

.system-log .icon.download {
    width: 13px;
    min-width: 0;
    height: 15px;
    margin-top: 0;
    margin-left: 10px;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
    border: none;
    background: url(../images/icon_download.png) no-repeat center/13px auto
}

.system-log .textarea {
    overflow: hidden;
    width: 100%
}

.system-log .textarea textarea {
    display: block;
    width: 100%;
    margin: 0;
    height: 26px;
    padding: 0 4px;
    border-radius: 8px;
    background: #fff;
    outline: none;
    font-size: 14px;
    line-height: 24px;
    border: 1px solid #d3dad3;
    resize: vertical;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.system-log .table.scroll-auto {
    overflow: auto;
    min-height: 42px;
    max-height: 170px;
    margin-top: 42px
}

.system-log .table th > div {
    background-color: #f4f6f8
}

.system-log .icon-link {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(../images/icon_link.png) no-repeat center/18px
}

.system-resource .box-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.system-resource .box:not(.full) {
    max-width: calc((100% - 20px) / 2);
    -ms-flex-preferred-size: calc((100% - 20px) / 2);
    flex-basis: calc((100% - 20px) / 2);
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.system-resource .box.full {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.system-resource .inner-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px
}

.system-resource .inner-box .column :first-child {
    margin-left: 0
}

.system-resource .inner-box .select {
    min-width: 156px
}

.system-resource .inner-box .select, .system-resource .inner-box .input {
    margin-left: 10px
}

.system-resource .search-nember {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    margin: 20px 0
}

.system-resource .column {
    width: 100%
}

.system-resource .column .auto {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 404px
}

.system-resource .column .auto input {
    max-width: none
}

.system-resource .column + .column {
    margin-top: 10px
}

.system-resource .column .btn.search {
    margin-left: 10px
}

.system-resource .column .calendar {
    max-width: 282px
}

.system-resource .header-box {
    display: block;
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: 0
}

.system-resource .header-box .con-scroll {
    max-height: 309px
}

.system-resource .header-box dd {
    padding-right: 130px
}

.system-resource .header-box .detail {
    position: absolute;
    right: 20px;
    bottom: 13px
}

.system-resource .table.scroll-auto {
    min-height: 42px;
    max-height: 296px
}

.system-resource .table.scroll-auto.type2 {
    max-height: 212px
}

.system-resource .table th > div {
    background-color: #f4f6f8
}

.system-resource .table small {
    display: block;
    font-size: 12px
}

.system-resource .box-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

.system-resource .box-column .box {
    -ms-flex-preferred-size: calc((100% - 20px) / 2);
    flex-basis: calc((100% - 20px) / 2);
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #d3dad3
}

.system-resource .icon-link {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(../images/icon_link.png) no-repeat center/18px
}

.text-red {
    color: #ec2b2b !important;
}