@charset "utf-8";
@import url(reset.css);
@import url(guide.css);
@import url(select2.css);

/* 메인 */
body:has(.dashboard) {
    background:#F0F1F3;
}
.dashboard {
    padding:40px 40px 0 40px;
    margin-top:64px;
    display:grid;
    gap:32px;
}
.dashboard.dash-admin {grid-template-columns:minmax(500px, 1fr) minmax(700px, 2fr);}
.dashboard.dash-user {grid-template-columns:minmax(520px, 1fr) minmax(700px, 2fr);}

.dash-admin .d-board:nth-child(1) {grid-column:1/2; grid-row:1/2;}
.dash-admin .d-board:nth-child(2) {grid-column:1/2; grid-row:2/3;}
.dash-admin .d-board:nth-child(3) {grid-column:2/3; grid-row:1/2;}
.dash-admin .d-board:nth-child(4) {grid-column:2/3; grid-row:2/3;}
.dash-admin .d-board:nth-child(5) {grid-column:1/3; grid-row:3/4;}

.dash-user .d-board:nth-child(1) {grid-column:1/2; grid-row:1/4;}
.dash-user .d-board:nth-child(2) {grid-column:2/3; grid-row:1/2;}
.dash-user .d-board:nth-child(3) {grid-column:2/3; grid-row:2/3;}
.dash-user .d-board:nth-child(4) {grid-column:2/3; grid-row:3/4;}

.d-board {
    padding:40px 40px 32px 40px;
    background:#fff;
    border-radius:32px;
    box-shadow:0 2px 4px 0 rgba(0, 0, 0, 4%);
    position:relative;
    box-sizing: border-box;
    container : d-board / inline-size;
}
.d-board .d-section + .d-section {
    padding-top:40px;
}
.d-board .d-section + .d-section {
    margin-top:16px;
    position:relative;
}
.d-board .title {
    display:flex;
    align-items:center;
    gap:16px;
}
.d-board .title > span {
    display:flex;
    align-items:center;
    gap:4px;
    font-size:22px;
    color:#48506B;
    font-weight:600;
}

.d-board .title > span.ico-calc::before {
    content:'';
    display:block;
    width:32px;
    height:32px;
    background:url(../../files/images/main/ico_calc.svg) no-repeat center center;
}
.d-board .title > span.ico-wonpaper::before {
    content:'';
    display:block;
    width:32px;
    height:32px;
    background:url(../../files/images/main/ico_wonpaper.svg) no-repeat center center;
}
.d-board .title > span.ico-graph::before {
    content:'';
    display:block;
    width:32px;
    height:32px;
    background:url(../../files/images/main/ico_graph.svg) no-repeat center center;
}

.d-board .title .more {
    font-size:14px;
    color:#A7A7A7;
    font-weight:400;
    display:flex;
    align-items:center;
    gap:4px;
}
.d-board .title .more::before {
    content:'';
    display:inline-block;
    background:url(../../files/images/main/ico_more.svg) no-repeat center center / 100% auto;
    width:12px;
    height:12px;
}
.d-board .title .more:hover {
    opacity:.6;
}

.calc-wrap {
    margin-top:24px;
}
.calc-wrap .date-select {
    margin-bottom:8px;
    border:none;
    background:none;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;;
}
.calc-wrap .date-select .now {
    font-size:20px;
    color:#48506B;
    font-weight:600;
}
.calc-wrap .date-select .prev,
.calc-wrap .date-select .next {
    width:40px;
    height:40px;
    border-radius:100px;
}
.calc-wrap .date-select .prev:hover,
.calc-wrap .date-select .next:hover {
    background:#f8f8f8;
}
.calc-wrap .date-select .prev.disabled,
.calc-wrap .date-select .next.disabled {
    opacity:40%;
}
.calc-wrap .date-select .prev {
    transform:rotate(180deg);
}

