body {
    font-family:'Pretendard',sans-serif;
    background:#fff;
    margin: 0;
    background: url(/cdhs/static/biz/chrVis/images/main_bg.png) no-repeat center center;/* 메인 백그라운드 이미지 */
    background-size: cover;
}
.main {
    max-width:1400px;
    margin:0 auto;
}
.tit {
    position: relative;          /* ★ 기준점 */
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(90deg, #0057b7 0, #1B9EB2 100%);
}

.logo-left {
    z-index: 1;
}

/* 가운데 로고 */
.logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.tit img {
    width: 290px;
    max-width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1440px) {
    .main {
        padding: 0 20px;
    }
}

/* 지표 형태 선택 */
/* -----------------------------
   공통 구조
----------------------------- */
.chart_Con {
    margin-bottom: 35px;
}
.chart_Con .title,
.indct_title {
    font-size: 32px;
    font-weight: bold;
    text-align: left;
    margin-bottom: 17px;
    margin-top: 70px;
}

/* -----------------------------
   리스트 전체
----------------------------- */
.chart_select ul {
    list-style: none;
    padding: 0;
    margin: 0;

    /* 가로 배치 */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /*gap: 30px;*/

    /* 카드 높이 균일하게 맞추기 */
    align-items: stretch;
}

/* -----------------------------
   카드(각 항목)
----------------------------- */
/* 카드 본체: 크기/테두리만 관리 (flex/grid 쓰지 않음) */
/* 카드 본체 */
.chart_item {
    position: relative;
    width: 32%;
    height: 300px;
    box-sizing: border-box;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .1);
    border: 1px solid #ededed;
    border-radius: 12px;
    background: /*rgba(238,245,255,.92)*/ #f5f5f5;
    overflow: hidden;
    padding: 0;
    transition: height .25s ease, .3s;
}
.chart_item:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #0057b7;
}

/* 상단 중앙 캡슐 제목 */
.chart_item .chart_label {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    /*height: 32px;*/

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
    transform: none !important;
    width: 100% !important;

    pointer-events: none;
    z-index: 2;
}

/* 캡슐 스타일 */
.chart_item .chart_label > span {
    display: inline-block;
    padding: 10px 14px;
    font-size: 21px;
    font-weight: 700;
    color: #00499A;
    background: #fff;
    width: 100%;
    text-align: center;
    /*border: 1px solid #E3EEFF;
    border-radius: 999px;
    line-height: 1.2;
    max-width: calc(100% - 24px);*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 그림 */
.chart_item .thumb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 56px;
    width: calc(100% - 56px) !important;
    height: calc(100% - 64px) !important;
    background-position: center center !important;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0;
    border: 0;
    /*background-color: #fff;*/
    transform-origin: center center;
    transition: transform .25s ease, opacity .2s ease;
}

/* hover & active */
.chart_item:hover {
    box-shadow: 0 5px 10px rgba(0,0,0,.18);
    transform: translate(0, -5px);
}
.chart_item.active,
.chart_item[aria-pressed="true"] {
    outline: 3px solid #0057b7;
    outline-offset: 0;
    box-shadow: 0 6px 16px rgba(0,91,172,.18);
    /*background: linear-gradient(180deg,#eef5ff 0%,#ffffff 60%);*/
    border-color: #cfe2ff;
}

/* 이미지 태그 숨김 */
.chart_item img {
    display: none !important;
}

/* 접기(.compact) */
.chart_item.compact {
    height: 56px;
    overflow: hidden;
}
.chart_item.compact .thumb {
    opacity: 0;
    transform: scaleY(0.02);
    pointer-events: none;
}


