@charset "utf-8";
@import url(./fonts.css);

/* Base
------------------------------------------------------------------------------------------------------- */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: var(--font-family);
    font-style: normal;
    font-size: var(--font-size);
    letter-spacing: -0.04em;
}

body {
    font-family: 'Pretendard';
    background: #F4F7FF;
}

body.win_pop {
    min-width: auto;
}

a {
    background: transparent;
    color: inherit;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
}

img {
    border-style: none;
}

fieldset {
    border: transparent;
    padding: 0;
}

em, i {
    font-style: normal;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    vertical-align: middle;
    border: 0;
    background: transparent;
}

button, input {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

textarea {
    overflow: auto;
}

p, textarea {
    line-height: 1.4;
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

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


.table tbody tr:hover td, .table tbody tr:hover th {
    background-color: #dbdbff;
}

.table-active, .table-active>td, .table-active>th {
    background-color: #dbdbff;
}


[hidden], .hide {
    display: none;
}

[tabindex="-1"]:focus {
    outline: 0 !important;
}

ul, nav ul, nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

:not(p, textarea) {
    box-sizing: border-box;
    line-height: 1;
}

:disabled {
    pointer-events: none;
    opacity: 5;
}

::placeholder {
    color: var(--txt-placholder);
    line-height: 1.4;
}

:root {
    --default-color: #12005B;
    --default-a5per: rgba(18, 0, 91, 0.05);
    --default-a10per: rgba(18, 0, 91, 0.1);
    --font-size: 10px;
    --font-family: 'Pretendard';
    --font-lg: 15px;
    --font-md: 14px;
    --font-sm: 13px;
    --font-xs: 12px;
    --tit-color: #545454;
    --txt-color: #767676;
    --txt-point: #222;
    --txt-point2: #2500bb;
    --txt-placholder: #DADADA;
    --header-bg: #12005B;
    --nav-bg: #F9F9FB;
    --btn-bd: #d9d9d9;
    --btn-default: #222;
    --btn-outline: #54585A;
    --btn-point: #D01900;
    --btn-etc: #767676;
    --layout-bd: #EAEAEA;
    --component-bd: #DADADA;
    --component-xs: 2.5rem;
    --component-sm: 5rem;
    --component-md: 7rem;
    --component-lg: 15rem;
    --component-xlg: 25rem;
    --tb-bd: #DADADA;
    --tb-in-bd: rgba(0, 0, 0, .05);
    --tb-th-bg: #EAEAEA;
    --tb-th-bg-light: #FAFAFA;
    --tb-txt-color: #54585A;
}

/* IR */
.blind {
    overflow: hidden;
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
}

/* Text align */
.ta-l {
    text-align: left !important;
}

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

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

.pd-l_10 {
    padding-left: 10px !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Layout */
.container {
    display: grid;
    grid-template-columns: 260px auto;
    height: 100%;
    transition: grid 0.5s ease-in;
}

.container_body {
    display: grid;
    grid-template-columns: 260px auto;
    height: 100%;
    transition: grid 0.5s ease-in;
}

.content_wrap {
    padding: 0 2.8em 0 2.8em;
    position: relative;
}

.copyrighter {
    display: block;
    text-align: right;
    line-height: 16px;
    color: #ACB5CB;
    margin: 4.8em 0 0 0;
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: .4em 0 3.4em 0;
}

/* Form */
input:not([type="checkbox"], [type="radio"]), textarea {
    background: transparent;
    border: 1px solid var(--component-bd);
    border-radius: 2px;
    box-sizing: border-box;
    color: var(--txt-color);
    font-size: var(--font-md);
    /*height: 30px;*/
    padding: .25em .7em;
    width: 100%;
}

select {
    background: transparent;
    border: 1px solid var(--component-bd);
    border-radius: 2px;
    box-sizing: border-box;
    color: var(--txt-color);
    font-size: var(--font-md);
    height: 30px;
    padding: .25em .7em;
    width: 100%;
}

textarea {
    background: transparent;
    border: 1px solid var(--component-bd);
    border-radius: 2px;
    box-sizing: border-box;
    color: var(--txt-color);
    font-size: var(--font-md);
    padding: .25em .7em;
    width: 100%;
}

/* 수정2 */
.login_container {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
}

.login_container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 50%;
    background: url(../images/login_circle1.png) no-repeat 85% 0px, linear-gradient(#84A9F9, #6E92F6);
    z-index: -1;
}

.login_container::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50%;
    background: url(../images/login_circle2.png) no-repeat 15% bottom;
}

.login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -450px);
    z-index: 10;
}

.login_tit {
    display: block;
    width: 100%;
    padding: 14em 0 0 0;
}

.login_tit h1 {
    display: block;
    width: 100%;
    text-align: center;
    font-family: 'Solway', serif;
    font-weight: 700;
    color: #E2EBFF;
    font-size: 36px;
}

.login_tit h2 {
    color: #fff;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 2.8em;
    font-weight: 500;
}

.login_box {
    background: #fff;
    display: inline-block;
    width: 380px;
    border-radius: 4px;
    margin: 2em 0 0 0;
    padding: 6em 5em 7.6em 5em;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
    z-index: 2;
}

.login_box p > input {
    background: #EEF3FF;
    border: 0;
    padding: 1.6em 2em;
    color: #4576E8;
}

.login_box p > input::placeholder {
    color: #98AEE1;
}

.login_box p > input + input {
    margin: .6em 0 0 0;
}

.login_box > button {
    color: #5E7DC6;
    font-size: 18px;
    width: 100%;
    font-weight: 700;
    margin: 1.4em 0 0 0;
    padding: 1em 0;
    border-radius: 50px;
    box-shadow: 0px 4px 28px rgba(41, 118, 189, .15);
}

.login_box span > input[type="checkbox"] {
    display: none;
}

.login_box span > input[type="checkbox"] + label {
    display: inline-block;
    padding: .4em 0 0 2.4em;
    position: relative;
    height: 20px;
    line-height: 11px;
    font-size: 1.2em;
    color: #9FA1A7;
    letter-spacing: .2px;
    cursor: pointer;
}

.login_box span > input[type="checkbox"] + label::after {
    content: '';
    width: 18px;
    height: 18px;
    border: 1px solid #D0D0D0;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
}

.login_box span > input[type="checkbox"]:checked + label::after {
    content: '✔';
    font-size: 25px;
    width: 18px;
    height: 18px;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
}

/* Lnb */
.lnb_nav {
    padding: 0 2.8em;
    position: relative;
    box-sizing: border-box;
}

