/* Layout */
.container { width: auto; margin:0 auto; padding: 0 2rem; max-width: 1400px; }
.container.container-full { width:auto; }
.container.container-large { max-width:1024px; }
.container.container-middle { max-width:768px; }
.container.container-small { max-width:500px; }
.cke_notifications_area { display:none !important; }



/* #wrapper { display: flex; flex-direction: column; height: 100dvh; }
#mainBody { display: flex; height: 100%; }
#leftMenu { height: 100%; flex-shrink: 0; background: linear-gradient(to bottom, #fff, #000); }
#contentWrap { display: flex; flex-direction: column; flex: 1 1 auto; }
#contentHeader { background-color: #f0f; }
#contentBody { flex: 1 0 0; height: 100%; overflow: auto; padding: 3rem 0 12rem; } */
#mainBody { min-height: 65vh; }
#wrapper { position: relative; padding: calc(var(--main-banner-height) + var(--main-header-height)) 0 0 var(--left-menu-width); }
#contentWrap {  }
#contentBody { padding: 3.4rem 0 12rem; }
#contentBody.main { background-color: #f2f3f5; }
/* #contentBody.main .container { margin: 0; padding: 0 2%; } */
#sub { padding-bottom: 5rem; }
@media screen and (max-width:1440px) {
}
@media screen and (max-width:1280px) {
}
@media screen and (max-width:1024px) {
    #sub { padding-bottom: 10rem; }
}
@media screen and (max-width:768px) {
}
@media screen and (max-width:640px) {
}

/* sweet alert */
.swal2-container { z-index: 10000 !important; }
.swal2-popup { font-size: 1.4rem; }

#loading { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.7); z-index:99999; width:100%; height:100%; }
#loading .box { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); }
#loading .box .loader,
#loading .box .loader:after { border-radius:50%; width:10rem; height:10rem; }
#loading .box .loader {
    border-top:1rem solid rgba(255, 255, 255, 0.2);
    border-right:1rem solid rgba(255, 255, 255, 0.2);
    border-bottom:1rem solid rgba(255, 255, 255, 0.2);
    border-left:1rem solid #62ac9d;
    -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation:loader 1s infinite linear; animation:loader 1s infinite linear;
}

#dataResultList { position:relative; }
#dataResultList:not(:has(.data-list-wrap)) { min-height:20rem; background-color: #f7f7f7; }
#dataResultList .data-list-wrap { position: relative; }
.list_loading { display:block; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(255, 255, 255, 0.3); z-index:99; width:100%; height:100%; }
.list_loading  .box { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); aspect-ratio: 1 / 1; height: 10rem; max-height: 50%; }
.list_loading  .box .loader,
.list_loading  .box .loader:after { border-radius:50%; width:100%; height:100%; }
.list_loading  .box .loader {
    border-top:1rem solid rgba(255, 255, 255, 0.2);
    border-right:1rem solid rgba(255, 255, 255, 0.2);
    border-bottom:1rem solid rgba(255, 255, 255, 0.2);
    border-left:1rem solid #62ac9d;
    -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation:loader 1s infinite linear; animation:loader 1s infinite linear;
}

