/** [S] Desktop ==================== */
.chart_container {max-width: 1400px; margin: 0 auto;}
.chart_container .chart_content {margin-bottom: 80px;}
.chart_container .chart_content:last-child {margin-bottom: 0;}
/** 제목 부분 (title) */
.chart_container p {
    font-weight: 400;
    padding-left: 25px;
    line-height: 1.5;
    margin: 10px 0;
}

.chart_container .title {
    font-size: 32px;
    font-weight: 500;
    color: #010101;
    padding-bottom: 25px;
    margin: auto;
}

/** 내용 부분 (content_wrap) */
.chart_container .content_wrap {
    padding: 50px;
    border: 1px solid #e2e2e2;
}
.chart_container .chart_list {max-width: 1400px; margin-bottom: 15px;}

.chart_container .chart_list .center {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.chart_container .chart_list .center .biz_inner{
    width: 50%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
}

.chart_container .chart_list .center .bizNm {
    display: block;
    width: 100px;
    background: #dcebfb;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #134d86;
    border-radius: 15px;
    padding: 2px 0;
}

.chart_container .chart_list .center .bizNmDetail{
    display: inline-block;
    width: calc(100% - 110px);
    word-break: keep-all;
}

.chart_container .chart_list .center .chart_inner {
    position: relative;
    width: 50%;
    height: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.chart_container .chart_list .center .chart_inner .chartjs-render-monitor {
    /* width: 88% !important;  */
    width: calc(100% - 75px) !important; 
    height: 100% !important;
}

.chart_container .chart_list .center .exec_text,
.chart_container .chart_list .center .asgn_text {
    cursor: default;
    font-weight: 400;
    /* position: absolute;
    top: 50%;
    transform: translateY(-50%); */
}

.chart_container .chart_list .center .exec_text {
    /* left: 15px; 
    color: #fff; */
    position: relative;
    width: 75px;
}
.chart_container .chart_list:first-child .center .exec_text::before{
    content: '집행률';
    display: block;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #134d86;
    background: #dcebfb;
    border-radius: 5px;
    padding: 2px 0;
}

.chart_container .chart_list .center .asgn_text {
    right: 0;
    margin: 0;
    padding: 0;
}
.chart_container .chart_list .center .asgn_text .percent {
    display: inline-block;
    width: 70px;
    color: #ff00ff;
    text-align: left;
    margin-left: 3px;
}

.chart_container .etc_wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    max-width: 1400px;
    margin-top: 30px;
    padding-left: 150px;
}
.chart_container .etc_wrap ul{
    width: 50%;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.chart_container .etc_wrap ul li {
    display: flex;
    align-items: center;
}
.chart_container .etc_wrap ul li{margin-right: 30px;}
.chart_container .etc_wrap ul li:last-child{margin-right: 0;}
.chart_container .etc_wrap .etc_box{
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-right: 10px;
}

.chart_container .etc_wrap .etc_box.blue {
    background: #115ca2;
}
.chart_container .etc_wrap .etc_box.gray {
    background: #ececec;
}
.chart_container .etc_wrap .etc_box.pink {
    width: auto;
    height: auto;
    color: #ff00ff;
    font-weight: bold;
}

.chart_container .unit_wrap {
    margin-top: 10px;
}

/** [E] Desktop ==================== */


/** [S] Tablet ==================== */
@media only screen and (max-width:1400px){
    .chart_container {max-width:96%;}
}
@media only screen and (max-width:1280px){
    
}
@media only screen and (max-width:1024px){
    .chart_container .chart_list .center .biz_inner,
    .chart_container .chart_list .center .chart_inner {width: 100%;}
    .chart_container .chart_list .center .chart_inner {margin-top: 15px;}
    .chart_container .chart_list:first-child .center .exec_text::before {display: none;}
    .chart_container .chart_list {margin-bottom: 30px;}
    .chart_container .etc_wrap {display: block; margin-top: 0; padding-left: 0;}
    .chart_container .etc_wrap ul {width: 100%; justify-content: center;}
    .chart_container .title {font-size: 28px;}
}
/** [E] Tablet ==================== */

/** [S] Mobile ==================== */
@media only screen and (max-width:768px){
    .chart_container .content_wrap {padding: 0 15px 30px;}
    .chart_container .chart_list {padding: 35px 0; margin-bottom: 0; border-bottom: 1px solid #e2e2e2;}
    .chart_container .chart_list:last-child {border-bottom: 0;}
    .chart_container .chart_list .center .biz_inner {flex-direction: column; text-align: center;}
    .chart_container .chart_list .center .bizNm {font-size: 18px;}
    .chart_container .chart_list .center .bizNmDetail {width: 100%;}
    /* .chart_container .chart_list .center .chart_inner .chartjs-render-monitor {
        width: 85% !important; 
    } */
    .chart_container p {padding-left: 0;}
    .chart_container .etc_wrap ul {padding: 30px 0;}
    .chart_container .etc_wrap ul li {flex-direction: column;}
    .chart_container .etc_wrap .etc_box {margin-right: 0;}
    .chart_container .etc_wrap ul li span {text-align: center;}
    .chart_container .etc_wrap .etc_box {width: 60px; height: 28px; margin-bottom: 3px;}
}
@media only screen and (max-width:520px){
    .chart_container .etc_wrap ul li {margin-right: 20px;}
}
/** [E] Mobile ==================== */