.calc-wrap .progress-bar {
    width:100%;
}
.calc-wrap .progress-bar .text {
    padding:0 0 8px 8px;
    font-size:16px;
    color:#48506B;
    font-weight:600;
}
.calc-wrap .progress-bar .bar {
    width:100%;
    height:28px;
    background:#525763;
    border-radius:100px;
    position:relative;
}
.calc-wrap .progress-bar .bar span {
    font-size:15px;
    color:#fff;
    font-weight:400;
    line-height:28px;
}
.calc-wrap .progress-bar .bar .total {
    position:absolute;
    right:16px;
    z-index:9;
}
.calc-wrap .progress-bar .bar .partial {
    position:absolute;
    margin-left:16px;
    z-index:9;

}
.calc-wrap .progress-bar .bar .percentage {
    width:31%;
    height:100%;
    background:linear-gradient(to right, #A117FD, #CE42FD);
    border-radius:100px;
    position:absolute;
    left:0;
    top:0;
}

.calc-wrap .calc-box {
    margin-top:32px;
    padding:28px 24px;
    background:#F8F8F8;
    border-radius:16px;
}
.calc-wrap .calc-box ul li {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.calc-wrap .calc-box ul li + li {
    margin-top:24px;
}
.calc-wrap .calc-box ul li:last-child {
    border-top:1px solid #DEDEDE;
    padding-top:16px;
}
.calc-wrap .calc-box .ti {
    font-size:16px;
    color:#48506B;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:6px;
}
.calc-wrap .calc-box .t1::before {content:''; background:#A439EC; border-radius:100%; width:8px; height:8px;}
.calc-wrap .calc-box .t2::before {content:''; background:#07B58C; border-radius:100%; width:8px; height:8px;}
.calc-wrap .calc-box .t3::before {content:''; background:#417DF2; border-radius:100%; width:8px; height:8px;}

.calc-wrap .calc-box .price {
    display:flex;
    gap:24px;

}
.calc-wrap .calc-box .price span {
    min-width:120px;
    font-size:20px;
    color:var(--grey-120);
    font-weight:700;
    text-align:right;
}
.calc-wrap .calc-box .price span:first-child:before {
    content:'판매금';
    display:block;
    font-size:13px;
    color:#9498A5;
    font-weight:300;
}
.calc-wrap .calc-box .price span:last-child:before {
    content:'정산금';
    display:block;
    font-size:13px;
    color:#9498A5;
    font-weight:300;
}
.calc-wrap .calc-box li:last-child .price span:first-child:after {
    content:'전월대비 +100,000';
    display:block;
    font-size:13px;
    color:#256BF6;
    font-weight:500;
}
.calc-wrap .calc-box li:last-child .price span:last-child:after {
    content:'전월대비 +10,000';
    display:block;
    font-size:13px;
    color:#256BF6;
    font-weight:500;
}
.d-section .tab-wrap .tab-nav {
    top:30px;
    left:0;
    right:0;
}
.tab-wrap .tab-nav {
    display:flex;
    justify-content:flex-end;
    gap:20px;
    position:absolute;
    top:20px;
    left:40px;
    right:40px;
    border-bottom:1px solid #EFEFEF;
}
.tab-wrap .tab-nav li {
    display:inline-flex;
}
.tab-wrap .tab-nav li a {
    padding:16px 8px;
}
.tab-wrap .tab-nav li a.active {
    border-bottom:1px solid #696969;
    margin-bottom:-1px;
}
.tab-wrap .tab-nav li a::after {
    content:''; 
    display:block; 
    position:absolute; 
    border-bottom:1px solid #696969; 
    transition:width .25s ease-out; 
    bottom:-1px; 
    left:auto; 
    right:0;  
    width:0;
}
.tab-wrap .tab-nav li a:hover::after {
    width:100%; 
    left:0; 
    right:auto;
}

.tab-wrap .tab-nav li a span {
    font-size:15px;
    color:var(--grey-70);
    font-weight:400;
}
.tab-wrap .tab-nav li a.active span {
    color:var(--grey-100);
    font-weight:600;
}

.tab-wrap .tab-con {
    margin-top:14px;
    padding-top:24px;
}

.graph-wrap {
    padding:24px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:56px;
}
.graph-wrap .donut-area {
    position:relative;
}
.graph-wrap .donut-area .num {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:8px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
.graph-wrap .donut-area .num span {
    font-size:14px;
    color:#556188;
    font-weight:400;
    line-height:100%;
}
.graph-wrap .donut-area .num p {
    font-size:25px;
    color:#556188;
    font-weight:700;
}

.graph-wrap.donut .category {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.graph-wrap .category li > span {
    font-size:14px;
    color:var(--grey-90);
    font-weight:400;
    display:flex;
    align-items:center;
}
.graph-wrap .category li span .sm {
    font-size:12px;
}
.graph-wrap.donut {

}
.graph-wrap.donut .category li > span::before {
    content:'';
    display:block;
    width:14px;
    height:14px;
    border-radius:100px;
    background:black;
    margin-right:6px;
    flex-shrink:0;
}
.graph-wrap.donut .category li:nth-child(1) > span:before {background:#FFA033;}
.graph-wrap.donut .category li:nth-child(2) > span:before {background:#835DF5;}
.graph-wrap.donut .category li:nth-child(3) > span:before {background:#438EFF;}
.graph-wrap.donut .category li:nth-child(4) > span:before {background:#00CFBF;}
.graph-wrap.donut .category li:nth-child(5) > span:before {background:#D2CFDF;}
.graph-wrap.donut .category li:nth-child(6) > span:before {background:#F56ACF;}

.graph-wrap.bar {
    flex-direction:column;
    gap:32px;
}
.graph-wrap.bar .category {
    display:flex;
    gap:20px;
}
.graph-wrap.bar .category li > span::before {
    content:'';
    display:block;
    width:14px;
    height:14px;
    background:black;
    margin-right:6px;
}
.graph-wrap.bar .category li:nth-child(1) > span:before {background:url(../../files/images/main/ctgr_1.png) no-repeat center center;}
.graph-wrap.bar .category li:nth-child(2) > span:before {background:url(../../files/images/main/ctgr_2.png) no-repeat center center;}

.graph-wrap img {
    width:100%;
}

.titab-wrap .tab-nav {
    display:flex;
    gap:32px;
}
.titab-wrap .tab-nav a {
    display:flex;
    padding:6px 0 10px 0;
}
.titab-wrap .tab-nav a.active {
    border-bottom:3px solid #48506B;
}
.titab-wrap .tab-nav a::after {
    content:''; 
    display:block; 
    position:absolute; 
    border-bottom:3px solid #48506B; 
    opacity:.25;
    transition:width .25s ease-out; 
    bottom:-3px; 
    left:auto; 
    right:0;  
    width:0;
}
.titab-wrap .tab-nav a:hover::after {
    width:100%; 
    left:0; 
    right:auto;
}
.titab-wrap .tab-nav a span {
    font-size:22px;
    color:#C3C5CC;
    font-weight:600;
}
.titab-wrap .tab-nav a.active span {
    color:#48506B;
}

.titab-wrap .tab-con {
    margin-top:24px;
}

.tab-con .filter-wrap {
    position:absolute;
    top:40px;
    right:40px;
}
.filter-wrap {
    display:flex;
    gap:8px;
}
.filter-wrap .sel-group {
    display:flex;
    gap:8px;
}
.filter-wrap .search-ico {
    position:relative;
}
.filter-wrap .search-ico .search-input {
    padding-right:40px;
    width:100%;
}
.filter-wrap .search-ico button {
    position:absolute;
    top:50%;
    right:12px;
    transform:translateY(-50%);
}

.d-board .select2-container--default .select2-selection--single {
    border-radius:8px;
}

.noti-list ul li + li a {
    border-top:1px solid #F1F3F4;
}
.noti-list ul li a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:50px;
}
.noti-list .tit {
    display:flex;
    align-items:center;
    width:calc(100% - 200px);
}
.noti-list .tit .badge {
    margin-right:8px;
    padding:3px 8px;
    border-radius:6px;
    background:#4A83F4;
    font-size:14px;
    color:#fff;
    font-weight:400;
    flex-shrink:0;
}
.noti-list .tit .ti {
    padding-right:16px;
    font-size:16px;
    color:var(--grey-120);
    font-weight:400;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    position:relative;
}
.noti-list .tit .file-link::after {
    content:'';
    display:inline-block;
    background:url(../../files/images/main/ico_filelink.svg) no-repeat center center / 100% auto;
    width:16px;
    height:16px;
    position:absolute;
    right:0;
}
.noti-list .desc {
    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;
    color:var(--grey-70);
    font-weight:400
}
.noti-list .desc p + p::before {
    margin-right:12px;;
    content:'';
    display:inline-block;
    width:1px;
    height:10px;
    background:#E1E1E1;
}
.noti-list .desc .num {
    display:flex;
    align-items:center;
    color:#3B82F1;
}
.noti-list .desc .num::before {
    margin-right:4px;
    content:'';
    display:block;
    background:url(../../files/images/common/icon_eye.png) no-repeat center center / 100% auto;
    width:16px;
    height:16px;
}

.d-board .count-group {
    display:flex;
    gap:8px;
    position:absolute;
    top:40px;
    right:40px;
}
.d-board .count-group ul {
    display:flex;
    gap:8px;
}
.d-board .count-group ul li {
    padding:12px 20px;
    width:200px;
    border-radius:4px;
    background:#F7F7F9;
    box-sizing:border-box;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.dash-admin .d-board .count-group ul li {
    
}
.d-board .count-group ul li .txt {
    font-size:14px;
    color:var(--grey-120);
    font-weight:500;
    display:flex;
    align-items:center;
    gap:8px;
}
.d-board .count-group ul li .txt::before {
    content:'';
    display:block;
    width:28px;
    height:28px;
}
.d-board .count-group ul li:nth-child(1) .txt::before {background:url(../../files/images/main/ico_dsh1.png) no-repeat center center / 100% auto;}
.d-board .count-group ul li:nth-child(2) .txt::before {background:url(../../files/images/main/ico_dsh2.png) no-repeat center center / 100% auto;}
.d-board .count-group ul li:nth-child(3) .txt::before {background:url(../../files/images/main/ico_dsh3.png) no-repeat center center / 100% auto;}

.d-board .count-group ul li .num {
    padding:2px 16px;
    border-radius:100px;
    background:#fff;
    font-size:17px;
    color:#3156D8;
    font-weight:600;
}
.d-board .count-group .btn {
    padding:0 24px;
    height:52px;
    background:#EEF2FF;
    border-radius:8px;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:all .2s ease-in-out;
}
.d-board .count-group .btn:hover {
    background:#d8e1ff;
}
.d-board .count-group .btn span {
    font-size:14px;
    color:#3156D8;
    font-weight:600;
    line-height:100%;
    display:flex;
    align-items:center;
    word-break: keep-all;
    gap:6px;
}
.d-board .count-group .btn span::before {
    content:'';
    display:block;
    background:url(../../files/images/main/ico_plus.svg) no-repeat center center / 100% auto;
    width:11px;
    height:11px;
}

.dash-user .d-board .count-group {
    /* position:static;
    margin-top:16px; */
}
.dash-user .d-board .count-group ul {
    flex:100%;
}

.d-board .search-box {
    margin-top:62px;
    padding:0;
    background:none;
    border-radius:0;
}
.d-board .search-box .right a {
    background:#fff;
    border:1px solid #e2e3e5;
    border-radius:8px;
    width:40px;
    height:40px;
    font-size:0;
    gap:0;
}

.footer {
    padding:50px 0;
    background:#E3E4E6;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:64px;
}
.footer .foot-link a {
    font-size:15px;
    color:#48506B;
    font-weight:700;
}
.footer .foot-link a + a {
    margin-left:24px;
}
.footer .foot-info {
    display:flex;
    align-items:center;
    gap:12px;
}
.footer .foot-info span {
    font-size:15px;
    color:#6E7589;
    font-weight:400;
}
.footer .foot-info span + span::before {
    margin-right:12px;
    content:'';
    display:inline-block;
    width:1px;
    height:10px;
    background:#B7BCC5;
}

.pay-box {
    margin-top:24px;
    display:flex;
    gap:12px;
}
.pay-box > div {
    flex:1;
}
.pay-box .box1 ul {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.pay-box .box1 ul li{
    padding:10px 0;
    background:#F8F8F8;
    border-radius:8px;
    flex:calc(50% - 8px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
}
.pay-box .box1 .ti {
    font-size:14px;
    color:var(--grey-80);
    font-weight:400;
}
.pay-box .box1 .tx {
    font-size:15px;
    color:var(--grey-120);
    font-weight:500;
}
.pay-box .box2 ul {
    padding:32px;
    background:#F8F8F8;
    border-radius:8px;
    min-width:270px;
    height:100%;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
}
.pay-box .box2 ul li {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.pay-box .box2 ul li:nth-child(2) {
    margin-bottom:16px;
}
.pay-box .box2 ul li:last-child {
    border-top:1px solid #DEDEDE;
    padding-top:32px;
    align-items:flex-start;
}
.pay-box .box2 ul li:last-child .price_diff {
    display: block;
    font-size: 13px;
    color: #256BF6;
    font-weight: 500;
}
.pay-box .box2 .ti {
    display:flex;
    gap:4px;
}
.pay-box .box2 .ti span {
    font-size:15px;
    color:var(--grey-120);
    font-weight:400;
    flex-shrink:0;
}
.pay-box .box2 .price {
    font-size:18px;
    color:var(--grey-120);
    font-weight:700;
    text-align:right;
}

.advance-box {
    margin-top:24px;
}
.advance-box ul {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.advance-box ul li {
    padding:0px 24px;
    height: 60px;
    border-radius:8px;
    background:#F8F8F8;
    border:1px solid #ECECEC;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.advance-box .ti {
    font-size:15px;
    color:var(--grey-80);
    font-weight:600;
}
.advance-box .price {
    font-size:18px;
    color:#4A4853;
    font-weight:600;
}

.advance-box .point-color {
    background:#F4F2FC;
    border-color:#E0D8FF;
}
.advance-box .point-color .ti {
    color:#6851CD;
}
.advance-box  .point-color .price {
    color:#6851CD;
}

.tooltip_wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tooltip {
    display: flex;
    align-items: center;
    position: relative;
}

.tooltip .tip-btn {
    background: none;
    border: none;
}

.tooltip .tip-box {
    padding: 8px 12px;
    width: max-content;
    max-width:400px;
    background:rgba(0, 0, 0, 70%);
    border-radius: 6px;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 16%);
    position: absolute;
    display: none;
    z-index: 99;
}

.tooltip .tip-box p {
    font-size: 14px;
    font-weight: 200;
    color: #fff;
    line-height: 150%;
    word-break: keep-all;
}

.tooltip .tip-box p .sm {
    font-size: 12px;
    font-weight: normal;
    color: inherit;
}

.tooltip .tip-box.top {bottom: 29px; left: 11px; transform: translateX(-50%);}
.tooltip .tip-box.bottom {top: 29px; left: 6px; transform: translateX(-50%);}
.tooltip .tip-box.left {top: -10px; right: 29px;}
.tooltip .tip-box.right {top: -8px; left: 29px;}

.tooltip .tip-box::after {
    content: '';
    display: block;
    width: 15px;
    height: 11px;
    background: url(../../files/images/main/ico_tooltip_arr.svg) no-repeat;
    position: absolute
}

.tooltip .tip-box.top::after {bottom: -11px; left: 50%; transform:translateX(-50%);}
.tooltip .tip-box.bottom::after {top: -11px; left: 50%; transform:translateX(-50%) rotate(180deg);}
.tooltip .tip-box.left::after {top: 13px; right: -13px; transform: rotate(-90deg);}
.tooltip .tip-box.right::after {top: 15px; left: -13px; transform: rotate(90deg);}

.d-board .sort-group {
    margin-bottom:12px;
}

.contract-wrap {
    display:flex;
    gap:48px;
}
.contract-wrap .contract-list {
    width:100%;
    overflow-x:auto;
}
.contract-wrap .table-wrap {
    overflow: auto;
    width:100%;
    height:304px;
}
.contract-wrap .table-wrap table {
    min-width:max-content;
}
.contract-list table thead th,
.contract-list table tbody td {
    text-align:center;
}
.contract-list table tbody td span[class*=catg] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.contract-list table tbody td span[class*=catg]::before {
    content:'';
    display:block;
    width:12px;
    height:12px;
    border-radius:100%;
    background:black;
}
.contract-list table tbody td span.catg-1::before {background:#FFA033;}
.contract-list table tbody td span.catg-2::before {background:#835DF5;}
.contract-list table tbody td span.catg-3::before {background:#438EFF;}
.contract-list table tbody td span.catg-4::before {background:#00CFBF;}
.contract-list table tbody td span.catg-5::before {background:#D2CFDF;}
.contract-list table tbody td span.catg-6::before {background:#F56ACF}

.contract-wrap .graph-wrap {
    padding:24px;
    flex-direction:column;
    gap:32px;
    background:#F8F8F8;
    border-radius:16px;
    box-sizing:border-box;
}
.contract-wrap .graph-wrap .category {
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: center;
    gap:8px 16px;
}

@container d-board (max-width:1000px) {
    .dash-user .dash-user .search-box>div {
        flex-direction: column;
        width: 100%;
    }
    .dash-user .search-box {
        position:relative;
    }
    .dash-user .search-box>div {
        display: flex;
        gap: 8px;
    }
    .dash-user input[type="text"].search-input {
        width:100%;
    }

    .d-board .count-group {
        position:static;
        margin-top:16px;
    }
    .d-board .count-group ul {
        flex:100%;
    }
    .d-board .count-group ul li {
        width:100%;
        padding: 12px 24px;
        border-radius:8px;
    }
    .d-board .search-box {
        margin-top:32px;
    }

    .dash-user .table-area .table-wrap {
        overflow: auto;
        width:100%;
    }
    .dash-user .table-area .table-wrap table {
        min-width:max-content;
    }
}

/* 콘텐츠 */
.board .board__search {
    margin: 0px 40px 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
}

.board .board__search .btn-group a img {
    width: 16px;
    height: auto;
}

.board__search .custom-select-wrap .select2-container--default .select2-selection--single {
    border-radius: 8px;
}

.board-title {
    margin: 0 0 12px 4px;
    font-family: 'suite';
    font-size: 22px;
    color: var(--grey-120);
    font-weight: 500;
    line-height: 140%;
}

.board-title .desk {
    margin-left: 6px;
    font-size: 13px;
    color: var(--grey-80);
    font-weight: 400;
}

.board__con {
    margin-top: 40px;
    padding: 24px 40px;
    width: 100%;
    background: #F7F8FB;
    display: flex;
    box-sizing: border-box;
}

.my-todo {
    margin-right: 32px;
    width: 100%;
    flex: 3;
}

.my-todo ul {
    display: flex;
    gap: 12px;
}

.my-todo ul li {
    border-radius: 24px;
    padding: 24px;
    width: 100%;
    height: 140px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    transition: transform .2s ease-out;
}

.my-todo ul li:active {
    transform: scale(0.95);
}

.my-todo ul li.blue-card {
    background: #2B4DC3 url(../../files/images/common/icon_bd_01.png) no-repeat top 20px right 22px / 32px auto;
}

.my-todo ul li.sky-card {
    background: #42599E url(../../files/images/common/icon_bd_02.png) no-repeat top 20px right 24px / 32px auto;
}

.my-todo ul li.green-card {
    background: #527BF6 url(../../files/images/common/icon_bd_03.png) no-repeat top 20px right 24px / 32px auto;
}

.my-todo ul li div {
    position: relative;
}

.my-todo ul li div.new::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 10px;
    background: #F5E024;
    position: absolute;
    top: 0px;
    right: -8px;
}

.my-todo ul li strong {
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    line-height: 140%;
}

.my-todo ul li p {
    margin-top: 4px;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    line-height: 140%;
}

.all-todo {
    padding: 0 0 0 32px;
    width: 100%;
    border-left: 1px dashed #D2D7E7;
    box-sizing: border-box;
    flex: 6;
}

.all-todo ul {
    display: flex;
    gap: 12px;
}

.all-todo ul li {
    padding: 24px;
    border-radius: 24px;
    box-shadow: 0px 2px 12px rgba(45, 45, 145, .08);
    width: 100%;
    height: 140px;
    box-sizing: border-box;
    flex: 1;
    transition: transform .2s ease-out;
}

.all-todo ul li:active {
    transform: scale(0.95);
}

.all-todo ul li:nth-child(1) {
    background: #fff url(../../files/images/common/icon_bd_04.png) no-repeat top 20px right 24px / 26px auto;
}

.all-todo ul li:nth-child(2) {
    background: #fff url(../../files/images/common/icon_bd_05.png) no-repeat top 20px right 24px / 26px auto;
}

.all-todo ul li:nth-child(3) {
    background: #fff url(../../files/images/common/icon_bd_06.png) no-repeat top 20px right 24px / 26px auto;
}

.all-todo ul li:nth-child(4) {
    background: #fff url(../../files/images/common/icon_bd_07.png) no-repeat top 20px right 24px / 26px auto;
}

.all-todo ul li:nth-child(5) {
    background: #fff url(../../files/images/common/icon_bd_08.png) no-repeat top 20px right 24px / 26px auto;
}

.all-todo ul li:nth-child(6) {
    background: #fff url(../../files/images/common/icon_bd_09.png) no-repeat top 20px right 24px / 26px auto;
}

.all-todo ul li div {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100%;
    text-align: right;
}

.all-todo ul li p {
    font-size: 15px;
    color: var(--grey-80);
    font-weight: 400;
    line-height: 140%;
    text-align: left;
}

.all-todo ul li strong {
    font-size: 18px;
    color: var(--grey-100);
    font-weight: 700;
}

.work-time {
    margin-left: 32px;
    flex: 1;
}

.work-time .box {
    padding: 32px 0 24px 0;
    border-radius: 24px;
    box-shadow: 0px 2px 24px rgba(0, 0, 0, .04);
    min-width: 200px;
    height: 140px;
    box-sizing: border-box;
    background: #fff;
}

.work-time .box .time {
    margin-bottom: 24px;
    font-size: 24px;
    color: #00DE62;
    font-weight: 700;
    line-height: 140%;
    text-align: center;
}

.work-time .box .bar-wrap {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.work-time .box .bar-wrap .bar {
    background: #E8E8E8;
    border-radius: 10px;
    width: 100%;
    height: 4px;
}

.work-time .box .bar-wrap .bar span {
    display: block;
    height: 100%;
    border-radius: 10px;
    background: #00DE62;
}

.work-time .box .bar-wrap .text {
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.work-time .box .bar-wrap .text p {
    font-size: 13px;
    color: var(--grey-90);
    font-weight: 400;
}

.work-time .box .bar-wrap .text p b {
    font-size: 13px;
    color: var(--grey-90);
    font-weight: 500;
}

.monthly-work {
    border-bottom: 1px solid #E5E9F6;
}

.monthly-work>div {
    padding: 24px 40px;
}

.monthly-work__list ul {
    display: inline-flex;
    gap: 8px;
    min-width: 1200px;
}

.monthly-work__list ul li {
    padding: 8px 8px;
    border: 1px solid #DFE7F1;
    border-radius: 8px;
    background: #fff;
    flex: 1;
    text-align: center;
    min-width: 100px;
}

.monthly-work__list .month {
    font-size: 14px;
    color: var(--grey-110);
    font-weight: 400;

}

.monthly-work__list .hour {
    font-size: 14px;
    color: var(--grey-70);
    font-weight: 500;
}

.monthly-work__list ul li.current {
    border-color: #00DE62;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .04);
}

.monthly-work__list ul li.current .month {
    padding: 0 8px;
    height: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #00DE62;
    display: inline-block;
    border-radius: 100px;
}

.monthly-work__list ul li.current .hour {
    font-weight: 700;
    color: #07CF66;
}

.search-box {
    padding: 12px;
    border-radius: 8px;
    background: var(--search-bg);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-flow: wrap;
}

.search-box>div {
    display: flex;
    gap: 8px;
}

.search-box .filter>div {
    display: flex;
    gap: 8px;
}

.search-box .filter .custom-select-wrap .select2-container--default .select2-selection--single,
.search-box .filter input[type="text"].multidate {
    border-radius: 8px;
}

.search-box .search {
    display: flex;
    gap: 8px;
}

.combo-input {
    display: flex;
    gap: 8px;
}

.combo-input .custom-select-wrap .select2-container--default .select2-selection--single {
    border-radius: 0;
}

.combo-input .custom-select-wrap:first-child .select2-container--default .select2-selection--single {
    border-radius: 8px 0 0 8px;
}

.combo-input .custom-select-wrap:last-child .select2-container--default .select2-selection--single {
    border-radius: 0 8px 8px 0;
}

.table-list {
    padding: 40px 40px 0 40px;
}

.table-area {
    margin-top: 32px;
}

.table-area__sort {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sort-group {
    display: flex;
    align-items: center;
}

.sort-select {
    position: relative;
}

.sort-select__btn {
    padding: 0 26px 0 8px;
    min-width: 120px;
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 4px;
    font-size: 14px;
    color: var(--grey-120);
    font-weight: 600;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
}

.sort-select__btn::after {
    content: '';
    display: block;
    width: 10px;
    height: 8px;
    background: url(../../files/images/common/custom_select_arrow.png) no-repeat center center / 10px 7px;
    ;
    position: absolute;
    right: 8px;
    transition: all .3s;
}

.sort-select__btn:hover {
    border-color: #dfdfdf;
}

.sort-select__btn.active::after {
    transform: rotate(180deg);
}

.sort-select__list {
    padding: 4px 0;
    border-radius: 4px;
    background: var(--white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    position: absolute;
    top: 44px;
    display: none;
    z-index: 99;
}

.sort-select__list.active {
    display: block;
}

.sort-select__list li a {
    padding: 0 20px 0 16px;
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 14px;
    color: var(--grey-90);
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.sort-select__list li a:hover {
    background: #f8f8f8;
}

.table-count {
    padding: 0 8px 0 0;
    font-size: 14px;
    color: var(--grey-110);
    font-weight: 400;
}

.table-count b {
    font-weight: 700;
}

.view {
    margin: 0 auto;
    max-width: 1200px;
}

.view:has(.con-box__text-view) {
    /* width: fit-content */
}

.write {
    margin: 0 auto;
    max-width: 1000px;
}

.write.extend {
    max-width: 1200px;
}

.con-box+.con-box {
    margin-top: 12px;
}

.con-box {
    background: var(--white);
    border: 1px solid #e7e7e7;
    border-radius: 0px;
    box-sizing: border-box;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .04);
}

.con-box--line {
    border-color: #77777E;
    overflow: hidden;
}

.con-box--line .table-wrap table tbody tr:hover {
    background: none;
}

.con-box__write {
    padding: 40px 56px;
    position: relative;
}

.con-box__write .form-list__item .form .box_line {
    width: 100%;
    border: 1px solid #e2e3e5;
    border-radius: 4px;
    overflow: hidden;
}

.form-list__item .form:has(.radio-box) {
    flex-wrap: wrap;
}

.form input[type="text"].datepicker,
.form input[type="text"].multidate {
    min-width: 200px;
}

.form .checkbox-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.con-box__write .conbox-delete {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 32px;
    height: 32px;
    background: #949599 url(../../files/images/common/icon_delete.png) no-repeat center center / 20px auto;
    font-size: 0;
    cursor: pointer;
}

.con-box__write:first-child .conbox-delete {
    /* border-radius: 0 4px 0 0; */
}

.con-box__write+.btn-group {
    margin-top: -16px;
}

.con-box__write+.con-box__write {
    border-top: 1px solid #E7E7E9;
}

.con-box__view {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.con-box__view .table-wrap {
    margin-top: -1px;
    margin-bottom: -1px;
    border-bottom: none
}

.con-box__text-view {
    padding: 32px 40px;
}

.con-box__text-view p.title {
    font-size: 20px;
    color: var(--grey-110);
    font-weight: 600;
    margin-bottom: 16px;
    padding: 8px 0 16px 0;
    border-bottom: 1px solid #dbdbdb;
}

.con-box__text-view p.title span {
    margin-right: 12px;
}

.con-box__text-view .form-list__item+.form-list__item {
    margin-top: 4px;
}

.con-box__text-view .form-list__item.column {
    flex-direction: column;
    gap: 0;
}

.con-box__text-view .form-list__item .file-list {
    width: 100%;
    background: #f8f8f8;
    border: 0;
    border-radius: 8px;
}

.con-box__text-view .form-list__item .file-list li:hover {
    background: none;
}

.con-box__text-view .form-list .tit {
    color: var(--grey-60);
    font-weight: 400;
}

.con-box__text-view .form-list .form {
    justify-content: flex-end;
    color: var(--grey-110);
}

.form-list .divider {
    width: 100%;
    height: 56px;
}

.form-list .num {
    padding: 4px 8px;
    display: inline-flex;
    background: #2B4DC3;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin-bottom: 12px;
}

.form-list__item+.form-list__item {
    margin-top: 16px;
}

.form-list__item {
    display: flex;
}

.form-list__item .tit {
    min-width: 140px;
    /*height: 40px;*/
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #646569;
}

.form-list__item .tit.required::after {
    margin-left: 4px;
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #F54646;
    transform: translateY(-5px);
}

.form-list__item .form {
    width: 100%;
    min-width: 0;
    /* min-height: 40px; */
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 14px;
    color: var(--grey-110);
    font-weight: 400;
}

.form-list__item .form.row-column {
    flex-direction: row;
}

.form-list__item .form.column {
    flex-direction: column;
    align-items: flex-start;
}

.form-list__item .form.input-group>.label-input {
    width: 33%;
}

.form-list__item .form.input-group>.label-input input {
    width: 100%;
}

input.error {
    border-color: #f17e7e;
}


.form .message {
    font-size: 14px;
    font-weight: 500;
    color: var(--grey-80);
}

.form .message.error {
    padding-left: 18px;
    color: #F54646;
    font-weight: 500;
    line-height: 140%;
    background: url(../../files/images/common/icon_urgency.png) no-repeat left top 2px / 14px auto;
}

.form .message.check {
    padding-left: 18px;
    color: #2B4DC3;
    font-weight: 500;
    line-height: 140%;
    background: url(../../files/images/common/icon_cir_check.png) no-repeat left top 2px / 14px auto;
}

.form .message span {
    color: #2B4DC3;
}

.form:has(input:focus)~.tip {
    display: block;
}

.form .tip {
    /* margin:4px 0 0 0; */
    font-size: 14px;
    color: var(--grey-80);
    font-weight: 400;
    line-height: 140%;
    display: none;
}

.form .tip span {
    color: #F54646;
    font-weight: 500;
}

.form .sub-title {
    font-size: 13px;
    color: var(--grey-50);
    margin-top: 6px;
}

.form .sub-title.required::after {
    margin-left: 3px;
    content: '*';
    display: inline-block;
    color: #F54646;
}

.form:has(> .sub-title) {
    border: 1px solid #e2e3e5;
    border-radius: 8px;
    padding: 0 12px 12px 12px;
    box-sizing: border-box;
}

.form .urgency-area {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    /*background: #f8f8f8;*/
    position: relative;
    height: 40px;
}

.form .urgency-area:hover .tooltip {
    visibility: visible;
    scale: 1;
}

.form .urgency-area .tooltip {
    padding: 12px 16px;
    width: 250px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.78);
    border-radius: 4px;
    font-size: 14px;
    line-height: 19px;
    color: #fff;
    font-weight: 300;
    text-align: left;
    position: absolute;
    top: 0;
    right: -260px;
    scale: .9;
    visibility: hidden;
    transform-origin: left;
    transition: all ease .2s;
}

.form .urgency-area .tooltip::before {
    content: '';
    display: inline-block;
    border: 3px solid;
    border-color: transparent transparent rgba(0, 0, 0, .8) rgba(0, 0, 0, .8);
    transform: rotate(45deg);
    position: absolute;
    top: 18px;
    left: -3px;
}

.form .urgency-area .tooltip span {
    color: #f9ff11;
}

.form-alert {
    margin-top: 4px;
    padding: 8px 32px 8px 12px;
    background: #FFF5DD;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: none;
}

.form-alert p {
    padding-left: 20px;
    background: url(../../files/images/common/icon_alert.png) no-repeat top 1px left / 16px auto;
    font-size: 14px;
    color: #FB9013;
    font-weight: 400;
    line-height: 140%;
}

.form-alert p b {
    font-weight: 600;
}

.form-alert .close {
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.form-alert .close img {
    width: 100%;
    height: auto;
}

.urgency-area .form .box_line {
    width: 700px;
}

.form .multidate {
    width: 240px
}

.form .multidate:focus {
    border-color: #2B4DC3;
    /* box-shadow: 2px 2px 3px rgba(0, 0, 0, .1) inset; */
    outline: 3px solid rgba(43, 77, 195, 0.1);
}

.form .custom-select-wrap {
    width: 100%;
}

.form .select2-container {
    width: 100% !important;
}

.form-title {
    padding: 40px 0 24px 0;
    margin: 0 44px;
    font-size: 18px;
    color: var(--grey-110);
    font-weight: 500;
    line-height: 1;
    border-radius: 0px;
    border-bottom: 1px solid #e3e4e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-info {
    padding: 16px 0 40px;
    margin: 0 44px;
}

.form-view {
    padding: 40px 60px;
    text-align: left;
}

.form-view__header {
    padding: 16px 0 24px 0;
    border-bottom: 1px solid #EDEDED;
}

.form-view__header .type {
    font-size: 15px;
    color: #3B82F1;
    font-weight: 500;
}

.form-view__header .tit {
    margin-top: 8px;
    font-size: 20px;
    line-height: 28px;
    color: var(--black);
    font-weight: 600;
}

.form-view__header .tit .chip-urgency {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.form-view__header .tit .chip-urgency img {
    width: 100%;
    height: auto;
}

.form-view__header .desc {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-view__header .desc li>div {
    display: inline-flex;
    align-items: center;
}

.form-view__header .desc li>div+div {
    margin-left: 20px;
}

.form-view__header .desc .ti {
    margin-right: 8px;
    padding: 0 8px;
    border: 1px solid #3A3A3A;
    border-radius: 100px;
    font-size: 12px;
    color: var(--grey-100);
    font-weight: 500;
    flex-shrink: 0;
}

.form-view__header .desc .tx {
    font-size: 15px;
    color: var(--grey-120);
    font-weight: 500;
}

.form-view__header .desc .path .ti,
.form-view__header .desc .path .tx {
    color: #FF6813;
    border-color: #FF6813;
}

.form-view__body {
    padding: 20px 0;
    /*border-top:1px solid #EDEDED;*/
}

.form-view__body+.form-view__body {
    border-top: 1px solid #ededed;
}

.form-view__body .text {
    padding: 12px 0;
    font-size: 15px;
    color: var(--grey-120);
    font-weight: 400;
    line-height: 24px;
}

.form-view__body .tit {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--grey-120);
    font-weight: 700;
}

.form-view__body .file-list {
    padding: 0;
    border: none;
    backgrond: #fff;
}

.form-view__body .file-list .file-item {
    padding: 0;
}


.form-view__body .file-list li:hover {
    background: none;
}

.form-view__body .file-list li a:hover {
    text-decoration: underline;
}

.form-view__body>.refer span {
    font-size: 15px;
    color: var(--grey-70);
    font-weight: 400;
}

.form-view__body>.refer+.refer {
    margin-top: 8px;
}

.form-view__body>.refer span+span::before {
    margin: 0 8px;
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 10px;
    background: #D9D9D9;
    vertical-align: middle;
}

.table-wrap table tbody tr.active {
    position: relative;
}

.table-wrap table tbody tr.active input,
select,
a {
    position: relative;
    z-index: 1;
}

.table-wrap table tbody tr.active:not(.con-view) td {
    background: var(--table-hover-bg);
}

.table-wrap table tbody tr.con-view td {
    display: none;
}

.table-wrap table tbody tr.con-view td.open {
    display: table-cell;
    padding: 0;
}

.table-wrap table tbody tr.con-view:hover {
    background: none;
}

.con-box .table-wrap {
    margin-top: -1px;
}

.title-group {
    margin: 40px 0 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.title-group h3 {
    margin-bottom: 0;
}

.main-container:has(.notify-wrap) {
    padding: 0;
}

.notify-wrap {
    /* margin:0 auto; */
    width: 500px;
}

.notify-wrap .delete-all {
    padding: 0 12px;
    width: 100%;
    height: 48px;
    background: #f8f8f8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.notify-wrap .delete-all .btn-delete {
    background: url(../../files/images/common/icon_delete.png) no-repeat left center / 20px auto;
    padding-left: 22px;
}

.notify-wrap .delete-all .btn-read {
    background: url(../../files/images/common/icon_readcheck.png) no-repeat left center / 20px auto;
    padding-left: 22px;
}

.notify-wrap .delete-all .right .all-check {
    font-size: 13px;
    color: var(--grey-80);
}

.notify-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F3F9FF;
}

.notify-list__item:has(.round-check label input[type="checkbox"]:checked) {
    background: #d5e9ff;
}

.notify-list__item a {
    padding: 20px 16px;
    display: flex;
    flex: 1;
    gap: 12px;
}

.notify-list__item a.delete {
    padding: 4px;
    margin: 16px 16px 0 0;
    width: 16px;
    height: 16px;
    flex: 0;
}

.notify-list__item a.delete:hover {
    background: #f8f8f8;
}

.notify-list__item .round-check {
    margin: 0 12px 0 0;
}

.notify-list__item .icon {
    width: 24px;
    height: 24px;
    background: url(../../files/images/common/icon_notify_on.png) no-repeat center center / 100% auto;
    flex-shrink: 0;
}

.notify-list__item .text {
    width: 100%;
}

.notify-list__item .ti {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--grey-110);
    line-height: 24px;
}

.notify-list__item.visited .ti {
    color: var(--grey-110);
}

.notify-list__item .tx {
    font-size: 15px;
    font-weight: 300;
    color: var(--grey-80);
    line-height: 22px;
}

.notify-list__item .tx b {
    font-weight: 600;
}

.notify-list__item .date {
    font-size: 12px;
    font-weight: 300;
    color: var(--grey-80);
}

.notify-list__item.visited {
    background: var(--white);
}

.notify-list__item.visited .icon {
    background-image: url(../../files/images/common/icon_notify_off.png);
}

.notify-error {
    padding-top: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.notify-error .icon {
    display: block;
    width: 48px;
    height: 48px;
    background: url(../../files/images/common/icon_notify_error.png) no-repeat center center / 100% auto;
}

.notify-error .ti {
    margin-top: 24px;
    font-size: 18px;
    font-weight: 600;
    color: var(--grey-120);
}

.notify-error .tx {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 300;
    color: var(--grey-80);
}

.ck.ck-editor__main>.ck-editor__editable {
    padding: 0 12px;
}

.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused),
.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content,
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content.ck-rounded-corners {
    border: 0;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content,
.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content.ck-rounded-corners {
    border-bottom: 1px solid #e2e3e5;
}

.ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable,
.ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
    border-radius: 0 0 8px 8px !important;
    overflow: hidden;
    border-color: #2B4DC3 !important;
    outline: 3px solid rgba(43, 77, 195, 0.1);
}

.notify-layer {
    position: fixed;
    /* top:0;
    bottom:0;
    left:0;
    right:0; */
    z-index: 999;
    height: 100vh;
}

.notify-layer.active {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.notify-layer .dimmed {
    background: rgba(0, 0, 0, .5);
    width: 100vw;
    height: 100vh;
}

.notify-layer .drawer {
    min-width: 500px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -999px;
    background: var(--white);
    height: 100vh;
    overflow-y: auto;
    transition: right ease .3s;

}

.notify-layer .drawer.active {
    right: 0;
}


body.dimmed {
    overflow: hidden;
    opacity: 1;
}

body #popup_dim {
    display: none;
}

body.dimmed #popup_dim {
    display: block;
    background: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9998;
}

.popup-modal {
    position: fixed;
    visibility: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9999;
    width: 80%;
    height: fit-content;
    max-height: 80%;
    background: #fff;
    padding-top: 32px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transform: scale(.9);
    transition: transform ease-in-out .2s;
    border-radius: 24px;
    overflow: hidden;
}

.popup-modal.on {
    visibility: visible;
    transform: unset;
}

.popup-modal>h3 {
    padding: 0 40px;
    margin-bottom: 32px
}

.popup-modal .content {
    padding: 0 40px;
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
}

.popup-modal .content.modal-content {
    margin-bottom: 0;
}

.popup-modal .content .top {
    margin-top: 32px;
}

.popup-modal .content .table-area__sort {}

.popup-modal .content .table-wrap {
    height: 100%;
}

.popup-modal .content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    height: fit-content;
}

.popup-modal .content::-webkit-scrollbar {
    display: block;
    width: 5px;
    height: 5px;
    background-color: #f0f0f0;
    border-radius: 5px;

}

.popup-modal .content::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #cfcfcf;
}

.popup-modal .result-list {
    width: 100%;
}

.popup-modal .bottom-fixed {
    width: 100%;
    background: #fff;
    /*box-shadow: 0 0 8px 0 rgba(0, 0, 0, .05);*/
}

.popup-modal .bottom-fixed .pagination {
    margin: 0;
    padding: 12px;
}

.popup-modal .result {
    padding: 24px 0;
    min-height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.result-list {
    margin-right: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    overflow-y: hidden;
}

.result-list li button {
    padding: 6px 8px;
    font-size: 14px;
    color: var(--grey-100);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f2f7ff;
    border-radius: 100px;
}

.result-list li button::after {
    content: '';
    background: url(../../files/images/common/icon_notify_delete.png) no-repeat center center / 10px auto;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    opacity: .6;
}

.result-list li button .slash {
    display: block;
    width: 1px;
    height: 12px;
    background: #adc1e1;
}

.popup-modal .close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 24px;
    right: 24px;
}

.popup-modal .close img {
    width: 24px;
    height: 24px;
}

.modal-btngroup {
    margin: 32px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.mw150 {
    width: 150px;
}

.mw606 {
    width: 606px;
}

.comment-wrap {
    padding: 32px 40px;
}

.comment-wrap .table-count {
    /*background:#f4f5f6;*/
    padding: 0 24px 8px 24px;
    border-radius: 8px;
    margin-left: -16px;
    margin-right: -16px;
    font-size: 15px;
}

.comment-list {
    margin-top: 16px;
}

.comment-list ul li {
    display: flex;
    gap: 16px;
    padding: 20px 16px 0px 16px;
}

.comment-list ul li:last-child {
    border: 0;
}

.comment-list ul li .circle {
    width: 44px;
    height: 44px;
    background: rgb(184 185 189 / 12%);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 600;
    color: #b8b9bd
}

.comment-list ul li.me .circle {
    background: rgba(8, 216, 50, .08);
    color: #08D832
}

.comment-list ul li .text {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #EEEFF1;
}

.comment-list ul li:last-child .text {
    border: none;
}

.comment-list ul li .text .left .name {
    display: flex;
    gap: 4px;
    padding-top: 4px;
}

.comment-list ul li .text .left .name p {
    font-size: 15px;
    font-weight: 600;
    color: var(--grey-120);
}

.comment-list ul li .text .left .name span {
    font-size: 14px;
    font-weight: 300;
    color: var(--grey-40);
}

.comment-list ul li .text .left .desc {
    font-size: 15px;
    font-weight: 300;
    color: var(--grey-100);
    margin: 8px 0 24px 0;
}

.comment-list ul li.edit .text .left .desc textarea {
    height: 100px;
    margin-bottom: 40px;
    padding: 10px 16px;
}

.comment-list ul li .text .right {
    display: none;
    position: absolute;
    top: -8px;
    right: 0;

}

.comment-list ul li:hover .text .right {
    display: none;
}

.comment-list ul li.me:hover .text .right {
    display: block;
}

.comment-list ul li.edit .text .right {
    display: block;
    top: auto;
    bottom: 24px;
}

.comment-writer {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.comment-writer textarea {
    padding: 10px 16px;
    height: 44px;
    border-radius: 8px;
    /*border: 1px solid #e2e3e5;*/
    border: 0;
    background: #f5f5f5;
    font-family: 'pretendard';
    font-size: 15px;
    color: var(--grey-110);
    font-weight: 400;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    transition: all ease-out .1s;
}

.comment-writer textarea::placeholder {
    font-weight: 400;
}

.comment-writer textarea:focus {
    height: 100px;
    overflow: auto;
    /*border: 1px solid #e2e3e5;*/
    border: 1px solid var(--grey-100);
    background: #fff;
    border-radius: 8px;

}

.comment-writer .btn--md {
    width: 80px;
    height: 44px;
    transition: all ease-out .1s;

}

.comment-writer textarea:focus~.btn--md {
    width: 80px;
    height: 100px;
}

.btn--sm.manual {
    background: #fff url(../../files/images/common/icon_download.png) no-repeat center right 6px / 12px auto;
    color: #425EED;
    border: 1px solid #6f84ef;
    padding-right: 20px
}


#fileuploadyn_div_CONTRACT {
    display: none;
}

.sub_section {
    display: flex;
}

.sub_section .left_section {
    flex: 1;
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    margin-left: 10px;
    border-radius: 6px;
}

.sub_section .left_section:first-child {
    margin-left: 0;
}

.sub_section .left_section .tit {
    background: #555;
    height: 40px;
    line-height: 38px;
    color: #fff;
    font-size: 16px;
    padding: 0 0 0 20px;
    position: relative;
    border-radius: 5px 5px 0 0;
}

.main-container:has(.member-wrap) {
    padding: 0;
}

.member-wrap {
    width: 1024px;
    height: calc(100vh - 64px);
    background: #fff;
    margin: 0 auto;
    margin-top: 48px;
    padding-top: 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.member-wrap .top {
    margin: 24px 0 0 40px;
    height: 40px
}

.member-wrap .top .web img {
    width: auto;
    height: 18px;
}

.member-wrap .top .mob {
    display: none;
}

.member-wrap .content {
    margin: 0 auto;
    width: 340px;
}

.member-wrap .title {
    margin-bottom: 32px;
    font-size: 24px;
    color: var(--grey-120);
    font-weight: 600;
}

.login-box {
    margin-bottom: 80px;
}

.login-box li {
    margin-bottom: 8px;
    position: relative;
}

.login-box li.checkbox {
    margin: 12px 0 32px 0;
    display: flex;
    justify-content: space-between;
}

.login-box li.checkbox label:hover {
    text-decoration: none;
}

.login-box .find-user {
    display: inline-flex;
    align-items: center;
}

.login-box .find-user div {
    display: flex;
    align-items: center;
}

.login-box .find-user div+div::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #ddd;
    margin: 0 8px;
}

.login-box .find-user a {
    font-size: 14px;
    color: var(--grey-100);
}

.login-box input[type="text"],
.login-box input[type="password"] {
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    width: 100%;
    height: 48px;
    padding: 0 32px 0 40px;
    box-sizing: border-box;
    font-family: 'pretendard';
    font-size: 15px;
    color: Var(--black);
    font-weight: 300;
}

.login-box input[type="text"].error,
.login-box input[type="password"].error {
    border-color: #f17e7e;
}

.login-box .code input {
    background: #fff url(../../files/images/common/icon_code.png) no-repeat center left 16px / 16px auto;
}

.login-box .id input {
    background: #fff url(../../files/images/common/icon_id.png) no-repeat center left 16px / 16px auto;
}

.login-box .password input {
    background: #fff url(../../files/images/common/icon_pw.png) no-repeat center left 16px / 16px auto;
}

.login-box input[type="text"]:focus,
.login-box input[type="password"]:focus {
    border-color: #2b4dc3;
    outline: 3px solid rgba(43, 77, 195, 0.1);
}

.login-box input::placeholder {
    font-size: 15px;
    color: var(--grey-50);
    font-weight: 400;
}



.login-box button:hover::after {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .03);
    position: absolute;
    top: 0;
    left: 0;
}

.login-box .error-message {
    font-size: 14px;
    color: #F54646;
    line-height: 140%;
    font-weight: 400;
}

.login-info {
    margin-top: 8px;
    padding: 16px 20px 16px 16px;
    background: #F8F8F8;
    border-radius: 8px;
}

.login-info .tit {
    margin: 0;
    padding-left: 20px;
    background: url(../../files/images/common/icon_info.png) no-repeat center left / 16px auto;
    font-size: 14px;
    line-height: 1;
    color: var(--grey-110);
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.login-info .tit i {
    width: 16px;
    height: 16px;
    background: url(../../files/images/common/icon_accordion.png) no-repeat right 0 center / 16px auto;
    transition: all .2s ease-out;
}

.login-info .tit.open {
    margin-bottom: 12px;
}

.login-info .tit.open i {
    transform: rotate(180deg);
}

.login-info dd {
    padding-left: 16px;
    font-size: 14px;
    color: var(--grey-80);
    font-weight: 300;
    line-height: 140%;
    position: relative;
}

.login-info dd.txt {
    display: none;
}

.login-info dd+dd {
    margin-top: 2px;
}

.login-info dd::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--grey-40);
    border-radius: 10px;
    margin: 7px 8px 0 4px;
    flex-shrink: 0;
    position: absolute;
    left: 0;
}

.member-wrap .bottom {
    font-size: 13px;
    color: var(--grey-50);
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
    margin-top: auto;
    height: 24px;
}

.login-tab {
    margin: 0 auto;
    width: 340px;
    display: flex;
    box-sizing: border-box;
    position: relative;
}

.login-tab li {
    flex: 1;
}

.login-tab li>.tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 48px;
    font-size: 16px;
    color: var(--grey-120);
    font-weight: 400;
    box-sizing: border-box;
    margin-bottom: 32px;
    border-bottom: 1px solid #efefef;
}

.login-tab li>.tab-item.active {
    font-weight: 700;
    border-bottom: 3px solid #2B4DC3;
    color: #2B4DC3;
}

.login-tab li>.tab-item+.content {
    display: none;
}

.login-tab li>.tab-item.active+.content {
    display: block;
    position: absolute;
    left: 0;
}

.join-btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.join-btn a.join {
    background: #e4ecff;
    color: #3785ff;
    border: none;
}

.join-btn a.join-info::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    opacity: .4;
    background: url(../../files/images/common/icon_info.png) no-repeat center center / 20px auto;
    margin-right: 8px;
}

.info-text {
    padding: 16px 16px 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.info-text .left {
    font-size: 13px;
    color: var(--grey-80);
    background: url(../../files/images/common/ico_mark01.png) no-repeat left top 5px / 12px auto;
    padding-left: 16px;
}

.info-text .left span {
    color: #F54646;
}

.write-table .table-wrap {
    width: 100%;
    left: 0;
    overflow: visible;
}

.write-table .table-wrap table {
    border-collapse: separate;
    border-spacing: 0;
}

.write-table .table-wrap table thead th,
.write-table .table-wrap table tbody td {
    border-right: 1px solid var(--table-th-line);
}

.write-table .table-wrap table thead th:last-child,
.write-table .table-wrap table tbody td:last-child {
    border-right: 0;
}

.write-table .table-wrap table thead th.required::after {
    margin-left: 4px;
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #F54646;
    transform: translateY(-8px);
}

.write-table .table-wrap table tbody tr:hover {
    background: #fff;
}

.write-table .table-wrap table tbody td .custom-select-visible,
.write-table .table-wrap table tbody td input {
    width: 100%;
    font-size: 14px;
}

.write-table .table-wrap table tbody td .custom-select-visible span {
    font-size: 14px;
    line-height: 1;
}

.write-table .table-wrap table tbody td .combo {
    display: flex;
    gap: 6px;
}

.write-table .table-wrap table tbody td .list-delete img {
    width: 20px;
    height: auto;
}

.write-table+.add-button a {
    width: 100%;
    position: relative;
    border-radius: 0;
    box-sizing: border-box;
    border: none;
    font-weight: 500;
}

.txt-a,
.txt-b,
.txt-c,
.txt-d,
.txt-e {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: #fff;
    margin: 0 3px;
    font-size: 13px;
    line-height: 1;
}

.table-wrap .tac th,
.table-wrap .tac td {
    text-align: center;
}

.table-wrap table thead th .txt-a {
    color: #ff583a;
    background: #ffe8e5;
}

.table-wrap table thead th .txt-b {
    color: #158af8;
    background: #deefff;
}

.table-wrap table thead th .txt-c {
    color: #ff8e0c;
    background: #ffead1;
}

.table-wrap table thead th .txt-d {
    color: #bc49ff;
    background: #f7e9ff;
}

.table-wrap table thead th .txt-e {
    color: #009688;
    background: #e0f7fa;
}

/* .dash-user .table-area .table-wrap {
    overflow: auto;
    width:100%;
}
.dash-user .table-area .table-wrap table {
    min-width:max-content;
} */

.calendar-header {
    margin: 0 40px;
    /* background:#E8F1FF; */
    padding: 24px 0;
    border-bottom: 1px solid #dee1e3;
    border-top: 1px solid #dee1e3;
}

.calendar-header .month {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-header .month a {
    font-size: 32px;
    font-weight: 800;
    color: #3B82F1;
    font-weight: 500;
}

.calendar-header .month .prev,
.calendar-header .month .next {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 15px;
    font-weight: 300;
    color: var(--grey-80)
}

.calendar-header .month .prev img,
.calendar-header .month .next img {
    width: 40px;
    height: 40px;
    border-radius: 100px;
}

.calendar-header .month .prev:hover img,
.calendar-header .month .next:hover img {
    opacity: .7
}

.help-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ico-help {
    width: 20px;
    height: 20px;
}

.ico-help img {
    width: 100%;
    height: auto;
}

.help-tooltip {
    padding: 12px 40px 12px 16px;
    width: 340px;
    box-sizing: border-box;
    border: 1px solid #dbdbdb;
    background: #fff;
    border-radius: 4px;
    position: absolute;
    top: -82px;
    left: calc(100% - 33px);
    z-index: 99;
    display: none;
}

.help-tooltip::after {
    content: '';
    display: block;
    width: 13px;
    height: 10px;
    background: url(../../files/images/common/tooltip.png) no-repeat center center / 100% auto;
    position: absolute;
    bottom: -10px;
    transform: rotate(180deg);
}

.help-tooltip ul li {
    font-family: "pretendard";
    font-size: 14px;
    font-weight: 300;
    line-height: 140%;
    color: var(--grey-90);
    display: flex;
    align-items: center;
    margin: 4px 0;
}

.help-tooltip ul li::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--grey-40);
    margin-right: 6px;
}

.help-tooltip ul li i {
    width: 14px;
    height: 14px;

}

.help-tooltip ul li i img {
    width: 100%;
}

.help-tooltip .close {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 8px;
    right: 10px;
}

.help-tooltip .close img {
    width: 100%;
}

.h3-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 12px;
}

.h3-group h3 {
    margin: 0;
}

.custom-select-wrap.active .custom-select-visible {
    border-color: #2B4DC3;
}

.custom-select-wrap.active .custom-select-visible span {
    color: #2B4DC3;
}

.member-box {
    width: 540px;
    margin: 0 auto;
    border: 1px solid #E5E5E5;
    padding: 80px;
    box-sizing: border-box;
    position: relative;
}

.member-box .title .img {
    margin-top: -20px;
    margin-bottom: -10px;
    display: flex;
    justify-content: flex-end;
}

.member-box .title .img img {
    width: auto;
    height: 80px;
}

.member-box .title {
    margin-bottom: 64px;
    position: relative;
}

.member-box .title p {
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 700;
    line-height: 120%;
    color: #2B4DC3
}

.member-box .title span {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    color: var(--grey-80);
}

.member-box .title span b {
    color: var(--grey-120);
}

.member-wrap dl+dl {
    margin-top: 40px;
}

.member-wrap dl>dt {
    font-size: 15px;
    font-weight: 500;
    color: var(--grey-120);
    margin: 16px 0 4px 0;
}

.member-wrap dl>dd>a+a {
    margin-top: 12px;
}

.member-wrap dl>dd input {
    margin-bottom: 8px;
}

.member-wrap dl>dd .row {
    display: flex;
    gap: 8px;
}

.member-wrap .timer {
    position: relative;
}

.member-wrap .timer input {
    padding-right: 60px;
}

.member-wrap .timer span {
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #F54646;
}

.member-wrap dl:nth-child(1) dd .mobile {
    background: url(../../files/images/common/icon_mobile_blue.png) no-repeat left 12px center / 24px auto;
}

.member-wrap dl:nth-child(2) dd .mobile {
    background: #f4f4f4 url(../../files/images/common/icon_mobile.png) no-repeat left 12px center / 24px auto;
}

.member-wrap dl:nth-child(2) dd .email {
    background: #f4f4f4 url(../../files/images/common/icon_email.png) no-repeat left 14px center / 24px auto;
}

.member-wrap dl dd .result-input {
    border: none;
    border-bottom: 1px solid #454545;
    border-radius: 0;
    background: #fff;
    padding: 0;
    font-size: 15px;
    font-weight: 400;
}

.member-wrap dl dd .result-input:focus {
    border-bottom: 1px solid #454545;
}

.find-dl .btn {
    margin-top: 40px;
}

.find-dl .btn a+a {
    margin-top: 12px;
}

.btn-main {
    height: 48px;
    display: flex;
    align-items: center;
    background: url(../../files/images/common/icon_b_nav01.png) no-repeat left center / 18px auto;
    padding-left: 24px;
    font-size: 15px;
    color: var(--grey-100)
}

.header .btn-back {
    height: 48px;
    display: flex;
    align-items: center;
    background: url(../../files/images/common/icon_back.png) no-repeat left -2px center / 18px auto;
    padding-left: 20px;
    font-size: 15px;
    color: var(--grey-100)
}

.terms input[type="checkbox"],
.round-check input[type="checkbox"] {
    display: none;
    appearance: none;
}

.terms label,
.round-check label {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    font-size: 17px;
    color: var(--grey-110);
    font-weight: 600;
    cursor: pointer;
}

.terms label::before,
.round-check label::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background: url(../../files/images/common/terms_checkbox_off.png) no-repeat center center / 100% auto;
}

.terms label:has(input[type="checkbox"]:checked)::before,
.round-check label:has(input[type="checkbox"]:checked)::before {
    background-image: url(../../files/images/common/terms_checkbox_on.png);
}

.terms label:hover,
.round-check label:hover {
    color: var(--grey-80);
}

.terms .all {
    padding-bottom: 24px;
    border-bottom: 1px solid #dfdfdf;
}

.terms .all p {
    margin-top: 8px;
    padding-left: 30px;
    font-size: 14px;
    font-weight: 300;
    color: var(--grey-60);
    line-height: 140%;
}

.terms ul {
    margin-top: 16px;
}

.terms ul li .choice {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.terms ul li .choice label {
    height: 36px;
    font-size: 15px;
    font-weight: 400;
}

.terms ul li .choice label span {
    /* color:#2B4DC3 */
    font-weight: 500;
}

.terms ul li .choice label::before {
    background: url(../../files/images/common/terms_checkbox_s_off.png) no-repeat center center / 16px auto;
}

.terms ul li .choice label:has(input[type="checkbox"]:checked)::before {
    background-image: url(../../files/images/common/terms_checkbox_s_on.png);
}

.terms ul li .choice i {
    cursor: pointer;
    font-size: 13px;
    font-weight: 300;
    color: #3B82F1;
}

.terms ul li .choice i:hover {
    opacity: .7;
}

.terms ul li .detail {
    margin: 8px 0 16px 0;
    padding: 20px 24px;
    background: #f8f8f8;
    height: 120px;
    overflow: auto;
    display: none;
}

.terms ul li .detail p {
    font-size: 14px;
    font-weight: 400;
    color: var(--grey-100);
    line-height: 140%;
}

.terms .btn {
    margin-top: 40px;
}

.terms .img {
    width: 100%;
    height: 181px;
    background: url(../../files/images/common/img_welcome.png) no-repeat right 30px bottom / 196px auto;
    margin-top: -30px;
    margin-bottom: -50px;
}

.join-step {
    margin: -4px -4px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 0;
    right: 0;
}

.join-step li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: #e5e5e5;
    font-size: 0px;
    font-weight: 200;
    color: #959595;
    cursor: pointer;
}

.join-step li.active {
    width: 20px;
    height: 20px;
    background: #2B4DC3;
    font-size: 12px;
    color: #fff;
    font-weight: 400;
}

.join-step li::before {
    content: '';
    font-size: 12px;
    font-weight: 400;
    color: #2B4DC3;
    min-width: max-content;
    position: absolute;
    top: -22px;
    /* display: none; */
    opacity: 0;
    transition: all .1s ease-out;
}

.join-step li:hover::before {
    display: block;
    opacity: 1;
    top: -26px;
}

.join-step li:nth-child(1)::before {
    content: '약관동의';
}

.join-step li:nth-child(2)::before {
    content: '개인정보등록';
}

.join-step li:nth-child(3)::before {
    content: '가입완료';
}


.loading-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    border-radius: 100%;
    background-color: #fff;
}

.loading-animation .circles {
    display: flex;
    gap: 5px;
}

.loading-animation .circles div {
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background: #000;
    animation: move-up-down 1s ease-out infinite;
}

.loading-animation .circles .circle_01 {
    background-color: #091540;
    animation-delay: .1s;
}

.loading-animation .circles .circle_02 {
    background-color: #3D518C;
    animation-delay: .2s;
}

.loading-animation .circles .circle_03 {
    background-color: #7692FF;
    animation-delay: .3s;
}

.loading-animation .circles .circle_04 {
    background-color: #ABD2FA;
    animation-delay: .4s;
}

.table-list:has(.notice-wrap) {
    margin: 0 auto;
    width: 1200px;
}

.notice-list {
    border-top: 1px solid #efefef;
}

.notice-list>li {
    border-bottom: 1px solid #efefef;
    position: relative;
}

.notice-list>li>a {
    display: block;
    padding: 32px 8px;
    box-sizing: border-box;
}

.notice-list .type {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notice-list .type .mark {
    padding: 3px 8px;
    background: #3B82F1;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.notice-list .type .text {
    padding: 3px 8px;
    background: #f0f1f1;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #888e91;
}

.notice-list>li>a:hover .tit {
    opacity: .6;
}

.notice-list>li>a:hover .desc {
    opacity: .7;
}

.notice-list>li>a:hover .info {
    opacity: .7;
}

.notice-list .tit {
    font-size: 20px;
    font-weight: 700;
    color: var(--grey-120);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notice-list .desc {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 400;
    color: var(--grey-70);
    line-height: 140%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notice-list .info {
    margin-top: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--grey-70);
    display: flex;
    align-items: center;
}

.notice-list .info span+span::before {
    content: '';
    margin: 0 12px;
    display: inline-block;
    width: 1px;
    height: 10px;
    background: #e1e1e1;
}

.notice-list .info .count {
    display: flex;
    align-items: center;
    color: #3B82F1;
}

.notice-list .info .count .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../../files/images/common/icon_eye.png) no-repeat left center / 100% auto;
    margin-right: 4px;
}

.notice-list .attach {
    position: absolute;
    top: 24px;
    right: 0;
}

.notice-list .attach button {
    margin-right: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #3B82F1;
}

.notice-list .attach button:hover {
    text-decoration: underline;
}

.notice-list .file-list {
    min-width: fit-content;
    max-width: 400px;
    border: 1px solid #e0e0e0;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    position: absolute;
    right: 0;
    z-index: 9;
    display: none;
    padding: 10px;
    border-radius: 5px;
}

.notice-list .file-list li a:hover {
    text-decoration: underline;
}

.notice-list .file-list li .capacity {
    flex-shrink: 0;
}

@keyframes move-up-down {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(0, -10px);
    }

    30% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}

.title-wrap {
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #646569;
    font-weight: 600;
}

.title-wrap .btn-group {
    display: flex;
    gap: 8px;
}

.manager-list table {
    border-top: 1px solid #E1E4EB;
}

.manager-list table thead th {
    padding: 0 20px;
    height: 32px;
    background: #fafafa;
    font-size: 13px;
    color: #729CFF;
    font-weight: 500;
    text-align: left;
}

.manager-list table tbody td {
    padding: 0 20px;
    height: 32px;
    background: #fff;
    border-bottom: 1px solid var(--table-td-line);
    font-size: 14px;
    color: var(--grey-110);
    font-weight: 400;
    text-align: left;
}

.notice-date {
    display: none;
}

.notice-date .checkbox {
    margin-left: 12px;
}

.write-checkbox {
    margin-left: 12px;
    ;
}

.form:has(.list-inputbox) {
    align-items: flex-start;
}

.list-inputbox {
    padding: 12px;
    min-width: 100px;
    width: 100%;
    min-height: 40px;
    border-radius: 4px;
    border: 1px solid #e2e3e5;
    font-size: 14px;
    color: var(--grey-110);
    font-weight: 400;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.list-inputbox .btn-group {
    flex-shrink: 0;
    align-self: flex-end;
}

.list-inputbox .result:has(.result-list li)+.btn-group {
    margin-top: 12px;
}

.list-inputbox:has(.placeholder) {
    padding: 12px;
    /* background:#f5f5f7; */
    color: var(--grey-80);
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

.list-inputbox .placeholder {
    color: var(--grey-50);
}

.con-view .file-list {
    background: #fff;
}

.attach-list__item {
    padding-left: 15px;
}




/* pc */
@media screen and (max-width:1500px) and (min-width:1401px) {
    /* 메인 */
    .dashboard {
        margin-top:0;
    }

    .dash-user {
        display:flex;
        flex-direction:column;
        margin-top:0;
        padding:24px 24px 0 24px;
    }
    .dash-user .contract-wrap {
        flex-direction: row;
    }
    
    .contract-wrap {
        flex-direction:column;
    }
    .contract-wrap .table-wrap {
        overflow-x: auto;
    }
    .contract-wrap .table-wrap table {
        width:1000px;
    }
    .contract-wrap .graph-wrap {
        max-width:100%;
    }

    .dash-user .search-box {
        flex-direction: column;
        position: relative;
    }

    .dash-user .search-box>div {
        flex-direction: column;
        width: 100%;
    }

    .dash-user .search-box .left .filter {
        padding-left: 48px;
    }

    .dash-user .search-box .left .filter+.search .combo-input {
        width: 100%;
    }

    .dash-user .combo-input {
        min-width: auto;
    }

    .dash-user .search-box .right {
        position: absolute;
        top: 12px;
        left: 12px;
        width: 40px;
        height: 40px;
    }

    .dash-user .search-box .right .btn--refresh {
        background: #fff;
        border: 1px solid #e2e3e5;
        border-radius: 8px;
        width: 100%;
        height: 100%;
        font-size: 0;
        gap: 0;
    }

    .dash-user .search-box .right {
        top:0;
        left:0;
    }

    .dash-user input[type="text"].search-input {
        width:100%;
    }

    /* .dashboard.dash-user {
        display: flex;
        flex-direction: column;
        margin-top: 0;
        padding: 24px 24px 0 24px;
    } */

    /* 콘텐츠 */
    .board-title {
        font-size: 20px;
    }

    .my-todo ul li {
        border-radius: 16px;
    }

    .my-todo ul li strong {
        font-size: 20px;
    }

    .all-todo ul li {
        border-radius: 16px;
    }

    .all-todo ul li div {
        justify-content: flex-start;
        align-items: flex-2start;
        text-align: left;
        flex-direction: column-reverse;
        gap: 5px;
    }

    .work-time .box {
        border-radius: 16px;

    }


    .table-list {
        padding: 32px 40px 0 40px;
    }

    .table-list h2 {
        margin-bottom: 12px;
        font-family: 'suite';
        font-size: 22px;
        color: var(--grey-120);
        font-weight: 500;
        line-height: 140%;
    }

    .monthly-work__list {
        width: 100%;
    }

    .monthly-work__list ul li {
        min-width: 0;
    }

    .sub_section .left_section .tit a {
        margin-left: 10px;
    }

    .btn-exmark {
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        line-height: 22px;
    }

    .btn-exmark .txt {
        flex: 1;
    }

    .btn-exmark::before {
        content: '';
        width: 16px;
        height: 16px;
        margin: 2px 4px 0 0;
        background: url(../../files/images/common/ico_mark01.png) no-repeat left center;
        background-size: 16px 16px;
    }

    .btn-exmark .ico-exmark__popup {
        display: none;
        width: max-content;
        background: #fff;
        border: 1px solid var(--table-line);
        padding: 4px 10px 6px 10px;
        border-radius: 5px;
        position: absolute;
        left: 50%;
        top: 22px;
        transform: translate(-50%);
        line-height: 22px;
        box-shadow: 1px 1px 5px rgba(69, 72, 86, 0.1);
    }

    .btn-exmark:hover .ico-exmark__popup {
        display: block;
        z-index: 40;
    }

}

/* Tablet */
@media screen and (max-width: 1400px) and (min-width:768px) {
        
        /* 메인 */
        .dashboard {
            display:flex;
            flex-direction:column;
            margin-top:0;
            padding:24px 24px 0 24px;
        }
        
        .d-board .search-box .right {
            top:0;
            left:0;
        }

        .contract-wrap {gap:24px;}

        

        /* 콘텐츠 */
        .main-container {
            margin-top: 0;
        }

        .main-container:has(.write) {
            padding-left: 16px;
            padding-right: 16px;
        }

        .board__con {
            padding: 24px 16px;
        }

        .board-title {
            font-size: 20px;
        }

        .my-todo {
            margin-right: 24px;
        }

        .my-todo ul {
            flex-direction: column;
        }

        .all-todo {
            padding: 0 0 0 24px;
        }

        .all-todo ul {
            flex-wrap: wrap;
        }

        .all-todo ul li {
            flex: 40% !important;
        }

        .work-time {
            margin-left: 24px;
        }

        .work-time .box {
            height: 444px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .monthly-work>div {
            padding: 24px 16px 40px 16px;
        }

        .monthly-work__list {
            overflow-x: scroll;
        }


        .table-list {
            padding: 24px 16px 0px 16px;
        }

        .view {
            margin: 0 auto;
        }

        .write {
            margin: 0 auto;
            width: auto;
        }

        .form-list__item .form .urgency-area .tooltip {
            top: -68px;
            right: 0px;
            transform-origin: right bottom;
        }

        .form-list__item .form .urgency-area .tooltip::before {
            top: auto;
            bottom: -3px;
            left: auto;
            right: 50px;
            transform: rotate(-45deg);
        }

        .sub_section {
            display: flex;
        }

        .sub_section .left_section {
            flex: 1;
            border: 1px solid #bdbdbd;
            box-sizing: border-box;
            margin-left: 10px;
            border-radius: 6px;
        }

        .sub_section .left_section:first-child {
            margin-left: 0;
        }

        .sub_section .left_section .tit {
            background: #555;
            height: 40px;
            line-height: 38px;
            color: #fff;
            font-size: 16px;
            padding: 0 0 0 20px;
            position: relative;
            border-radius: 5px 5px 0 0;
        }

        .sub_section .left_section .tit a {
            margin-left: 10px;
        }

        /*         .btn-exmark {font-size:14px; display:inline-flex; align-items: center; line-height:22px;} */
        .btn-exmark .txt {
            flex: 1;
        }

        .btn-exmark::before {
            content: '';
            width: 16px;
            height: 16px;
            margin: 2px 4px 0 0;
            background: url(../../files/images/common/ico_mark01.png) no-repeat left center;
            background-size: 16px 16px;
        }

        .btn-exmark .ico-exmark__popup {
            display: none;
            width: max-content;
            background: #fff;
            border: 1px solid var(--table-line);
            padding: 4px 10px 6px 10px;
            border-radius: 5px;
            position: absolute;
            left: 50%;
            top: 22px;
            transform: translate(-50%);
            line-height: 22px;
            box-shadow: 1px 1px 5px rgba(69, 72, 86, 0.1);
        }

        .btn-exmark:hover .ico-exmark__popup {
            display: block;
            z-index: 40;
        }

        .board .board__search {
            margin: 24px 16px;
        }

        .board .board__search>.custom-select-wrap {
            /*  width:100%; */
        }

        .board .board__search .combo-input>div:last-child {
            flex: 1;
            min-width: 100px;
        }

        .con-box__write .form-list__item .form .box_line {
            width: 100%;
        }


        .search-box {
            flex-direction: column;
            position: relative;

        }

        .search-box>div {
            flex-direction: column;
            width: 100%;
        }

        .search-box .left .filter {
            padding-left: 48px;
        }

        .search-box .left .filter+.search .combo-input {
            width: 100%;
        }

        .combo-input {
            min-width: auto;
        }

        .search-box .right {
            position: absolute;
            top: 12px;
            left: 12px;
            width: 40px;
            height: 40px;
        }

        .search-box .right .btn--refresh {
            background: #fff;
            border: 1px solid #e2e3e5;
            border-radius: 8px;
            width: 100%;
            height: 100%;
            font-size: 0;
            gap: 0;
        }

        .calendar-header {
            margin: 0 16px;
        }

        .member-wrap {
            width: 100%;
            margin-top: 0;
        }
}

/* Mobile */
@media screen and (max-width:767px) {
            /* 메인 */
            .dashboard {
                display:flex;
                flex-direction:column;
                gap:12px;
                margin-top:0;
                padding:20px 0 0 0;
            }
            .d-board {
                padding:24px;
                overflow:hidden;
                /* box-shadow:0 0 16px 0 rgba(0, 0, 0, 8%); */
                border-radius:20px;
            }

            .d-board .d-section + .d-section {
                padding-top:24px;
            }

            .d-board .title {
                font-size:20px;
            }

            .d-board .select2-container .select2-selection--single {
                height:40px;
            }
            .d-board .select2-container--default .select2-selection--single .select2-selection__arrow {
                height:38px;
            }
            .d-board .filter input[type="text"].multidate {
                height:40px;
            }
            
            .calc-wrap .calc-box {
                padding:24px;
            }
            .calc-wrap .calc-box ul li {
                flex-direction:column;
                align-items:flex-start;
                gap:4px;
            }
            .calc-wrap .calc-box ul li:last-child {
                padding-top:24px;
            }
            .calc-wrap .calc-box .price {
                align-self:flex-end;
                gap:0;
            }
            .calc-wrap .calc-box .price span:first-child:before,
            .calc-wrap .calc-box .price span:last-child:before {
                font-size:12px;
            }

            .pay-box {
                flex-direction:column;
            }
            
            .tab-wrap .tab-nav {
                margin-top:8px;
                justify-content:flex-start;
                position:static;
            }
            .tab-wrap .tab-nav li a {
                padding:12px 8px;
            }
            .tab-wrap .tab-nav li a span {
                font-size:14px;
            }
            .tab-wrap .tab-con {
                margin-top:0;
            }

            .titab-wrap .tab-nav {
                gap:24px;
            }
            .titab-wrap .tab-nav a span {
                font-size:20px;
            }

            .graph-wrap {
                gap:32px;
            }
            .graph-wrap.donut {
                flex-direction:column;
                padding:0;
            }
            .graph-wrap .donut-area {
                width:80%;
            }
            .graph-wrap .donut-area .num {
                gap:4px;
            }
            .graph-wrap.donut .category {
                justify-content:center;
                flex-direction:row;
                flex-wrap:wrap;
                gap:8px 16px;
            }

            .tab-con .filter-wrap {
                position:static;
                flex-direction:column;
            }

            .noti-list {
                margin-top:8px;
            }
            .noti-list ul li a {
                height:auto;
                padding:16px 0;
                flex-direction:column;
                align-items:flex-start;
                gap:4px;
            }
            .noti-list .tit {
                width:100%;
            }
            .noti-list .tit .badge {
                padding:2px 8px;
            }

            .d-board .count-group {
                margin-top:16px;
                position:static;
                flex-direction:column;
            }
            .d-board .count-group ul li {
                flex:1;
                flex-direction:column;
                gap:8px;
                border-radius:12px;
                padding:12px 0;
            }
            .d-board .count-group ul li .txt::before {
                display:none;
            }
            .d-board .count-group .btn {
                border-radius:12px;
            }
            .d-board .count-group .btn span {
                font-size:16px;
                font-weight:700;
            }
            .d-board .count-group .btn span::before {
                width:13px;
                height:13px;
            }

            .d-board .search-box {
                margin-top:32px;
                width:100%;
                left:0;
            }
            .d-board .search-box .left .filter>div {
                padding:0 16px 0 46px;
            }
            .d-board .search-box .left .filter::before {
                background:linear-gradient(270deg, rgba(244, 246, 249, 0), #fff 15%);
                left:-8px;
                height:40px;
            }
            .d-board .search-box .left .filter::after {
                background:linear-gradient(270deg, #fff 10%, rgba(244, 246, 249, 0));
                height:40px;
            }
            .d-board .search-box .right {
                top:0;
                padding:0;
            }
            .d-board .search-box .right a {
                width:40px;
                height:40px;
            }
            .d-board .search-box .left .search {
                padding:0;
            }

            .d-board .table-area {
                overflow:hidden;
            }
            .d-board .table-wrap:not(.responsive-table) {
                position:static;
                width:100%;
            }
            
            .footer {
                padding:32px 24px 56px 24px;
                flex-direction:column;
                align-items:flex-start;
                gap:16px;
            }
            .footer .foot-link a {
                font-size:14px;
            }
            .footer .foot-link a + a {
                margin-left:16px;
            }
            .footer .foot-info {
                display:inline-flex;
                flex-direction:column;
                align-items:flex-start;
                gap:4px;
            }
            .footer .foot-info span {
                font-size:14px;
            }
            .footer .foot-info span + span::before {
                display:none;
            }
            
            .tooltip .tip-box {
                max-width:200px;
            }

            .contract-wrap {
                flex-direction:column;
                gap:32px;
            }
            .contract-wrap .graph-wrap {
                background:none;
            }
            .graph-wrap .donut-area {
                width:auto;
            }




            /* 콘텐츠 */
            .board {
                width: 100vw;
                position: relative;
                left: calc(-50vw + 50%);
            }

            .board .board__search {
                width: 100%;
                margin: 8px 0 20px 0;
                padding: 0 12px;
                gap: 6px;
                flex-direction: column;
                align-items: flex-start;
            }

            .board .board__search>.custom-select-wrap {
                width: 100%;
            }

            .board .board__search .combo-input>div:nth-child(1) {
                width: 80px;
            }

            .board .board__search .combo-input>div:nth-child(2) {
                width: 100px;
            }

            .board .board__search .combo-input>div:last-child {
                flex: 1;
                min-width: 100px;
            }

            .board__search .btn-group {
                width: 100%;
            }

            .board__search .btn-group>a {
                width: calc(100% - 40px);
            }

            .mw150 {
                width: unset;
            }

            .mw606 {
                width: unset;
            }

            .board-title {
                margin-top: 24px;
                font-size: 18px;
            }

            .board__con {
                padding: 0 12px 32px 12px;
                flex-direction: column;
            }

            .my-todo ul {
                gap: 6px;
            }

            .my-todo ul li {
                padding: 24px 20px 16px 20px;
                border-radius: 20px;
                height: 110px;
            }

            .my-todo ul li.blue-card {
                background: #2B4DC3 url(../../files/images/common/icon_bd_01.png) no-repeat top 16px left 18px / 20px auto;
            }

            .my-todo ul li.sky-card {
                background: #42599E url(../../files/images/common/icon_bd_02.png) no-repeat top 16px left 18px / 20px auto;
            }

            .my-todo ul li.green-card {
                background: #527BF6 url(../../files/images/common/icon_bd_03.png) no-repeat top 16px left 18px / 20px auto;
            }

            .my-todo ul li div.new::after {
                top: 1px;
                right: -7px;
            }

            .my-todo ul li strong {
                font-size: 20px;
            }

            .my-todo ul li p {
                margin-top: 2px;
                font-size: 15px;
            }

            .all-todo {
                padding: 0;
                border: none;
            }

            .all-todo ul {
                flex-wrap: wrap;
                gap: 6px;
            }

            .all-todo ul li {
                padding: 0;
                background-image: none !important;
                height: 44px;
                border-radius: 12px;
                flex: 1 0 calc((100% - 12px) / 3);
            }

            .all-todo ul li div {
                justify-content: center;
                align-items: center;
                gap: 4px;
            }

            .all-todo ul li p {
                font-size: 15px;
            }

            .all-todo ul li strong {
                font-size: 16px;
                color: #0666FF;
            }

            .all-todo ul li strong span {
                display: none;
            }

            .work-time {
                margin: 0;
            }

            .work-time .box {
                height: auto;
                padding: 20px 0 16px 0;
            }

            .work-time .box .time {
                margin-bottom: 20px;
                font-size: 22px;
            }

            .monthly-work>div {
                padding: 0;
            }

            .monthly-work .board-title {
                margin-left: 16px;
            }

            .monthly-work__list {
                overflow: scroll;
                scrollbar-width: none;
            }

            .monthly-work__list ul {
                padding: 0 12px 24px 12px;
            }

            .combo-input {
                width: 100%;
            }

            .table-list {
                padding: 24px 0 0 0;
            }

            .table-list h2 {
                margin: 40px 0 12px 4px;
                font-size: 22px;
            }

            .search-box {
                flex-direction: column;
                align-items: flex-start;
                border-radius: 0;
                /* padding:12px 20px 6px 20px; */
                padding: 16px 0 16px 0;
                width: 100vw;
                position: relative;
                left: calc(-50vw + 50%);
            }

            .search-box .custom-select-visible {
                width: 100% !important;
                min-width: auto;
                border-radius: 100px;
                height: 32px;
            }

            .search-box .combo-input .custom-select-visible {
                height: 40px;
            }

            .search-box .filter .custom-select-wrap {
                min-width: fit-content;
                width: auto;
            }

            .search-box .filter .custom-select-visible {
                border-radius: 8px;
                height: 32px;
                width: fit-content !important;
            }

            .search-box .filter .custom-select-visible.selected {
                border-color: #222;
                /* background:#222; */
            }

            .search-box .filter .custom-select-visible.selected span {
                /* color:#fff; */
            }

            .search-box .custom-select-visible span {
                overflow: visible;
                text-overflow: initial;
                white-space: wrap;
            }

            .search-box .left {
                flex-direction: column;
                width: 100%;
                position: relative;
            }

            .search-box .left .filter {}

            .search-box .left .filter>div {
                overflow: scroll;
                padding: 0 16px 0 52px;
                gap: 6px;
                scrollbar-width: none;
                flex-wrap: no-wrap;
            }

            .search-box .left .filter::before {
                content: '';
                display: block;
                width: 54px;
                height: 36px;
                background: linear-gradient(270deg, rgba(244, 246, 249, 0), #f1f3f5 15%);
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
            }

            .search-box .left .filter::after {
                content: '';
                display: block;
                width: 20px;
                height: 36px;
                background: linear-gradient(270deg, #f1f3f5 10%, rgba(244, 246, 249, 0));
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
            }

            .search-box .left .search {
                display: flex;
                gap: 6px;
                padding: 0 16px;
            }

            .search-box .left .search a {
                min-width: 40px;
                padding: 0;
                font-size: 0;
                background: #101010 url(../../files/images/common/icon_search.png) no-repeat center center / 24px auto;
                border-radius: 8px;
            }

            .search-box .right {
                padding: 0 16px 0 14px;
                position: absolute;
                top: 16px;
                left: 0px;
            }

            .search-box .right a {
                padding: 0;
                height: 40px;
                /* font-size:13px; */
                font-size: 0;
                background: #fff;
                border-radius: 8px;
                border: 1px solid #dbdbdb;
                min-width: 32px;
                height: 32px;
                gap: 0;
            }

            .search-box .right a .icon-refresh {
                margin: 0;
                background-size: 12px;
            }

            .search-box .btn-group a {
                width: 100%;
            }

            .table-area {
                margin-top: 24px;
            }

            .table-area__sort {
                flex-direction: column;
                gap: 16px;
            }

            .table-area__sort .sort-group {
                align-self: flex-start;
            }

            .table-area__sort .btn-group {
                align-self: flex-end;
            }

            .sort-select {
                display: none;
            }

            .table-count {
                padding: 0;
                margin-right: 8px;
            }

            .con-box .con-box__view .table-wrap {
                left: 0;
                overflow: auto;
                width: auto;
            }

            .con-box__write {
                padding: 24px 16px;
            }

            .con-box__write .form-list__item .form .box_line {
                width: 100%;
            }

            .con-box__text-view {
                padding: 16px 16px 32px 16px;
            }

            .con-box__text-view .form-list__item {
                flex-direction: row;
            }

            .con-box__text-view .form-list__item .form {
                width: 100%;
            }

            .form-list__item {
                flex-direction: column;
                gap: 0;
            }

            .form-list__item+.form-list__item {}

            .form-list__item .form .urgency-area .tooltip {
                display: none;
            }

            .form-list__item .form .box_line {
                width: 100%;
            }

            .form-list__item .form.row-column {
                flex-direction: column;
                align-items: start;
            }

            .form-list__item .form.row-column input[type="text"].datepicker,
            .form-list__item .form.row-column input[type="text"].multidate {
                min-width: unset;
                flex-grow: 1;
            }

            .form-list__item .tit {
                height: 32px;
                font-weight: 600;
            }

            .form-list__item .form.input-group {
                flex-direction: column;
            }

            .form-list__item .form .multidate {
                width: 100%;
            }

            .form-list__item .form.input-group>.label-input {
                width: 100%;
            }

            .form-view {
                padding: 16px;
            }

            .form-view__header .desc {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
            }

            .form-view__header .desc li {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }

            .form-view__header .desc li>div+div {
                margin: 0;
            }

            .form-title {
                margin: 0 18px;
                padding: 24px 0 16px 0;
                font-size: 16px;
                font-weight: 600;
            }

            .form-info {
                margin: 0 18px;
                padding: 16px 0 24px 0;
            }


            .view {
                /* padding-top: 24px; */
                width: 100%;
            }

            .view:has(.con-box__text-view) {
                width: auto;
            }

            .write {
                /* padding-top: 24px; */
                width: 100%;
            }

            .con-view .con-box__write {
                /* border-top: 1px solid var(--table-td-line); */
            }

            .sub_section {
                display: flex;
            }

            .sub_section .left_section {
                flex: 1;
                border: 1px solid #bdbdbd;
                box-sizing: border-box;
                margin-left: 10px;
                border-radius: 6px;
            }

            .sub_section .left_section:first-child {
                margin-left: 0;
            }

            .sub_section .left_section .tit {
                background: #555;
                height: 40px;
                line-height: 38px;
                color: #fff;
                font-size: 16px;
                padding: 0 0 0 20px;
                position: relative;
                border-radius: 5px 5px 0 0;
            }

            .sub_section .left_section .tit a {
                margin-left: 10px;
            }


            /* .table-wrap table tbody tr.con-view td {border-top:1px solid #77777E;} */
            .table-wrap table tbody tr.active:not(.con-view)::after {
                content: none;
            }

            .table-wrap table tbody tr.active:not(.con-view) td {
                background: var(--white);
            }

            .table-wrap table tbody tr.active:not(.con-view) td:has(.checkbox) {
                background: #fafafa;
            }

            .notify-wrap {
                width: 100%;
                ;
            }

            .notify-layer .drawer {
                min-width: auto;
                width: 100%;
            }

            .popup-modal {
                top: 100%;
                right: 0;
                bottom: 0;
                left: 0;
                width: 100vw !important;
                max-height: 100vh;
                height: 100vh;
                height: -moz-available;
                height: -webkit-fill-available;
                height: fill-available;
                border-radius: 0;
                box-sizing: border-box;
                transition: all ease .3s;
                transform: translate(0);
                /* overflow:hidden; */
                padding-top: 0;
            }

            .popup-modal.on {
                top: 0;
                transform: translate(0);
            }

            .popup-modal>h3 {
                padding: 16px;
                margin-bottom: 0;
            }

            .popup-modal .content {
                padding: 0 16px 16px 16px;
                height: 100%;
                overflow-x: hidden;
            }

            .popup-modal .result {
                padding: 12px 16px;
                min-height: 72px;
                flex-direction: column;
            }

            .popup-modal .result-list {
                gap: 6px 8px;
                height: 100%;
                width: 100%;
            }

            .popup-modal .result-list li button {
                font-size: 13px;
                gap: 2px;
                text-align: left;
            }

            .popup-modal .result-list li button::after {
                width: 16px;
                height: 16px;
                background-size: 16px auto;
            }

            .popup-modal .close {
                top: 16px;
                right: 12px;
            }

            .member-wrap {
                width: 100vw;
                margin-top: 0;
                padding: 0;
            }

            .member-wrap .title {
                margin-bottom: 24px;
                font-size: 20px;
            }

            .member-wrap .top {
                margin: 24px auto 56px 0;
            }

            .member-wrap .top .web {
                display: none;
            }

            .member-wrap .top .mob {
                display: block;
            }

            .member-wrap .top .mob img {
                width: 103px;
                height: auto;
            }

            .member-wrap .content {
                width: 100%;
            }

            .login-box li.checkbox {
                margin: 16px 0 24px 0;
            }

            .member-wrap .bottom {
                margin: 16px 0;
                margin-top: auto;
            }

            .btn--sm.manual {
                min-width: auto;
                padding-right: 20px;
            }

            .btn--sm.manual p {
                display: none;
            }


            .comment-wrap {
                padding: 16px 8px;
            }

            .comment-wrap .table-count {
                margin: 0;
                padding: 0px 12px 8px 12px;
            }

            .comment-list {
                margin-top: 0;
            }

            .comment-list ul li {
                padding: 16px 8px 0px 8px;
            }

            .comment-list ul li .circle {
                flex-shrink: 0;
            }

            .comment-list ul li .text .left .desc {
                margin: 8px 0 8px 0;
            }

            .comment-list ul li .text .left .name p {
                font-size: 14px;
            }

            .comment-list ul li .text .left .name span {
                font-size: 13px;
            }

            .comment-list ul li.edit .text .left .desc textarea {
                margin-bottom: 0;
            }

            .comment-list ul li .text .right {
                position: static;
                display: block;
            }

            .comment-list ul li.me:hover {
                background: #fff;
            }

            .comment-list ul li.me .text .right {
                margin-bottom: 24px;
                position: static;
            }

            .comment-writer {
                gap: 6px;
                margin: 24px 8px 8px 8px;
            }

            .btn_copyrighter+.checkbox {
                flex-shrink: 0;
            }

            .table-top .right {
                font-size: 13px;
            }

            .write-table .table-wrap {
                overflow-x: scroll;
            }

            .calendar-header {
                margin: 0 -12px;
                padding: 24px 12px;
            }

            .calendar-header .month a {
                font-size: 18px;
                font-weight: 700;
            }

            .calendar-header .month .prev,
            .calendar-header .month .next {
                gap: 8px;
                font-size: 13px;
                font-weight: 400;
            }

            .calendar-header .month .prev img,
            .calendar-header .month .next img {
                width: 24px;
                height: 24px;
            }

            .calendar-header .month .prev:hover img,
            .calendar-header .month .next:hover img {
                opacity: 1;
            }

            .help-tooltip {
                top: -85px;
                left: 0;
            }

            .help-tooltip::after {
                left: 139px;
            }

            .login-tab {
                width: 100vw;
            }

            .login-tab li>a+.content {
                padding: 0 16px 0 16px;
                box-sizing: border-box;
            }

            .member-box {
                width: 100%;
                padding: 40px 16px 20px 16px;
                border: none;
                border-top: 1px solid #ebebeb;
            }

            .member-box .title {
                margin-bottom: 40px;
            }

            .member-box .title.complete {
                text-align: center;
            }

            .member-box .title p {
                font-size: 28px;
                margin-bottom: 8px;
            }

            .member-box .title span {
                font-size: 14px;
            }

            .member-box>.title .img {
                margin-top: -10px;
                margin-bottom: 24px;
                margin-right: 0;
                display: flex;
                justify-content: center;
            }

            .member-box>.title .img img {
                width: auto;
                height: 50px;
            }

            .member-wrap dl+dl {
                margin-top: 40px;
            }

            .member-wrap dl>dt {
                font-size: 15px;
                font-weight: 500;
                margin-bottom: 8px;
            }

            .member-wrap dl .row a {
                height: 40px;
            }

            .join-step {
                margin-right: 0;
            }

            .terms .img {
                width: 100%;
                height: 181px;
                background: url(../../files/images/common/img_welcome.png) no-repeat center bottom / 170px auto;
                margin-top: -30px;
                margin-bottom: -50px;
            }

            .popup-modal.loading {
                top: 45%;
                left: 50%;
                transform: translateX(-50%);
            }

            .table-list:has(.notice-wrap) {
                width: 100%;
            }

            .notice-list>li>a {
                padding: 24px 0;
            }

            .notice-list .type .mark,
            .notice-list .type .text {
                padding: 2px 8px;
                font-size: 12px;
            }

            .notice-list .tit {
                font-size: 18px;
            }

            .notice-list .attach button {
                margin-right: 0;
            }

            .notice-list .file-list {
                max-width: calc(100vw - 48px);
                min-width: 50%;
                text-align: right;
                padding: 10px;
                border-radius: 5px;
            }

            .form-list .divider {
                height: 32px;
            }

            .manager-list table thead th,
            .manager-list table tbody td {
                padding: 0 8px;
            }

            .list-inputbox {
                flex-direction: column;
            }

            .result-list li {}

            .result-list li button {
                padding: 5px 32px 5px 8px;
                font-size: 14px;
                flex-wrap: wrap;
                gap: 4px;
                position: relative;
                border-radius: 8px;
            }

            .result-list li button::after {
                position: absolute;
                right: 6px;
                top: 50%;
                transform: translateY(-50%);
                width: 18px;
                height: 18px;
                background-size: 12px;
            }

            .list-inputbox .result-list {
                margin-right: 0
            }

            .list-inputbox:has(.placeholder) {
                flex-direction: row;
            }

            .write-checkbox {
                gap: 4px;
                flex-shrink: 0;
            }

            .notice-date {
                width: 100%
            }

            .notice-date .multidate {
                width: calc(100% - 64px) !important;
            }

            .notice-date .checkbox {
                margin-top: 8px;
                margin-left: 0;
            }


}