@-webkit-keyframes loader {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes loader {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}


.inline768 { display: none; }
.block768 { display: none; }
@media screen and (max-width:1440px) {
    .none1400 { display:none !important; }
}
@media screen and (max-width:1280px) {
    .none1280 { display:none !important; }
}
@media screen and (max-width:1024px) {
    html { font-size:9px; }
    .none1024 { display:none !important; }
}
@media screen and (max-width:768px) {
    .none768 { display:none !important; }
    .inline768 { display: inline !important; }
    .block768 { display: block !important; }
    .show768 { display: block !important; }
}
@media screen and (max-width:640px) {
    .none640 { display:none !important; }
}


/* --- dashboard 시작 --- */
#dashboard {  }
#dashboard article .article-title { margin-bottom: 2.5rem; }
#dashboard article .article-title h3 { font-size: 1.8rem; font-weight: 700; color: #373737; letter-spacing: -.025em; }
#dashboard article .article-title h3 > b { color: var(--main-color); }





/* profile */
#dashboard .profile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem 3rem; margin: 0 0 .8rem; letter-spacing: -0.01em; }

#dashboard .profile .greeting p { font-size: 2rem; font-weight: 500; }
#dashboard .profile .greeting p > b { font-weight: 700; }

#dashboard .profile .greeting-mobile { display: none; }

#dashboard .profile .status { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.6rem; }
#dashboard .profile .status .employee-status { display: flex; align-items: center; column-gap: .5rem; }
#dashboard .profile .status .employee-status > span { display: block; font-size: 1.6rem; font-weight: 700; color: #373737; }
#dashboard .profile .status .employee-status > strong { font-family: 'Montserrat'; display: block; font-size: 1.8rem; font-weight: 700; color: var(--main-color); padding: 1rem 1.5rem; background-color: #fff; border: 1px solid #d5d5d5; border-radius: .5rem; }
#dashboard .profile .status .vacation-status { display: flex; align-items: center; cursor: pointer; }
#dashboard .profile .status .vacation-status > span { display: block; font-size: 1.6rem; font-weight: 700; color: #373737; }
#dashboard .profile .status .vacation-status .vacation-status-bar { position: relative; width: 10rem; height: 1rem; background-color: #cdd4e5; margin-left: .8rem; border-radius: 1000px; overflow: hidden; }
#dashboard .profile .status .vacation-status .vacation-status-bar::before { content: ''; position: absolute; top: 0; left: 0; display: block; width: calc((var(--count) / var(--total)) * 100 * 1%); height: 100%; background-color: var(--main-color); }
#dashboard .profile .status .vacation-status .vacation-status-count { display: block; font-size: 1.4rem; font-weight: 500; margin-left: .5rem; }

@media screen and (max-width: 1024px) {
    #dashboard .profile { margin-bottom: 2rem; }

    #dashboard .profile .greeting { display: none; }
    #dashboard .profile .greeting-mobile { display: block; }
    #dashboard .profile .greeting-mobile > p { font-size: 1.8rem; }

    #dashboard .profile .status .employee-status > strong { border: none; background: none; padding: 0; border-radius: 0; }
    #dashboard .profile .status .vacation-status .vacation-status-bar { display: none; }
    #dashboard .profile .status .vacation-status .vacation-status-count { font-size: 1.6rem; }
}

@media screen and (max-width: 540px) {
    #dashboard .profile .status .employee-status > span { font-size: 1.4rem; }
    #dashboard .profile .status .employee-status > strong { font-size: 1.6rem; }
    #dashboard .profile .status .vacation-status > span { font-size: 1.4rem; }
    #dashboard .profile .status .vacation-status .vacation-status-count { font-size: 1.4rem; }
}


#dashboard .grid-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 3.7rem; column-gap: 3.2rem; }
#dashboard .grid-layout article { background-color: #fff; border-radius: 4px; border: 1px solid #e1e1e4; box-shadow: 0 0 1.8rem rgba(0, 0, 0, .08); padding: 2.7rem 3.1rem; }

@media screen and (max-width: 1400px) {
    #dashboard .grid-layout article { grid-column: 1 / -1; }
}

@media screen and (max-width: 1024px) {
    #dashboard .grid-layout { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media screen and (max-width: 540px) {
    #dashboard .grid-layout article { padding: 1.7rem 2.1rem; }
}





/* worksense guide */
#dashboard .guide { grid-column: 1 / -1; }
#dashboard .guide .guide-list-wrap { position: relative; z-index: 1; }
#dashboard .guide .guide-list-wrap::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; border-top: 1px dashed #96999e; z-index: -1; }
#dashboard .guide .guide-list { display: flex; justify-content: space-between; margin: 0 -1rem; }
#dashboard .guide .guide-list > li > a { display: flex; align-items: center; font-size: 1.6rem; padding: 0 1rem; background-color: #fff; }
#dashboard .guide .guide-list > li > a .item-img { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 3em; height: 3em; margin-right: 1.2rem; background-color: #f2f3f5; border-radius: 50%; }
#dashboard .guide .guide-list > li > a .item-img > img { width: 80%; height: 80%; }
#dashboard .guide .guide-list > li > a .item-txt { font-weight: 700; color: #6a6d74; word-break: keep-all; letter-spacing: -.025em; }
#dashboard .guide .guide-list > li > a.done .item-img { opacity: .5; }
#dashboard .guide .guide-list > li > a.done .item-txt { text-decoration: line-through; opacity: .5; }

@media screen and (max-width: 768px) {
    #dashboard .guide .guide-list-wrap::before { display: none; }
    #dashboard .guide .guide-list { flex-wrap: wrap; row-gap: 1rem; }
    #dashboard .guide .guide-list > li { width: 47.5%; }
    #dashboard .guide .guide-list > li > a { font-size: 1.6rem; }
    #dashboard .guide .guide-list > li > a .item-img { width: 2.5em; height: 2.5em; }
}

@media screen and (max-width: 768px) {
    #dashboard .guide .guide-list > li > a { font-size: 1.4rem; }
}





/* 내정보 (모바일) */
#dashboard .myinfo { display: none; }

@media screen and (max-width: 1024px) {
    #dashboard .myinfo { display: block; }

    #dashboard .myinfo-wrap { display: flex; justify-content: space-between; align-items: center; }

    #dashboard .myinfo-wrap .user > a { position: relative; display: block; padding: .8rem 2rem; padding-left: 6.5rem; overflow: hidden; }
    #dashboard .myinfo-wrap .user > a > * { float: left; }
    #dashboard .myinfo-wrap .user > a .user-image { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 5.5rem; height: 5.5rem; border-radius: 50%; background-color: #F57474; color: #ffffff; font-size: 2rem; font-weight: 600; text-align: center; line-height: 5.5rem; }
    #dashboard .myinfo-wrap .user > a .user-detail .user-team { font-size: 1.4rem; font-weight: 400; }
    #dashboard .myinfo-wrap .user > a .user-detail .user-name { font-size: 1.6rem; font-weight: 700; margin-top: .2em; }

    #dashboard .myinfo-wrap .company {  }
    #dashboard .myinfo-wrap .company > a { display: block; font-size: 1.6rem; }
}





/* 근태 */
#dashboard .attendance { display: none; }

@media screen and (max-width: 1024px) {
    #dashboard .attendance { display: block; }
    #dashboard .attendance ul { overflow: hidden; }
    #dashboard .attendance ul > li { width: 50%; box-sizing: border-box; float: left; position: relative; }
    #dashboard .attendance ul > li:first-child { padding-right: 2rem; }
    #dashboard .attendance ul > li:first-child:after { content: ''; position: absolute; bottom: 0; right: 0; height:5.8rem; width:0.1rem; background-color: #EEEAEA; }
    #dashboard .attendance ul > li:last-child { padding-left: 2rem; }
    #dashboard .attendance ul > li dl { position: relative;  }
    #dashboard .attendance ul > li dl dt { display: inline-block; color: #000000; font-family: 'Pretendard'; font-size: 1.5rem; font-style: normal; font-weight: 500; }
    #dashboard .attendance ul > li dl dd { display: inline-block; color: #000000; font-family: 'Pretendard'; font-size: 1.3rem; margin: 0 0 0 0.6rem; }
    #dashboard .attendance ul > li dl dd span { display:inline-block; width: 1.1rem; height: 1.1rem; flex-shrink: 0; fill: #6C6C6C; filter: drop-shadow(0px 4px 4px #D2D2D2); background-color: #6C6C6C; border-radius: 50%;}
    #dashboard .attendance ul > li dl dd span.green { fill: #54CB78; filter: drop-shadow(0px 4px 4px #D2F2B6); background-color: #54CB78; }
    #dashboard .attendance ul > li dl dd span.gray { fill: #E1E1E1; filter: drop-shadow(0px 4px 4px #D1D1D1); background-color: #E1E1E1; }

    #dashboard .attendance ul > li dl img { position: absolute; top: 50%; transform: translate(0, -50%); right: 0; width: 1.9rem; }
    #dashboard .attendance ul > li p { color: #000000; text-align: center; font-family: 'Pretendard'; font-size: 2.2rem; line-height: 5.8rem; margin: 1.9rem 0 0; }
    #dashboard .attendance ul > li p.empty { color: #B9B9BB; }
    #dashboard .attendance .time { margin: 2.4rem 0 0; color: #B9B9BB; text-align: center; font-family: 'Pretendard'; font-size: 1.4rem; }
    #dashboard .attendance ul.button { margin: 1.1rem 0 0; }
    #dashboard .attendance ul.button > li:first-child:after { content: none; }
    #dashboard .attendance ul > li button { color: #B9B9BB; background-color: #ffffff; height: 4rem; width: 100%; border: 1px solid #B9B9BB; border-radius: 2rem; }
    #dashboard .attendance ul > li button.submit { color: #ffffff; background-color: #7F40FF; border: 1px solid #7F40FF; }
}





/* 오늘의 근무현황 */
#dashboard .work-status { grid-column: auto / span 5; }
#dashboard .work-status .work-status-list { display: flex; flex-wrap: wrap; }
#dashboard .work-status .work-status-list > li { width: calc(100% / 3 - 3rem); display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 1.5rem; aspect-ratio: 1 / 1; background-color: #fafafe; border: 1px solid #dcdcdc; border-radius: .6rem; text-align: center; letter-spacing: -.025em; }

#dashboard .work-status .work-status-list > li > strong { display: block; font-family: 'Montserrat'; font-size: 3.6rem; font-weight: 700; }
#dashboard .work-status .work-status-list > li.working > strong { color: #54CB78; }
#dashboard .work-status .work-status-list > li.late > strong { color: #e42a23; }
#dashboard .work-status .work-status-list > li.not-working > strong { color: #adadad; }
#dashboard .work-status .work-status-list > li.leave > strong { color: #FFE83A; }
#dashboard .work-status .work-status-list > li.half > strong { color: #fa7923; }
#dashboard .work-status .work-status-list > li.vacation > strong { color: #4bc4d6; }

#dashboard .work-status .work-status-list > li > span { display: block; font-size: 1.8rem; font-weight: 700; color: #6b6d73; margin-top: .2rem; }
#dashboard .work-status .work-status-list > li > span > small { font-size: 1.2rem; font-weight: 500; }

@media screen and (max-width: 1400px) {
    #dashboard .work-status .work-status-list > li { width: calc(100% / 6 - 3rem); }
}

@media screen and (max-width: 1200px) {
    #dashboard .work-status .work-status-list > li { width: calc(100% / 6 - 2rem); margin: 1rem; }
}

@media screen and (max-width: 768px) {
    #dashboard .work-status .work-status-list > li > strong { font-size: 3rem; }
    #dashboard .work-status .work-status-list > li > span { font-size: 1.6rem; }
}

@media screen and (max-width: 700px) {
    #dashboard .work-status .work-status-list > li { width: calc(100% / 3 - 2rem); }
}

@media screen and (max-width: 540px) {
    #dashboard .work-status .work-status-list > li { width: calc(100% / 3 - 5%); margin: 2.5%; }
    #dashboard .work-status .work-status-list > li > strong { font-size: 2.8rem; }
    #dashboard .work-status .work-status-list > li > span { font-size: 1.4rem; }
}





/* 진행중인 프로젝트 (막대차트) */
#dashboard .project-bar-chart { grid-column: auto / span 7; }

@media screen and (max-width: 1024px) {
    #dashboard .project-bar-chart { display: none; }
}





/* 업무 상태 통계 (파이차트) */
#dashboard .project-pie-chart { display: flex; flex-direction: column; grid-column: auto / span 5; }
#dashboard .project-pie-chart .article-content { margin: auto 0; }

@media screen and (max-width: 1024px) {
    #dashboard .project-pie-chart { display: none; }
}





/* 최근 업데이트 */
#dashboard .recent-update { grid-column: auto / span 7; }

#dashboard .recent-update .recent-update-wrap { position: relative; }
#dashboard .recent-update .recent-update-wrap::before { content: ''; position: absolute; top: 0; left: 0.5em; display: block; font-size: 1.8rem; width: 1px; height: 100%; border-left: 1px dashed #c5c5c5; } 

#dashboard .recent-update .recent-update-list { display: flex; flex-direction: column; row-gap: 2.5rem; padding-bottom: 2rem; max-height: 35rem; overflow: auto; }
#dashboard .recent-update .recent-update-list::-webkit-scrollbar { display: none; }
#dashboard .recent-update .recent-update-list > li { display: flex; flex-direction: column; padding-left: 3rem; }
#dashboard .recent-update .recent-update-list > li header.title { position: relative; font-size: 1.8rem; font-weight: 700; color: #383838; background-color: #fff; margin-left: -3rem; text-indent: 3rem; letter-spacing: -.025em; padding: .5em 0; }
#dashboard .recent-update .recent-update-list > li header.title span.point { position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: 1.1em; height: 1.1em; background-color: var(--main-color); border-radius: 50%; }
#dashboard .recent-update .recent-update-list > li header.title span.point::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38%; height: 38%; background-color: #fff; border-radius: 50%; }
#dashboard .recent-update .recent-update-list > li p.content { font-size: 1.4rem; font-weight: 500; color: #6b6d73; margin-top: .5em; line-height: 1.6; letter-spacing: -.025em; }
#dashboard .recent-update .recent-update-list > li span.manager { display: block; font-size: 1.4rem; font-weight: 500; color: #afafb1; margin-top: 1.25em; letter-spacing: -.025em; }

@media screen and (max-width: 1024px) {
    #dashboard .recent-update { display: none; }
}





/* 프로젝트 일정현황 (간트차트) */
#dashboard .work-gantt-chart { grid-column: 1 / -1; }
#dashboard .work-gantt-chart .article-title { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
#dashboard .work-gantt-chart .article-title .chart-status-info > ul { display: flex; flex-wrap: wrap; column-gap: 1.8rem; }
#dashboard .work-gantt-chart .article-title .chart-status-info > ul > li { display: flex; align-items: center; column-gap: .5rem; font-size: 1.4rem; }
#dashboard .work-gantt-chart .article-title .chart-status-info > ul > li .status-color { width: .8em; height: .8em; background-color: var(--color); border-radius: 50%; }
#dashboard .work-gantt-chart .article-title .chart-status-info > ul > li .status-name { font-weight: 500; color: #373737; letter-spacing: -.025em; }





/* 공지사항 */
#dashboard .notice { grid-column: auto / span 5; }
#dashboard .notice .notice-list { display: flex; flex-direction: column; }
#dashboard .notice .notice-list > li > a { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1.2rem 0; border-bottom: 1px solid #e5e5e5; }
#dashboard .notice .notice-list > li:last-of-type > a { border-bottom: 0; }
#dashboard .notice .notice-list > li .notice-content-wrap { display: flex; align-items: center; width: calc(100% - 10rem); column-gap: .5rem; }
#dashboard .notice .notice-list > li .notice-content-wrap .notice-content { position: relative; width: max-content; padding-left: 1.2rem; font-size: 1.6rem; font-weight: 500; color: #383838; letter-spacing: -.025em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#dashboard .notice .notice-list > li .notice-content-wrap .notice-content::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; width: .3em; height: .3em; background-color: var(--main-color); border-radius: 50%; }
#dashboard .notice .notice-list > li .notice-content-wrap span[class^="notice-icon"] { flex-shrink: 0; font-family: 'Montserrat'; display: block; width: 1.3em; height: 1.3em; line-height: 1.3em; border-radius: .2em; font-size: 1.2rem; font-weight: 700; color: #fff; text-align: center; }
#dashboard .notice .notice-list > li .notice-content-wrap span.notice-icon-new { background-color: var(--main-color); }
#dashboard .notice .notice-list > li .notice-date { flex-shrink: 0; display: block; width: 10rem; font-size: 1.4rem; font-weight: 500; color: #afafb1; letter-spacing: -.025em; text-align: right; }





/* 전자결재 */
#dashboard .approval { grid-column: auto / span 7; }
#dashboard .approval .approval-table .table-header { background-color: var(--main-color); border-radius: 4px; }
#dashboard .approval .approval-table .table-header thead th { font-size: 1.4rem; font-weight: 700; color: #fff; padding: 1rem 0; letter-spacing: -.025em; }

#dashboard .approval .approval-table .table-body { margin-top: 1.5rem; }
#dashboard .approval .approval-table .table-body tbody td { font-size: 1.6rem; font-weight: 500; color: #383838; padding: 1.2rem 0; border: 1px solid #e5e5e5; text-align: center; letter-spacing: -.025em; }
#dashboard .approval .approval-table .table-body tbody tr:first-of-type td { border-top: 0; }
#dashboard .approval .approval-table .table-body tbody tr td:first-of-type { border-left: 0; }
#dashboard .approval .approval-table .table-body tbody tr td:last-of-type { border-right: 0; }

@media screen and (max-width: 640px) {
    #dashboard .approval .approval-table .table-body tbody tr td.bln640 { border-left: 0; }
}
/* --- dashboard 끝 --- */










/* content common */
#sub .content .content-header { border-bottom: 1px solid #d8d8e4; }
#sub .content .content-header .container { position: relative; }
#sub .content .content-header h2.content-title { padding: 3.4rem 0; font-size: 2.4rem; font-weight: 700; color: #000; }

#sub .content .content-header #filter-btn { display: none; }
#sub .content .content-header #filter-btn.none { display: none !important; }

#sub .content .content-body { padding: 4rem 0; }
#sub .content .container { position: relative; max-width: none; padding: 0 2%; }
#sub .content .content-body .container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 2%; }
#sub .content .content-body .content-wrap { width: calc(100% - 25rem - 2%); }
/* #sub .content .content-body .content-wrap #dataResultList { width: 100%; overflow: auto; background-color: #ffffff; } */
#sub .content .content-body .content-wrap #dataResultList { width: 100%; background-color: #ffffff; }
#sub .content .content-body .filter-wrap { position: relative; flex-shrink: 0; width: 25rem; background-color: #eee; border-radius: 1rem; }
#sub .content .content-body .filter-wrap #data-search-wrap { position: sticky; top: 0; left: 0; width: 100%; background-color: #fff; border: 1px solid #d8d8e4; border-radius: 1rem; padding-bottom: 3rem; }

#sub .content .content-body:has(.filter-wrap.none) .content-wrap { width: 100%; }
#sub .content .content-body .filter-wrap.none { display: none; }

@media screen and (max-width: 1440px) {
    #sub .content .content-body .content-wrap { width: calc(100% - 22rem - 2%); }
    #sub .content .content-body .filter-wrap { width: 22rem; }
    #sub .content .content-body .filter-wrap #data-search-wrap { width: 22rem; }
}

@media screen and (max-width: 1280px) and (min-width: 1025px) {
    #sub .content .content-header #filter-btn { background: none; border: none; position: absolute; top: 3.1rem; right: 2%; display: flex; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; background-color: #f5f5f5; border-radius: .8rem; border: 1px solid #dadada; }
    #sub .content .content-header #filter-btn img {  height: 60%; transform: rotate(90deg); }
    #sub .content .content-header #filter-btn.active img { transform: rotate(-90deg); }

    #sub .content .content-body .content-wrap { width: 100%; }
    #sub .content .content-body .content-wrap.active { width: calc(100% - 22rem - 2%); }
    #sub .content .content-body .filter-wrap { width: 0; height: 0; overflow: hidden; }
    #sub .content .content-body .filter-wrap.active { width: 22rem; height: auto; }
}

@media screen and (max-width: 1024px) {
    #sub .content .content-body .content-wrap { width: 100%; }
    #sub .content .content-body .filter-wrap { position: fixed; top: var(--main-header-height); left: 0; bottom: 46px; display: none; width: 100%; border-radius: 0; overflow: auto; z-index: 999; }
    #sub .content .content-body .filter-wrap::-webkit-scrollbar { display: none; }
    #sub .content .content-body .filter-wrap #data-search-wrap { border: none; width: 100%; border-radius: 0; }

    #sub .content .content-body .filter-wrap.none { display: none !important; }
}





/* tab menu */
.tab-menu-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.tab-menu-wrap::-webkit-scrollbar { display: none; }
.tab-menu-wrap::after { content: ''; position: absolute; top: 0; right: 0; width: 10rem; height: 100%; pointer-events: none; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); opacity: 0; transition: opacity .2s ease; }
.tab-menu-wrap.is-scrollable.is-not-end::after { opacity: 1; }