/* ===== 질병 선택 ===== */
.disease_Con{/*margin-bottom:35px;*/
    position: relative;
    background-color: rgba(245, 245, 245, 0.7);
    padding: 20px 0;
    margin-top: 85px;
    border-radius: 0 0 12px 12px;
    border: 2px solid #f1f1f1;
    box-sizing: border-box;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .07);
}
.disease_Con .title{font-size:18px;font-weight:bold;text-align:left;margin-bottom:15px;}
.disease_tabs{
    list-style:none;padding:0;margin:0;
    display:flex;justify-content:center;/*gap:20px;*/flex-wrap:wrap;
}
.disease_tabs li{
    /*width:100px;height:40px;
    display:flex;justify-content:center;align-items:center;
    border:1px solid #ccc;background:#f5f5f5;*/
    padding: 6px 26px;line-height: 30px;border-radius: 10px;
    font-size: 18px;color: #666;/*font-weight:bold;*/cursor:pointer;
}

#major-item{
    position: absolute;
    top: -47px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 4px);
    max-width: 1400px;
    display: flex;
    /*padding: 8px;*/
    /*border: 1px solid #ededed;*/
    border-radius: 12px;
    /*background: rgba(238, 245, 255, 0.16);
    box-shadow: 0px 0px 40px 3px rgba(0, 0, 0, 0.08);*/
    justify-content: space-between;
}
#major-item:before{
    content: '';
    z-index: 10;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #0057b7;
}
#major-item.disease_tabs li{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    font-size: 19px;
    font-weight: bold;
    color: #3d3d3d;
    width: 10%;
    height: 32px;
    white-space: nowrap;
    border-radius: 10px 10px 0 0;
    border: 1px solid #E0E0E0;
}
#major-item.disease_tabs li:hover{
    background: #f5f5f5;
}
#major-item.disease_tabs li.active{
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
    background-color: #0057b7;
    border-color: #0057b7;
    color: #fff;
}

#major-item2{
    display: inline-flex;
    padding: 6px;
    border: 1px solid #e0e0e0;
    border-radius: 7px;
    background: #fff;
    justify-content: center;
}
#major-item2.disease_tabs li{
    position: relative;
    font-size: 19px;
    color: #3d3d3d;
}
#major-item2.disease_tabs li:hover{
    background-color: #f5f5f5;
}
#major-item2.disease_tabs li:before{
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 23px;
    background-color: #e0e0e0;
    transform: translateY(-50%);
    content: "";
}
#major-item2.disease_tabs li:first-child:before{
    display: none;
}
#major-item2.disease_tabs li.active{
    background-color: #1B9EB2;
    border-color: #1B9EB2;
    color: #fff;
}
#major-item2.disease_tabs li.active:before{
    background-color: #1B9EB2;
}

#disease_tabs2{
    margin-top: 20px;
    gap: 10px;
}
#disease_tabs2.disease_tabs li{
    padding: 4px 18px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 30px;
}
#disease_tabs2.disease_tabs li:hover{
    background-color: #eaeaea;
}
#disease_tabs2.disease_tabs li.active{
    color: #158B9F;
    background-color: #E0EBF3;
    border-color: #1B9EB2;
    outline: 1px solid #1B9EB2;
}