.lnb_nav h1 {
    display: inline-block;
    margin: 1.0em 0 2.0em;
    /*width: 148px;*/
    width: 100%;
    font-family: 'Solway', serif;
    font-weight: 700;
    color: #434343;
    font-size: 26px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lnb_nav a {
    color: var(--txt-color);
    display: block;
    word-break: break-all;
    position: relative;
}

.lnb_infor {
    position: relative;
}

.lnb_infor > ul li {
    color: #405693;
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 8px 0;
}

.lnb_infor > ul li:last-child {
    font-size: 12px;
}

.lnb_infor > a.icon_setting {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff url(../images/setting.png) no-repeat center 50%;
}

.lnb_infor > a.icon_setting2 {
    display: inline-block;
    position: absolute;
    right: 30px;
    top: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff url(../images/setting2.png) no-repeat center 50%;
}

.lnb_infor > button.btn_mypage {
    width: 100%;
    font-family: 'Puritan', sans-serif;
    letter-spacing: 1px;
    border-radius: 4px;
    font-size: 1.2em;
    border: 1px solid #A2AFD1;
    color: #A2AFD1;
    margin: .8em 0 1.8em;
    padding: .7em 0 .6em;
    background: transparent;
}

.lnb .myfolder {
    height: 78px;
    border-radius: 4px;
    background: url(../images/folder.png) no-repeat 155px 50%, linear-gradient(#84A9F9, #6E92F6);
    box-shadow: 0px 4px 10px rgba(128, 165, 248, 0.45);
    display: flex;
    align-items: center;
    padding: 0 2em;
}

.lnb .myfolder > ul {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    display: block;
}

.lnb .myfolder > ul li:last-child {
    width: 100%;
    color: #BFD2FF;
    letter-spacing: 1px;
    font-size: 10px;
    margin: .8em 0 0 0;
    font-family: 'Puritan', sans-serif;
}

.lnb .lnb_depth1 {
    border-radius: 4px;
    margin: 1.6em 0;
    padding: .6em 2em;
    background: linear-gradient(#4F4EAF, #47449D);
    box-shadow: 0px 4px 10px rgba(71, 68, 158, 0.45);
}

.lnb .lnb_depth1 > li > a {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 30px 0;
    border-bottom: 1px solid #6462C3;
    background: url(../images/lnb_arrow.png) no-repeat right 50%;
}

.lnb .lnb_depth1 > li:last-child > a {
    border-bottom: 0px
}

.lnb_admin > h1 {
    background: linear-gradient(#84A9F9, #6E92F6);
    font-family: 'Pretendard';
    font-weight: 600;
    margin: 0 0 1.6em 0;
    font-size: 13px;
    color: #fff;
    width: 100%;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(128, 165, 248, 0.45);
    padding: 1em 0;
    border-radius: 4px;
}

.lnb_admin > ul {
    padding: 0 .6em
}

.lnb_admin > ul > li {
    margin: 0 0 1.4em 0;
    position: relative;
}

.lnb_admin > ul > li > span {
    color: #97AEEA;
    font-size: 13px;
    padding: 0 1em 0 0;
    background: #F4F7FF;
    z-index: 10;
}

.lnb_admin > ul > li > span::after {
    content: '';
    width: 100%;
    height: 1px;
    background: #D1DBF4;
    position: absolute;
    display: inline-block;
    top: 5px;
    left: 0px;
    z-index: -1;
}

.lnb_admin > ul > li > ul {
    padding: 1em 0
}

.lnb_admin > ul > li > ul > li > a {
    color: #7D859B;
    padding: .6em 0 .6em .6em;
    font-size: 13px;
}

.lnb_admin > ul > li > ul > li > a.active {
    color: #4F4EAF;
    font-weight: 700;
    display: inline-block;
    position: relative;
}

.lnb_admin > ul > li > ul > li > a.active::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #4F4EAF;
    position: absolute;
    display: inline-block;
    top: 5px;
    right: -10px;
    border-radius: 50%;
}

.lnb_bottom {
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
}

.lnb_bottom > button {
    background: transparent;
    border: 0;
    display: inline;
    position: relative;
    width: 100px;
}

.lnb_bottom > button > i {
    display: inline-block;
    height: 50px;
    width: 60px;
}

.lnb_bottom > button > span {
    color: #757575;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    margin: 0 5px 0 5px;
}

.lnb_bottom > button.btn_recording > i {
    background: url(../images/lnb_recording.png) no-repeat center 50%;
}

.lnb_bottom > button.btn_wasting > i {
    background: url(../images/lnb_wasting.png) no-repeat center 50%;
}


.lnb_expansion {
    border: 0px;
    width: 32px;
    height: 32px;
    padding: 0;
    position: absolute;
    right: 0px;
    top: 24px;
}

.lnb_expansion2 {
    border: 0px;
    width: 32px;
    height: 32px;
    padding: 0;
    position: absolute;
    left: -18px;
    top: 24px;
}

.lnb_expansion::before {
    content: '';
    position: absolute;
    background: linear-gradient(#9AB9FF, #6765E7);
    box-shadow: 2px 2px 4px rgba(48, 41, 121, 0.15);
    width: 32px;
    height: 32px;
    display: inline-block;
    border-radius: 50%;
    left: 0px;
    top: 0px;
    z-index: 1;
}

.lnb_expansion::after {
    content: '';
    position: absolute;
    background: linear-gradient(#D8E0F5, #D8E0F5);
    background: linear-gradient(to bottom, #D8E0F5, #F4F7FF);
    width: 1px;
    height: 170px;
    left: 16px;
    top: -20px;
    z-index: 0;
}

.lnb_expansion2::before {
    content: '';
    position: absolute;
    background: linear-gradient(#9AB9FF, #6765E7);
    box-shadow: 2px 2px 4px rgba(48, 41, 121, 0.15);
    width: 32px;
    height: 32px;
    display: inline-block;
    border-radius: 50%;
    left: 0px;
    top: 0px;
    z-index: 1;
}

.lnb_expansion2::after {
    content: '';
    position: absolute;
    background: linear-gradient(#D8E0F5, #D8E0F5);
    background: linear-gradient(to bottom, #D8E0F5, #F4F7FF);
    width: 1px;
    height: 170px;
    left: 16px;
    top: -20px;
    z-index: 0;
}

.hide_lnb {
    grid-template-columns: 30px auto;
    transition: grid 0.5s ease-in;
}

.lnb_expansion .ic {
    background: url(../images/expansion_arrow.png) no-repeat center 50%;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 32px;
    height: 32px;
    z-index: 1000;
}

.lnb_expansion2 .ic {
    background: url(../images/expansion_arrow.png) no-repeat center 50%;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 32px;
    height: 32px;
    z-index: 1000;
}

.hide_lnb .lnb_nav > *:not(.lnb_expansion) {
    display: none;
}

.hide_lnb .lnb_nav > *:not(.lnb_expansion2) {
    display: none;
}

.lnb_nav > *:not(.lnb_expansion) {
    animation-name: showhide;
    animation-duration: .8s;
}

.lnb_nav > *:not(.lnb_expansion2) {
    animation-name: showhide;
    animation-duration: .8s;
}

.hide_lnb .lnb_expansion .ic {
    transform: rotate(180deg);
}

.hide_lnb .lnb_expansion2 .ic {
    transform: rotate(180deg);
}

@keyframes showhide {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.content {
    height: 100%;
}

.content_header {
    padding: 2.4em 0;
    position: relative;
    height: 68px;
}

.content_header div {
    vertical-align: top;
    display: flex;
    position: absolute;
    right: 0px
}

.content_header div > a.alarm {
    background: #fff url(../images/header_alarm.png) no-repeat 10px 50%;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 50px;
    height: 32px;
    border-radius: 20px;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
    position: relative;
    z-index: 10;
}

.content_header div > a.alarm > span {
    position: absolute;
    background: #3A61C7;
    color: #fff;
    padding: 3px 7px;
    border-radius: 20px;
    left: 20px;
    top: 8px
}

.content_header div > button.logout {
    background: #fff;
    margin-left: 6px;
    color: #8CA0D4;
    font-weight: bold;
    font-size: 1.1em;
    padding: 0 14px;
    height: 32px;
    border-radius: 20px;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
}

.content_header div > button.hamburger {
    display: inline-block;
    position: relative;
    margin: 0 0 0 .8em
}

.main > ul > li {
    margin: 0 0 28px 0
}

.main > ul > li > h1 {
    color: #A2B0D6;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 0;
    margin: 0;
    display: flex;
    position: relative;
}

.main > ul > li > h1 > a {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    background: #E3ECFF url(../images/plus.png) no-repeat center 50%
}

.main > ul > li > .m_box {
    padding: 4.4em;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
}

.m_form_data_wrap {
    display: flex;
}

.m_form_data {
    display: flex;
    width: 40%;
    justify-content: space-around;
    padding: 0 1.6em;
}

.m_form_data li {
    /*padding: 0 0 0 4.4em;*/
    padding: 0 0 0 5.5em;
}

.m_form_data li.data_contract {
    background: url(../images/data_contract.png) no-repeat 15% 50%;
    min-height: 25px;/*병욱*/

}

.m_form_data li.data_link {
    background: url(../images/data_link.png) no-repeat 15% 50%
}

.m_form_data li.data_favorite {
    background: url(../images/data_favorite.png) no-repeat 15% 50%
}

.m_form_data li.data_wasting {
    background: url(../images/data_wasting.png) no-repeat 15% 50%
}

.m_form_data li > span:first-child {
    font-size: 2.4em;
    font-weight: 700;
    color: #505050;
    cursor: pointer;
}

.m_form_data li > span:last-child {
    display: block;
    font-size: 1.4em;
    font-weight: 500;
    color: #999999;
    padding: 8px 0 0 0;
}

.m_progress_data {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.m_progress_data > li {
    flex-grow: 1;
    padding: 0 8em 0 0;
    position: relative;
}

.m_progress_data > li > h2 {
    font-size: 1.8em;
    color: #4F4F4F;
    margin: 0
}

.m_progress_data > li > h2 > a:hover {
    text-decoration: underline;
}

.m_progress_data > li > p {
    position: relative;
}

.m_progress_data > li > p > span {
    display: flex;
}

.m_progress_data > li > p > span {
    font-size: 13px;
    color: #444;
    margin: 12px 0px 0 0;
}

.m_progress_data > li > p > span > strong {
    color: #A8A8A8;
    margin: 0px 6px 0 0;
    font-weight: 400;
}

.m_progress_data > li > p > i {
    display: inline-block;
    position: absolute;
    right: 10px; /* 0px->230px->10px 수정 */
    top: 0px;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
    padding: .8em .8em;
    font-weight: 600;
    border-radius: 20px;
    color: #5B73B4;
    font-size: 13px;
}

.progress_bar {
    margin: 2.2em 0 1.4em 0;
    position: relative;
    height: 30px;
}

.progress_bar .onbar {
    height: 3px;
    background: #3E6DDA;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.progress_bar ul {
    display: inline-flex;
    position: absolute;
    top: 0px;
    width: 200px;
}

.progress_bar ul li {
    position: relative;
    background: #EAEAEA;
    width: 40px;
    height: 3px;
    flex-grow: 1;
}

.progress_bar ul li::after {
    position: absolute;
    right: -10px;
    top: 14px;
    width: 20px;
    display: inline-block;
    font-size: 11px;
    color: #EAEAEA;
    font-weight: 500;
}

.progress_bar ul li:nth-child(1)::after {
    content: '시작';
}

.progress_bar ul li:nth-child(2)::after {
    content: '발송';
}

.progress_bar ul li:nth-child(3)::after {
    /*참여자1*/
    content: '수신';
}

.progress_bar ul li:nth-child(4)::after {
    /*참여자2*/
    content: '작성';
}

.progress_bar ul li:nth-child(5)::after {
    content: '완료';
}

.progress_bar ul li.on::after {
    position: absolute;
    right: -10px;
    top: 14px;
    width: 20px;
    display: inline-block;
    font-size: 11px;
    color: #3E6DDA;
    font-weight: 500;
}

.progress_bar ul li:nth-child(1).on::after {
    content: '시작';
}

.progress_bar ul li:nth-child(2).on::after {
    content: '발송';
}

.progress_bar ul li:nth-child(3).on::after {
    content: '수신';
}

.progress_bar ul li:nth-child(4).on::after {
    content: '작성';
}

.progress_bar ul li:nth-child(5).on::after {
    content: '완료';
}

.progress_bar ul li.point::before {
    content: '';
    position: absolute;
    right: -5px;
    top: -3px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 3px solid #3E6DDA;
    background: #fff;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 5;
}

.m_using > .m_box {
    display: flex;
    padding: 3.2em 4.4em 2.8em !important;
}

.m_usingdata_wrap {
    display: flex;
    width: 100%;
}

.m_usingdata_total {
    display: flex;
    align-items: center;
    flex-grow: 0.2;
}

.m_usingdata_total > li:first-child {
    font-size: 24px;
    font-weight: 800;
}

.m_usingdata_total > li:first-child span {
    color: #4576E8
}

.m_usingdata_total > li:first-child span.slash {
    color: #ABBCE9;
    padding: 0 .4em;
}

.m_usingdata_total > li:first-child span.tatal {
    color: #ABBCE9
}

.m_usingdata_total > li:last-child {
    font-size: 1.2em;
    color: #9E9E9E;
    margin: 0 0 0 1.8em;
    letter-spacing: .2px;
}

.m_usingdata_total > li:last-child span > em {
    padding: 0 .4em;
    display: inline-block;
}

.m_usingdata_detail {
    display: flex;
    align-items: center;
    padding: 0 0 0 6em;
    flex-grow: 1;
}

.m_usingdata_detail li {
    flex-grow: 1;
}

.m_usingdata_detail li span {
    display: block;
    font-size: 12px;
    color: #A3A3A3;
    letter-spacing: .2px;
}

.m_usingdata_detail li span:first-child {
    font-size: 18px;
    color: #444;
    margin: 0 0 6px 0;
    font-weight: 800;
}

.m_bottom_menu > .m_box {
    padding: 0em 4.4em 0em !important;
}

.m_bottom_menu ul {
    display: flex;
}

.m_bottom_menu ul li {
    display: flex;
    position: relative;
    align-items: center;
    flex-grow: 1;
    text-align: center;
    justify-content: center;
}

.m_bottom_menu ul li:first-child::after {
    content: '';
    width: 1px;
    height: 20px;
    background: #D3DFFF;
    position: absolute;
    right: 0px;
}

.m_bottom_menu ul li a {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    padding: 2.2em 0 2em;
}

.m_bottom_menu ul li a > span {
    display: flex;
    text-align: center;
    justify-content: center;
}

.m_bottom_menu ul li a > span:first-child {
    font-size: 16px;
    color: #494949;
    font-weight: 600;
}

.m_bottom_menu ul li a > span:last-child {
    font-size: 12px;
    color: #C5C5C5;
    font-weight: 600;
    padding: 0 0 0 1.4em;
    letter-spacing: .6px;
    line-height: 16px;
}

/* Sub */
.sub .m_box {
    padding: 1.8em 4.4em !important;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
}

.sub > div {
    display: flex;
}

.sub > div > h1 {
    flex: 0 1 auto;
    color: #5271C1;
    font-weight: 700;
}

.sub > div > .btn_area {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.sub > div > .btn_area > button {
    height: 3.4em;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 0 .8em;
    line-height: 15px;
    background: #F4F7FF;
    color: #91A5D2;
    margin: .4em .8em .4em 0em;
    border: 1px solid #CFD9EE;
    font-size: 1.2em;
    word-wrap: break-word;
    min-width: 6em;
}

.sub > div > .btn_area > button:last-child {
    margin: .4em 0em .4em 0em
}

.sub > div > .btn_area > button.btn_line {
    border: 1px solid #758BC7;
    background: #fff;
    color: #5271C1;
    font-size: 1.2em;
    font-weight: 700;
}

.sub > div > .btn_area > button.btn_fill {
    background: #566795;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
}

.sub > div > .btn_reflesh {
    padding: 0 0 0 3.2em;
    margin: 0 0 0 .2em;
    font-size: 13px;
    height: 30px;
    font-weight: 700;
    color: #999;
    background: url(../images/btn_reflesh.png) no-repeat 20px 4px;
    min-width: 7.2em;
}

.navigation {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 1.3em;
}

.navigation span {
    color: #A8B6D8;
    padding: 0 .4em;
    letter-spacing: .4px;
    flex: 0 0 auto;
}

.sub_content {
    height: 100%;
    display: flex;
    margin: 2.8em 0 0 0;
    justify-content: space-between;
}

.sub_content .sub_left {
    display: flex;
    flex: 0 0 260px;
    flex-direction: column;
    padding: 2.8em 2.4em;
    background: #fff;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
    min-height: 550px;
    margin: 0 0 4em 0;
}

.sub_content .sub_gap {
    flex: 0 0 2.8em;
}

.sub_content .sub_right {
    flex: 1 1 70%;
    background: #fff;
    padding: 2.8em 2.8em 6.8em 2.8em;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
    min-height: 550px;
    margin: 0 0 4em 0;
}

.sub_content .sub_main_content {
    flex: 1 1 75%;
    background: #fff;
    padding: 2.8em 2.8em 6.8em 2.8em;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
    min-height: 550px;
    margin: 0 0 4em 0;
}

.sub_content .sub_only {
    padding: 1.8em 4.4em 7em;
}

.sub_left .tree_storage {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub_left .tree_storage .storage_data > span {
    display: inline-block;
    width: 100%;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 .6em 0;
    color: #767676;
    letter-spacing: .2px;
}

.sub_left .tree_storage .storage_data > span > strong {
    color: #7A94D3;
    padding: 0 8px 0 0;
}

.sub_left .tree_storage .storage_graph {
    position: relative;
}

.sub_left .tree_storage .storage_graph > span {
    display: inline-block;
    border-radius: 50%;
    width: 47px;
    height: 47px;
    border: 5px solid #DFE9FF;
}

.sub_left .tree_storage .storage_graph > i {
    position: absolute;
    left: 15px;
    top: 18px;
    z-index: 10;
    font-weight: 600;
    font-size: 12px;
    color: #547EE2;
}

.sub_left .tree_btn {
    margin: .2em 0 0 0;
    height: 3.2em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.sub_left .tree_btn > button {
    border: 1px solid #566795;
    margin: 0 0 0 .4em;
    position: relative;
    background: #566795;
    color: #fff;
    font-size: 1.2em;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

.sub_left .tree_btn > button.tree_plus {
    background: url(../images/tree_plus.png) no-repeat 4px 4px
}

.sub_left .tree_btn > button.tree_minus {
    background: url(../images/tree_minus.png) no-repeat 4px 7px
}

.sub_left .tree {
    background: #f0f5ff;
    height: 100%;
    max-width: 100%;
    /*max-width: 415px;*/
    overflow-x: auto;
    list-style: none;
    font-size: 1.3em;
}

/*ssh 추가*/
.sub_right .tree_storage {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub_right .tree_storage .storage_data > span {
    display: inline-block;
    width: 100%;
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0 .6em 0;
    color: #767676;
    letter-spacing: .2px;
}

.sub_right .tree_storage .storage_data > span > strong {
    color: #7A94D3;
    padding: 0 8px 0 0;
}

.sub_right .tree_storage .storage_graph {
    position: relative;
}

.sub_right .tree_storage .storage_graph > span {
    display: inline-block;
    border-radius: 50%;
    width: 47px;
    height: 47px;
    border: 5px solid #DFE9FF;
}

.sub_right .tree_storage .storage_graph > i {
    position: absolute;
    left: 15px;
    top: 18px;
    z-index: 10;
    font-weight: 600;
    font-size: 12px;
    color: #547EE2;
}

.sub_right .tree_btn {
    margin: .2em 0 0 0;
    height: 3.2em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.sub_right .tree_btn > button {
    border: 1px solid #566795;
    margin: 0 0 0 .4em;
    position: relative;
    background: #566795;
    color: #fff;
    font-size: 1.2em;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

.sub_right .tree_btn > button.tree_plus {
    background: url(../images/tree_plus.png) no-repeat 4px 4px
}

.sub_right .tree_btn > button.tree_minus {
    background: url(../images/tree_minus.png) no-repeat 4px 7px
}

.sub_right .tree {
    background: #f0f5ff;
    height: 100%;
    max-width: 500px;
    overflow-x: auto;
    list-style: none;
    font-size: 1.3em;
}

/*
.sub_tit_area{ display: flex; align-items: center; justify-content: space-between;}
.sub_tit_area > h1{ color:#515B75; font-weight: 700;}
*/
.sub_tit_area {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #D7E1F9;
    margin-bottom: 15px;
}

.sub_tit_area > h1 {
    color: #7A91CD;
    font-weight: 700;
    font-size: 18px;
}

.sub_tit_area .grid_top .total_num {
    color: #9E9E9E;
    letter-spacing: .2px;
    font-size: 11px;
    width: 100%;
    text-align: right;
}

.sub_tit_area .grid_top .total_num > span {
    font-weight: 700;
    margin: 0 0 0 .2em
}

.sub_tit_area .tit_btn_area {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.sub_tit_area .tit_btn_area .select_set {
    display: flex;
}

.sub_tit_area .tit_btn_area .select_set label {
    display: inline-block;
    position: relative;
    margin: .4em .4em 0 0;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    color: #a0a0a0;
    padding: 0 0 0 1.2em
}

.sub_tit_area .tit_btn_area .select_set label::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 16px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c6cee2;
}

.sub_tit_area .tit_btn_area .select_set select {
    width: 100px;
    height: 36px;
    margin: .4em .6em .4em 0em;
}

.sub_tit_area .tit_btn_area .select_set .btn_line {
    border: 1px solid #758BC7;
    background: #fff;
    color: #5271C1;
    font-size: 1.2em;
    margin: 0.5em 0.5em 0.5em 0em
}

/* 0109 추가 */
.sub_tit_area .tit_btn_area .select_set .btn_fill {
    border: 1px solid #566795;
    background: #566795;
    color: #fff;
    font-size: 1.2em;
    margin: 0.5em 0.5em 0.5em 0em
}

/* 0109 추가 */
.sub_tit_area .tit_btn_area .select_set > button {
    height: 3.0em;
    box-sizing: border-box;
    padding: 0 .8em;
    line-height: 15px;
    background: #F4F7FF;
    color: #91A5D2;
    flex: 0 0 auto; /* 0109 추가 */
    margin: 0.5em 0.5em 0.5em 0em;
    border: 1px solid #CFD9EE;
    font-size: 1.2em;
    word-wrap: break-word;
    min-width: 6em;
}

.sub_tit_area .tit_btn_area > button {
    height: 3.0em;
    box-sizing: border-box;
    padding: 0 .8em;
    line-height: 15px;
    background: #F4F7FF;
    color: #91A5D2;
    flex: 0 0 auto;
    margin: .4em .8em .4em 0em;
    border: 1px solid #CFD9EE;
    font-size: 1.2em;
    word-wrap: break-word;
    min-width: 6em;
}

.sub_tit_area .tit_btn_area > button:last-child {
    margin: .4em 0em .4em 0em
}

.sub_tit_area .tit_btn_area > button.btn_line {
    border: 1px solid #758BC7;
    background: #fff;
    color: #5271C1;
    font-size: 1.2em;
}

.sub_tit_area .tit_btn_area > button.btn_fill {
    border: 1px solid #566795;
    background: #566795;
    color: #fff;
    font-size: 1.2em;
}

.sub_grid_tit_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub_grid_tit_area > h1 {
    color: #717171;
    font-weight: 600;
    font-size: 16px;
}

.sub_grid_tit_area .grid_top {
    margin: 1.8em 0 0 0;
}

.sub_grid_tit_area .grid_top p {
    margin: 0;
}

.sub_grid_tit_area .grid_top .total_num {
    color: #9E9E9E;
    letter-spacing: .2px;
    font-size: 11px;
    width: 100%;
    text-align: right;
    margin: 0em 0 .4em 0;
}

.sub_grid_tit_area .grid_top .total_num > span {
    font-weight: 700;
    margin: 0 0 0 .2em
}

.search_area {
    display: flex;
}

.search_area .search {
    position: relative;
}

.search_area select {
    width: 100px;
    margin: 0 .6em 0 0;
    color: #9E9E9E;
    font-size: 11px;
}

.search_area button {
    position: absolute;
    right: 0;
    width: 40px;
    height: 30px;
    background: url(../images/search.png) no-repeat center 50%
}

.search_area > span {
    margin: 0 0 0 .6em;
}

.search_area > span input[type="date"] {
    color: #9E9E9E;
    font-size: 11px;
}

.search_area > span select {
    width: 100px;
    color: #9E9E9E;
    font-size: 11px;
}

/* 수정2 */
.search_area > span.search button {
    position: absolute;
    right: 0;
    width: 40px;
    height: 30px;
    background: url(../images/search.png) no-repeat center 50%
}

.search_area > span.search {
    position: relative;
    height: 30px;
}

.search_area > span.date {
    display: flex;
    align-items: center;
}

.search_area > span.date > span {
    padding: 0 .6em;
}

/* 수정2 */
.w_s {
    width: 8em !important;
}

.w_m {
    width: 12em !important;
}

.w_l {
    width: 16em !important;
}

.write_area input {
    border: 1px solid #C2C2C2;
    height: 34px;
    background: #fff;
}

/* 수정1 */

.write_area textarea {
    border: 1px solid #C2C2C2;
}

.write_area label + input {
    margin: .6em 0 0 0;
    padding: 0 0 0 .6em
}

/* 수정1 */

.write_area label + textarea {
    margin: .6em 0 0 0;
}

.write_area > div {
    display: flex;
    flex-wrap: wrap;
}

.write_area > div .input_set {
    margin: 3em 2% 0 0;
    flex: 1 0 100%;
}

.write_area > div .input_set .input_discription {
    display: flex;
}

.write_area > div .input_set .input_discription input {
    margin: .6em 0 0 0;
}

.write_area > div .input_set .input_discription span {
    flex: 1 0 auto;
    padding: 0 0 0 1.4em;
    color: #999;
    font-size: 12px;
    margin: 1.6em 0 0 0;
}

.write_area > div .input_set .input_discription span i {
    color: #225bf8
}

.write_area > div .input_set:last-child {
    margin: 3em 0 0 0;
}

.write_area > div .input_set .select_set {
    margin: .6em 0 0 0;
}

.write_area .divi_4 .input_set {
    flex: 1 0 20%
}

.write_area .divi_3 .input_set {
    flex: 1 0 30%
}

.write_area .divi_2 .input_set {
    flex: 1 0 40%
}

.write_area .sender {
    padding: 2em;
    background: #FFF6F4;
    border-radius: 4px;
}

/* 수정1 */
.write_area .participant {
    padding: 2em;
    background: #F2F6FF;
    border-radius: 4px;
}

/* 수정1 */

.radio {
    display: flex;
}

.radio input[type=radio] {
    display: none;
}

.radio input[type=radio] + label {
    display: inline-block;
    margin: .6em 0 0 -1px;
    background: #fff;
    color: #515B75;
    cursor: pointer;
    height: 36px;
    width: 50%;
    border: 1px solid #C2C2C2;
    line-height: 36px;
    text-align: center;
    font-weight: 400;
    font-size: 13px;
}

.radio input[type=radio]:checked + label {
    background-color: #515B75;
    color: #fff;
}

.checkbox_area {
    display: flex;
}

.checkbox_set {
    display: flex;
    background: #F8F8F8;
    padding: .8em .6em;
    margin: 0 .8em 0 0;
}

.checkbox_set > span {
    font-size: 12px;
    line-height: 34px;
    padding: 0 1em 0 1.2em;
}

.checkbox {
    display: flex;
    margin: .6em 0 0 0;
}

.checkbox input[type=checkbox] {
    display: none;
}

.checkbox input[type=checkbox] + label {
    position: relative;
    padding: 0 1em 0 2.2em;
    height: 22px;
    line-height: 22px;
    color: #9E9E9E;
    cursor: pointer;
}

.checkbox input[type=checkbox] + label::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 1px solid #C2C2C2;
    left: 0px;
    top: 0px;
    position: absolute;
}

.checkbox input[type=checkbox]:checked + label {
    color: #333;
}

.checkbox input[type=checkbox]:checked + label::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid #5271C1;
    left: 0px;
    top: 0px;
    position: absolute;
}

.grid_area {
    /*margin: 1em 0 0 0;*/
    margin: 1.5em 0 1.5em 0;
    /*background: #f0f5ff;*/

}

.table {
    width: 100%;
    table-layout: auto;
    font-size: 1.0em;
    border-bottom: 1px solid #D4D6D9;
}

.table > thead {
    height: 40px;
    background: #4d54b9;
}

.table > thead th {
    color: #fff;
    font-weight: 600;
    padding: .75em;
}

.table > tbody tr td {
    color: #6D6D6D;
    font-size: 1.2em;
    text-align: center;
    font-weight: 500;
    padding: .85em 0;
    border-top: 1px solid #D4D6D9;
}

.table > tbody tr td .grid_icon_area {
    font-size: 0;
}


/*
.table > tbody tr td .grid_icon_area > button {
    margin: .0em .6em 0em 0;
    border-radius: 12px;
    background: #f1f6ff;
    font-size: 12px;
    line-height: 11px;
    color: #96ACE0;
    border: 1px solid #96ACE0;
    padding: .6em .8em .5em
}

.table > tbody tr td .grid_icon_area > button.highligter {
border: 1px solid #c492d1;
background: #fdf5ff;
color: #dc96ee
}
*/

.table > tbody tr td .grid_icon_area > button {
    margin: .0em .6em 0em 0;
    background: #f1f6ff;
    font-size: 12px;
    line-height: 11px;
    padding: 7px 5px; /* 버튼 패딩을 조정 */
    background-color: #4f8ad8; /* 파란색 배경 */
    color: white;
    border: none;
    min-width: 60px; /* 버튼 최소 너비 설정 */
    white-space: nowrap; /* 버튼 내의 텍스트가 줄바꿈 되지 않도록 설정 */
    overflow: hidden; /* 내용이 넘칠 경우 숨김 처리 */
    text-overflow: ellipsis; /* 내용이 넘칠 경우 말줄임표 표시 */
    border-radius: 7px; /* 버튼 모서리 둥글게 */
}

.table > tbody tr td .grid_icon_area > button.highligter {
    /*border: 1px solid #c492d1;*/
    /*background: #fdf5ff;*/
    /*color: #dc96ee*/
}

.table > tbody tr td .grid_icon_area > button.yellowcolor {
    background-color: #ffa201; /* 노란색 배경 */
}

.table > tbody tr td input[type="checkbox"] {
    width: 14px;
    height: 14px;
    border: 1px solid #D3D3D3;
}

/* 수정2 */
.grid_card > ul {
    display: flex;
    flex-wrap: wrap;
}

.grid_card > ul > li {
    flex: 1 0 100%;
    /*padding: 1em;*/
}

.grid_card > ul > li .card_wrap {
    border: 1px solid #D3D3D3;
    padding: 2em 1.6em 2em 1.6em;
    background: #b1d8ff30;/* 병욱 추가 */
}

.grid_card > ul > li .sumnail {
    margin: 0 auto;
    background: #f5f5f5;
    height: 200px;
    border: 1px solid #b1d8ff;
}

.grid_card > ul > li .card_wrap .grid_icon_area {
    font-size: 0;
    margin: 1em 0 0 0;
}

.grid_card > ul > li .card_wrap .grid_icon_area > button {
    /*margin: .8em .6em 0em 0;*/
    /*border-bottom: 1px solid #96ACE0;*/
    /*font-size: 12px;*/
    /*line-height: 11px;*/
    /*color: #96ACE0;*/
    /*padding: .6em .2em .2em*/

    margin: 0.8em 0.6em 0em 0;
    border-radius: 12px;
    background: #f1f6ff;
    font-size: 12px;
    line-height: 11px;
    color: #96ACE0;
    border: 1px solid #96ACE0;
    padding: 0.6em 0.8em 0.5em;

}

.grid_card > ul > li .card_wrap .grid_icon_area > button.highligter {
    /*color: #dc96ee;*/
    /*border-bottom: 1px solid #dc96ee;*/

    border: 1px solid #c492d1;
    background: #fdf5ff;
    color: #dc96ee;


}

/* 수정2 */

.paging_area {
    display: flex;
    justify-content: center;
    padding: 4em 0
}

.paging {
    display: flex;
}

.paging > a {
    width: 30px;
    height: 30px;
    background: pink;
    border: 1px solid #D4D6D9;
    border-radius: 50%;
}

.paging > a:hover {
    width: 30px;
    height: 30px;
    background: pink;
    border: 1px solid #737981;
    border-radius: 50%;
}

.paging > a.prev {
    background: url(../images/paging_prev.png) no-repeat center 50%;
    margin: 0 1em 0 0;
}

.paging > a.prev:hover {
    background: url(../images/paging_prev_on.png) no-repeat center 50%;
}

.paging > a.next {
    background: url(../images/paging_next.png) no-repeat center 50%;
    margin: 0 0 0 1em;
}

.paging > a.next:hover {
    background: url(../images/paging_next_on.png) no-repeat center 50%;
}

.paging_num {
    display: flex;
}

.paging_num > a {
    line-height: 30px;
    text-align: center;
    width: 36px;
    height: 30px;
    font-size: 12px;
    color: #A5A5A5;
    position: relative;
}

.paging_num > a:hover {
    color: #A5A5A5;
    font-weight: 700;
}

.paging_num > a.on {
    font-weight: 700;
    color: #6D6D6D;
}

.paging_num > a.on::after {
    content: '';
    width: 14px;
    height: 2px;
    left: 12px;
    bottom: 5px;
    background: #6D6D6D;
    position: absolute;
}

.sub_level {
    padding: 0 !important;
    border: 2px solid #BECCF1;
}

.level_nav a {
    color: var(--txt-color);
    display: block;
    word-break: break-all;
    position: relative;
}

.level_nav a:hover {
    color: var(--txt-point);
}

.level_item > a.active {
    color: var(--default-color);
    font-weight: 500;
}

.level_item.has-sub > a:after {
    display: block;
    position: absolute;
    content: '';
    width: .9em;
    height: 1px;
    background: #879DD8;
    right: 22px;
    top: 27px;
}

.level_item.has-sub > a::before {
    display: block;
    position: absolute;
    content: '';
    width: .1em;
    height: .9em;
    background: #879DD8;
    right: 28px;
    top: 21px;
}

.level_item.has-sub > a.on::before {
    display: none;
}

.depth2_list > .level_item {
    border-bottom: 2px solid #BECCF1;
}

.depth3_list > .level_item.has-sub > a:after {
    font-weight: 500;
    right: 1em;
}

.depth2_list > .level_item > a {
    font-size: 14px;
    font-weight: 600;
    color: #5271C1;
    padding: 1.4em 1.8em;
}

.depth3_list, .depth4_list {
    display: none;
}

.depth3_list {
    padding: 0 2em 1em;
}

.depth3_list > .level_item > a {
    font-size: var(--font-sm);
    padding: .75em 2em .75em 1.2em;
}

.depth3_list > .level_item > a.active {
    background: #5271C1;
    color: #fff
}

/* 수정1 시작 */
.document_level > h1 {
    font-size: 16px;
    color: #515B75;
}

.document_level ul li > h3 {
    font-size: 13px;
    color: #C8C8C8;
    padding: 2.4em 0 .6em;
    margin: 0;
    background: url(../images/document_level.png) no-repeat left 8px;
    font-weight: 00;
}

.document_level ul li:last-child {
    padding: 2.8em 0 0 0;
    background: url(../images/document_level.png) no-repeat left 6px;
}

.document_level ul li .document_box {
    border: 1px solid #DEDEDE;
    padding: 1.6em 1.6em;
    display: flex;
    flex-wrap: wrap;
}

.document_level ul li .document_box span {
    flex: 1 1 100%;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
}

.document_level ul li .document_box span + span {
    margin: .6em 0
}

.document_level ul li .document_box i {
    font-size: 12px;
    color: #7B7B7B;
}

.document_level ul li.on > h3 {
    color: #4D4CAB
}

.document_level ul li.on .document_box {
    border: 0;
    background: #4D4CAB;
}

.document_level ul li.on .document_box span {
    color: #fff;
    font-weight: 400;
}

.document_level ul li.on .document_box i {
    color: #D3DCF3;
}

/* 수정1 끝 */

/* Layer Popup */
body.pop-open {
    overflow: hidden;
}

.pop_wrap {
    align-items: center;
    background: rgba(0, 0, 0, .75);
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    z-index: 1001;
}

.pop_box {
    background: #fff;
    border-radius: 3px;
    box-shadow: 10px 10px 1em rgba(0, 0, 0, .2);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.pop_box._sm {
    width: 60em;
}

.pop_box._md {
    width: 25em;
}

.pop_box._lg {
    width: 96em;
}

.pop_box._alert {
    top: 20%;
    min-width: 30em;
}

.pop_box._upload {
    bottom: 5%;
    top: auto;
    left: auto;
    right: 5%;
    transform: translate(0%, 0%);
    min-width: 30em;
    background-color: #D7E1F9; /* 0122 추가 */
}

/* 수정2 */
.pop_box.pop_box._respon9 {
    width: 90%;
    height: 90%;
}

/* 수정1:모달 와이드 버젼. 클래스 추가 필요 */
.pop_box.pop_box._respon9 ._respon9_contents {
    width: 50%;
    margin: 0 auto
}

/* 수정1:와이드버젼에서 컨텐츠만 작게한 css. html에 클래스 추가 필요. */


.pop_btns {
    margin-right: -.5em;
}

._alert .pop_header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1em 1em 0;
}

._alert .pop_body {
    padding: .5rem 1rem 1rem;
}

._alert .pop_tit {
    border-bottom: 4px solid var(--default-color);
    color: var(--default-color);
    font-size: var(--font-md);
    padding: 0 1px 3px;
    margin: 0;
}

.pop_header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    background: #F4F7FF;
}

.pop_body {
    padding: .5rem 1rem 1rem;
}

.pop_tit {
    font-size: 16px;
    padding: .6em .8em .4em 1.4em;
    font-weight: 600;
    color: #333;
    /*flex-grow: 1; fix0117*/
    /*text-align: center; fix0117*/
}

.pop_body p:first-child {
    font-size: var(--font-md);
}

.pop_btns {
    padding: 0 2em 0 0;
}

.pop_close {
    padding: 0;
}

.pop_close i {
    background: url(../images/pop_close.png) no-repeat 50% 50%;
    width: 40px;
    height: 40px;
    display: inline-block;
}

.pop_message {
    padding: 1.6em 2em 1em 0;
    font-size: 14px;
    width: 20em;
    line-height: 20px;
}

.pop_contents {
    padding: 0 2em 2.2em 2em !important;
}

.pop_body {
    padding: 0 2em 2.2em 2em !important;
}

.pop_body .input_set {
    margin: 1.8em 0 0 0 !important
}

.pop_body .input_set label {
    font-size: 12px;
}

.pop_body .pop_view {
    height: 500px;
    overflow: auto;
}

.pop_body .pop_write > h2 {
    font-size: 14px;
    color: #566795;
    margin: 2em 0 0 0;
}

.pop_body .pop_write > h3 {
    margin: 2em 0 .2em 0;
    display: flex;
    flex-wrap: wrap;
}

.pop_body .pop_write > h3 span {
    flex: 1 1 100%;
    line-height: 18px;
}

.pop_body .pop_write > h3 span:first-child {
    font-size: 14px;
    color: #434343;
    margin: 0 0 .2em 0;
}

.pop_body .pop_write > h3 span:last-child {
    color: #A5A5A5;
    font-size: 12px;
    font-weight: 500;
}

.pop_body .pop_write .input_set {
    margin: 1.8em 0 0 0 !important;
    position: relative;
}

.pop_body .pop_write .input_set label {
    font-size: 12px;
}

/* 수정1 시작*/
.pop_body .pop_write .input_set ul {
    margin: .6em 0 0 0;
}

.pop_body .pop_write .input_set ul li {
    position: relative;
    margin: 0 0 .6em 0;
}

.pop_body .pop_write .input_set ul li button.input_delete {
    background: #8C949E url(../images/input_delete.png) no-repeat 50% 50%;;
    right: 1.4em;
    bottom: .8em;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    position: absolute;
}

.pop_body .pop_write .input_btn {
    margin: 1em 0 0 0;
    text-align: right;
}

/* 수정1 끝*/

.pop_body .pop_write .input_set button.input_delete {
    background: #8C949E url(../images/input_delete.png) no-repeat 50% 50%;;
    right: 1em;
    bottom: .8em;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    position: absolute;
}

.pop_body .pop_write .input_btn {
    margin: 1em 0 0 0;
}

.pop_body .pop_write .input_btn button {
    border: 1px solid #5271C1;
    padding: 1em 1.2em;
    color: #5271C1;
    border-radius: 2px;
}

.pop_body .pop_write .inner {
    background: #F8F8F8;
    padding: 0 2em 2em;
    margin: 1.4em 0 0 0;
}

.pop_body .pop_write .inner .tit {
    font-size: 14px;
    font-weight: 700;
    padding: 1.4em 0 1em;
    border-bottom: 1px solid #B7B7B7;
}

.pop_body .pop_write .inner .tit span {
    color: #a7a7a7;
    padding: 0 0 0 .4em;
    font-weight: 400;
}

.pop_body .pop_write .inner input {
    background: #fff;
}

.pop_body .pop_write .required_message {
    color: #D37777;
    text-align: right;
    padding: 1.6em 0 0;
}

.pop_body .btn_pop {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    margin: 2em 0 0 0;
    justify-content: flex-end;
    align-items: center;
}

.pop_box._alert .btn_pop {
    margin: .4em 0 0 0;
}

.pop_body .btn_pop > button {
    height: 3em;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 0 1.2em;
    line-height: 15px;
    background: #F4F7FF;
    color: #91A5D2;
    margin: .4em .6em .4em 0em;
    border: 1px solid #CFD9EE;
    font-size: 1.2em;
    word-wrap: break-word;
}

.pop_body .btn_pop > button:last-child {
    margin: .4em 0em .4em 0em
}

.pop_body .btn_pop > button.btn_line {
    border: 1px solid #758BC7;
    background: #fff;
    color: #5271C1;
    font-size: 1.2em;
    font-weight: 700;
}

.pop_body .btn_pop > button.btn_fill {
    background: #566795;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
}

.pop_body p:first-child {
    font-size: var(--font-md);
    margin: 0;
}

/* .pop_message {height: 50px;} */

/*ssh 추가*/
.btn-outline-primary {
    border: 1px solid #758BC7;
    background: #fff;
    color: #5271C1;
    font-size: 1.2em;
}

.btn-outline-secondary {
    border: 1px solid #566795;
    background: #566795;
    color: #fff;
    font-size: 1.2em;
}

.ui-draggable-handle {
    align-items: center;
    display: flex;
    justify-content: space-between;
    background: #F4F7FF;
}

.ui-draggable-handle .modal-title {
    font-size: 16px;
    padding: .1rem .8em .1rem .3rem;
    font-weight: 600;
    color: #333
}

.ui-draggable-handle .bootbox-close-button {
    background-image: url(../images/pop_close.png) no-repeat 50% 50%;
    width: 40px;
    height: 40px;
    display: inline-block;
}

.modal-body .bootbox-body {
    padding: 1rem .5rem 1rem .5rem !important;
    font-size: 14px;
    width: 20em;
    line-height: 20px;
}

/* 끝 */
.pop_body .btn_pop2 {
    background: #F4F7FF;
    padding: 2em 0;
    display: flex;
    justify-content: center;
}

.pop_body .btn_pop2 > button {
    background: #fff;
    border-radius: 50px;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
    font-size: 12px;
    padding: 1em 1.8em;
    color: #8CA0D4;
}

.pop_body .btn_pop2 > button + button {
    margin: 0 0 0 .8em
}

.pop_body .step_area {
    display: flex;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
    margin: 2.4em 0 0;
    border-radius: 4px;
}

.pop_body .step_area ul {
    display: flex;
    padding: 1.4em 2em;
}

.pop_body .step_area ul li {
    padding: 0 6.4em 0 0;
    background: url(../images/step_arrow.png) no-repeat 85% 50%;
}

.pop_body .step_area ul li p {
    color: #B3BCD4;
    margin: 0;
    font-weight: 700;
    position: relative;
}

.pop_body .step_area ul li p:first-child {
    font-size: 1.2em;
}

.pop_body .step_area ul li p:last-child {
    font-size: 1.4em;
}

.pop_body .step_area ul li:last-child {
    background: none;
}

.pop_body .step_area ul li.active p:last-child::after {
    content: '';
    width: 100%;
    height: 3px;
    background: #5271C1;
    position: absolute;
    left: 0;
    top: 30px;
}

.pop_body .step_area ul li.active p {
    color: #5271C1
}

.pop_body .step_tool {
    display: flex;
    box-shadow: 0px 2px 12px #e0e6f5;
    margin: 1.8em 0 0;
    background: #5271C1;
    height: 60px;
    border-radius: 4px;
}

.pop_body .upload_set {
    flex: 1 1 100%;
}

.pop_body .upload_set ul {
    margin: 2em 0 0 0;
    display: flex;
    flex-wrap: wrap;
}

.pop_body .upload_set ul li {
    margin: 0em 0 .4em 0;
    padding: 0em 3em;
    background: #F8F8F8;
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.pop_body .upload_set ul li button.upload_down {
    text-decoration: underline;
    margin: 0 3em 0 0;
}

.pop_body .upload_set ul li .upload_tit {
    display: flex;
    padding: 2em 0em;
    align-items: center;
}

.pop_body .upload_set ul li .upload_tit span:first-child {
    color: #434343;
    font-size: 14px;
    font-weight: 600;
    padding: 0 .8em 0 0;
}

.pop_body .upload_set ul li .upload_tit span:last-child {
    color: #A5A5A5;
    font-size: 12px;
    font-weight: 500;
}

.pop_body .upload_set ul li .upload {
    flex: 1 1 100%;
    margin: 0 0 2em 0;
    background: #fff;
    border: 1px solid #C2C2C2;
    text-align: center;
    padding: 4em 0
}

.pop_body .upload_set ul li .upload span {
    color: #A5A5A5;
    font-size: 12px;
}

.data_grid {
    width: 100%;
    overflow-x: auto;
    margin: 1.4em 0 0 0;
}

.pop_table {
    table-layout: auto;
    font-size: 1.2em;
    border: 1px solid #D4D6D9;
}

.pop_table > thead {
    background: #F8F8F8;
}

.pop_table > thead th {
    padding: .4em;
    border: 1px solid #D4D6D9;
    color: #999;
}

.pop_table > thead th span {
    font-size: 14px;
    color: #666;
    padding: .2em 0;
    display: inline-block;
}

.pop_table > tbody tr.on {
    border: 2px solid #5271C1;
}

.pop_table > tbody tr td {
    padding: .6em;
    border: 1px solid #D4D6D9;
    color: #666;
    text-align: center;
}

.pop_table > tbody tr td input[type="input"] {
    width: 100%;
    height: 26px;
    border: 0px;
    border-bottom: 1px solid #a8b1c4;
}

.pop_table > tbody tr td.bg_ty1 {
    background: #e9f9ff;
}

.pop_table > tbody tr td.bg_ty2 {
    background: #f1fbfd;
}

.pop_table > tbody tr td button.grid_add {
    border: 1px solid #c9c9c9;
    color: #8a8a8a;
    padding: .6em;
    border-radius: .4em;
    font-size: 11px;
    background: #f8f8f8;
}

/* 수정2 */
._upload .pop_body {
    padding: 3em !important;
}

.upload_wrap {
    display: flex;
}

.upload_wrap .tit {
    width: 70%;
    font-size: 16px;
    color: #566795;
    display: flex;
    align-items: center;
}

.upload_wrap .tit span {
    font-size: 16px;
    font-weight: 700;
}

.upload_wrap .tit span + span {
    padding: 0 .1em 0 .2em;
}

.upload_wrap .btn_delete {
    flex: 1 0 30%;
    display: flex;
    justify-content: flex-end;
}

.btn_delete > button {
    height: 2.8em;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 0 1em;
    line-height: 15px;
    background: #F4F7FF;
    color: #91A5D2;
    margin: .4em .6em .4em 0em;
    border: 1px solid #CFD9EE;
    font-size: 1.1em;
    word-wrap: break-word;
}

.btn_delete > button:last-child {
    margin: .4em 0em .4em 0em
}

.btn_delete > button.btn_line {
    border: 1px solid #758BC7;
    background: #fff;
    color: #5271C1;
    font-size: 1.2em;
    font-weight: 500;
}

.btn_delete > button.btn_fill {
    background: #566795;
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
}

.upload ul {
    width: 100%;
    margin: 2em 0 0 0;
}

.upload ul li {
    margin: 0 0 1em 0;
    display: flex;
}

.upload ul li .bar_wrap {
    flex: 0 0 92%;
    position: relative;
}

.upload ul li .bar_wrap .bar_txt {
    display: flex;
    flex: 1 1 100%;
}

.upload ul li .bar_wrap .bar_txt h3 {
    color: #666;
    font-weight: 400;
    flex: 1 1 70%;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.upload ul li .bar_wrap .bar_txt h4 {
    color: #9E9E9E;
    font-size: 11px;
    font-weight: 400;
    flex: 1 1 30%;
    margin: 0;
    padding: 0;
    text-align: right;
}

.upload ul li .bar_wrap .bar_txt h4 span:first-child {
    font-weight: 600;
    color: #566795
}

.upload ul li .bar_wrap .bar_txt h4 span:last-child {
    padding: 0 .4em;
}

.upload ul li .bar_wrap .bar_area {
    display: flex;
    margin: .8em 0 0 0;
    background: red;
}

.upload ul li .bar_wrap .bar_area .bar {
    flex: 0 0 100%;
    height: 18px;
    background: #EBEBEB;
    position: relative;
}

.upload ul li .bar_wrap .bar_area .bar > span {
    position: absolute;
    left: 0;
    top: 0px;
    height: 100%;
    background: #566795;
}

.upload ul li .bar_wrap .bar_area .bar > i {
    position: absolute;
    left: 6px;
    top: 4px;
    height: 100%;
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
}

.checkbox_area {
    flex: 0 0 7%;
    display: flex;
}

.checkbox_area .checkbox {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;;
}

.checkbox_area .checkbox input[type=checkbox] + label::before {
    right: 0;
    left: auto
}

.checkbox_area .checkbox input[type=checkbox]:checked + label::before {
    right: 0;
    left: auto
}

.email_comfirm {
    width: 40%;
    margin: 20em auto;
}

.email_comfirm .m_box {
    padding: 1.8em 4.4em 8em !important;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
}

.email_comfirm .m_box h1 {
    font-size: 18px;
    color: #7A91CD;
    padding: 1em 0 1.4em 0;
    border-bottom: 1px solid #D7E1F9;
}

.email_comfirm .m_box h2 {
    font-size: 13px;
    line-height: 18px;
    color: #434343;
    font-weight: 500;
    margin: 2em 0 1em 0;
}

.email_comfirm .m_box input {
    height: 42px;
}

.email_comfirm .m_box button {
    margin: 2em 0 0 0;
    color: #fff;
    background: #566795;
    height: 52px;
    width: 100%;
    font-size: 16px;
}

.email_comfirm .copyrighter {
    text-align: center;
}

.password_comfirm {
    width: 40%;
    margin: 20em auto;
}

.password_comfirm .m_box {
    padding: 1.8em 4.4em 8em !important;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 2px 12px rgba(218, 225, 241, 1);
}

.password_comfirm .m_box h1 {
    font-size: 18px;
    color: #7A91CD;
    padding: 1em 0 1.4em 0;
    border-bottom: 1px solid #D7E1F9;
}

.password_comfirm .m_box h2 {
    font-size: 13px;
    line-height: 18px;
    color: #434343;
    font-weight: 500;
    margin: 2em 0 1em 0;
}

.password_comfirm .m_box input {
    height: 42px;
}

.password_comfirm .m_box button {
    margin: 2em 0 0 0;
    color: #fff;
    background: #566795;
    height: 52px;
    width: 100%;
    font-size: 16px;
}

.password_comfirm .copyrighter {
    text-align: center;
}

/* 수정2 */

@media (min-width: 360px) {

    /* 로그인 */
    .login_box {
        width: 300px;
        padding: 6em 3em 7.6em 3em;
    }

    /* 메인 */
    .container {
        display: block;
    }

    .container_body {
        display: block;
    }

    /* 0109 기존 라이브러리와 .container 는 겹쳐서 이름 변경 */
    .lnb_nav {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 100;
        width: 80%;
        background: #fff;
        height: 100%;
        padding: 0 8%;
        box-shadow: 0px 8px 18px rgba(44, 57, 83, 0.4);
    }

    .hide_lnb .lnb_nav {
        display: none !important;
    }

    .lnb .myfolder {
        height: 78px;
        border-radius: 4px;
        background: url(../images/folder.png) no-repeat 20px 50%, linear-gradient(#84A9F9, #6E92F6);
    }

    .lnb .myfolder > ul {
        padding: 0 0 0 46px
    }

    .lnb_expansion {
        display: none;
    }

    .lnb_expansion2 {
        display: none;
    }

    .hamburger {
        border: 0px;
        width: 32px;
        height: 32px;
        padding: 0;
    }

    .hamburger::before {
        content: '';
        position: absolute;
        background: linear-gradient(#9AB9FF, #6765E7);
        box-shadow: 2px 2px 4px rgba(48, 41, 121, 0.15);
        width: 32px;
        height: 32px;
        display: inline-block;
        border-radius: 50%;
        left: 0px;
        top: 0px;
        z-index: 1;
    }

    .hamburger .ic {
        background: url(../images/hamburger.png) no-repeat center 50%;
        display: inline-block;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 32px;
        height: 32px;
        z-index: 333333333333;
    }

    .add .ic {
        background: url(../images/expansion_arrow.png) no-repeat center 50%;
    }

    .lnb_infor > a.icon_setting {
        border: 1px solid #C9C9C9
    }

    .main > ul > li.m_form_document > .m_box {
        padding: 2.2em !important
    }

    .m_form_data_wrap {
        display: block;
    }

    .m_form_data {
        flex-wrap: wrap;
        text-align: center;
        width: 100%;
        padding: 1.4em 1.6em;
    }

    .m_form_data > li {
        flex: 1 1 40%;
        margin: 3% 2% 3% 0;
    }

    .main > ul > li.m_progress_document > .m_box {
        padding: 2.2em !important;
    }

    .m_progress_data {
        flex-wrap: wrap;
        padding: 0em 1.6em;
    }

    .m_progress_data > li {
        flex: 1 1 100%;
        padding: 2em 0;
    }

    .main > ul > li.m_using > .m_box {
        padding: 3.2em !important
    }

    .m_usingdata_wrap {
        flex-wrap: wrap;
    }

    .m_usingdata_total {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .m_usingdata_total > li:last-child {
        margin: .8em 0 1.8em 0;
        flex: 1 1 100%;
    }

    .m_usingdata_detail {
        flex: 1 1 100%;
        padding: 0;
    }

    .m_usingdata_total > li:first-child {
        font-size: 20px
    }

    .m_usingdata_detail li span:first-child {
        font-size: 14px
    }

    .main > ul > li.m_bottom_menu > .m_box {
        padding: 1.2em 3.2em !important
    }

    .m_bottom_menu ul {
        flex-wrap: wrap;
    }

    .m_bottom_menu ul li {
        flex: 1 1 100%;
    }

    .m_bottom_menu ul li a {
        justify-content: left;
    }

    .m_bottom_menu ul li:first-child {
        border-bottom: 1px solid #e6e6e6;
    }

    .m_bottom_menu ul li:first-child::after {
        display: none;
    }

    .copyrighter {
        text-align: left;
    }

    /* 서브 */
    .sub > div > h1 {
        width: 100%;
    }

    .sub > div > .btn_area {
        justify-content: left;
    }

    .sub .m_box {
        position: relative;
        flex-wrap: wrap;
    }

    .sub > div > .btn_reflesh {
        position: absolute;
        right: 1.2em;
        top: 2.2em;
        padding: 0 0 0 2.4em;
    }

    .sub_content {
        display: block !important;
    }

    .sub_tit_area {
        flex-wrap: wrap;
    }

    .sub_tit_area > h1 {
        width: 100%;
    }

    .sub_tit_area .tit_btn_area {
        justify-content: left;
    }

    .navigation {
        margin: 0 0 0 -.4em;
        justify-content: left;
        font-size: 1.3em;
    }

    /* 수정2 시작 */
    .sub_grid_tit_area {
        flex-wrap: wrap;
    }

    .sub_grid_tit_area > h1 {
        width: 100%;
        margin: 1.4em 0 0 0;
    }

    .sub_grid_tit_area .grid_top {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .sub_grid_tit_area .grid_top .search_area {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .sub_grid_tit_area .grid_top .search_area span {
        margin: .6em .6em 0 0;
    }

    .sub_grid_tit_area .grid_top .search_area .total {
        color: #9E9E9E;
        line-height: 32px;
        padding: 0 1em 0 0;
        letter-spacing: .2px;
        font-size: 11px;
        text-align: right;
        margin: .4em 0 .4em 0;
    }

    .sub_grid_tit_area .grid_top .search_area .total > i {
        font-weight: 700;
        margin: 0 0 0 .2em
    }

    .sub_grid_tit_area .grid_top .align_btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 0 0 2.5em;
        position: relative;
        margin: .6em 0 0 0;
    }

    .sub_grid_tit_area .grid_top .align_btn::after {
        content: '';
        width: 1px;
        height: 12px;
        left: .9em;
        top: 50%;
        transform: translateY(-50%);
        background: #D9D9D9;
        position: absolute;
    }

    .sub_grid_tit_area .grid_top .align_btn > button {
        border: 1px solid #666666;
        width: 28px;
        height: 28px;
    }

    .sub_grid_tit_area .grid_top .align_btn > button + button {
        margin: 0 0 0 6px;
    }

    .sub_grid_tit_area .grid_top .align_btn > button.list {
        background: url(../images/btn_list.png) no-repeat center 50%;
    }

    .sub_grid_tit_area .grid_top .align_btn > button.card_ {
        background: url(../images/btn_card.png) no-repeat center 50%;
    }

    .sub_grid_tit_area .grid_top .align_btn > button.list_on {
        border: 1px solid #5271C1;
        background: #F4F7FF url(../images/btn_list_on.png) no-repeat center 50%;
    }

    .sub_grid_tit_area .grid_top .align_btn > button.card_on {
        border: 1px solid #5271C1;
        background: #F4F7FF url(../images/btn_card_on.png) no-repeat center 50%;
    }

    /**/
    .align_btn{
        text-align: right !important;
    }

    .align_btn::after {
        content: '';
        width: 1px;
        height: 12px;
        left: .9em;
        top: 50%;
        transform: translateY(-50%);
        background: #D9D9D9;
        position: absolute;
    }

    .align_btn > button {
        border: 1px solid #666666;
        width: 28px;
        height: 28px;
    }

    .align_btn > button + button {
        margin: 0 0 0 6px;
    }

    .align_btn > button.list {
        background: url(../images/btn_list.png) no-repeat center 50%;
    }

    .align_btn > button.card_ {
        background: url(../images/btn_card.png) no-repeat center 50%;
    }

    .align_btn > button.list_on {
        border: 1px solid #5271C1;
        background: #F4F7FF url(../images/btn_list_on.png) no-repeat center 50% !important;
    }

    .align_btn > button.card_on {
        border: 1px solid #5271C1;
        background: #F4F7FF url(../images/btn_card_on.png) no-repeat center 50% !important;
    }
    /**/

    .grid_card > ul > li {
        /*flex: 1 0 100%;*/
        /*padding: 1em;*/
        max-width: 240px;
    }

    .email_comfirm {
        width: 80%;
        margin: 10em auto;
    }

    .password_comfirm {
        width: 80%;
        margin: 10em auto;
    }

    /* 수정2 끝 */
    .write_area > div .input_set .input_discription {
        flex-wrap: wrap;
    }

    .write_area > div .input_set .input_discription span {
        padding: 0;
        font-size: 11px;
        margin: 1em 0 0 0;
    }

    .write_area .divi_4 .input_set {
        flex: 1 0 100%
    }

    .write_area .divi_3 .input_set {
        flex: 1 0 100%
    }

    .write_area .divi_2 .input_set {
        flex: 1 0 100%
    }

    .pop_box._sm {
        width: 85%;
    }

    .pop_box._md {
        width: 85%;
    }

    .pop_box._lg {
        width: 85%;
    }

    .pop_contents {
        max-height: 600px;
        overflow-y: auto;
    }

    .checkbox_area {
        flex-wrap: wrap;
    }

    .checkbox_set {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .checkbox_set span {
        flex: 1 1 100%;
        padding: 0;
    }

    .checkbox {
        flex: 1 1 100%;
        display: inline-flex;
        padding: 0 0 1.6em 0;
    }

    .pop_body .step_area ul {
        flex-wrap: wrap;
    }

    .pop_body .step_area ul li {
        flex: 1 1 100%;
        margin: 1em 0;
    }

    .pop_body .step_area ul li.active p:last-child::after {
        display: none;
    }

    .pop_body .upload_set ul li .upload_tit {
        flex-wrap: wrap;
    }

    .pop_body .upload_set ul li .upload_tit span {
        flex: 1 1 100%;
    }

    .pop_body .upload_set ul li .upload_tit span:first-child {
        padding: 0;
        margin: 0 0 .4em 0;
    }

    .pop_body .upload_set ul li button.upload_down {
        margin: 0
    }

    .pop_body .pop_write .input_set label {
        line-height: 16px;
    }

    .pop_box.pop_box._respon9 ._respon9_contents {
        width: 100%;
    }

    /* 수정1 */
}

/* 수정2 시작 */
@media (min-width: 640px) {
    .grid_card > ul > li {
        /*flex: 1 0 50%;*/
        max-width: 240px;
    }
}

/* 수정2 끝 */

@media (min-width: 1060px) {

    /* 로그인 */
    .login_box {
        width: 380px;
        padding: 6em 5em 7.6em 5em;
    }

    /* 메인 */
    .container {
        display: grid;
    }

    .container_body {
        display: grid;
    }

    /* 0109 기존 라이브러리와 .container 는 겹쳐서 이름 변경 */
    .hide_lnb .lnb_nav {
        display: block !important;
    }

    .lnb_nav {
        display: block !important;
        position: relative !important;
        padding: 0 2.8em;
        width: auto;
        left: auto;
        top: auto;
        background: transparent;
        height: auto;
        box-shadow: none;
    }

    .lnb_expansion {
        display: block;
    }

    .lnb_expansion2 {
        display: block;
    }

    .hamburger {
        display: none !important;
    }

    .lnb .myfolder {
        height: 78px;
        border-radius: 4px;
        background: url(../images/folder.png) no-repeat 155px 50%, linear-gradient(#84A9F9, #6E92F6);
    }

    .lnb .myfolder > ul {
        padding: 0
    }

    .lnb_infor > a.icon_setting {
        border: 0
    }

    .main > ul > li.m_form_document > .m_box {
        padding: 4.2em !important
    }

    .m_form_data {
        flex-wrap: nowrap;
        justify-content: space-evenly;
        padding: 1em 1.6em;
    }

    .m_form_data > li {
        margin: 0 0 0 3%;
    }

    .main > ul > li.m_progress_document > .m_box {
        padding: 4.2em !important;
    }

    .m_progress_data {
        display: flex;
        padding: 0
    }

    .m_progress_data > li {
        flex: 1 1 30%;
        margin: 0 3% 0 0;
    }

    .main > ul > li.m_using > .m_box {
        padding: 4.2em !important
    }

    .m_usingdata_total {
        margin: 0 0 2em 0
    }

    .m_usingdata_total > li:last-child {
        margin: 0;
        padding: 0 0 0 1.8em;
        flex: auto;
    }

    .m_usingdata_total > li:first-child {
        font-size: 24px
    }

    .m_usingdata_detail li span:first-child {
        font-size: 18px
    }

    .main > ul > li.m_bottom_menu > .m_box {
        padding: 4.2em !important
    }

    .m_bottom_menu ul {
        flex-wrap: nowrap;
    }

    .m_bottom_menu ul li:first-child {
        border-bottom: 0;
    }

    .m_bottom_menu ul li:first-child::after {
        display: block;
        content: '';
        width: 1px;
        height: 20px;
        background: #e6e6e6;
        position: absolute;
        right: 0px;
    }

    .m_bottom_menu ul li a {
        justify-content: center;
        padding: 0
    }

    .copyrighter {
        text-align: right;
    }

    /* 서브 */
    .sub .sub_navi_box {
        position: relative;
        flex-wrap: nowrap !important;
    }

    .sub > div > h1 {
        width: 100%;
    }

    .sub > div > .btn_area {
        justify-content: left;
    }

    .sub .m_box {
        position: relative;
        flex-wrap: wrap;
    }

    .sub_content {
        display: flex !important;
    }

    .sub_tit_area {
        flex-wrap: wrap;
    }

    .sub_tit_area > h1 {
        width: auto !important;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        align-content: center;
    }

    .sub_tit_area .tit_btn_area {
        justify-content: flex-end;
    }

    .navigation {
        margin: 0;
        justify-content: right;
        font-size: 1.3em;
    }


    .write_area .divi_4 .input_set {
        flex: 1 0 20%
    }

    .write_area .divi_3 .input_set {
        flex: 1 0 30%
    }

    .write_area .divi_2 .input_set {
        flex: 1 0 40%
    }

    /* 수정2 시작 */
    .sub_grid_tit_area .grid_top {
        justify-content: flex-end;
        flex-wrap: nowrap;
        margin: 1.8em 0 0 0;
    }

    .sub_grid_tit_area .grid_top .search_area {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .pop_box.pop_box._respon9 ._respon9_contents {
        width: 50%;
        margin: 0 auto;
    }

    .sub_grid_tit_area .grid_top .search_area {
        flex-wrap: wrap;
    }

    .grid_card > ul > li {
        /*flex: 1 0 33%;*/
        max-width: 240px;
    }

    .email_comfirm {
        width: 40%;
        margin: 20em auto;
        max-width: 72em;
    }

    .password_comfirm {
        width: 40%;
        margin: 20em auto;
        max-width: 72em;
    }

    /* 수정2 끝 */
    .pop_box._sm {
        width: 60em;
    }

    .pop_box._md {
        width: 72em;
    }

    .pop_box._lg {
        width: 96em;
    }

    .pop_box.pop_box._respon9 ._respon9_contents {
        width: 50%;
        margin: 0 auto;
    }

    /* 수정1 */
    .pop_contents {
        max-height: none;
        overflow-y: hidden;
    }

    .checkbox_area {
        flex-wrap: nowrap;
    }

    .checkbox_set {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .checkbox_set span {
        flex: 1 1 auto;
        padding: 0 1em 0 1.2em;
    }

    .checkbox {
        flex: 1 1 auto;
        display: inline-flex;
        padding: 0;
        margin: .6em 0 0 0;
    }

    .pop_body .pop_write .input_set label {
        line-height: 22px;
    }

    .pop_body .step_area ul {
        flex-wrap: nowrap;
    }

    .pop_body .step_area ul li {
        flex: 1 1 auto;
        margin: 0;
    }

    .pop_body .step_area ul li.active p:last-child::after {
        content: '';
        display: inline-block;
        width: 100%;
        height: 3px;
        background: #5271C1;
        position: absolute;
        left: 0;
        top: 30px;
    }


}

@media (max-width: 1060px) {
    .sub_content .sub_left .tree {
        height: 550px;
    }

    .sub_content .sub_right .tree {
        height: 550px;
    }
}

@media (min-width: 1280px) {
    .m_form_data {
        justify-content: space-between;
    }

    .m_usingdata_wrap {
        flex-wrap: nowrap;
    }

    .m_usingdata_total {
        flex-grow: 0.2;
        flex-wrap: nowrap;
    }

    .m_usingdata_detail {
        flex-grow: 1;
        flex-wrap: nowrap;
    }

    /* 서브 */
    .sub .m_box {
        position: relative;
        flex-wrap: nowrap;
    }

    .sub_content .sub_right {
        margin: 0
    }

    .sub_content .sub_left {
        margin: 0
    }

    .sub_content .sub_main_content {
        margin: 0
    }

    .sub > div > .btn_area {
        flex-wrap: nowrap;
    }

    .sub > div > .btn_reflesh {
        position: relative;
        right: auto;
        top: auto;
        padding: 0 0 0 3.2em;
        margin: 1em 0 0 .2em
    }

    .write_area > div .input_set .input_discription {
        flex-wrap: wrap;
    }

    .write_area > div .input_set .input_discription span {
        padding: 0;
        font-size: 11px;
        margin: 1em 0 0 0;
    }

    .write_area > div .input_set .input_discription {
        flex-wrap: nowrap;
    }

    .write_area > div .input_set .input_discription span {
        padding: 0 0 0 1.4em;
        font-size: 12px;
        margin: 1.6em 0 0 0;
    }

    .sub_grid_tit_area .grid_top {
        margin: 0 0 0 0;
    }

    /* 수정2 */
    .grid_card > ul > li {
        /*flex: 1 0 33%;*/
        max-width: 240px;
        /*flex: 1 0 25%;
        max-width: 25%;*/
    }

    /* 수정2 */

}

@media (min-width: 1640px) {
    .sub_grid_tit_area {
        flex-wrap: nowrap;
    }

    .sub_grid_tit_area > h1 {
        width: auto !important;
        margin: 1.6em 0;
    }

    .sub_grid_tit_area .grid_top {
        width: auto !important
    }
}

.grid_icon_area_button {
    margin: .8em .6em 0em 0;
    border-radius: 12px;
    background: #f1f6ff;
    font-size: 12px;
    line-height: 11px;
    color: #96ACE0;
    border: 1px solid #96ACE0;
    padding: .6em .8em .5em
}

.grid_icon_area_button.highligter {
    border: 1px solid #c492d1;
    background: #fdf5ff;
    color: #dc96ee
}

.grid_icon_area_button.highligter2 {
    border: 1px solid #28a745;
    background: #f1f6ff;
    color: #28a745
}

.btn_upload {
    border: 1px solid #96ACE0;
    background: #fff;
    color: #96ACE0
}

.btn-secondary {
    margin: .2em .0em 0em 0;
    font-size: 12px;
    border: 1px solid #96ACE0;
    background: #fff;
    color: #96ACE0
}

.btn_pop_line {
    border: 1px solid #758BC7;
    background: #fff;
    color: #5271C1;
    font-size: 1.2em;
    font-weight: 700;
}

.btn_pop_fill {
    background: #566795;
    color: #fff;
    font-size: 1.2em;
    font-weight: 700;
}

.card-header {
    padding: 8px 20px;
    margin-bottom: 0;
    background-color: #84A9F9;
    border-bottom: 2px solid #E9ECF1;
}

.card-title {
    float: left;
    font-size: 16px;
    letter-spacing: -0.5px;
    color: #fff;
    font-weight: normal;
    font-family: 'Nanum Gothic Bold';
    margin: 0;
    height: 30px;
    line-height: 30px;
}

.card-header .card-tools .btn-tool {
    margin: 0;
    margin-top: 4px;
    background-color: #4F4EAF;
    color: #fff;
    font-size: 11px;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

.card .nav.flex-column > li {
    border-bottom: none;
}

.btn_select {
    width: auto;
}

.ui-datepicker {
    font-size: 14px;
}

.ui-widget-header {
    border: 0px solid #ffffff;
    background: #ffffff;
    color: #333333;
    font-weight: bold;
}

.ui-state-default, .ui-widget-content .ui-state-default {
    border: 0px solid #ffffff;
    background: #ffffff;
    font-weight: normal;
    color: #454545;
}

/*ssh 추가*/
.form-group > label {
    margin: 10px 10px 10px 10px;
    font-size: 1.5rem;
}

.form-group .form-check {
    font-size: 1.5rem;
}

.p-4 .form-check-label {
    margin-left: 5px;
    margin-top: 3px;
}

.btn-xs {
    font-size: 1.3rem;
}

.total-notify {
    font-size: 1.5rem;
}

/* lbw 추가 */
.sub_content .sub_left_flex_30per {
    flex: 0 0 30%;
}

/* lbw 추가 */
.sub_content .sub_left_flex_40per {
    flex: 0 0 40%;
}

/* lbw 추가 */
.sub_content .sub_left_flex_50per {
    flex: 0 0 50%;
}

/* lbw 추가 2024-01-15 */

/* 1.미리보기 */
.preview_modal_size {
    padding: 0px !important;
    height: 100% !important;
}

._md_preview {
    width: 80% !important;
    height: 80% !important;
}

/* 2.편집 */
.modify_modal_size {
    padding: 0px !important;
    height: calc(100% - 42px) !important;
}

._md_modify {
    width: 90% !important;
    height: 90% !important;
}

/* 3.발송 */
.send_modal_size {
    padding: 0px !important;
    height: calc(100% - 42px) !important;
}

._md_send {
    width: 90% !important;
    height: 90% !important;
}

/* 4.대량발송 */
.bulkSend_modal_size {
    padding: 0px !important;
    height: calc(100% - 42px) !important;
}

._md_bulkSend {
    width: 60% !important;
    height: 90% !important;
}

/* 5.디자인하기 */
.create_modal_size {
    padding: 0px !important;
    height: calc(100% - 42px) !important;
}

._md_create {
    width: 90% !important;
    height: 90% !important;
}


/* 우클릭 메뉴 */
.context-menu-item {

    /*padding: 0.5em 2em !important;*/
    font-size: small !important;

}

/* 드래그 앤 드롭 */
.content-drop-zone.dragover {
    opacity: 0.2;
    filter: alpha(opacity=20);
    border: 7px solid #0a84ff;
    /*background: linear-gradient(#84A9F9, #6E92F6), url(../images/upload_img1.png) no-repeat center center/100px 100px;*/
}

/* 썸네일 리스트 새로운 디자인 2024-04-23 */
.grid_card > .card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1px; /* 카드 간의 간격 */
    /*justify-content: center;*/
    justify-content: flex-start;
    margin: 10px;
}

.grid_card > .card-list > .tncard {
    border: 0px solid #ccc;
    position: relative;
    overflow: hidden;
    width: 258px; /* 모든 카드 너비 동일하게 설정 */
    height: 280px;
}

.grid_card > .card-list > .tncard.horizontal {
    display: flex;
    flex-direction: column; /* 내부 요소를 세로로 배열합니다. */
    justify-content: space-between; /* 푸터와 이미지 사이의 공간을 최대한 벌립니다. */
    /*margin-top: 100px;*/
}

.grid_card > .card-list > .tncard.horizontal .card-content {
    /* 가로형 카드의 컨텐츠는 flex 컨테이너로 지정하여 내부 아이템을 제어합니다. */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 이미지 영역이 남은 공간을 모두 차지하도록 합니다. */
    justify-content: flex-end; /* 이미지를 하단으로 정렬합니다. */
    padding: 10px 10px 45px 10px;
}

.grid_card > .card-list > .tncard.horizontal .card-content .search-icon {
    display: none;
    position: absolute;
    top: 80px;
    right: 35px;
    width: 24px;
    height: 24px;
    background: url('../icon/icon-search.svg') no-repeat center center;
    background-size: cover;
}

.grid_card > .card-list > .tncard.horizontal:hover .card-content .search-icon {
    display: flex;
    position: absolute;
    top: 80px;
    right: 35px;
    width: 24px;
    height: 24px;
    background: url('../icon/icon-search.svg') no-repeat center center;
    background-size: cover;
}

.grid_card > .card-list > .tncard > .card-content {
    padding: 10px 40px 42px 40px;
    transition: background-color 0.3s;
}

.grid_card > .card-list > .tncard > .card-content:hover {
    /*background-color: #f0f0f0;*/
}

.grid_card > .card-list > .tncard:hover {
    background-color: #f0f0f0;
}

.grid_card > .card-list > .tncard > .card-content > img {
    border: 1px solid #ccc;
    box-shadow: 1px 2px 12px 0px rgba(218, 225, 241, 1);

}

.grid_card > .card-list > .tncard > .card-buttons {
    display: flex;
    position: absolute;
    bottom: 45px; /* 버튼을 카드 하단에 위치시키기 위해 수정 */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s;
    opacity: 0; /* 기본 상태에서는 버튼을 숨깁니다 */
    /*background-color: rgba(255, 255, 255, 0.9); !* 반투명한 흰색 배경 *!*/
    padding: 5px; /* 버튼 주위의 여백 */
    border-radius: 7px; /* 버튼 그룹의 모서리를 둥글게 */
}

.grid_card > .card-list > .tncard:hover .card-buttons {
    opacity: 1; /* 카드에 호버하면 버튼을 표시합니다 */
}

.card-buttons > .btn {
    padding: 7px 5px; /* 버튼 패딩을 조정 */
    margin: 0 2px; /* 버튼 사이 간격을 조정 */
    background-color: #4f8ad8; /* 파란색 배경 */
    color: white;
    border: none;
    cursor: pointer;
    /*font-size: 0.7vw; !* 뷰포트 너비에 따라 글자 크기를 조정 *!*/
    min-width: 50px; /* 버튼 최소 너비 설정 */
    white-space: nowrap; /* 버튼 내의 텍스트가 줄바꿈 되지 않도록 설정 */
    overflow: hidden; /* 내용이 넘칠 경우 숨김 처리 */
    text-overflow: ellipsis; /* 내용이 넘칠 경우 말줄임표 표시 */
    border-radius: 7px; /* 버튼 모서리 둥글게 */
}

.card-buttons > .btn.yellowcolor {
    padding: 7px 5px; /* 버튼 패딩을 조정 */
    margin: 0 2px; /* 버튼 사이 간격을 조정 */
    background-color: #ffa201; /* 노란색 배경 */
    color: white;
    border: none;
    cursor: pointer;
    /*font-size: 0.7vw; !* 뷰포트 너비에 따라 글자 크기를 조정 *!*/
    min-width: 60px; /* 버튼 최소 너비 설정 */
    white-space: nowrap; /* 버튼 내의 텍스트가 줄바꿈 되지 않도록 설정 */
    overflow: hidden; /* 내용이 넘칠 경우 숨김 처리 */
    text-overflow: ellipsis; /* 내용이 넘칠 경우 말줄임표 표시 */
    border-radius: 7px; /* 버튼 모서리 둥글게 */
}

.grid_card > .card-list > .tncard > .tncard-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; /* 위치를 정확히 하단 중앙에 맞추기 위해 수정 */
    bottom: 10px;
    width: 100%;
}

.favorite-icon {
    width: 20px;
    height: 20px;
    margin-right: 2px;
    background: url('../icon/icon-bookmark.svg') no-repeat center center;
    background-size: cover;
}

.grid_card > .card-list > .tncard > .tncard-footer .fas{
    width: 20px;
    height: 20px;
    margin-right: 2px;
    background: url('../icon/icon-bookmark-fill.svg') no-repeat center center;
    background-size: cover;
}

.core-table .favorite-icon {
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    background: url('../icon/icon-bookmark.svg') no-repeat center center;
    background-size: cover;
}

.core-table .favorite-icon.fas{
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    background: url('../icon/icon-bookmark-fill.svg') no-repeat center center;
    background-size: cover;
}

.form-name {
    /*font-weight: bold;*/
    text-align: center;
    /*font-size: 0.7vw;*/
    font-size: 12px;
}

.search-icon {
    display: none;
    position: absolute;
    top: 35px;
    right: 55px;
    width: 24px;
    height: 24px;
    background: url('../icon/icon-search.svg') no-repeat center center;
    background-size: cover;
}

.grid_card > .card-list > .tncard:hover .search-icon {
    display: flex;
    position: absolute;
    top: 35px;
    right: 55px;
    width: 24px;
    height: 24px;
    background: url('../icon/icon-search.svg') no-repeat center center;
    background-size: cover;
}

.pdf-image {
    max-width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .grid_card > .card-list > .tncard {
        width: 100%;
        height: 280px;
    }
}

/*
.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}
*/