.tab-menu { display: flex; flex-wrap: nowrap; gap: .5rem 2rem; margin-bottom: 1.5rem; min-width: max-content; }
.tab-menu .tab-menu-item { display: block; }
.tab-menu .tab-menu-item > a { display: flex; align-items: center; gap: .1em; font-size: 1.8rem; font-weight: 500; color: #575757; }
.tab-menu .tab-menu-item > a .tab-menu-icon { display: block; width: 1.7em; height: 1.7em; background-repeat: no-repeat; background-position: center center; background-size: contain; }
.tab-menu .tab-menu-item > a .tab-menu-name { display: block; }
.tab-menu .tab-menu-item > a.active .tab-menu-icon { filter: invert(0.2) sepia(1) saturate(10000%) hue-rotate(270deg); }
.tab-menu .tab-menu-item > a.active .tab-menu-name { font-weight: 700; color: var(--main-color); }





#sub.page-list {}
#sub.page-detail {}
#sub.page-form {}

#sub.page-detail .content .content-body ,
#sub.page-form .content .content-body { background: #FAFAFA; }

#sub.page-detail .content .content-body .container .box ,
#sub.page-form .content .content-body .container .box { background: #FFF; border-radius: 1rem; border: 0.1rem solid #E6ECF1; box-shadow: 0.5rem 0.5rem 2rem 0 rgba(142, 142, 142, 0.10); width: 100%; margin: 0 0 4rem; }
#sub.page-detail .content .content-body .container .box:last-child ,
#sub.page-form .content .content-body .container .box:last-child { margin: 0; }
#sub.page-detail .content .content-body .container .box.two ,
#sub.page-form .content .content-body .container .box.two { display: flex; justify-content: space-between; align-items: stretch; }

#sub.page-detail .content .content-body .container .box.two .left ,
#sub.page-form .content .content-body .container .box.two .left { flex: 1; min-width: 0; position: relative; }
#sub.page-detail .content .content-body .container .box.two .left .close ,
#sub.page-form .content .content-body .container .box.two .left .close { position: absolute; right: 0; top: 7rem; writing-mode: vertical-rl; border-radius: 1rem 0 0 1rem; background: #2F2F2F; padding: 1rem 0.8rem 2.7rem 0.8rem; color: #FFF; font-family: 'Pretendard'; font-size: 1.6rem; font-style: normal; font-weight: 400; line-height: normal; z-index: 10; }
#sub.page-detail .content .content-body .container .box.two .left .close img ,
#sub.page-form .content .content-body .container .box.two .left .close img { position: absolute; bottom: 1rem; left: 50%; transform: translate(-50%, 0); width: 1.1rem; transition: all 0.25s ease; }
#sub.page-detail .content .content-body .container .box.two .left .close::before ,
#sub.page-form .content .content-body .container .box.two .left .close::before { content: 'close'; }

#sub.page-detail .content .content-body .container .box.two .right ,
#sub.page-form .content .content-body .container .box.two .right { width: 55rem; border-radius: 0 1rem 1rem 0; background: #F4F4F4; position: relative; transition: all 0.25s ease; clip-path: inset(0 0 0 0); max-width: 40%; }
#sub.page-detail .content .content-body .container .box.two .right > div,
#sub.page-form .content .content-body .container .box.two .right > div { position: sticky; top: calc(var(--main-header-height) + 50px); bottom: 0;  }
#sub.page-detail .content .content-body .container .box.two .right .style-form ,
#sub.page-form .content .content-body .container .box.two .right .style-form { padding: 2.5rem; }
#sub.page-detail .content .content-body .container .box.two .right .scroll .box ,
#sub.page-form .content .content-body .container .box.two .right .scroll .box { border-radius: 2rem; border: 0.1rem solid #E6E6E6; background: #FFF; width: auto; box-shadow: 0 0.1rem 0.4rem 0 rgba(0, 0, 0, 0.16); margin: 1rem 0 0; padding: 2rem 2.5rem; }
#sub.page-detail .content .content-body .container .box.two .right .scroll .box:first-child ,
#sub.page-form .content .content-body .container .box.two .right .scroll .box:first-child { margin: 0; }

#sub.page-detail .content .content-body .container .box.two.is-close .left .close::before ,
#sub.page-form .content .content-body .container .box.two.is-close .left .close::before { content: 'open'; }
#sub.page-detail .content .content-body .container .box.two.is-close .left .close img ,
#sub.page-form .content .content-body .container .box.two.is-close .left .close img { transform: translate(-50%, 0) rotate(180deg); }

#sub.page-detail .content .content-body .container .box.two.is-close .right ,
#sub.page-form .content .content-body .container .box.two.is-close .right { clip-path: inset(0 0 0 100%); width: 0; }
#sub.page-detail .content .content-body .container .box.two.is-close .right > * ,
#sub.page-form .content .content-body .container .box.two.is-close .right > * { display: none; }


#sub.page-detail .content .content-button ,
#sub.page-form .content .content-button { padding: 0 2%; margin: 4rem 0 0; display: flex; align-items: stretch; width: 100%; }
#sub.page-detail .content .content-button > .left,
#sub.page-detail .content .content-button > .right ,
#sub.page-form .content .content-button > .left,
#sub.page-form .content .content-button > .right { display: flex; align-items: center; gap: 1rem; }
#sub.page-detail .content .content-button > .right ,
#sub.page-form .content .content-button > .right { margin-left: auto; }
#sub.page-detail .content .content-button > div a ,
#sub.page-detail .content .content-button > div button ,
#sub.page-form .content .content-button > div a ,
#sub.page-form .content .content-button > div button { display: inline-block; line-height: 4.9rem; padding: 0 4.5rem; text-align: center; border: none; vertical-align: top; background: none; border-radius: 1rem; border: 0.1rem solid transparent; font-size: 1.6rem; }
#sub.page-detail .content .content-button > div .list ,
#sub.page-form .content .content-button > div .list { border-color: #DDD; background: #EEE; font-weight: 600; }
#sub.page-detail .content .content-button > div .write ,
#sub.page-form .content .content-button > div .write { border-color: #7F40FF; background: #FFF; color: #7F40FF; font-weight: 700; }

@media screen and (max-width: 1024px) {
    #sub.page-detail .content .content-body > .box.two ,
    #sub.page-form .content .content-body > .box.two { flex-direction: column; }
    #sub.page-detail .content .content-body > .box.two .left,
    #sub.page-detail .content .content-body > .box.two .right ,
    #sub.page-form .content .content-body > .box.two .left,
    #sub.page-form .content .content-body > .box.two .right { flex: none; width: 100%; }

        
    #sub.page-detail .content .content-body .container > .box.two ,
    #sub.page-form .content .content-body .container > .box.two { flex-direction: column; }
    /* #sub.page-form .content .content-body .container > .box.two { display: flex; justify-content: space-between; align-items: stretch; } */

    #sub.page-detail .content .content-body .container > .box.two .left ,
    #sub.page-form .content .content-body .container > .box.two .left { flex: 1; min-width: 0; position: relative; }
    #sub.page-detail .content .content-body .container > .box.two .left .close ,
    #sub.page-form .content .content-body .container > .box.two .left .close { display: none !important; }

    #sub.page-detail .content .content-body .container > .box.two .right ,
    #sub.page-form .content .content-body .container > .box.two .right { width: 100% !important; max-width: none; clip-path: none !important; margin: 4rem 0 0; border-radius: 0; }
    #sub.page-detail .content .content-body .container > .box.two .right .style-form ,
    #sub.page-form .content .content-body .container > .box.two .right .style-form { padding: 2.5rem 0.5rem; }
    
    #sub.page-detail .content .content-body .container > .box.two .right > * ,
    #sub.page-form .content .content-body .container > .box.two .right > * { display: block !important; }
}