@charset "UTF-8";

@import url(commons.css);
@import url(custom-style_scss_ver.css);
@import url(default-element_scss_ver.css);
@import url(button.css);
@import url(shadow_scss.css);
@import url(titlelist_scss_ver.css);
@import url(user-define.css);

html { min-width: 1920px; }
body { background-color: #EBF0F5; overflow: hidden; }
header {
    display: flex;
    align-items: center;
    max-width: 100vw;
    border-bottom: 1px solid var(--gray-300);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--ShadowBottom-lev2);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    padding: 16px 24px;
    line-height: 1;
    z-index: 1;
    position: relative;
}
.dark-mode header { border-bottom: 1px solid var(--gray-700); background: rgba(14, 15, 17, 0.55); }
header > div {
    line-height: 1;
    flex: 1 0 0%;
}
header > div > [class*=form-area-box] {
    width: 388px;
}
header > div > [class*=form-area-box] .multy .row {
    margin: 0 -4px;
}
header > div > [class*=form-area-box] .multy .row > div {
    padding: 0 4px;
}
header > div > [class*=form-area-box] .btn-chage-1 {
    background: var(--gray-950);
}
header > div > [class*=form-area-box] .btn-chage-1:hover {
    background-color: var(--black-600);
}
header > div.side-menu {
    text-align: right;
}
header > div.side-menu i { font-size: 24px; }
.dark-mode header > div.side-menu i { color: #FFF; }

header.dashboard-header { background-color: #14161C; border-bottom: none;}
header.dashboard-header > div.logo * { font-family: 'Montserrat'; color: #FFF; }
header.dashboard-header > div.logo > span:first-child { font-size: 28px; font-weight: 800; }
header.dashboard-header > div.logo > span.title { display: flex; align-items: flex-end; margin: 0 0 4px 8px; font-size: 18px; font-weight: 400; }
header.dashboard-header > div.menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

header.dashboard-header > div.menu > div {
    display: flex;
    gap: 4px;
}

header.dashboard-header > div.menu > div > a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 200px;
    height: 44px;
    border-radius: 8px;
    padding: 16px 20px;
    font-family: 'Montserrat';
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #FFF;
    background-color: #2A2E36;
}
header.dashboard-header > div.menu > div > a.on {
    background: linear-gradient(90deg, #8A38F5 0%, #582F78 14.33%, #2D3648 40.36%, #2A2E36 61.43%);
}
header.dashboard-header > div.menu > div > a * { color: #FFF; }

.dark-mode header > div > [class*=form-area-box] .btn-chage-1 {
    background: #fff;
    color: var(--gray-950);
}

.dark-mode header > div > [class*=form-area-box] .btn-chage-1:hover {
    background-color: #F4F5F6;
    color: #495157;
}

header > div.logo {
    display: flex;
    flex-grow: 0;
    white-space: nowrap;
    padding-left: 0;
    padding-right: 22px;
    font-size: 24px;
    font-weight: 600;
}
.dark-mode header > div.logo { }
header > div.logo > img { height: 41px; background-color: #FFF; }

header > div.title > p { font-size: 21px; font-family: "SUITE"; font-weight: 600; }
.dark-mode header > div.title > p { color: #FFF; }

header > div.cols {
    flex-grow: 0;
    white-space: nowrap;
    padding-left: 16px;
}

header > div.cols .tbox {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--gray-950);
    font-weight: 600;
    position: relative;
}

header > div.cols .tbox.trans {
    color: var(--blue-500);
}

.dark-mode header > div.cols .tbox {
    color: #fff;
}

header > div.cols .tbox > * {
    padding: 0 1.5px;
}

header > div.cols .tbox > span {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

header > div.cols .tbox > em.alrm {
    display: inline-flex;
    height: 16px;
    padding: 0 6px;
    color: #fff;
    background: var(--red-500);
    line-height: 1;
    font-size: 11px;
    align-items: center;
    border-radius: 10px;
    margin-left: 10px;
}

header > div.cols .tbox > i {
    font-size: calc(100% + 2px);
    color: inherit;
}

.content-boxes {
    overflow: hidden;
    padding: 16px;
}

header + .content-boxes {
    width: 100vw;
    height: calc(100vh - 74px);
}

.content-boxes .content-grids {
    margin: 0 -8px;
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
}

.content-boxes .content-grids > * {
    padding: 0 8px;
}

.content-boxes.area-ver1 {
    padding: 24px;
}

.content-boxes.area-ver1 .content-grids {
    margin: 0 -12px;
}

.content-boxes.area-ver1 .content-grids > * {
    padding: 0 12px;
}

.content-boxes.area-ver1 .content-grids > *.cols-left.trans {
    flex-basis: 80px;
    max-width: 80px;
}

.content-boxes.area-ver1 .content-grids .card-2 {
    padding: 24px 0;
    height: calc(100% - 112px);
}

.content-boxes.area-ver1 .content-grids .card-2 > [class*=tab-design-] {
    margin: 0;
    margin-top: -24px;
    margin-bottom: 24px;
}

.content-boxes.area-ver1 .content-grids .card-2 > [class*=tab-design-] + .only-h-max-1 {
    height: calc(100% - 49px - 24px + 24px);
    padding: 0 24px;
    overflow-y: auto;
    overflow-x: hidden;
}

.content-boxes.area-ver1 .content-grids .card-2 > [class*=tab-design-] + .only-h-max-1 .card-nomal {
    overflow-y: auto;
    overflow-x: hidden;
}

.content-boxes.area-ver1 .content-grids .card-2 > [class*=tab-design-] + .only-h-max-1 > .row {
    height: 100%;
}

.content-boxes.area-ver1 .content-grids .card-2 > [class*=tab-design-] + .only-h-max-1 > .row > div {
    height: 100%;
}

.content-grids [class*=cols-] {
    display: none;
    flex: 1 0 0%;
    height: 100%;
}

.content-grids [class*=cols-].on {
    display: block;
}

.content-grids .cols-left {
    flex-basis: 296px;
    max-width: 296px;
}

.content-grids .cols-left [class*=card-] {
    height: 100%;
    overflow: auto;
}

.content-grids .cols-left .card-1 .box-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
}

.content-grids .cols-left .card-1 .box-container .box {
    display: none;
}

.content-grids .cols-left .card-1 .box-container .box.on {
    display: block !important;
}

.content-grids .cols-left .back-btn {
    cursor: pointer;
}

.dark-mode .content-grids .cols-left [class*=card-] {
    background: rgba(14, 15, 17, 0.55);
}

.content-grids .cols-left [class*=card-] .fold-event {
    display: none;
}

.content-grids .cols-left [class*=card-] .boxes { display: none; }
.content-grids .cols-left [class*=card-] .boxes.on { display: block; }

.content-grids .cols-left [class*=card-] .boxes:nth-child(1) {
    margin-bottom: 16px;
}

.content-grids .cols-left [class*=card-] .boxes:nth-child(2) {
    margin-bottom: 16px;
}

.content-grids .cols-left [class*=card-] .boxes:nth-child(3) {
    margin-bottom: 16px;
}

.content-grids .cols-left [class*=card-] .boxes:nth-child(4) {
    margin-bottom: 16px;
}

.content-grids .cols-left [class*=card-] .top-txt-1 {
    padding-bottom: 12px;
}

.content-grids .cols-left [class*=card-] .top-txt-1 > .row {
    align-items: center;
    flex-wrap: nowrap;
}

.content-grids .cols-left [class*=card-] .top-txt-1 > .row > div {
    display: inline-flex;
    align-items: center;
}

.content-grids .cols-left [class*=card-] .top-txt-1 .txt1 {
    font-size: 15px;
    line-height: 120%;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.dark-mode .content-grids .cols-left [class*=card-] .top-txt-1 .txt1 {
    color: #fff;
}

.content-grids .cols-left [class*=card-] .top-txt-1 .txt1 > i {
    font-size: calc(100% + 3px);
    margin-right: 4px;
    color: var(--blue-500);
}

.content-grids .cols-left [class*=card-] .top-txt-1 .icons-1 {
    font-size: 18px;
}

.dark-mode .content-grids .cols-left [class*=card-] .top-txt-1 .icons-1 {
    color: #fff;
}

.content-grids .cols-left [class*=card-] .top-txt-1 .icons-2 {
    font-size: 18px;
    color: var(--gray-500);
}

.dark-mode .content-grids .cols-left [class*=card-] .top-txt-1 .icons-2 {
    color: #fff;
}

.content-grids .cols-left [class*=card-] .top-txt-1.bb-in {
    border-bottom: 1px solid var(--gray-300);
}

.content-grids .cols-left [class*=card-] .top-txt-2 {
    padding-bottom: 12px;
}

.content-grids .cols-left [class*=card-] .top-txt-2 > .row {
    align-items: center;
    flex-wrap: wrap;
    margin: -4px;
}

.content-grids .cols-left [class*=card-] .top-txt-2 > .row > div {
    padding: 4px;
}

.content-grids .cols-left [class*=card-] .top-txt-2 .txt1 {
    font-size: 26px;
    line-height: 130%;
    font-weight: 800;
    display: flex;
    align-items: center;
    font-family: "SUITE";
}

.dark-mode .content-grids .cols-left [class*=card-] .top-txt-2 .txt1 {
    color: #fff;
}

.content-grids .cols-left [class*=card-] .top-txt-2 .txt2 {
    color: var(--blue-500);
    font-size: 14px;
    font-weight: 300;
    line-height: 114%;
}

.content-grids .cols-left [class*=card-] .top-txt-2 .txt3 {
    font-size: 12px;
    color: var(--green-700);
    font-weight: 600;
    line-height: 116%;
}

.content-grids .cols-left [class*=card-] .top-txt-2.bb-in {
    border-bottom: 1px solid var(--gray-300);
}

.content-grids .cols-left [class*=card-] .boxes.trans .top-txt-1 .icons-2 {
    transform: rotate(270deg);
}

.content-grids .cols-left [class*=card-] .boxes.trans .top-txt-1 + * {
    max-height: 0;
    overflow: hidden;
    padding: 0;
}

.content-grids .cols-left [class*=card-] .fold-event {
    height: 100%;
    position: relative;
}

.content-grids .cols-left [class*=card-] .fold-event .top {
    padding: 18px 0;
    text-align: center;
    cursor: pointer;
}

.content-grids .cols-left [class*=card-] .fold-event .top > i {
    font-size: 24px;
    color: var(--gray-950);
}

.content-grids .cols-left [class*=card-] .fold-event .top > p {
    font-size: 11px;
    text-align: center;
    letter-spacing: -.9px;
}

.dark-mode .content-grids .cols-left [class*=card-] .fold-event .top > p {
    color: #FFF;
}

.dark-mode .content-grids .cols-left [class*=card-] .fold-event .top > i {
    color: #fff;
}

.content-grids .cols-left [class*=card-] .fold-event .middle {
    margin: 0 14px;
    padding: 16px 0;
    padding-bottom: 12px;
    border-top: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-300);
}

.dark-mode .content-grids .cols-left [class*=card-] .fold-event .middle {
    border-color: var(--gray-700);
}

.content-grids .cols-left [class*=card-] .fold-event .middle > i {
    padding: 7px;
    color: var(--gray-700);
    border-radius: 8px;
    font-size: 18px;
    border: 1px solid rgba(204, 204, 204, 0);
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
}

.dark-mode .content-grids .cols-left [class*=card-] .fold-event .middle > i {
    color: var(--gray-500);
}

.content-grids .cols-left [class*=card-] .fold-event .middle > i.active, .content-grids .cols-left [class*=card-] .fold-event .middle > i:hover {
    border-color: rgba(var(----blue-rgbaNum), 0.85);
    background: linear-gradient(92deg, rgba(0, 122, 255, 0.15) 1.64%, rgba(0, 122, 255, 0.1) 99.74%);
    color: var(--blue-500);
}

.dark-mode .content-grids .cols-left [class*=card-] .fold-event .middle > i.active, .dark-mode .content-grids .cols-left [class*=card-] .fold-event .middle > i:hover {
    border: 0;
    background: linear-gradient(92deg, rgba(0, 122, 255, 0.5) 1.64%, rgba(0, 122, 255, 0.4) 99.74%);
    position: relative;
    color: #fff;
}

.dark-mode .content-grids .cols-left [class*=card-] .fold-event .middle > i.active::after, .dark-mode .content-grids .cols-left [class*=card-] .fold-event .middle > i:hover::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(var(--blue-rgbaNum), 0.15), rgba(var(--gray-rgbaNum), 0.1));
}

.content-grids .cols-left [class*=card-] .fold-event .bottom {
    position: absolute;
    bottom: 0;
    margin: 0 8px;
    border-top: 1px solid var(--gray-300);
    padding: 18px 8px;
}

.dark-mode .content-grids .cols-left [class*=card-] .fold-event .bottom {
    color: #fff;
    border-color: var(--gray-700);
}

.content-grids .cols-left [class*=card-] .fold-event .bottom > i {
    color: inherit;
    font-size: 22px;
}

.content-grids .cols-maps.on+.cols-right2 {
    max-width: 608px !important;
}

.content-grids .cols-maps > .card-1 {
    position: relative;
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.content-grids .cols-maps > .card-1 > .map {
    width: 100%;
    height: 100%;
}

.content-grids .cols-maps .card-maps {
    box-shadow: var(--ShadowBottom-lev4);
    position: absolute;
    padding: 0;
    top: 24px;
    left: 24px;
}

.content-grids .cols-maps .card-maps::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    background: linear-gradient(135deg, rgba(var(--gray-rgbaNum), 0.6), rgba(var(--gray-rgbaNum), 0.35), rgba(var(--gray-rgbaNum), 0.6));
    border-radius: 12px;
}

.dark-mode .content-grids .cols-maps .card-maps::before {
    background: linear-gradient(135deg, rgba(var(--white-rgbaNum), 0.6), rgba(var(--white-rgbaNum), 0.15), rgba(var(--white-rgbaNum), 0.4));
}

.content-grids .cols-maps .card-maps .map-tit {
    display: flex;
    align-items: center;
    background-color: #fff;
    z-index: 1;
    padding: 16px 24px;
    border-radius: 12px;
    position: relative;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 34px;
    font-family: "SUITE";
}

.content-grids .cols-maps .card-maps .map-tit > i {
    margin-right: 8px;
    font-size: calc(100% + 8px);
    color: inherit;
}

.content-grids .cols-maps .card-maps .map-tit > span {
    font-family: "SUITE";
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
}

.dark-mode .content-grids .cols-maps .card-maps .map-tit > span {
    color: #FFF;
}

.dark-mode .content-grids .cols-maps .card-maps .map-tit {
    color: #fff;
    background-color: var(--black-45per);
}

.content-grids .cols-right {
    flex-basis: 360px;
    max-width: 360px;
}

.content-grids .cols-right .card-2 {
    height: 100%;
    overflow: auto;
}

.content-grids .cols-right .card-2 .top-tit- .row {
    align-items: center;
}

.dark-mode .content-grids .cols-right .card-2 .top-tit- .row [class*=title-] {
    color: #fff;
}

.content-grids .cols-right .card-2 .h-max-val-2 {
    height: calc(100% - 39px - 32px);
    overflow-y: auto;
    overflow-x: hidden;
}

.content-grids .cols-right .card-2 .h-max-val-2 [class*=clipboard-list-] > ul {
    height: calc(100% - 26px - 16px);
    overflow: auto;
}

.content-grids .cols-right2 {
    flex-basis: 608px;
    max-width: 100%;
}

.content-grids .cols-right2 .card-2 {
    height: 100%;
    overflow-y: hidden;
}

.content-grids .cols-right2 .card-2 .h-max-val-1 {
    height: calc(100% - 70px);
    overflow-y: auto;
    overflow-x: hidden;
}

.content-grids .cols-right2 .card-2 .h-max-val-1 .calendar-content {
    height: calc(100% - 36px - 92px - 16px);
    overflow: auto;
}

.content-grids .cols-right2 [class*=card-] .top-txt-1 {
    padding-bottom: 12px;
}

.content-grids .cols-right2 [class*=card-] .top-txt-1 > .row {
    align-items: center;
    flex-wrap: nowrap;
}

.content-grids .cols-right2 [class*=card-] .top-txt-1 > .row > div {
    display: inline-flex;
    align-items: center;
}

.content-grids .cols-right2 [class*=card-] .top-txt-1 .txt1 {
    font-size: 15px;
    line-height: 120%;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.dark-mode .content-grids .cols-right2 [class*=card-] .top-txt-1 .txt1 {
    color: #fff;
}

.content-grids .cols-right2 [class*=card-] .top-txt-1 .txt1 > i {
    font-size: calc(100% + 3px);
    margin-right: 4px;
    color: var(--blue-500);
}

.content-grids .cols-right2 [class*=card-] .top-txt-1 .icons-1 {
    font-size: 18px;
}

.content-grids .cols-right2 [class*=card-] .top-txt-1.bb-in {
    border-bottom: 1px solid var(--gray-300);
}

.content-grids .cols-right2 .back-btn {
    cursor: pointer;
}

.content-grids .cols-right2 canvas {
/*    width: 100%;
    height: 100%;*/
}

.content-grids .cols-right2 .grid-div table td,
.content-grids .cols-right2 .grid-div table th {
    color: #000;
    padding: 8px 0;
    text-align: center;
}

.dark-mode .content-grids .cols-right2 .grid-div table td,
.dark-mode .content-grids .cols-right2 .grid-div table th { color: #FFF; }

.content-grids .cols-right2 .grid-div table thead th {
    position: relative;
    border-right: 2px solid #fff;
    font-weight: 600;
    text-align: center;
    background-color: var(--brand-400);
    color: #FFF;
}

.dark-mode .content-grids .cols-right2 .grid-div table thead th {
    border-right: 2px solid #3d4347;
}

.content-grids .cols-right2 .grid-div table thead th::before {
    content: "";
    width: 2px;
    height: calc(100% + 5px);
    position: absolute;
    right: -2px;
    top: -1px;
    background: #ffffff;
    opacity: 0;
}

.dark-mode .content-grids .cols-right2 .grid-div table thead th::before {
    background: #3d4347;
}

.content-grids .cols-right2 .grid-div table thead th:last-child {
    border-right: 0;
}

.content-grids .cols-right2 .grid-div table thead th:last-child::before {
    display: none;
}

.content-grids .cols-right2 .grid-div table tbody tr:nth-child(even) td {
    background-color: rgba(var(--gray-rgbaNum), 0.15);
}

.content-grids .cols-right2 .grid-div table tbody tr td {
    border-right: 2px solid #fff;
    font-weight: 400;
    border-bottom: 2px solid #fff;
}

.dark-mode .content-grids .cols-right2 .grid-div table tbody tr td {
    border-right: 2px solid #3d4347;
    border-bottom: 2px solid #3d4347;
}

.content-grids .cols-right2 .grid-div table tbody tr td.bg-1.bb-in {
    border-bottom-color: var(--gray-300) !important;
    border-bottom-width: 1px;
}

.content-grids .cols-left.trans {
    flex-basis: 76px;
    max-width: 76px;
}

.content-grids .cols-left.trans [class*=card-] {
    padding: 0;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.content-grids .cols-left.trans .boxes, .content-grids .cols-left.trans .bottombox {
    display: none;
}

.content-grids .cols-left.trans .boxes {
    padding: 16px;
    border-radius: 16px;
    /* 시스템그림자/45/레벨3 */
    box-shadow: var(--Shadow-45-lev3);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
}

.content-grids .cols-left.trans .boxes::before {
    content: "";
    border-radius: 16px;
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    background: linear-gradient(135deg, rgba(var(--gray-rgbaNum), 0.6), rgba(var(--gray-rgbaNum), 0.35), rgba(var(--gray-rgbaNum), 0.6));
}

.dark-mode .content-grids .cols-left.trans .boxes::before {
    background: linear-gradient(135deg, rgba(var(--white-rgbaNum), 0.6), rgba(var(--white-rgbaNum), 0.15), rgba(var(--white-rgbaNum), 0.4));
}

.content-grids .cols-left.trans .boxes::after {
    content: "";
    border-radius: 16px;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
}

.dark-mode .content-grids .cols-left.trans .boxes::after {
    background-color: rgba(14, 15, 17, 0.55);
    background-color: var(--gray-950);
}

.content-grids .cols-left.trans .boxes.show {
    display: block;
    position: fixed;
    z-index: 10;
    left: 67px;
    white-space: nowrap;
}

.content-grids .cols-left.trans .boxes.show > * {
    position: relative;
    z-index: 1;
}

.content-grids .cols-left.trans .boxes.show .top-txt-1 .icons-1, .content-grids .cols-left.trans .boxes.show .top-txt-1 .icons-2 {
    display: none;
}

.content-grids .cols-left.trans .boxes.show .design-list-1 {
    max-height: 10000px;
}

.content-grids .cols-left.trans .fold-event {
    display: block;
}

[class^=card-] {
    border-radius: 16px;
    padding: 16px;
    border: 1px solid var(--gray-300);
    background: rgba(255, 255, 255, 0.9);
    /* 시스템그림자/45/레벨3 */
    box-shadow: var(--Shadow-45-lev3);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
}

.dark-mode [class^=card-] {
    border: 1px solid var(--gray-700);
    background: rgba(14, 15, 17, 0.55);
}

.card-2 {
    background: var(--UI-, rgba(255, 255, 255, 0.85));
    /* 시스템그림자/45/레벨2 */
    box-shadow: var(--Shadow-45-lev2);
}

.dark-mode .card-2 {
    background: rgba(155, 164, 171, 0.15);
}

.card-nomal {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    height: 100%;
    background: none;
}

.dark-mode .card-nomal {
    background: none;
}

[class*=design-box-1-] {
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: var(--gray);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[class*=design-box-1-].size-xl {
    height: 133px;
}

[class*=design-box-1-].size-xl .txt1 {
    font-size: 24px;
}

[class*=design-box-1-].size-xl .txt2 {
    font-family: "SUITE";
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
}

[class*=design-box-1-].size-xl .txt2 em {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

[class*=design-box-1-].design-box-1-green {
    border-color: var(--lime-500);
    background: var(--lime-10per);
}

.dark-mode [class*=design-box-1-].design-box-1-green {
    background: var(--lime-20per);
}

[class*=design-box-1-].design-box-1-green .txt2 {
    color: var(--lime-700);
}

.dark-mode [class*=design-box-1-].design-box-1-green .txt2 {
    color: var(--lime-500);
}

[class*=design-box-1-].design-box-1-red {
    border-color: var(--red-500);
    background: var(--red-10per);
}

.dark-mode [class*=design-box-1-].design-box-1-red {
    background: var(--red-15per);
}

[class*=design-box-1-].design-box-1-red .txt2 {
    color: var(--red-500);
}

.dark-mode [class*=design-box-1-].design-box-1-red .txt2 {
    color: var(--red-400);
}

[class*=design-box-1-] .txt1 {
    font-size: 14px;
    font-weight: 300;
}

.dark-mode [class*=design-box-1-] .txt1 {
    color: #fff;
}

[class*=design-box-1-] .txt2 {
    line-height: 1;
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: end;
}

.dark-mode [class*=design-box-1-] .txt2 {
    color: var(--gray-25);
}

[class*=design-box-1-] .txt2 em {
    font-weight: 300;
    font-size: 14px;
    margin-left: 4px;
}

.dark-mode [class*=design-box-1-] .txt2 em {
    color: var(--gray-25);
}

.design-list-1 {
    max-height: 305px;
    overflow: auto;
}

.design-list-1 > ul {
    padding: 8px 0;
}

.design-list-1 > ul > li {
    display: flex;
    padding: 8px 0;
}

.design-list-1 > ul > li > div {
    display: flex;
    flex-basis: calc(100% - 38px);
    max-width: calc(100% - 38px);
}

.design-list-1 > ul > li > div > div {
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    height: 14px;
    font-size: 10px;
    line-height: 1;
}

.design-list-1 > ul > li .txt1 {
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    flex-basis: 38px;
    max-width: 38px;
    line-height: 1;
}

.dark-mode .design-list-1 > ul > li .txt1 {
    color: #fff;
}

.design-list-1 > ul > li .green {
    background: #7be000;
}

.design-list-1 > ul > li .red {
    background: var(--red-500);
    color: #fff;
}

.design-list-2 > ul {
    padding: 8px 0;
}

.design-list-2 > ul > li {
    padding: 8px 0;
    display: flex;
    align-items: center;
}

.design-list-2 > ul > li .txt1 {
    color: #000;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    flex: 1 0 0%;
    line-height: 1;
}

.dark-mode .design-list-2 > ul > li .txt1 {
    color: #fff;
}

.design-list-2 > ul > li .check-radio-box {
    height: 15px;
}

.design-list-2 > ul > li .icon-alert-circle {
    margin-left: 8px;
    font-size: 15px;
    color: var(--gray-400);
    position: relative;
}

.design-list-2 > ul > li .icon-alert-circle .tooltipsBox {
    position: fixed;
}

.design-list-3 > ul {
    padding: 16px 0;
    display: flex;
    margin: 0 -4px;
}

.design-list-3 > ul > li {
    margin: 0 4px;
    flex: 1 0 0%;
    border-radius: 4px;
    overflow: hidden;
    flex-basis: calc(25% - 8px);
    max-width: calc(25% - 8px);
    background-color: var(--gray-20per);
}

.design-list-3 > ul > li > img {
    height: 28px;
    display: block;
}

.design-list-3 > ul > li > .txt1 {
    font-size: 10px;
    font-weight: 300;
    line-height: 120%;
    display: block;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 4px;
}

.dark-mode .design-list-3 > ul > li > .txt1 {
    color: #fff;
}

.design-list-3 > ul > li.active {
    border: 1px solid var(--blue-500);
    background: var(--blue-500);
}

.design-list-3 > ul > li.active > .txt1 {
    color: #fff;
}

.design-list-4 > ul {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}

.design-list-4 > ul > li {
    padding: 8px;
    flex: 1 0 0%;
    overflow: hidden;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
}

.design-list-4 > ul > li .box {
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    background: #FFF;
    box-shadow: var(--ShadowBottom-lev2);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
}

.dark-mode .design-list-4 > ul > li .box {
    border-color: var(--gray-700);
    background: var(--gray-950);
}

.design-list-4 > ul > li .box .txt {
    font-family: "Montserrat";
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: end;
    line-height: 1;
    width: 58px;
}

.dark-mode .design-list-4 > ul > li .box .txt {
    color: #fff;
}

.design-list-4 > ul > li .box .txt em {
    font-size: 13px;
    font-weight: 300;
    line-height: 1;
}

.dark-mode .design-list-4 > ul > li .box .txt em {
    color: inherit;
}

.dark-mode .design-list-4 > ul > li .box .btn-blue-subtle {
    color: #fff;
}

.bottombox {
    border-radius: 6px;
    border: 1px solid var(--gray-300);
    -webkit-backdrop-filter: blur(37.5px);
    backdrop-filter: blur(37.5px);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bottombox > button {
    display: flex;
    border: 0;
    align-items: center;
    color: #6C7680;
    border-right: 1px solid var(--gray-300);
    flex: 1 0 0%;
    justify-content: center;
    height: 24px;
    background-color: rgba(255, 255, 255, 0);
}

.dark-mode .bottombox > button {
    color: var(--gray-500);
}

.bottombox > button:last-child {
    border-right: 0;
}

.bottombox > button > i {
    font-size: 13px;
    color: inherit;
    margin-right: 3px;
}

.bottombox > button > span {
    font-size: 11px;
    font-weight: 600;
    color: inherit;
    line-height: 1;
}

.bottombox > button.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(108, 114, 117, 0.9) 0%, rgba(108, 114, 117, 0.85) 100%);
}

[class*=capsuleBtn-] {
    display: flex;
    flex-wrap: wrap;
    border-radius: 6px;
    align-items: center;
    overflow: hidden;
}

[class*=capsuleBtn-] > button {
    display: flex;
    border: 1px solid var(--gray-15per);
    align-items: center;
    flex: 1;
    justify-content: center;
    height: 32px;
    background: var(--gray-20per);
    color: #000;
}

[class*=capsuleBtn-] > button:nth-child(1),
[class*=capsuleBtn-] > button:nth-child(2) {
    border-bottom: 0;
}

[class*=capsuleBtn-] > button:nth-child(2n) {
    border-left: 0;
}

[class*=capsuleBtn-] > button:nth-child(1) { border-top-left-radius: 6px; }
[class*=capsuleBtn-] > button:nth-child(2) { border-top-right-radius: 6px; }
[class*=capsuleBtn-] > button:nth-child(3) { border-bottom-left-radius: 6px; }
[class*=capsuleBtn-] > button:nth-child(4) { border-bottom-right-radius: 6px; }

.dark-mode [class*=capsuleBtn-] > button {
    color: #fff;
}

[class*=capsuleBtn-] > button > i {
    font-size: 16px;
    color: inherit;
    margin-right: 4px;
}

[class*=capsuleBtn-] > button > span {
    font-size: 15px;
    font-weight: 400;
    color: inherit;
    line-height: 1;
}

[class*=capsuleBtn-] > button > em {
    display: flex;
    height: 16px;
    border-radius: 16px;
    font-size: 11px;
    color: #fff;
    line-height: 1;
    padding: 0 6px;
    background-color: var(--red-500);
    margin-left: 4px;
    align-items: center;
}

[class*=capsuleBtn-] > button.active {
    color: #fff;
    background: var(--gray-950);
}

.dark-mode [class*=capsuleBtn-] > button.active {
    background-color: #fff;
    color: var(--gray-950);
}

.capsuleBtn-2 {
    border: 1px solid var(--gray-950);
}

.dark-mode .capsuleBtn-2 {
    border-color: #fff;
}

.capsuleBtn-2 > button {
    background: #fff;
    height: 24px;
    border-right: 1px solid var(--gray-950);
}

.capsuleBtn-2 > button span {
    font-size: 11px;
}

.capsuleBtn-2 > button.active span {
    font-weight: 600;
}

.dark-mode .capsuleBtn-2 > button {
    background-color: rgba(255, 255, 255, 0);
    color: #fff;
}

.capsuleBtn-2 > button:last-child {
    border-left: 0;
}

.dark-mode .capsuleBtn-2 > button.active {
    background-color: #fff;
    color: var(--gray-950);
}

/*zoom-in-out-box*/
.zoom-in-out-box {
    border-radius: 6px;
    padding: 8px 7.5px;
    /* 시스템그림자/하단/레벨3 */
    box-shadow: var(--ShadowBottom-lev3);
    top: 16px;
    right: 16px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zoom-in-out-box::before {
    content: "";
    border-radius: inherit;
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    background: linear-gradient(135deg, rgba(var(--gray-rgbaNum), 0.6), rgba(var(--gray-rgbaNum), 0.35), rgba(var(--gray-rgbaNum), 0.6));
}

.dark-mode .zoom-in-out-box::before {
    background: linear-gradient(135deg, rgba(var(--white-rgbaNum), 0.6), rgba(var(--white-rgbaNum), 0.15), rgba(var(--white-rgbaNum), 0.4));
}

.zoom-in-out-box::after {
    content: "";
    border-radius: inherit;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
}

.dark-mode .zoom-in-out-box::after {
    background-color: rgba(14, 15, 17, 0.55);
    background-color: var(--gray-950);
}

.zoom-in-out-box > * {
    position: relative;
    z-index: 1;
}

.zoom-in-out-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.dark-mode .zoom-in-out-btn {
    color: #fff;
}

.zoom-in-out-btn:focus {
    outline: none;
}

.zoom-in-out-btn:disabled, .zoom-in-out-btn[disabled] {
    opacity: 0.5;
}

.zoom-in-out-btn i {
    position: relative;
    display: inline-block;
    font-size: 14px;
    color: inherit;
}

.zoom-in-out-bar {
    height: 100px;
    width: 4px;
    margin: 8px 0;
    position: relative;
    background: var(--blue-500-t30);
    background: rgba(71, 98, 240, 0.3);
    border-radius: 999px;
    transform: rotate(180deg);
}

.zoom-in-out-bar > input {
    height: 4px;
    -webkit-appearance: none;
    width: 100%;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    transform: translate(-50%, -50%) rotate(90deg);
    background: var(--gray-25per);
}

.zoom-in-out-bar > input:focus {
    outline: none;
}

.zoom-in-out-bar > input::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    /*animate: 0.2s;*/
    /* box-shadow: 1px 1px 1px #002200;*/
    background: rgba(32, 89, 40, 0);
    border-radius: 1px;
    border: 1px solid rgba(24, 213, 1, 0);
}

.zoom-in-out-bar > input::-webkit-slider-thumb {
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    border-radius: 24px;
    border: 4px solid var(--blue-500);
    width: 14px;
    height: 14px;
    margin-top: -2.5px;
    box-shadow: var(--dropShadow-elevation-le2);
}

.zoom-in-out-bar > input::-ms-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    /*animate: 0.2s;*/
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.zoom-in-out-bar > input::-ms-fill-lower {
    background: #205928;
    border: 1px solid #18D501;
    border-radius: 2px;
    box-shadow: 1px 1px 1px #002200;
}

.zoom-in-out-bar > input::-ms-fill-upper {
    background: #205928;
    border: 1px solid #18D501;
    border-radius: 2px;
    box-shadow: 1px 1px 1px #002200;
}

.zoom-in-out-bar > input::-ms-thumb {
    margin-top: 1px;
    box-shadow: 3px 3px 3px #00AA00;
    border: 2px solid #83E584;
    height: 23px;
    width: 23px;
    border-radius: 23px;
    background: #439643;
    cursor: pointer;
}

.zoom-in-out-bar > input:focus::-ms-fill-lower {
    background: #205928;
}

.zoom-in-out-bar > input:focus::-ms-fill-upper {
    background: #205928;
}

.zoom-in-out-bar .bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--blue-500);
    border-radius: 6px;
}

.zoom-in-out-bar .drag-btn {
    background: #fff;
    border-radius: 24px;
    border: 4px solid var(--blue-500);
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%);
    width: 12px;
    display: inline-block;
    height: 12px;
}

/*clipboard-list*/
[class*=clipboard-list-] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

[class*=clipboard-list-] > ul > li {
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-300);
}

.dark-mode [class*=clipboard-list-] > ul > li {
    border-bottom-color: var(--gray-700);
}

[class*=clipboard-list-] > ul > li .txt1 {
    font: var(--lableSm-xl);
}

.dark-mode [class*=clipboard-list-] > ul > li .txt1 {
    color: #fff;
}

[class*=clipboard-list-] > ul > li .txt2 {
    font: var(--contentSm-sm);
    line-height: 23px;
    margin: 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark-mode [class*=clipboard-list-] > ul > li .txt2 {
    color: #fff;
}

[class*=clipboard-list-] > ul > li .info {
    display: flex;
    align-items: center;
    font: var(--caption12Pt);
    color: var(--gray-700);
}

.dark-mode [class*=clipboard-list-] > ul > li .info {
    color: var(--gray-400);
}

[class*=clipboard-list-] > ul > li .info i {
    font-size: 14px;
    margin-right: 4px;
    color: inherit;
}

/*cycle-box-1-*/
[class*=cycle-box-1-] {
    border-radius: 999px;
    position: absolute;
    --dynamic-font-size: calc(100% + 1vw); /* 부모의 width에 따라 비율 조정 */
    font-size: var(--dynamic-font-size);
}

[class*=cycle-box-1-]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    border-radius: 999px;
}

[class*=cycle-box-1-] > span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 1em;
    font-weight: 700;
    font-family: "Monterrat";
    height: 100%;
    border-radius: 999px;
    position: relative;
    z-index: 1;
}

[class*=cycle-box-1-] > span i {
    color: inherit;
}

[class*=cycle-box-1-].cycle-box-1-gray::before {
    background-color: var(--gray-30per);
}

[class*=cycle-box-1-].cycle-box-1-gray > span {
    background: var(--gray-400);
    background: rgba(155, 164, 171, 0.65);
}

.dark-mode [class*=cycle-box-1-].cycle-box-1-gray::before {
    background-color: var(--gray-50per);
}

[class*=cycle-box-1-].cycle-box-1-green::before {
    background-color: rgba(0, 137, 30, 0.3);
}

[class*=cycle-box-1-].cycle-box-1-green > span {
    background: #98FF1A;
}

.dark-mode [class*=cycle-box-1-].cycle-box-1-green::before {
    background-color: rgba(37, 240, 124, 0.4);
}

[class*=cycle-box-1-].cycle-box-1-red::before {
    background-color: var(--red-30per);
}

[class*=cycle-box-1-].cycle-box-1-red > span {
    background: var(--red-500);
    color: #fff;
}

.card-2 .detail-box .top {
    margin: -16px;
    margin-bottom: 0;
    position: relative;
    height: 238px;
    border-radius: 16px;
    overflow: hidden;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.card-2 .detail-box .top img {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card-2 .detail-box .top .close {
    position: absolute;
    top: 16px;
    right: 16px;
}

.detail-box .infos > ul > li {
    padding: 16px 0;
    border-bottom: 1px solid var(--gray-300);
}

.detail-box .infos > ul > li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.detail-box .infos > ul > li .txt1 {
    font: var(--SUITE-titleMd-xl);
    margin-bottom: 8px;
}

.dark-mode .detail-box .infos > ul > li .txt1 {
    color: #fff;
}

.detail-box .infos > ul > li .txt2 {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 300;
    color: var(--blue-500);
}

.detail-box .infos > ul > li .txt2 span {
    color: inherit;
    font-weight: initial;
    font-size: inherit;
}

.detail-box .infos > ul > li .txt2 i {
    color: inherit;
    font-weight: initial;
    font-size: calc(100% + 2px);
}

.detail-box .infos > ul > li .txt3 {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 300;
    color: var(--gray-700);
}

.dark-mode .detail-box .infos > ul > li .txt3 {
    color: var(--gray-400);
}

.detail-box .infos > ul > li .txt3 i {
    font-size: calc(100% + 3px);
    margin-right: 6px;
    color: inherit;
}

.detail-box .infos > ul > li .txt3 span {
    font-size: inherit;
    color: inherit;
}

.detail-box .infos > ul > li .txt4 {
    font-size: 15px;
    font-weight: 300;
    line-height: 24px;
}

.dark-mode .detail-box .infos > ul > li .txt4 {
    color: var(--gray-25);
}

.detail-box .infos > ul > li .tit-box1 {
    padding: 12px 0;
    display: flex;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: 16px;
}

.dark-mode .detail-box .infos > ul > li .tit-box1 {
    color: #fff;
}

.detail-box .infos > ul > li .tit-box1 i {
    font-size: calc(100% + 4px);
    color: var(--blue-500);
    margin-right: 4px;
}

.detail-box .infos > ul > li .list {
    margin: -8px;
    display: flex;
    flex-wrap: wrap;
}

.detail-box .infos > ul > li .list li {
    padding: 8px;
    flex: 1 0 0%;
    flex-basis: 50%;
    max-width: 50%;
}

.detail-box .infos > ul > li .list li .box {
    border-radius: 8px;
    border: 1px solid var(--gray-300);
}

.detail-box .infos > ul > li .list li .box .top {
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    height: auto;
    margin: 0;
    border-radius: 0;
    background-color: var(--gray-20per);
    align-items: center;
}

.dark-mode .detail-box .infos > ul > li .list li .box .top {
    background-color: var(--gray-15per);
}

.detail-box .infos > ul > li .list li .box .top p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.dark-mode .detail-box .infos > ul > li .list li .box .top p {
    color: var(--gray-25);
}

.detail-box .infos > ul > li .list li .box .top p span {
    font-size: 12px;
    display: block;
    color: var(--gray-700);
    line-height: 1;
    margin-top: 4px;
}

.dark-mode .detail-box .infos > ul > li .list li .box .top p span {
    color: var(--gray-400);
}

.detail-box .infos > ul > li .list li .box .bottom {
    padding: 8px 16px;
}

.detail-box .infos > ul > li .list li .box .bottom .txt {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 300;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-300);
    align-items: center;
    line-height: 1;
}

.dark-mode .detail-box .infos > ul > li .list li .box .bottom .txt {
    color: var(--gray-400);
    border-color: var(--gray-700);
}

.detail-box .infos > ul > li .list li .box .bottom .txt span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.detail-box .infos > ul > li .list li .box .bottom .info {
    font-size: 12px;
    font-weight: 300;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    letter-spacing: -1px;
}

.dark-mode .detail-box .infos > ul > li .list li .box .bottom .info {
    color: var(--gray-400);
}

.detail-box .infos > ul > li .list li .box .bottom .info i {
    color: inherit;
    font-size: calc(100% + 2px);
    margin-right: 4px;
}

[class*=mode-ani] * {
    transition-behavior: normal, normal;
    transition-duration: 0.1s, 0.5s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
    transition-property: color, background-color;
}

.dark-mode {
    background: var(--gray-900);
    background: #2D3236;
}

[class*=gray-box-] {
    padding: 16px;
    background-color: var(--gray-10per);
    border-radius: 8px;
}

[class*=gray-box-] [class*=form-area-box-bold-lable] > label {
    color: #6C7680;
}

[class*=gray-box-] [class*=form-area-box-bold-lable] .ele-icon-box {
    border-color: var(--gray-500);
    background-color: rgba(255, 255, 255, 0);
}

.dark-mode [class*=gray-box-] [class*=form-area-box-bold-lable] .ele-icon-box {
    background-color: rgba(255, 255, 255, 0);
}

[class*=form-area-box] .ele-icon-box {
    border-color: var(--gray-15per);
    background-color: var(--gray-15per);
    padding: 7px 15px;
}

[class*=form-area-box] .ele-icon-box > .custom-select  > button{
    font-size: 15px;
}

.dark-mode [class*=form-area-box] .ele-icon-box {
    color: #fff;
    background-color: var(--gray-20per);
    border-color: var(--gray-20per);
}

.dark-mode [class*=form-area-box] .ele-icon-box .custom-select ul.select {
    background-color: var(--gray-950);
    color: var(--blue-500);
}

[class*=top-tit-] {
    padding-bottom: 12px;
}

[class*=top-tit-] > .row {
    align-items: center;
    margin: -4px;
}

[class*=top-tit-] > .row > div {
    padding: 4px;
    line-height: 1;
}

[class*=top-tit-] > .row .txt1 {
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

[class*=top-tit-] > .row .unit {
    display: none;
    color: #000;
}
[class*=top-tit-] > .row .unit.on {
    display: block;
}
.dark-mode [class*=top-tit-] > .row .unit {
    color: #FFF;
}

.dark-mode [class*=top-tit-] > .row .txt1 {
    color: #fff;
}

[class*=top-tit-] > .row .txt1 > i {
    font-size: calc(100% + 4px);
    color: var(--brand-500);
    margin-right: 4px;
}

[class*=top-tit-] > .row .txt2 {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.dark-mode [class*=top-tit-] > .row .txt2 {
    color: var(--gray-25);
}

[class*=top-tit-].bb-in {
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: 12px;
}

[class*=top-tit-] .mark-txt {
    display: flex;
    font-size: 12px;
    font-weight: 300;
    align-items: center;
    line-height: 116.667%;
}

.dark-mode [class*=top-tit-] .mark-txt {
    color: var(--gray-25);
}

[class*=top-tit-] .mark-txt.square-bg-1 em {
    background-color: var(--gray-15per);
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.dark-mode [class*=top-tit-] .mark-txt.square-bg-1 em {
    background-color: var(--gray-20per);
}

[class*=top-tit-] .mark-txt.square-bg-2 em {
    background-color: var(--blue-10per);
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.dark-mode [class*=top-tit-] .mark-txt.square-bg-2 em {
    background-color: var(--blue-20per);
}

[class*=top-tit-] .mark-txt.square-bg-3 em {
    background-color: var(--red-10per);
    width: 14px;
    height: 14px;
    margin-right: 4px;
}

.dark-mode [class*=top-tit-] .mark-txt.square-bg-3 em {
    background-color: var(--red-20per);
}

[class*=top-tit-] .mark-txt.bar-bg-1 em, [class*=top-tit-] .mark-txt.bar-bg-2 em, [class*=top-tit-] .mark-txt.bar-bg-3 em {
    width: 20px;
    height: 2px;
    margin-right: 8px;
}

[class*=top-tit-] .mark-txt.bar-bg-1 em {
    background-color: var(--blue-500);
}

.dark-mode [class*=top-tit-] .mark-txt.bar-bg-1 em {
    background-color: var(--blue-500);
}

[class*=top-tit-] .mark-txt.bar-bg-2 em {
    background-color: var(--orange-500);
}

.dark-mode [class*=top-tit-] .mark-txt.bar-bg-2 em {
    background-color: var(--orange-500);
}

[class*=top-tit-] .mark-txt.bar-bg-3 em {
    border: 1px dashed var(--red-500);
}

.dark-mode [class*=top-tit-] .mark-txt.bar-bg-3 em {
    border: 1px dashed var(--red-500);
}

[class*=top-tit-] .alarm {
    display: flex;
    align-items: center;
}

[class*=top-tit-] .alarm .txts1 {
    font-size: 12px;
    color: var(--green-700);
    margin-right: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.dark-mode [class*=top-tit-] .alarm .txts1 {
    color: var(--green-500);
}

[class*=top-tit-] .alarm .txts1 i {
    color: inherit;
    margin-right: 4px;
    font-size: calc(100% + 2px);
}

[class*=top-tit-] .alarm .txts2 {
    font-size: 12px;
}

.dark-mode [class*=top-tit-] .alarm .txts2 {
    color: var(--gray-25);
}

[class*=top-tit-] .infos {
    color: #6C7680;
    font-size: 14px;
}

.top-tit-2 > .row .txt1 {
    font-size: 15px;
}

.top-tit-2 > .row .txt1 i {
    font-size: calc(100% + 3px);
    color: #6C7680;
}

.dark-mode .top-tit-2 > .row .txt1 i {
    color: var(--gray-400);
}

/*imgbox-1*/
[class*=imgbox-] {
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

[class*=imgbox-]::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    left: 0;
    top: 0;
}

[class*=imgbox-] img {
    width: 100%;
    display: block;
}

[class*=imgbox-] .center-box {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

[class*=imgbox-] .center-box [class*=icon-] {
    width: 64px;
    height: 64px;
    display: inline-flex;
    border-radius: var(---999, 999px);
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(37.5px);
    backdrop-filter: blur(37.5px);
    color: #fff;
    font-size: 32px;
    justify-content: center;
    align-items: center;
}

[class*=imgbox-] .center-box .txt {
    margin-top: 8px;
    font-size: 14px;
    color: #fff;
}

/*tab-design-1*/
[class*=tab-design-] {
    z-index: 1;
    position: relative;
    border: 1px solid var(--gray-300);
    background: var(--UI-, rgba(255, 255, 255, 0.85));
    /* 시스템그림자/하단/레벨2 */
    box-shadow: var(--ShadowBottom-lev2);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    margin-bottom: 24px;
}

[class*=card-] [class*=tab-design-] {
    margin-top: -16px;
    margin-left: -16px;
    margin-right: -16px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
}

[class*=tab-design-] ul {
    display: flex;
    flex-wrap: wrap;
}

[class*=tab-design-] ul li {
    flex: 1 0 0%;
    font-size: 15px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0;
    height: 48px;
}

[class*=tab-design-] ul li i {
    font-size: calc(100% + 1px);
    color: inherit;
    margin-right: 4px;
    line-height: 1;
}

[class*=tab-design-] ul li span {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    line-height: 1;
}

[class*=tab-design-] ul li.active, [class*=tab-design-] ul li:hover {
    background-color: var(--gray-950);
    color: #fff;
    cursor: pointer;
}

.tab-design-3 {
    margin: -16px 0 0 0 !important;
}
.tab-design-3 ul li {
    height: 36px;
}

.dark-mode [class*=tab-design-] {
    background: var(--gray-10per);
    border-color: var(--gray-700);
}

.dark-mode [class*=tab-design-] ul li {
    color: #fff;
}

.dark-mode [class*=tab-design-] ul li.active, .dark-mode [class*=tab-design-] ul li:hover {
    background-color: #fff;
    color: var(--gray-950);
    cursor: pointer;
}

.tab-design-2 {
    margin: 0;
    margin-bottom: 16px;
    border: 0;
}

[class*=tab-design-] + .tab-design-2 {
    margin-top: -24px;
}

[class*=tab-design-] + .tab-design-2 + .tab-content {
    height: calc(100% - 55px - 56px);
    overflow-y: auto;
    overflow-x: hidden;
}

.tab-design-2 ul li {
    height: 40px;
    padding: 9px 0;
    position: relative;
}

.tab-design-2 ul li > span {
    color: #6C7680;
    font-size: 16px;
    font-weight: 600;
}

.dark-mode .tab-design-2 ul li > span {
    color: var(--gray-400);
}

.tab-design-2 ul li .icon-info-circle {
    font-size: calc(100% - 2px);
    color: inherit;
    position: relative;
}

.tab-design-2 ul li .icon-info-circle .tooltipsBox.bottom {
    top: calc(100% + 10px);
    min-width: 310px;
}

.tab-design-2 ul li > * {
    padding: 0 2px;
}

.tab-design-2 ul li::before {
    content: "";
    bottom: 0;
    position: absolute;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: var(--gray-300);
}

.tab-design-2 ul li.active, .tab-design-2 ul li:hover {
    background-color: rgba(255, 255, 255, 0);
    margin: 0;
}

.tab-design-2 ul li.active > span, .tab-design-2 ul li.active > .icon-info-circle, .tab-design-2 ul li:hover > span, .tab-design-2 ul li:hover > .icon-info-circle {
    color: var(--brand-500);
}

.dark-mode .tab-design-2 ul li.active, .dark-mode .tab-design-2 ul li:hover {
    background-color: rgba(255, 255, 255, 0);
    margin: 0;
}

.dark-mode .tab-design-2 ul li.active > span, .dark-mode .tab-design-2 ul li:hover > span {
    color: var(--brand-500);
}

.tab-design-2 ul li.active::before, .tab-design-2 ul li:hover::before {
    height: 3px;
    background-color: var(--brand-500);
}

.tab-design-2 ul li.active .trans .tooltips, .tab-design-2 ul li:hover .trans .tooltips {
    background: #fff;
}

.dark-mode .tab-design-2 ul li.active .trans .tooltips, .dark-mode .tab-design-2 ul li:hover .trans .tooltips {
    background: #000;
}

.tab-design-2 .active .tooltipsBox > .arrow::after {
    background-color: #fff;
}

[class*=grid-] > .row {
    margin: -8px;
}

[class*=grid-] > .row > div {
    padding: 8px;
}

.grid-2 > .row {
    margin: -4px;
}

.grid-2 > .row > div {
    padding: 4px;
}

.grid-3 > .row {
    margin: -8px;
}

.grid-3 > .row > div {
    padding: 8px;
}

.grid-4 > .row {
    margin: -3px;
}

.grid-4 > .row > div {
    padding: 3px;
}

.grid-5 > .row {
    margin: -16px;
}

.grid-5 > .row > div {
    padding: 16px;
}

.chartbox-1 {
    border-radius: 8px;
    padding: 16px 0;
}

.chartbox-1.bg-1 {
    background-color: var(--blue-5per);
}

.dark-mode .chartbox-1.bg-1 {
    background-color: var(--blue-15per);
}

.chartbox-1 .txt1 {
    font-size: 13px;
    line-height: 115.385%;
    text-align: center;
    margin-bottom: 16px;
    font-weight: 600;
}

.dark-mode .chartbox-1 .txt1 {
    color: #fff;
}

.chartbox-1 .donut-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    width: 100px;
    height: 100px;
    position: relative;
    margin: auto;
    flex-direction: column;
    border: 8px solid var(--blue-500);
}

.chartbox-1 .donut-1.bc-orange {
    border-color: var(--orange-500);
}

.chartbox-1 .donut-1 .txt1 {
    position: relative;
    z-index: 1;
    font-family: "Montserrat";
    font-weight: 700;
    margin-bottom: 0;
    font-size: 24px;
}

.dark-mode .chartbox-1 .donut-1 .txt1 {
    color: #fff;
}

.chartbox-1 .donut-1 .txt2 {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-style: normal;
    font-weight: 300;
}

.dark-mode .chartbox-1 .donut-1 .txt2 {
    color: #fff;
}

.tab-content > div {
    display: none;
}

.tab-content > div.active {
    display: block;
}

.levTxts {
    margin-bottom: 12px;
}

.levTxts .txt {
    display: flex;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    align-items: center;
    margin-bottom: 8px;
}

.dark-mode .levTxts .txt {
    color: #fff;
}

.levTxts .txt i {
    font-size: calc(100% + 4px);
    margin-right: 4px;
    color: #6C7680;
}

.dark-mode .levTxts .txt i {
    color: #fff;
}

.levTxts .txt span {
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
}

.levTxts > * {
    margin-bottom: 4px;
}

.levTxts > *:last-child {
    margin-bottom: 0;
}

.levTxts .lev1 {
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    display: flex;
    align-items: center;
}

.dark-mode .levTxts .lev1 {
    color: #fff;
}

.levTxts .lev2 {
    padding-left: 19px;
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
    display: flex;
    align-items: center;
}

.dark-mode .levTxts .lev2 {
    color: #fff;
}

.levTxts .cycle {
    width: 3px;
    height: 3px;
    border-radius: 4px;
    margin: 0 10px;
    background-color: var(--gray-950);
}

.dark-mode .levTxts .cycle {
    background-color: #fff;
}

[class*=calendar-design-] {
    height: 92px;
    display: flex;
    border-top: 1px solid var(--gray-55per);
    border-bottom: 1px solid var(--gray-55per);
}

[class*=calendar-design-] > div {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

[class*=calendar-design-] > div.ymmdd {
    border-right: 1px solid var(--gray-55per);
    margin-right: 16px;
    display: flex;
    align-items: center;
    flex-basis: 272px;
    max-width: 272px;
    padding-right: 24px;
}

[class*=calendar-design-] > div.ymmdd .num {
    font-weight: 600;
    font-size: 20px;
    margin: 0 6px;
}

.dark-mode [class*=calendar-design-] > div.ymmdd .num {
    color: #fff;
}

[class*=calendar-design-] > div.ymmdd [class*=icon-] {
    color: var(--gray-500);
    font-size: 24px;
}

[class*=calendar-design-] > div.dayinfo {
    display: inline-flex;
    align-items: center;
    height: 100%;
    flex: 1 0 0%;
    justify-content: space-between;
}

[class*=calendar-design-] > div.dayinfo ul {
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-basis: calc(100% - 48px);
    max-width: calc(100% - 48px);
    align-items: flex-start;
}

[class*=calendar-design-] > div.dayinfo ul li {
    text-align: center;
}

[class*=calendar-design-] > div.dayinfo ul li span {
    font-size: 12px;
    font-weight: 300;
    line-height: 1;
}

.dark-mode [class*=calendar-design-] > div.dayinfo ul li span {
    color: var(--gray-25);
}

[class*=calendar-design-] > div.dayinfo ul li p {
    font-family: "Montserrat";
    font-size: 28px;
    line-height: 1;
}

.dark-mode [class*=calendar-design-] > div.dayinfo ul li p {
    color: var(--gray-25);
}

[class*=calendar-design-] > div.dayinfo ul li em {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
}

.dark-mode [class*=calendar-design-] > div.dayinfo ul li em {
    color: var(--gray-25);
}

[class*=calendar-design-] > div.dayinfo ul li em.cycle {
    width: 5px;
    height: 5px;
    font-size: 0;
    border-radius: 5px;
    background-color: var(--red-500);
    display: inline-block;
}

[class*=calendar-design-] > div.dayinfo ul li.today span, [class*=calendar-design-] > div.dayinfo ul li.today p {
    color: var(--blue-500);
}

[class*=calendar-design-] > div.dayinfo [class*=icon-] {
    color: var(--gray-500);
    font-size: 24px;
}

/*table-2 design 인것 같아서 */
.table-box-2::before {
    display: none;
}

.table-box-2 thead th {
    position: relative;
    border-right: 2px solid #fff;
}

.dark-mode .table-box-2 thead th {
    border-right: 2px solid #3d4347;
}

.table-box-2 thead th::before {
    content: "";
    width: 2px;
    height: calc(100% + 5px);
    position: absolute;
    right: -2px;
    top: -1px;
    background: #ffffff;
    opacity: 0;
}

.dark-mode .table-box-2 thead th::before {
    background: #3d4347;
}

.table-box-2 thead th:last-child {
    border-right: 0;
}

.table-box-2 thead th:last-child::before {
    display: none;
}

.table-box-2 tbody {
    /*
    & tr:hover td,
    & tr.hover td {
       color: var(--gray-950) !important;
       background-color: rgba(var(--gray-rgbaNum), 0.15) !important;
       border-color: #fff !important;
       &::before{
         background-color:inherit !important;
       }
       &.bg-2{
         background-color: var(--gray-15per) !important;
       }
       &.bg-red{
         background-color: var(--red-10per) !important;
         color:var(--red-500) !important;
       }
       &.bg-blue{
         background-color: var(--blue-10per) !important;
         color:var(--blue-500) !important;
       }
     }
       */
}

.table-box-2 tbody tr:nth-child(even) td {
    background-color: rgba(var(--gray-rgbaNum), 0.15);
}

.table-box-2 tbody tr td {
    border-right: 2px solid #fff;
    font-weight: 400;
    background-color: rgba(var(--gray-rgbaNum), 0.15);
    border-bottom: 2px solid #fff;
}

.dark-mode .table-box-2 tbody tr td {
    border-right: 2px solid #3d4347;
    border-bottom: 2px solid #3d4347;
}

.table-box-2 tbody tr td.bg-1.bb-in {
    border-bottom-color: var(--gray-300) !important;
    border-bottom-width: 1px;
    /*
     :hover &{
     border-bottom-color: var(--gray-300) !important;
    }
     */
}

.dark-mode .table-box-2 tbody tr td.bg-1.bb-in {
    border-bottom-color: var(--white-30per) !important;
}

.table-box-2 tbody tr td.bg-2 {
    background-color: var(--gray-15per);
}

.table-box-2 tbody tr td.bg-red {
    background-color: var(--red-10per);
    color: var(--red-500);
}

.table-box-2 tbody tr td.bg-blue {
    background-color: var(--blue-10per);
    color: var(--blue-500);
}

.table-box-2 tbody tr:last-child td {
    border-right: 2px solid #fff !important;
    border-bottom-color: var(--gray-300) !important;
    border-bottom-width: 1px;
}

.dark-mode .table-box-2 tbody tr:last-child td {
    border-right: 2px solid var(--gray-10per) !important;
    border-bottom-color: var(--white-30per) !important;
}

/*특수 디자인*/
.top-bottom-1 > div {
    padding: 8px 0;
    line-height: 1;
}

.top-bottom-1 .top {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border: 1px solid var(--blue-30per);
    background: var(--blue-10per);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-500);
    font-size: 14px;
}

.top-bottom-1 .bottom {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border: 1px solid var(--gray-300);
    border-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.dark-mode .top-bottom-1 .bottom {
    border-color: var(--gray-700);
    color: var(--gray-25);
}

.gray-txt1 {
    border-radius: 8px;
    background-color: var(--gray-10per);
    padding: 24px;
}

.txt-design1 .row {
    margin: -4px;
}

.txt-design1 .row div {
    padding: 4px;
}

.txt-design1 .txt1 {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.dark-mode .txt-design1 .txt1 {
    color: var(--gray-25);
}

.txt-design1 .txt1 i {
    font-size: calc(100% + 4px);
    color: #6C7680;
    margin-right: 4px;
}

.dark-mode .txt-design1 .txt1 i {
    color: #9BA4AB;
}

.txt-design1 .txt1 span {
    font-size: initial;
    color: inherit;
    font-weight: inherit;
}

.txt-design1 .txt2 {
    font-size: 15px;
    line-height: 160%;
    display: flex;
    align-items: center;
    font-weight: 300;
}

.dark-mode .txt-design1 .txt2 {
    color: var(--gray-25);
}

.txt-design1 .txt2 .cycle {
    width: 3px;
    height: 3px;
    display: inline-block;
    margin-right: 4px;
    background-color: var(--gray-950);
    border-radius: 5px;
}

.dark-mode .txt-design1 .txt2 .cycle {
    background-color: #fff;
}

.txt-design1 .list-bb-in {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: 24px;
}

.dark-mode .txt-design1 .list-bb-in {
    border-color: var(--gray-700);
}

.capsule-1 {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.capsule-1 > div {
    padding: 8px 0px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-right: 2px solid #fff;
    flex: 1 0 0%;
}

.capsule-1 > div:last-child {
    border-right: 0;
}

.dark-mode .capsule-1 > div {
    border-right-color: var(--gray-10per);
    border-right-color: #161719;
}

.capsule-1 .red {
    flex-basis: 115px;
    max-width: 115px;
    background-color: var(--red-500);
}

.capsule-1 .blue {
    background-color: var(--blue-500);
}

.capsule-1.ver-1 {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.capsule-1.ver-1 > div {
    padding: 8px 0px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-right: 0px;
    border-bottom: 2px solid #fff;
    flex: 1 0 0%;
    flex-basis: 100%;
    max-width: 100%;
    width: 100%;
}

.capsule-1.ver-1 > div:last-child {
    border-right: 0;
    border-bottom: 0;
}

.dark-mode .capsule-1.ver-1 > div {
    border-bottom-color: var(--gray-10per);
    border-bottom-color: #161719;
}

.capsule-1.ver-1 .red {
    flex-basis: 115px;
    max-width: 115px;
    flex-basis: 100%;
    max-width: 100%;
    background-color: var(--red-500);
}

.capsule-1.ver-1 .blue {
    flex-basis: 100%;
    max-width: 100%;
    background-color: var(--blue-500);
}

.icons-txt-1 {
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    height: 92px;
}

.dark-mode .icons-txt-1 {
    border-color: var(--gray-700);
}

.icons-txt-1 .svgbox {
    margin-right: 12px;
    position: relative;
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background-color: var(--gray-10per);
}

.icons-txt-1 .svgbox svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dark-mode .icons-txt-1 .svgbox svg path {
    fill: var(--gray-25);
}

.icons-txt-1 .txtbox p {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
}

.dark-mode .icons-txt-1 .txtbox p {
    color: var(--gray-25);
}

.icons-txt-1 .txtbox span {
    font-size: 11px;
    font-weight: 300;
    line-height: 1;
}

.dark-mode .icons-txt-1 .txtbox span {
    color: var(--gray-25);
}

.icons-txt-1:hover, .icons-txt-1.active {
    border-color: var(--blue-500);
    background: var(--blue-10per);
    /* 시스템그림자/하단/레벨3 */
    box-shadow: var(--ShadowBottom-lev3);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
}

.dark-mode .icons-txt-1:hover, .dark-mode .icons-txt-1.active {
    background: var(--blue-20per);
}

.icons-txt-1:hover .svgbox, .icons-txt-1.active .svgbox {
    background: var(--blue-10per);
}

.icons-txt-1:hover .svgbox svg path, .icons-txt-1.active .svgbox svg path {
    fill: var(--blue-500);
}

.dark-mode .icons-txt-1:hover .svgbox svg path, .dark-mode .icons-txt-1.active .svgbox svg path {
    fill: #fff;
}

.icons-txt-2 {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
    height: 171px;
}

.icons-txt-2 img {
    display: block;
    margin-bottom: 16px;
}

.icons-txt-2 p {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    line-height: 1;
    margin-bottom: 8px;
    align-items: center;
}

.dark-mode .icons-txt-2 p {
    color: var(--gray-25);
}

.icons-txt-2 p i {
    color: #6C7680;
    font-size: calc(100% + 4px);
    margin-right: 6px;
}

.dark-mode .icons-txt-2 p i {
    color: var(--gray-400);
}

.icons-txt-2 span {
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
}

.dark-mode .icons-txt-2 span {
    color: var(--gray-25);
}

.bottom-box > .row {
    margin: 0 -4px;
}

.bottom-box > .row > div {
    padding: 0 4px;
}

.bottom-box > .row button {
    justify-content: center;
}

[class*=form-area-box] + .bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
}

[class*=form-area-box] + .bottom p {
    font-weight: 300;
    font-size: 10px;
    color: #6C7680;
}

[class*=form-area-box] + .bottom p i {
    font-size: calc(100% + 2px);
    color: inherit;
    margin-right: 2px;
}

[class*=form-area-box] + .bottom p em {
    color: inherit;
    font-size: inherit;
    font-weight: initial;
}

.comments-box .top {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 8px;
}

.dark-mode .comments-box .top {
    color: var(--gray-25);
}

.comments-box ul li {
    border-top: 1px solid var(--gray-300);
}

.comments-box ul li.inputs {
    padding: 8px 0;
    display: flex;
    align-items: center;
}

.comments-box ul li.inputs .svgbox {
    background-color: var(--gray-100);
    width: 36px;
    height: 36px;
    padding: 4.32px 3.96px 0px 3.96px;
    border-radius: 999px;
    margin-right: 8px;
    overflow: hidden;
}

.dark-mode .comments-box ul li.inputs .svgbox path {
    fill: var(--gray-700);
}

.dark-mode .comments-box ul li.inputs .svgbox {
    background-color: var(--gray-500);
}

.comments-box ul li.inputs [class*=form-area-box] {
    flex: 1 0 0%;
}

.comments-box ul li.views {
    padding: 16px 0;
    display: flex;
    align-items: center;
}

.comments-box ul li.views:last-child {
    padding-bottom: 0;
}

.comments-box ul li.views > div {
    display: flex;
    align-items: flex-start;
    flex: 1 0 0%;
}

.comments-box ul li.views .svgbox {
    background-color: var(--gray-100);
    width: 24px;
    height: 24px;
    padding: 2.88px 2.64px 0px 2.64px;
    border-radius: 999px;
    overflow: hidden;
}

.dark-mode .comments-box ul li.views .svgbox {
    background-color: var(--gray-500);
}

.dark-mode .comments-box ul li.views .svgbox path {
    fill: var(--gray-700);
}

.comments-box ul li.views .txtbox {
    padding-left: 16px;
    font-size: 13px;
    font-weight: 300;
    line-height: 24px;
    min-height: 24px;
}

.dark-mode .comments-box ul li.views .txtbox {
    color: var(--gray-25);
}

.comments-box ul li.views [class*=btn-] + [class*=btn-] {
    margin-left: 8px;
}

.datepicker-dropdown {
    padding: 16px;
    min-width: auto;
    width: auto;
}

.datepicker-dropdown:after, .datepicker-dropdown:before {
    opacity: 0;
}

.datepicker-dropdown table {
    width: auto;
    min-width: 200px;
}

.datepicker-dropdown table tr td,
.datepicker-dropdown table tr th {
    background: none !important;
    text-align: center;
    cursor: pointer;
}

.datepicker-dropdown table tr td i,
.datepicker-dropdown table tr th i {
    color: var(--Elements-Icon);
    background: #F9F9FA;
    position: relative;
    display: inline-block;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    background-color: var(--light-gray);
}

.datepicker-dropdown table tr td i:before,
.datepicker-dropdown table tr th i:before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.datepicker-dropdown table .datepicker-switch {
    color: #2A2B2E;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 24px;
    text-align: center;
}

.datepicker-dropdown table tr th.dow,
.datepicker-dropdown table tr td.dow {
    color: var(--black);
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
}

.datepicker-dropdown table tr th:nth-child(2) {
    border-bottom: 1px solid var(--Elements-Line);
    padding-bottom: 8px;
}

.datepicker-dropdown table tr th:nth-child(3) {
    padding-top: 8px;
}

.datepicker-dropdown .datepicker-days .table-condensed .day {
    color: var(--gray-950);
    font-size: 15px;
    letter-spacing: 0;
    font-weight: 300;
    width: 25px;
    height: 25px;
    position: relative;
    text-align: center;
}

.datepicker-dropdown .datepicker-days .table-condensed .day.new, .datepicker-dropdown .datepicker-days .table-condensed .day.old {
    color: var(--gray-25);
}

.datepicker-dropdown .datepicker-days .table-condensed .day.today,
.datepicker-dropdown .datepicker-days .table-condensed .day td:hover,
.datepicker-dropdown .datepicker-days .table-condensed .day td.active.day {
    border-radius: 30px;
    color: #fff;
    position: relative;
    z-index: 10;
}

.datepicker-dropdown .datepicker-days .table-condensed .day.today:after,
.datepicker-dropdown .datepicker-days .table-condensed .day td:hover:after,
.datepicker-dropdown .datepicker-days .table-condensed .day td.active.day:after {
    background-color: #005291 !important;
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
}

.dark-mode .dark-color-white {
    color: #fff;
}

.dashboard-design-1 {
    max-width: 1728px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 48px;
    height: 100%;
}

.dashboard-design-1 > .top {
    margin-bottom: 32px;
}

.dashboard-design-1 > .top .row {
    margin: 0 -16px;
    align-items: center;
}

.dashboard-design-1 > .top .row > div {
    padding: 0 16px;
}

.dashboard-design-1 > .top .txt1 {
    font-family: "SUITE";
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    display: flex;
    align-items: end;
    line-height: 1;
}

.dark-mode .dashboard-design-1 > .top .txt1 {
    color: var(--gray-25);
}

.dashboard-design-1 > .top .txt1 > span {
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin-right: 16px;
}

.dashboard-design-1 > .top .txt1 > em {
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
}

.dark-mode .dashboard-design-1 > .top .txt1 > em {
    color: var(--gray-25);
}

.dashboard-design-1 > .top .txt2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
}

.dark-mode .dashboard-design-1 > .top .txt2 {
    color: var(--gray-25);
}

.dashboard-design-1 > .top .txt3 {
    font-size: var(--sm-18-pt, 18px);
    font-style: normal;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
}

.dark-mode .dashboard-design-1 > .top .txt3 {
    color: var(--gray-25);
}

.dashboard-design-1 > .top .txt3 .square {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.dashboard-design-1 .lists {
    position: relative;
    height: calc(100% - 32px - 40px);
}

.dashboard-design-1 .lists > button {
    position: absolute;
    color: var(--gray-700);
    border: 0;
    background-color: rgba(255, 255, 255, 0);
    font-size: 40px;
    top: 50%;
    transform: translateY(-50%);
}

.dark-mode .dashboard-design-1 .lists > button {
    color: var(--gray-400);
}

.dashboard-design-1 .lists > [class*=-left] {
    left: -64px;
}

.dashboard-design-1 .lists > [class*=-right] {
    right: -64px;
}

.dashboard-design-1 .lists > ul {
    margin: 0 -12px;
    display: flex;
    height: 100%;
}

.dashboard-design-1 .lists > ul > li {
    padding: 0 12px;
    flex: 1 0 0%;
    height: 100%;
}

.dashboard-design-1 .lists > ul > li [class^=card-] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ShadowBottom-lev2);
}

.dashboard-design-1 .lists > ul > li [class^=card-]:hover {
    box-shadow: var(--ShadowBottom-lev5);
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > .txt1 {
    font-size: var(---Lg-32pt-, 32px);
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 24px;
    text-align: center;
}

.dark-mode .dashboard-design-1 .lists > ul > li .chartbox-2 > .txt1 {
    color: var(--gray-25);
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > .chart {
    border-radius: 999px;
    border: 16px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 24px;
    width: 200px;
    height: 200px;
    flex-direction: column;
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > .chart i {
    font-size: 40px;
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > .chart span {
    font-family: SUITE;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
}

.dark-mode .dashboard-design-1 .lists > ul > li .chartbox-2 > .chart span {
    color: var(--gray-25);
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > ul li {
    border-bottom: 1px solid var(--gray-300);
    padding-bottom: 24px;
    margin-bottom: 24px;
    text-align: center;
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > ul li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.dark-mode .dashboard-design-1 .lists > ul > li .chartbox-2 > ul li {
    border-color: var(--gray-700);
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > ul li .txt1 {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
}

.dark-mode .dashboard-design-1 .lists > ul > li .chartbox-2 > ul li .txt1 {
    color: var(--gray-25);
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > ul li .num {
    font-family: SUITE;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: 46px; /* 115% */
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > ul li > em {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    display: block;
}

.dark-mode .dashboard-design-1 .lists > ul > li .chartbox-2 > ul li > em {
    color: var(--gray-25);
}

.dashboard-design-1 .lists > ul > li .chartbox-2 > ul li .txt2 {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
}

.dark-mode .dashboard-design-1 .lists > ul > li .chartbox-2 > ul li .txt2 {
    color: var(--gray-25);
}

[class*=menu-list-] > ul > li {
    margin-bottom: 8px;
    position: relative;
}

[class*=menu-list-] > ul > li:last-child {
    margin-bottom: 0;
}

[class*=menu-list-] > ul > li > a {
    padding: 0 16px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    color: var(--gray-700);
}

.dark-mode [class*=menu-list-] > ul > li > a {
    color: var(--gray-500);
}

[class*=menu-list-] > ul > li > a.active, [class*=menu-list-] > ul > li > a:hover {
    border-radius: 6px;
    background: var(--blue-10per);
    color: var(--blue-500);
}

.dark-mode [class*=menu-list-] > ul > li > a.active, .dark-mode [class*=menu-list-] > ul > li > a:hover {
    color: var(--blue-400);
    background: var(--blue-40per);
}

[class*=menu-list-] > ul > li > a.active::before, [class*=menu-list-] > ul > li > a:hover::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 34px;
    border-radius: 0px 6px 6px 0px;
    background: var(--blue-500);
}

[class*=menu-list-] > ul > li > a span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

[class*=menu-list-] > ul > li > a i {
    width: 18px;
    height: 18px;
    font-size: 10px;
    border-radius: 999px;
    background: var(--red-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

[class*=page-top-txt-] {
    margin-bottom: 32px;
}

[class*=page-top-txt-] .txt1 {
    font-family: "SUITE";
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.dark-mode [class*=page-top-txt-] .txt1 {
    color: var(--gray-25);
}

[class*=page-top-txt-] .txt1 span {
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin-bottom: 8px;
    display: block;
}

[class*=page-top-txt-] .txt1 em {
    display: block;
    font-size: 32px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
}

.dark-mode [class*=page-top-txt-] .txt1 em {
    color: var(--gray-25);
}

[class*=page-top-txt-] .txt2 {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
}

[class*=page-top-txt-] .txt3 {
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    display: inline-flex;
    align-items: center;
}

.dark-mode [class*=page-top-txt-] .txt3 {
    color: var(--gray-25);
}

[class*=page-top-txt-] .txt3 .square {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.txt-check-1 {
    padding: 0 32px;
}

.txt-check-1 .txt1 {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    position: relative;
}

.dark-mode .txt-check-1 .txt1 {
    color: var(--gray-25);
}

.txt-check-1 .txt1 i {
    color: #6C7680;
    font-size: 22px;
    position: absolute;
    left: -32px;
    top: 3px;
}

.txt-check-1 .txt1 span {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.txt-check-1 .txt1 + ul, .txt-check-1 .txt1 + .form-area-box {
    margin-top: 16px;
}

.txt-check-1 .txt1 + .form-area-box {
    margin-left: -32px;
    margin-right: -32px;
    width: calc(100% + 64px);
}

.txt-check-1 .txt1 + .txt2 {
    margin-top: 8px;
}

.txt-check-1 .txt1 + .txt2 + ul {
    margin-top: 16px;
}

.txt-check-1 .txt2 {
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
}

.dark-mode .txt-check-1 .txt2 {
    color: var(--gray-25);
}

.txt-check-1 .check-radio-box label {
    color: var(--gray-700);
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
}

.dark-mode .txt-check-1 .check-radio-box label {
    color: var(--gray-400);
}

.txt-check-1 .check-radio-box label::before {
    font-size: 18px;
    margin-right: 3px;
}

.txt-check-1 .check-radio-box input:checked + label {
    font-weight: 300;
}

.dark-mode .txt-check-1 .check-radio-box input:checked + label {
    color: var(--gray-25);
}

.txt-check-1 ul li {
    margin-bottom: 8px;
    line-height: 1;
    font-size: 0;
}

.txt-check-1 ul li:last-child {
    margin-bottom: 0;
}

.modal-imgboxes {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: 24px;
}

.modal-imgboxes img {
    display: block;
    margin: auto;
    margin-bottom: 8px;
}

.modal-imgboxes .txt {
    font-family: "SUITE";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}

.dark-mode .modal-imgboxes .txt {
    color: #fff;
}

.num-txt-1 {
    display: flex;
    align-items: end;
}

.num-txt-1 span {
    font-family: Montserrat;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    color: var(--red-500);
    margin-right: 2px;
}

.num-txt-1 em {
    font-size: 15px;
    font-style: normal;
    font-weight: 300;
}

/* Gis - Legend */
.cols-maps .legend-div { display: none; position: absolute; left: 8px; bottom: 8px; width: 200px; height: 60px; padding: 8px; border-radius: 8px; background-color: #FFF; box-shadow: var(--Shadow-45-lev3); }
.cols-maps .legend-div.on { display: block; }
.dark-mode .cols-maps .legend-div { background-color: rgba(14, 15, 17, 0.55); }

.cols-maps .legend-div .legend-min span,
.cols-maps .legend-div .legend-max span { color: #000; font-size: 13px; }
.dark-mode .cols-maps .legend-div .legend-min span,
.dark-mode .cols-maps .legend-div .legend-max span { color: #FFF; }
.cols-maps .legend-div .legend-min { text-align: left; }
.cols-maps .legend-div .legend-max { text-align: right; }

.cols-maps .legend-div .legend-bar { width: 100%; height: 16px; background-color: #000; border-radius: 4px; cursor: pointer; }
.cols-maps .legend-div .legend-bar.red   { background: linear-gradient(to right, #FFD75D, #F6B64E, #EE953F, #E67430, #DD5321, #D53212, #CD1103); }
.cols-maps .legend-div .legend-bar.green { background: linear-gradient(to right, #EAF5C0, #C5D6A0, #A0B880, #7C9A60, #577C40, #325E20, #0E4000); }
.cols-maps .legend-div .legend-bar.blue  { background: linear-gradient(to right, #CCCCCC, #AAB5BD, #889FAE, #6688A0, #447291, #225B82, #004574); }

.dark-mode .popover { border: none; background: none; }
.dark-mode .popover-header { background-color: #2D3236; color: #FFF; }
.dark-mode .popover-body { background-color: #2D3236; }
.dark-mode .popover-body * { color: #FFF; border-bottom-left-radius: var(--bs-popover-inner-border-radius); border-bottom-right-radius: var(--bs-popover-inner-border-radius); }

/* gis-index */
.gis-index { position: relative; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #14161C; }
.gis-index .blur { position: absolute; right: 8%; bottom: -17%; width: 25%; height: 25%; background: radial-gradient(circle at center, #8A38F5, #8A38F5 0%, transparent 100%); filter: blur(200px); }
.gis-index > .box-1 { width: 100vw; height: 50vh; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: 'Montserrat'; font-weight: 400; }
.gis-index > .box-1 * { font-family: 'Montserrat'; color: #FFF; }
.gis-index > .box-1 > .box-2 { position: relative; display: flex; justify-content: space-evenly; align-items: center; width: 80%; height: 268px; border-radius: 20px; background-size: cover; transition: 1s; }
.gis-index > .box-1 > .box-2.version1 { background-image: url(/images/gis/index/background-1.png); }
.gis-index > .box-1 > .box-2.version2 { background-image: url(/images/gis/index/background-2.png); }
.gis-index > .box-1 > .box-2.version3 { background-image: url(/images/gis/index/background-3.png); }
.gis-index > .box-1 > .box-2 > .box-title { position: absolute; top: -120px; left: 0; width: 80%; }
.gis-index > .box-1 > .box-2 > .box-title > h1 { font-size: 56px; }
.gis-index > .box-1 > .box-2 > .box-title > h1 > span { margin-left: 40px; font-size: 23px;  }

.gis-index > .box-1 > .box-2 > .button { width: 28%; height: 128px; display: flex; justify-content: space-around; align-items: center; background-color: rgba(45, 51, 69, 0.6); border-radius: 10px; transition: 1s; cursor: pointer; }
.gis-index > .box-1 > .box-2 > .button > .title { font-size: 28px; font-weight: 500; }
.gis-index > .box-1 > .box-2 > .button > .icon { width: 32px; height: 30px; background-size: contain; background-repeat: no-repeat; }
.gis-index > .box-1 > .box-2 > .button.emissions:hover { background-color: #8238E5; }
.gis-index > .box-1 > .box-2 > .button.emissions > .icon { background-image: url(/images/gis/index/icon/icon-emissions.png); }
.gis-index > .box-1 > .box-2 > .button.sequestration:hover { background-color: #1CB8C9; }
.gis-index > .box-1 > .box-2 > .button.sequestration > .icon { background-image: url(/images/gis/index/icon/icon-sequestration.png); }
.gis-index > .box-1 > .box-2 > .button.statistic:hover { background-color: #4059C8; }
.gis-index > .box-1 > .box-2 > .button.statistic > .icon { background-image: url(/images/gis/index/icon/icon-statistic.png); }
.gis-index > .box-1 > .box-2 > .button > .icon > a { width: 100%; height: 100%; }
.gis-index > .box-1 > .box-2 > .extend-contents { display: none; }

/* button-active */
.gis-index > .box-1.active { height: 100%; position: absolute; top: 20%; justify-content: normal; }
.gis-index > .box-1.active > .box-2 { height: 100%; align-items: normal; }
.gis-index > .box-1.active .button { display: none; }
.gis-index > .box-1.active .extend-contents { display: flex; width: 100%; height: 100%; padding: 80px; }
.gis-index > .box-1.active .extend-contents .content { display: none; flex-direction: column; background-color: #8A38F5; padding: 80px; border-radius: 10px; }
.gis-index > .box-1.active .extend-contents .content.on { display: flex; width: 100%; height: 100%;  }
.gis-index > .box-1.active .extend-contents .content * {  }
.gis-index > .box-1.active .extend-contents .content > div.icon-div { display: flex; justify-content: space-between; }
.gis-index > .box-1.active .extend-contents .content > div.icon-div > div { display: flex; }
.gis-index > .box-1.active .extend-contents .content > div.icon-div > div.close-div { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.2); border-radius: 100%; }
.gis-index > .box-1.active .extend-contents .content > div.icon-div > div.close-div > i { font-size: 38px; }
.gis-index > .box-1.active .extend-contents .content > div.icon-div > div > img { width: 50px; height: 50px; }
.gis-index > .box-1.active .extend-contents .content > div.title-div { margin-bottom: 40px; }
.gis-index > .box-1.active .extend-contents .content > div.title-div > h2 { font-weight: 600; font-size: 66px; }
.gis-index > .box-1.active .extend-contents .content > div.content-div { margin-bottom: 80px; }
.gis-index > .box-1.active .extend-contents .content > div.content-div > p { font-size: 28px; }
.gis-index > .box-1.active .extend-contents .content > div.button-div { display: flex; justify-content: space-between; align-items: center; }
.gis-index > .box-1.active .extend-contents .content > div.button-div > button { display: flex; justify-content: space-around; align-items: center; width: 284px; height: 80px; background-color: rgba(45, 51, 69, 0.6); border: none; border-radius: 10px; font-size: 28px; transition: 1s; }
.gis-index > .box-1.active .extend-contents .content > div.button-div > button:hover { background-color: rgba(45, 51, 69, 0.8); }
.gis-index > .box-1.active .extend-contents .content > div.button-div > button:focus { outline: none; }
.gis-index > .box-1.active .extend-contents .content > div.button-div > button * { font-size: 28px; }


/*Dashboard Design*/
.content-boxes.dashboard {
    padding: 0px;
    background-color: #14161C;
}

.content-boxes.dashboard * {
    font-family: 'Montserrat';
}

.content-boxes.dashboard p, .content-boxes.dashboard h2, .content-boxes.dashboard i, .content-boxes.dashboard sub, .content-boxes.dashboard span, .content-boxes.dashboard select, .content-boxes.dashboard button {
    color: #FFFFFF;
}

.content-boxes.dashboard > [class^=dashboard-] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    padding: 8px 20px 15px 20px;
    transition: transform 1s ease, opacity 1s ease;
}
.content-boxes.dashboard > [class^=dashboard-].hide {
    pointer-events: none;
}
.content-boxes.dashboard > .dashboard-1.hide {
    transform: translateX(-100%);
}
.content-boxes.dashboard > .dashboard-2.hide {
    transform: translateX(+100%);
}

.content-boxes.dashboard > [class^=dashboard-] > .row {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0px;
}

.content-boxes.dashboard > [class^=dashboard-] > .row:first-child {
    display: flex;
    flex-basis: 60%;
}

.content-boxes.dashboard > [class^=dashboard-] > .row:first-child  > .box:nth-child(1) {flex-basis: calc(25% - 4px);}
.content-boxes.dashboard > [class^=dashboard-] > .row:first-child  > .box:nth-child(2) {flex-basis: calc(40% - 4px);}
.content-boxes.dashboard > [class^=dashboard-] > .row:first-child  > .box:nth-child(3) {flex-basis: calc(35% - 8px);}
.content-boxes.dashboard > [class^=dashboard-] > .row:last-child {flex-basis: 40%;  /*max-height: calc(100vh - 190px);*/ gap : 10px; display: flex;}

.content-boxes.dashboard > [class^=dashboard-] > .row:last-child > .box{
    flex-basis: calc(50% - 5px);
}

.content-boxes.dashboard .header-div { position: relative; display: flex; align-items: center; }

.content-boxes.dashboard > [class^=dashboard-] > .row > .col-3 { width: calc(25% - 6px); }
.content-boxes.dashboard > [class^=dashboard-] > .row > .col-6 { width: calc(50% - 6px); }
.content-boxes.dashboard > [class^=dashboard-] > .row > .col-9 { width: calc(75% - 6px); }

.content-boxes.dashboard > [class^=dashboard-] > .row .box {
    min-height: 60px;
    background-color: #1D2029;
    border-radius: 8px;
    border: 1px solid var(--black-5per);
    padding: 8px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
}

.content-boxes.dashboard table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}
.content-boxes.dashboard table thead th {
    position: sticky;
    top: -1px;
    border-top: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    background-color: #F2F2F2;
    font-weight: 800;
    padding: 10px 5px;
    text-align: center;
}
.content-boxes.dashboard table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid #EEE;
    vertical-align: middle;
    text-align: center;
}
.content-boxes.dashboard table td .table-color-span,
.content-boxes.dashboard table th .table-color-span {
    display: flex;
    width: 12px;
    height: 12px;
}

.content-boxes.dashboard table.color-table tbody td:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}
.content-boxes.dashboard table.color-table tbody td:first-child span:last-child {
    width: 100%;
    text-align: center;
}

.content-boxes.dashboard h2 {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    gap: 10px;
    padding: 6px 12px;
    font-size: 18px;
    font-weight: 500;
}



.content-boxes.dashboard h2 > img {height: 29px; object-fit: contain;  vertical-align: middle;}

.content-boxes.dashboard a.more-btn { position: absolute; right: 0; display: flex; align-items: center; }
.content-boxes.dashboard a.more-btn > i { margin-right: 2px; }

/* map-1 */
.content-boxes.dashboard .map-1 { position: relative; padding: 8px; min-height: 0;}
.content-boxes.dashboard .map-1 .header-div > a  {color : #FFFFFF;}
.content-boxes.dashboard .map-1 #district-div { position: relative; width: 100%; height: 100%; max-height: fit-content; }
.content-boxes.dashboard .map-1 #map { width: 100%; height: calc(95% - 25px); padding: 30px 10px; position: relative; overflow: hidden; }
.content-boxes.dashboard .map-1 #map > svg {width: 100%; height: 100%; transform: scale(0.1); animation: zoomIn .5s ease-out forwards; }
.content-boxes.dashboard .map-1 #map > svg polygon { transition: fill 0.6s ease-in-out; }
.content-boxes.dashboard .map-1 #map > svg text    { pointer-events: none; }
@keyframes zoomIn {
    to {
        transform: scale(1);
        opacity: 1;
    }
}
.content-boxes.dashboard .map-1 > div > svg circle,
.content-boxes.dashboard .map-1 > div > svg text {
    pointer-events: none;
}

/* legend select button div */
.content-boxes.dashboard .map-1 > div > #legend-button-div { position: absolute; left: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 4px; }
.content-boxes.dashboard .map-1 > div > #legend-button-div > button { border: 1px solid var(--black-20per); width: 20px; height: 20px; transition: .5s ease; opacity: 0.9; }
.content-boxes.dashboard .map-1 > div > #legend-button-div > button.on { width: 24px; height: 24px; }
.content-boxes.dashboard .map-1 > div > #legend-button-div > button[data-color=red]   { background-color: #CD1103; }
.content-boxes.dashboard .map-1 > div > #legend-button-div > button[data-color=green] { background-color: #0E4000; }
.content-boxes.dashboard .map-1 > div > #legend-button-div > button[data-color=blue]  { background-color: #004574; }

/* legend div */
.content-boxes.dashboard .map-1 > div > #legend-div { position: absolute; bottom: 1px; right: 10px; width: 155px; height: 5px; border-radius: 10px}
.content-boxes.dashboard .map-1 > div > #legend-div.default     { background: linear-gradient(to left, #FF5D9E 0%, #934D9A 16.66%, #8A38F5 33.33%, #8A38F5 50%, #5E3DCD 66.66%, #2E3857 83.33%, #3E4B72 100%); }
.content-boxes.dashboard .map-1 > div > #legend-div.red     { background: linear-gradient(to bottom,   #CD1103 0%, #D53212 16.66%, #DD5321 33.33%, #E67430 50%, #EE953F 66.66%, #F6B64E 83.33%, #FFD75D 100%); }
.content-boxes.dashboard .map-1 > div > #legend-div.green   { background: linear-gradient(to bottom,   #0E4000 0%, #325E20 16.66%, #577C40 33.33%, #7C9A60 50%, #A0B880 66.66%, #C5D6A0 83.33%, #EAF5C0 100%); }
.content-boxes.dashboard .map-1 > div > #legend-div.blue    { background: linear-gradient(to bottom,   #004574 0%, #225B82 16.66%, #447291 33.33%, #6688A0 50%, #889FAE 66.66%, #AAB5BD 83.33%, #CCCCCC 100%); }

/* complex-1 */
.content-boxes.dashboard .complex-1 { display: flex; flex-direction: column; justify-content:space-between; gap: 5px; padding: 0px 10px;}
.content-boxes.dashboard .complex-1 > form  { width: 100%; }
.content-boxes.dashboard .complex-1 > form > div  { display: flex; align-items: center; gap: 8px; }
.content-boxes.dashboard .complex-1 > form > div > div  { flex : 1;}

/*Date*/
.content-boxes.dashboard .date-1 {display: flex;flex-direction: column;gap: 12px;}
.content-boxes.dashboard .complex-1 .complex-box {display: flex;}
.content-boxes.dashboard .complex-1 .complex-box > div {flex-basis: 50%;}
.content-boxes.dashboard .complex-1 #pie-chart {width: 100%; height: calc(38vh - 10px); margin: auto; padding: 30px; display: block;}

.content-boxes.dashboard .complex-1 > div:last-child {display: flex;align-items: stretch;gap: 20px;padding: 10px 0 0;}
.content-boxes.dashboard .complex-1 .date-table {display: flex;flex-direction: column;gap: 8px;max-height: calc(38vh); overflow-y: auto;position: relative;}
.content-boxes.dashboard .complex-1 .date-table .table-header {position: sticky;  top: 0; display: flex;background: #2D3345;border-radius: 8px;padding: 8px 14px;}
.content-boxes.dashboard .complex-1 .date-table .table-header > span {flex-basis: 50%; display: flex; justify-content: center; color: #FFFFFF;font-weight: 500;font-size: 16px;}
.content-boxes.dashboard .complex-1 .date-table .table-header > span:nth-child(1) {}
.content-boxes.dashboard .complex-1 .date-table .table-row {display: flex;justify-content: space-between;align-items: center;background: #272C36;color: #FFFFFF;border-radius: 8px;padding: 13px 14px;font-size: 14px;transition: background 0.2s ease;}
.content-boxes.dashboard .complex-1 .date-table .table-row > span{display: flex; justify-content: center; text-align: center;}
.content-boxes.dashboard .complex-1 .date-table .table-row > span:nth-child(1) {flex-basis: 14%;}
.content-boxes.dashboard .complex-1 .date-table .table-row > span:not(:nth-child(1)) {flex-basis: 43%; display: flex; justify-content: center;}
.content-boxes.dashboard .complex-1 .date-table .table-row > span > div {color: #FFFFFF; text-align: center;}
.content-boxes.dashboard .complex-1 .date-table .table-row i.legend-box {width: 10px;height: 10px;border-radius: 2px;}

/* summary-1 */
.content-boxes.dashboard .summary-1 {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, auto);gap: 12px;width: 100%; padding:0px !important;}
.content-boxes.dashboard .summary-1.box {background-color: transparent !important;}
/* summary swiper 추가*/
.content-boxes.dashboard .summary-1 > .swiper {grid-column: span 2; width: 100%; height: 100%;}
.content-boxes.dashboard .summary-1 .summary-swiper .swiper-slide .box {display: flex;flex-direction: column;background-color: #2D3345 !important;border-radius: 12px;padding: 20px 40px !important;transition: transform 0.2s ease, box-shadow 0.2s ease;}
.content-boxes.dashboard .summary-1 .summary-swiper {width: 100%;height: 100%;overflow: hidden;position: relative;}
.content-boxes.dashboard .summary-1 .summary-swiper .swiper-slide { gap : 10px; display: flex;justify-content: flex-start;align-items: flex-start; background-color: #2D3345 !important; border-radius: 8px;}
.content-boxes.dashboard .summary-1 .summary-swiper .swiper-slide > .box{ width: 100%; height: 100%; box-shadow: none; border: none;} /*swiper일때 box 형태는 유지하기위해서 덮어쓰는 방식 사용했습니다.*/
.content-boxes.dashboard .summary-1 .swiper-slide .box > .c-div {width: 100%; }

.content-boxes.dashboard .summary-1  .box {display: flex; flex-direction: column; background-color: #2D3345  !important;border-radius: 12px;padding: 20px 40px !important;box-shadow: 0 4px 8px rgba(0,0,0,0.3);transition: transform 0.2s ease, box-shadow 0.2s ease;}
.content-boxes.dashboard .summary-1 > .box:nth-child(1):hover,  .content-boxes.dashboard .summary-1 > .box:nth-child(2):hover {transform: translateY(-3px);box-shadow: 0 6px 12px rgba(0,0,0,0.35);}
.content-boxes.dashboard .summary-1  .box .i-div {display: flex;justify-content: flex-start;align-items: flex-start;}
.content-boxes.dashboard .summary-1  .box > .i-div img {height: 45px;}
.content-boxes.dashboard .summary-1  .box > .c-div {flex: 1;display: flex;flex-direction: column;justify-content: center;}
.content-boxes.dashboard .summary-1  .box > .c-div > p:first-child {font-weight: 400;font-size: 20px;margin-bottom: 6px;color: #fff;}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value {display: flex; flex-direction: column;}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:first-child { display: flex; font-size: 18px; font-weight: 700;}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:first-child > span:first-child {font-size: 30px; font-weight: 900;}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:first-child > span:last-child  {padding-left: 10px;  font-size: 14px; font-weight: 700; margin-top:auto;}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:first-child > span:last-child > sub {font-size: 12px; font-weight: 700;}

.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:last-child {display: flex;align-items: center;gap: 4px;}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:last-child > i { color: #FF5D9E !important;}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:last-child > i.flip { color: #1CB8C9 !important; display: inline-block; transform: rotate(180deg);}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:last-child  span:first-child {font-size: 24px;  font-weight: 400;}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:last-child  span:last-child  {font-size: 10px; font-weight: 400;}
.content-boxes.dashboard .summary-1  .box > .c-div .summary-value > p:last-child  span:last-child sub {font-size: 8px; font-weight: 400;}
.content-boxes.dashboard .summary-1  .summary-value p[class^=value-] .count-num {font-size: 22px;font-weight: 400;}
.content-boxes.dashboard .summary-1  .summary-value p[class^=value-] .unit {margin-top : auto;font-size: 12px;font-weight: 400;}
.content-boxes.dashboard .summary-1  .summary-value p[class^=value-] .unit sub {font-size: 10px;font-weight: 400;}

.content-boxes.dashboard .summary-1 > .row > .c-div > .summary-value > p.text-red-500:nth-child(n+2) > * { color: #FF5D9E !important; }
.content-boxes.dashboard .summary-1 > .row > .c-div > .summary-value > p.text-blue-500:nth-child(n+2) > * { color: #1CB8C9 !important; }
.content-boxes.dashboard .summary-1 .value-plus {color: #FF5D9E !important;}
.content-boxes.dashboard .summary-1 .value-minus {color: #1CB8C9 !important;}
.content-boxes.dashboard .summary-1 .value-plus span, .content-boxes.dashboard .summary-1 .value-minus span {color: inherit;}
.summary-value .value-plus .unit, .summary-value .value-minus .unit {margin-left: 4px; color: #FFFFFF !important; font-size: 14px !important; font-weight: 500;}

/*KPI-1*/
.content-boxes.dashboard .kpi-1 {display: flex; flex-direction: column; justify-content: space-between; }
.content-boxes.dashboard .kpi-1 > div:nth-child(1){flex-basis: 15%;}
.content-boxes.dashboard .kpi-1 > div:nth-child(2){flex-basis: 85%;}
.content-boxes.dashboard .kpis-cards {height: 100%; display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, auto);gap: 16px;padding: 10px;}
.content-boxes.dashboard .kpis-cards .sub-box {min-height: clamp(100px, 12vh, 200px); background: #2D3345;border-radius: 10px;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);padding: 16px 20px;display: flex;flex-direction: column;justify-content: space-between;transition: transform 0.2s ease, box-shadow 0.2s ease;}
.content-boxes.dashboard .kpis-cards .sub-box:hover {transform: translateY(-3px);box-shadow: 0 4px 12px rgba(0,0,0,0.25);}
.content-boxes.dashboard .kpis-cards .sub-box .sub-title { display: flex; gap : 10px; }
.content-boxes.dashboard .kpis-cards .sub-box .sub-title > div {display: flex;align-items: center;gap: 8px;color: #fff;font-weight: 400;font-size: 19px;}
.content-boxes.dashboard .kpis-cards .sub-box .sub-title img {width: 27px;height: 27px;}
.content-boxes.dashboard .kpis-cards .sub-box .kips-value {display: flex; justify-content: end; gap: 10px;  position: relative;}
.content-boxes.dashboard .kpis-cards .sub-box .sub-value:nth-child(1) {font-size: 16px;color: #fff;text-align: right;}
.content-boxes.dashboard .kpis-cards .sub-box .sub-value:nth-child(3) {font-size: 12px;color: #9edced;text-align: right; display: flex; align-items: end; padding-bottom: 7px;}
.content-boxes.dashboard .kpis-cards .sub-box .sub-value:nth-child(1) .count-num {font-size: 40px;font-weight: 800; padding: 0px 8px; }
.content-boxes.dashboard .kpis-cards .sub-box .sub-value:nth-child(3) .count-num {font-size: 20px;font-weight: 500; padding: 0px 3px;  color: #9edced;}
.content-boxes.dashboard .kpis-cards .sub-box .sub-value:nth-child(3) sub {font-size: 10px;  color: #9edced; padding-right: 5px;}
.content-boxes.dashboard .kpis-cards .sub-box .sub-value sub {font-size: 14px;}
.content-boxes.dashboard .kpis-cards .kips-value > span {font-size: 30px; font-weight: 500; display: flex; align-items: center}

/* graph-1 */

.content-boxes.dashboard .graph-1 {display: flex; flex-direction: column; justify-content: space-between;}
.content-boxes.dashboard .graph-1 > div:nth-child(1){flex-basis: 15%;}
.content-boxes.dashboard .graph-1 > div:nth-child(2){flex-basis: 85%;}
.content-boxes.dashboard .graph-1  div:last-child {width: 100%; height: calc(28vh - 10px); padding: 8px 0px;}
.content-boxes.dashboard .graph-1  .graph-unit {width: 100%; padding: 0px 8px; display: flex; justify-content: flex-end; font-size : 12px; color: #FFF;}
.content-boxes.dashboard .graph-1  .graph-unit > sub{font-size: 12px; color : #FFF;}

/* login */
.login-wrap { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; background: radial-gradient(circle at top, #1b1f2a, #0f1117); }
.login-wrap * { font-family: 'montserrat', serif; }
.login-box { width: 392px; padding: 40px 32px; background: #1e2230; border-radius: 14px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);}
.login-header { text-align: center; margin-bottom: 28px; }
.login-title { margin: 0; font-size: 24px; font-weight: 600; color: #ffffff; }
.login-desc { margin-top: 6px; font-size: 13px; color: #a0a6b8; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.input-group input { width: 100%; height: 46px; padding: 0 14px; border-radius: 8px; background: #14161c; border: 1px solid #2c3040; color: #ffffff; font-size: 13px; transition: border-color 0.2s, box-shadow 0.2s; }
.input-group input::placeholder { color: #7b8194; }
.input-group input:focus { outline: none; border-color: #4f7cff; box-shadow: 0 0 0 2px rgba(79, 124, 255, 0.2); }
.btn-login { display: flex; justify-content: center; align-items: center; margin-top: 8px; height: 46px; border-radius: 8px; border: none; background: linear-gradient(135deg, #4f7cff, #6a5cff); color: #ffffff; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s; text-align: center; }
.btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79, 124, 255, 0.4); opacity: 0.95; }
.btn-login:active { transform: translateY(0); box-shadow: none; }

/*# sourceMappingURL=lyout.css.map */