.healthy_factor_db ul{height:auto;display:flex;}
.healthy_factor_db li,.category_tab li{position:relative;display:flex;justify-content:center;align-items:center;width:calc(100% / 6 - 5px);height:auto;margin:5px 0 0 5px;padding:0 0 0 5px!important;border:#d5d5d5 1px solid;border-bottom:#00a2d1 1px solid;font-size:1.2em;line-height:230%;background:#f9f9f9;text-align:center;box-sizing:border-box;transition: all .5s;cursor:pointer}
.healthy_factor_db li.on,.category_tab li.on{border-style:solid;border-width:1px;border-color:#00a2d1 #00a2d1 #fff #00a2d1;background:#fff;color:#444;font-weight:200;z-index:10;height:auto;line-height:230%;}
.healthy_factor_db li span{overflow:hidden;white-space:nowrap;text-overflow: ellipsis}
.healthy_factor_db .xi-close-min{font-size:1.3em;transition:all.3s}
.healthy_factor_db .xi-close-min:hover{color:#00a2d1;transform: rotate(180deg)}
.history-box .tab li:first-child,.healthy_factor_db li:first-child,.category_tab li:first-child{margin:5px 0 0 0!important}
.category_tab li{border-bottom:#d5d5d5 1px solid;width: auto;white-space: nowrap; padding:0 10px!important}
/*section공통설정*/
.section{width:100%;left:0;height:auto;background:white;transition:all .5s}
/*healty factor_db*/
.healthy_factor_db::after,.category_tab::after{content:"";position:absolute;width:100%;height:1px;left:0;bottom:0;z-index:-1}
.healthy_factor_db::after{background:#00a2d1}
.category_tab::after{background:#d5d5d5}
.category_tab li.on {border-bottom:#00a2d1 1px #fff}
.healthy_factor_category{display: flex; justify-content: space-between;visibility:visible;z-index:50;opacity:1}
.healthy_factor_category>*{border:1px solid #b4b4b4;width:31%;transition:all .3s}
.healthy_factor_category p{color:#4d4d4d;font-size:17px;line-height:47px;font-weight:200;background:#e3ecf6;border-bottom:1px solid #b4b4b4; text-align: center; margin: 0}
.healthy_factor_category li{line-height:47px;font-size:15px;font-weight: 200;letter-spacing:-0.5px;cursor:pointer}
.healthy_factor_category ul.on li{padding:0 13px;display: flex;justify-content:space-between;align-items: center}

/*factor viewer*/
.factor_viewer{border:1px solid #bcbcbc;padding:0 20px 20px;height:auto}
.factor_viewer>p{position:relative;color:#686d74;border-bottom:1px solid #e4e4e4;padding:5px 0}
.category_tab{position:relative;margin:20px 0 0;display:flex;flex-wrap:wrap;justify-content:flex-start;transition: margin .3s}
.btn_box{display:block;position:absolute;top:0;right:0;display:flex;transition: all .7s}
.factor_viewer>ul.on::after{background:#00a2d1;z-index:0}
.factor_viewer>ul.on li:not(.on){border-bottom: 1px solid #00a2d1}
.factor_viewer .article{display:none}
/*factor viewer -  grid frame*/
.grid_frame{height:400px;display: flex; justify-content: space-between; border-style:solid;border-width:1px;border-color:#00a2d1 #00a2d1 #00a2d1 #00a2d1;}
.grid_frame>*{border:1px solid #b4b4b4;width:100%;transition:all .3s;margin:5px 5px}
.item_frame div{overflow:auto;height:100%; padding:0 5px}
.item_frame li{padding:0;line-height:25px;font-size:14px;font-weight: 500;letter-spacing:-0.5px;cursor:pointer}
.year_frame div{overflow:auto; height:310px; padding:0 5px}
.year_frame li{padding:0 15px;line-height:25px;font-size:12px;font-weight: 500;letter-spacing:-0.5px;cursor:pointer}
/*factor viewer -  db_classification_frame*/
.db_classification_frame>*{padding:20px 10px;width:100%;top:0;background:#fff;min-height:400px;height: auto;border-style:solid;border-width:1px;border-color:transparent #00a2d1 #00a2d1 #00a2d1;}
.db_classification_frame .db_box>div{width:45%;min-width:300px;border:1px solid #7e7e7e}
.db_classification_frame h5{font-size:0.9rem!important;line-height:180%!important;border-bottom:1px solid #7e7e7e}
.db_classification_frame label{margin-left:3px;font-size:0.8rem!important;line-height:180%;cursor:pointer}
.db_classification_frame label img{display:inline-block;margin-right:2px}
.db_classification_frame li{padding:0 5px 0 10px;white-space:nowrap}
.scroll_frame li:not(:first-child){border-top:1px solid #bbbbbb}
.db_box:not(:last-of-type) div div:not(.scroll_frame) li{border-bottom:1px solid #bbbbbb}
.db_box div div{height:400px;overflow: hidden scroll}
.txtR{text-align: center;}

/*대시보드 년도 */
.top-btn-box{width:100%;margin-bottom:10px;text-align:center}
.top-btn-box a{display:inline-block;width:19%;line-height:36px;min-height:36px;padding:0 10px 3px;margin:2px;border:#d5d5d5 1px solid;border-radius:5px;text-align:center;background:#fff;font-size:1.1em;font-weight:600;color:#666;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(245,245,245,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(245,245,245,1);
    box-shadow: 5px 5px 0px 0px rgba(245,245,245,1)}
.top-btn-box a:hover{background:#f9f9f9 url(../images/sub/boxbg2.gif) no-repeat left 35px;color:#444}
.top-btn-box a.active{background:#f9f9f9 url(../images/sub/boxbg2.gif) no-repeat left 35px;color:#444}
/*year tab*/
.top-btn-box{width:100%;margin-bottom:10px;text-align:center}
.top-btn-box li{display:inline-block;width:19%;line-height:36px;min-height:36px;padding:0 10px 3px;margin:2px;border:#d5d5d5 1px solid;border-radius:5px;text-align:center;background:#fff;font-size:1.1em;font-weight:600;color:#666;
    -webkit-box-shadow: 5px 5px 0px 0px rgba(245,245,245,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(245,245,245,1);
    box-shadow: 5px 5px 0px 0px rgba(245,245,245,1)}
.top-btn-box li:hover{background:#f9f9f9 url(../images/sub/boxbg2.gif) no-repeat left 35px;color:#444}
.top-btn-box li.on{background:#f9f9f9 url(../images/sub/boxbg2.gif) no-repeat left 35px;color:#444}
.tab_con {clear:both;border-top:1px solid #cbdeea;margin-top:-8px}
.tab_con .tab-ds{display:none;overflow:hidden;padding-top:20px;text-align:center}
.tab_con div ul{width:100%;font-size:1.077em}
.tab_con div ul li{float:left;position:relative;width:100%;line-height:30px;text-align:left}
.notice-box span{position:absolute;top:0;right:0}
.tab_con div ul li:hover{background:url("../images/main/dot-bg.png") repeat-x 0 bottom}
.tab_con div ul li a{height:30px;padding-left:17px;background:url("../images/main/notice-dot.gif") no-repeat 7px 7px}
.tab_con div ul li a:hover{color:#000;font-weight:600}
.tab_con div .btn-more{position:absolute;top:0;right:0px;height:29px;padding-right:0px;background:none;text-align:right}
/* 기본 + 아이콘 */
.xi-plus-circle {color: #C1C1C1;font-size: 1.5rem;transition: all 0.2s;position: relative;}
/* 화살표 아이콘 */
.xi-arrow-right {color: #567ca7;font-size: 1.5rem;position: relative;}
.custom-select {background:#fff url(../images/contents/custom-select.png) right 0.55rem center no-repeat;}
/*.xi-plus-circle{color:#C1C1C1;font-size:1.5rem;transition:all .2s;position:relative}*/
.xi-plus-circle::after{font-family:"xeicon";position:absolute;content:'\e907';width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .5s;color:#567ca7;z-index:-1;opacity:0}
.healthy_factor_category ul.on li:hover .xi-plus-circle,.healthy_factor_category ul.on li.active .xi-plus-circle{color:transparent}
.healthy_factor_category ul.on li:hover .xi-plus-circle::after,.healthy_factor_category ul.on li.active .xi-plus-circle::after{opacity:1;z-index:0}
.db_listBox{overflow:auto}
 select{display:inline-block;width:100%;padding:5px;margin:5px 0px;border:#ccc 1px solid;border-radius:4px;box-sizing:border-box;-webkit-appearance: none;-moz-appearance: none;appearance: none}
.custom-select {background:#fff url(../images/contents/custom-select.png) right 0.55rem center no-repeat;}
.custom-select2 {background: url(../images/contents/custom-select2.png) right 0.55rem center no-repeat}
.btn{display: inline-block;margin-bottom: 0;font-weight: 400;text-align: center;white-space: nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action: manipulation;cursor: pointer;background-image: none;border: 1px solid transparent;border-radius: 4px;}
.btn.focus, .btn:focus, .btn:hover {color: #333;text-decoration: none;}
.btn-default {color: #333;background-color: #fff;border-color: #ccc;}
.btn-default:hover {color: #333;background-color: #e6e6e6;border-color: #adadad;}

/*공통 스크롤 디자인*/
.db_listBox::-webkit-scrollbar,.db_box div div::-webkit-scrollbar{width:0;background:#fff}
.healthy_factor_category .scroll::-webkit-scrollbar,.grid_frame::-webkit-scrollbar,.scroll_frame::-webkit-scrollbar{width:10px!important;height:10px !important;background:#fff!important;}
.healthy_factor_category .scroll::-webkit-scrollbar-thumb,.grid_frame::-webkit-scrollbar-thumb,.scroll_frame::-webkit-scrollbar-thumb{background:#C1C1C1 !important;border-radius:5px !important; border:1px solid #fff !important;}
.scroll .on li:not(:first-child){border-top:1px solid #dddddd}
.db_listBox:not(.scroll) .on li{border-bottom:1px solid #dddddd}

/*cdhsMain.jsp 에있던거*/
.highcharts-container>*{font-family: 'SCDream7'; font-weight: 700;font-size:19pt}
select {font-family: 'GmarketSans'; font-weight: 400; font-size:16px; text-size-adjust:100%; text-align: center; }
svg:not(:root){
    width : fit-content;
    height : max-content;
    overflow : visible;
    align-content: center;
}

option {
    font-weight : bold;
    display: block;
    padding-block: 0px;
    min-block-size: 1.2em;
    padding: 1px;
    white-space : nowrap;
}

.db_listBox.scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

.accordion-container {
    display: flex;
    width: 100%;
    height: 600px;
    border: 1px solid #ccc;
    overflow: hidden;
}
.accordion {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fefefe;
    border-right: 1px solid #ccc;
    cursor: pointer;
    transition: flex 0.3s ease;
}
.accordion:not(.active) {
    background: linear-gradient(to bottom, rgba(211, 211, 211, 0.2), rgba(211, 211, 211, 0.6));
    box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.accordion:last-child {
    border-right: none;
}
.accordion.active {
    flex: 6;
    background-color: #fefefe;
}
.accordion h2 {
    margin: 0;
    font-size: 1.5rem;
    position: relative;
    padding-left: 22px; /* 숫자와 제목 사이 간격 */

}
.accordion#accordion-1 h2::before {
    content: "①";
    position: absolute;
    left: 0;
}

.accordion#accordion-2 h2::before {
    content: "①";
    position: absolute;
    left: 0;
}

.accordion#accordion-3 h2::before {
    content: "②";
    position: absolute;
    left: 0;
}
.accordion button {
    margin-top: 10px;
    padding: 5px 15px;
    border: none;
    background-color: #007BFF;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
}
.accordion button:hover {
    background-color: #0056b3;
}
.button-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}
.on{
    padding: 0;
}

.custom-font {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    font-weight: 700
}
.goldDia-text {
    transition: opacity 0.3s ease;
    opacity: 0.3;
}

.goldDia-text:hover {
    opacity: 1;
}

#vriabl_list {
    list-style-type: none; /* 기본 마커 제거 */
    padding: 5px;
}

#vriabl_list label {
    font-family: 'SCDream7', sans-serif;
    font-weight: 500;
    font-size: medium;
}
#idxSelectModal {
    cursor: default !important;
    pointer-events: auto !important;
}

#idxSelectModal * {
    cursor: default !important;
}

#idxSelectModal * {
    cursor: default !important;
}

#idxSelectModal .db_listBox ul li,
#idxSelectModal .accordion-buttons,
#idxSelectModal .modal-footer button,
#idxSelectModal label,
#idxSelectModal select,
#idxSelectModal input[type="radio"] {
    cursor: pointer !important;
}
#toggleButtonContainer {
    width: 100%;
    height: 50px;  /* 화살표 높이에 맞춤 */
    margin-left: auto;
    margin-right: auto;  /* 중앙 정렬 */
    display: flex;
    justify-content: center;
    align-items: center;
}
#toggleBtn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
    position: relative;
    padding: 10px;
}
/*.wide-arrow {*/
/*	width: 150px;*/
/*	height: 45px;*/
/*	background: linear-gradient(to bottom, #325b93, #112459);*/
/*	position: relative;*/
/*	transition: transform 0.3s ease-in-out;*/
/*	clip-path: polygon(50% 0%,10% 40%,35% 40%,10% 80%,50% 80%,90% 80%,65% 40%,90% 40%);*/
/*	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);*/
/*}*/
.wide-arrow.up {
    transform: rotate(180deg);
}

.vriablcnCustom{
    /*white-space: pre-wrap;*/
    /*word-break: break-word;*/
    /*overflow-wrap: break-word;*/
    /*overflow: hidden;*/

    text-align: left;
    margin-right: 10px;
    font-size: 16px;
    font-weight: normal;
}
#vriablCn {
    font-family: 'GmarketSans', sans-serif;
    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; /* 들여쓰기 */
}


.label-box {
    padding: 8px 16px;
    background-color: #f5f7ff;
    border: 1px solid #aabbee;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

#scroll-containter::-webkit-scrollbar{
    display: none !important;
}

.custom-modal {
    /*max-width: 1100px;*/
    /*max-height: 650px;*/
    max-width: 1100px;
    width: 100%;           /* 기본적으로 부모 너비 100% 차지 */
    max-height: 650px;
    box-sizing: border-box;
}

#yearList {
    background: #f9f9f9;
    padding: 32px 24px;
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

#yearTitle {
    padding-bottom: 4px;
}

/*Modal css*/
.modal-content {
    /*height: 100%;*/
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;   /* 상하로 배치 */
    max-height: 100%;
    box-sizing: border-box;
}
.modal-dialog-centered {
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 10px;          /* 화면 좁을 때 여백 */
    height: 100%;
    box-sizing: border-box;
}
.modal-body {
    width: 1100px;
    height: 630px;
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 12px;
    flex-grow: 1;
}

.modal-footer {
    flex-shrink: 0;
    padding: 12px;
    text-align: center;
    background-color: white;
}


@media (max-width: 1900px) {
    #mapTitle {
        font-size: 14px !important;
    }
}
@media (max-width: 1200px) {
    .custom-modal {
        max-width: 95vw;
        max-height: 80vh;
    }
    .modal-body {
        width: 95vw;
        height: 70vh;
        max-width: 100%;
        max-height: 60vh;
    }
}

@media (max-width: 576px) {
    .custom-modal {
        max-width: 95vw;
        max-height: 75vh;
    }
    .modal-body {
        width: 95vw;
        height: 70vh;
        max-width: 100%;
        max-height: 55vh;
        padding: 8px;
    }
    .accordion h2 {
        font-size: 14pt !important;
        padding-left: 22px !important;
    }
    #vriabl_list label{
        font-size: 0.69em !important;
    }
    .label-box{
        font-size: 10px !important;
    }
}