/* ===== 지표 선택 ===== */
.indct_Con{
    margin-bottom:90px;
    position:relative;
}
/*.indct_title{font-size:18px;font-weight:bold;margin-bottom:12px;}*/
.indct_list{
    list-style:none;margin:0;padding:0;
    display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;
}
.indct_list li{
    position:relative;width: 47.5%;
    padding:16px 14px;margin-bottom:8px;background:#fff;
    border: 1px solid #e5e5e5;border-radius:10px;overflow: hidden;cursor:pointer;
}
.indct_list li:after{
    content:'';
    position:absolute;top: 13px;right:14px;
    width: 24px;height: 24px;
    background-repeat: no-repeat;background-position: center center;background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='10.5' r='10' stroke='%230095B8'/%3E%3Cmask id='mask0_257_572' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='13' height='13'%3E%3Crect x='4' y='4' width='13' height='13' fill='%230095B8'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_257_572)'%3E%3Cpath d='M12.5835 11.1162H6.05664V9.88392H12.5835L9.62135 6.92182L10.5001 6.05664L14.9435 10.5001L10.5001 14.9435L9.62135 14.0783L12.5835 11.1162Z' fill='%230095B8'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.indct_list li:before{
    content:'';
    position:absolute;top: 0;left:0;
    width: 4px;height: 100%;
    background-color: #1B9EB2;border-radius: 30px 0 0 30px;
}
.indct_list li:hover { background-color: #f5f5f5 }
.indct_item{text-decoration:none;color:#1d1d1d;font-size:17px;}

.indct_list li.active{ background: #1B9EB2; }
.indct_list li.active:after { background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='10.5' r='10' stroke='white'/%3E%3Cmask id='mask0_257_573' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='4' width='13' height='13'%3E%3Crect x='4' y='4' width='13' height='13' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_257_573)'%3E%3Cpath d='M12.5835 11.1162H6.05664V9.88392H12.5835L9.62135 6.92182L10.5001 6.05664L14.9435 10.5001L10.5001 14.9435L9.62135 14.0783L12.5835 11.1162Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.indct_list li.active .indct_item{ color: #fff; }


/* ===== 지표 생성 버튼 ===== */
.btn_indct {
    position: absolute;
    top: 37px;
    right: 20px;
    width: 113px;
    height: 49px;
    padding-right: 28px;
    border-radius: 30px 30px 30px 0;
    background: linear-gradient(30deg, #3788F5 10%, #53CFFB 80%);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn_indct:after{
    content: '';
    position: absolute;
    top: 13px;
    right: 13px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_232_133' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Crect width='24' height='24' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_232_133)'%3E%3Cpath d='M7 17H9V10H7V17ZM11 17H13V7H11V17ZM15 17H17V13H15V17ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.btn_indct:hover { background: linear-gradient(30deg, #327BDD 10%, #4BBBE2 80%); }

/* ===== 차트 결과 컨테이너 ===== */
.content_Con {
    display:none;
    margin:40px 0 50px 0;
    padding:20px;
    background:#f5f5f5;
    /*border:1px solid #ddd;*/
    border-radius:6px;
    min-height:650px;     /* 컨테이너 전체 높이 여유 */
    position:relative;
}

/* 왼쪽 옵션 박스 */
.content_Con .option_select {
    width:220px;               /* 폭  */
    height: 320px;
    /*padding:18px 14px;
    background:#fff;
    border:1px solid #ccc;*/
    border-radius:4px;
    box-sizing:border-box;
    position:absolute;
    left:24px;
    top:33%;
    transform:translateY(-50%); /* 세로 가운데 */
    display:flex;
    flex-direction:column;
    gap:4px;
}

.content_Con .year_range{
    width: 50%;
}

.content_Con .option_select #graph_year{
    gap: 5px;
}
.content_Con .option_select p {
    position: relative;
    margin:38px 0 0 0;
    font-weight:bold;
    font-size:18px;
}
.content_Con .option_select p:first-child{
    margin: 0;
}
.content_Con .option_select p:after{
    content: '';
    position: absolute;
    top: -18px;
    left: 0;
    width: 60%;
    height: 2px;
    background: #e0e0e0;
}
.content_Con .option_select p:first-child:after{
    display: none;
}
.content_Con .option_select select {
    width:100%;
    padding:6px 8px;
    font-size:13px;
    border-color: #ccc;
}
.content_Con .option_select select.year_range{
    width: 48%;
}
.content_Con .option_select button {
    width:100%;
    padding:9px 0;
    margin-top: 10px;
    background:#1B9EB2;
    color:#fff;
    font-size:15px;
    border:none;
    border-radius:4px;
    cursor:pointer;
}
.content_Con .option_select button:hover { background:#158B9F; }

/* 차트 영역 */
.content_Con .chart_area {
    margin-left:250px;         /* 옵션 박스와 간격 */
    position:relative;
    padding-top:50px;          /* 버튼과 차트 간 여백 */
    min-height:550px;
}

.chart_title {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

/* 상단 버튼 그룹 */
.content_Con .chart_area .chart_buttons {
    position:absolute;
    top:0;
    right:0;
    display:flex;
    gap:8px;

}
.content_Con .chart_area .chart_buttons button {
    padding:6px 12px;
    border:1px solid #ccc;
    background:#fff;
    font-size:13px;
    cursor:pointer;
    border-radius:4px;
}
.content_Con .chart_area .chart_buttons button:hover { background:#f1f1f1; }
.content_Con .chart_area .chart_buttons button.btn-back{ position: relative;font-weight: bold;color: #158B9F;background: #E0EBF3;border-color: #1B9EB2;outline: 1px solid #1B9EB2;padding-right: 26px; }
.content_Con .chart_area .chart_buttons button.btn-back:after{content: '';position: absolute;top: 7px;right: 6px;width: 17px;height: 17px;background-repeat: no-repeat;background-position: center center;background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_221_310' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'%3E%3Crect width='18' height='18' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_221_310)'%3E%3Cpath d='M9 16.5C8.0625 16.5 7.18438 16.3219 6.36563 15.9656C5.54688 15.6094 4.83438 15.1281 4.22813 14.5219C3.62188 13.9156 3.14063 13.2031 2.78438 12.3844C2.42813 11.5656 2.25 10.6875 2.25 9.75H3.75C3.75 11.2125 4.25937 12.4531 5.27812 13.4719C6.29687 14.4906 7.5375 15 9 15C10.4625 15 11.7031 14.4906 12.7219 13.4719C13.7406 12.4531 14.25 11.2125 14.25 9.75C14.25 8.2875 13.7406 7.04687 12.7219 6.02812C11.7031 5.00937 10.4625 4.5 9 4.5H8.8875L10.05 5.6625L9 6.75L6 3.75L9 0.75L10.05 1.8375L8.8875 3H9C9.9375 3 10.8156 3.17813 11.6344 3.53438C12.4531 3.89063 13.1656 4.37188 13.7719 4.97813C14.3781 5.58438 14.8594 6.29688 15.2156 7.11563C15.5719 7.93438 15.75 8.8125 15.75 9.75C15.75 10.6875 15.5719 11.5656 15.2156 12.3844C14.8594 13.2031 14.3781 13.9156 13.7719 14.5219C13.1656 15.1281 12.4531 15.6094 11.6344 15.9656C10.8156 16.3219 9.9375 16.5 9 16.5Z' fill='%23158B9F'/%3E%3C/g%3E%3C/svg%3E%0A"); }
.content_Con .chart_area .chart_buttons button.btn-back:hover{background-color: #D9E4EB;}

/* 메인 차트 박스 */
.content_Con .chart_area .chart_main {
    width:100%;
    height:700px;            /* 파란 박스 아래로 확장 */
    background:white !important;
    border:1px solid #e0e0e0;
    border-radius:4px;
}

#level_info {
    margin-bottom: 17px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    display: none;          /* JS에서 선택 시 block 처리 */
    background-color: #fff;
    padding: 6px 20px;
    border-radius: 40px;
    box-shadow: 1px 1px 7px 0 rgba(0, 0, 0, 0.12);
}
#level_info span {
    color: #0057b7;         /* 선택된 경로 강조 색 */
    position: relative;
}
#level_info span + span{
    display: none;          /* JS에서 선택 시 block 처리 */
    margin-left: 34px;
}
#level_info span + span:after{
    content: '';
    display: none;
    position: absolute;
    top: 3px;
    left: -24px;
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23005BAC'/%3E%3Cmask id='mask0_212_237' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='3' y='3' width='8' height='8'%3E%3Crect x='3' y='3' width='8' height='8' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_212_237)'%3E%3Cpath d='M5.67498 10.6004L4.81665 9.74206L7.55832 7.00039L4.81665 4.25872L5.67498 3.40039L9.27498 7.00039L5.67498 10.6004Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}
#level_info span.active-arrow::after {
    display: block;
}

/* 팝업 데이터 테이블 */
.data-table-view {position: relative;width:700px;margin-top: 20px;/*padding-top: 40px;*/border: 1px solid #ccc; border-radius: 5px}
.data-table-view .popup-table-box table thead tr th {font-weight: normal; padding: 6px}
.data-table-view .popup-table-box {width: 100%;/*overflow: auto;overflow-x: hidden;*/}
.data-table-view .popup-table-box table {width: 100%;table-layout: fixed;border-spacing: 0;border-collapse: collapse; height: 615px;}
.popup-table-box table{/*overflow:hidden;*/width:100%;border:#ccc 1px solid;border-radius:8px}
.popup-table-box table tr:nth-child(2n){background:#f2f7f9}
.popup-table-box table tr:nth-child(2n+1){background:#ebf1f5}
.popup-table-box table tr td{border:#ccc 1px solid;white-space: nowrap;text-align: center; padding: 5px;}
.popup-table-box table tr td:first-child{border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;top: 0px;}
.popup-table-box table tr th{white-space: pre-line;}

.data-table-view .popup-table-box2 table thead tr th {font-weight: normal;height: 40px;}
.data-table-view .popup-table-box2 {width: 100%;/*overflow: auto;overflow-x: hidden;*/}
.data-table-view .popup-table-box2 table {width: 100%;table-layout: fixed;border-spacing: 0;border-collapse: collapse;}
.popup-table-box2 table{/*overflow:hidden;*/width:100%;border:#ccc 1px solid;border-radius:8px}
.popup-table-box2 table tr:nth-child(2n){background:#f2f7f9}
.popup-table-box2 table tr:nth-child(2n+1){background:#ebf1f5}
.popup-table-box2 table tr td{border:#ccc 1px solid;white-space: nowrap;text-align: center;height: 40px;}
.popup-table-box2 table tr th{white-space: pre-line;}
.popup-table-box2 table tr td:first-child{border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;top: 0px;}
.popup-table-box2 table tr td:nth-child(2){border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;top: 0px;}
.popup-table-box2 table tr th:first-child{border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;}
.popup-table-box2 table tr th:nth-child(2){border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;}


/* 데이터 테이블 */
#table-box {width:99.9%; border:1px solid #366688;padding:0; border-radius: 10px;}
#table-box .popup-header h2{width:100%;padding:10px 20px;font-size:1rem;font-weight:400;color:#fff;background:#081f38}
#table-box .popup-header a{position:absolute;top:8px;right:10px;color:#fff}
#table-box .board-contents{overflow-y:scroll;height:530px}
#table-box .board-text{padding-top:0px !important}
#table-box .helth-cm{border-bottom:none !important;border-top:none !important}
#table-box tbody tr td{border: 1px solid #ddd; height: 24.8px;}
#table-box tbody tr.empty td{border: none;}
.table_areaWrap h3 {height:16px; background:#366688; text-align:left; vertical-align:top; padding:9px 0 9px 10px; font-size:14px; font-weight:600; color:#fff;}
.title-box {background:#366688; text-align:left; vertical-align:top; padding:9px 0 9px 10px; font-size:14px; font-weight:600; color:#fff; border-radius: 7px;}
.title-box button{background:url(/sass/static/cdc/images/default/btn-popclose.png) no-repeat 0px 3px !important;border:0 !important}
.title-box button span{display:none !important}
.table-box{width:100%;height: 300px;border-radius:8px;/*border:#ccc 1px solid;box-shadow:0 3px #f3f3f3;*/ min-width: 1847px;}
.table-box table{/*overflow:hidden;*/width:100%;border:#ccc 1px solid;border-radius:8px}
.table-box table tr:nth-child(2n){background:#f2f7f9}
.table-box table tr:nth-child(2n+1){background:#ebf1f5}
.data-table .data-table-title { margin: .1em 0 .2em; padding-left:15px;background:url('/sass/static/cdc/images/default/new-bullet01.png') no-repeat 0px 3px}
.text-right{text-align: right;}
.text-center{text-align: center;}
.text-left{text-align: left;}
.back-white{background-color: white;}
.data-table .table-titlebar {height:19px; padding: .3em .2em .2em .3em; position: relative; font-size: 12px; border-left: 0 none;border-right: 0 none; border-top: 0 none; padding-top: 10px;}
.data-table .data-table-pager {margin-top: -1px !important;position: relative;height: auto; min-height: 28px; white-space: nowrap;overflow: hidden;font-size:11px; z-index:101;border-radius:8px;border:#acbacf 1px solid;color:#333}
.data-table .data-table-toppager .ui-pager-control, .data-table .data-table-pager .ui-pager-control {position: relative;border-left: 0;border-bottom: 0;border-top: 0;background:#e5ebf4;}
.data-table .ui-pg-table {position: relative; padding: 1px 0; width:auto; margin: 0;}
.data-table .ui-pg-table td {font-size:11px;font-weight:normal; vertical-align:middle; /*padding:0px 1px;*/}
.data-table .ui-pg-button  { height:auto}
.data-table .ui-pg-button span { display: block; margin: 2px; float:left;}
.data-table .ui-pg-button:hover { padding: 0;border:none;background:none}
.data-table .ui-state-disabled:hover {padding:0px;}
.data-table .ui-pg-input,.data-table .data-table-toppager .ui-pg-input {width: auto;/*font-size:.9em; */margin:0;line-height: inherit;border: none; padding: 3px 2px;color:#666}
.data-table .ui-pg-selbox, .data-table .data-table-toppager .ui-pg-selbox {/*font-size:.9em; */line-height:inherit; display:block; margin: 0; padding: 3px 0px; border:none;color:#666}
.data-table .ui-separator {height: 18px; border-left: 2px solid #ccc ;}
.data-table .data-table .data-table-pager .ui-pg-div, .data-table .data-table-toppager .ui-pg-div {padding:1px 0;float:left;position:relative; line-height: 20px;}
.data-table .data-table-pager .ui-pg-button, .data-table .data-table-toppager .ui-pg-button { cursor:pointer; }
.data-table .data-table-pager .ui-pg-div  span.ui-icon, .data-table .data-table-toppager .ui-pg-div  span.ui-icon {float:left;margin: 2px; width:18px;}
.data-table td input, .data-table td select, .data-table td textarea { margin: 0; padding-top:5px;padding-bottom: 5px;}
.data-table td textarea {width:auto;height:auto;}
.data-table .data-table-toppager {border-left: 0 none !important;border-right: 0 none !important; border-top: 0 none !important; margin: 0 !important; padding: 0 !important; position: relative;white-space: nowrap;overflow: hidden;}
.data-table .data-table-pager .ui-pager-table {width:100%;table-layout:fixed;height:100%;}
.data-table .data-table-pager .ui-paging-info {font-weight: normal;height:auto;margin-top:3px;margin-right:15px;display: inline;}
.data-table .data-table-pager .ui-paging-pager {table-layout:auto;height:100%;}
.data-table .data-table-pager .navtable {float:left;table-layout:auto;height:100%;}
.data-table-th {border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top: -1px;}
.data-table-th2{border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top: 39px;}
.data-table-th3{border: 1px solid #89919c;border-bottom:3px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top: 25px;}
.data-table-th4{border: 1px solid #89919c;border-bottom:3px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top: 61px;}
.data-table-th5{border: 1px solid #89919c;border-bottom:3px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top: 93px;}


.data-table-row-th {border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;}
.data-table-row-th0 {border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top: -1px;left: 0;}
.data-table-row-th1 {border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top : -1px; left: 94px;}
.data-table-row-th2 {border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top : -1px; left: 175px;}
.data-table-row-th3 {border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top : -1px;}
.data-table-row-th4 {border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top : -1px;}
.data-table-row-th5 {border: 1px solid #89919c;border-bottom:1px solid #89919c;background: #6c7583;font-weight: normal;color: #fff;position: sticky; top : -1px;}

.data-table-view{overflow: auto;height: 700px; width:100%;}

.indent-text {
    display: block;
    padding-left: 1.2em;
    white-space: pre-wrap;
    /*word-wrap: break-word;*/
    word-break: keep-all;
    text-indent: -0.7em;
    hyphens: auto;
}

/* 대시가 있는 줄에 대한 스타일 */
.indent-text .line-with-dash {
    padding-left: 1.2em; /* 들여쓰기 */
}