.wrap.main {
   font-size: 0px !important;
   min-width: 1360px;
}

.wrap.main .container {
   margin-left: 35px;
   border: 1px solid #C9CBCD;
   
/*    background: linear-gradient(#FAFAFC, #FFFFFF); */
/*    background-color: #FAFAFC; */
}

.wrap.main .tabArea.projectTp {
   position: absolute;
   top: 0px;
   left: 0px;
   bottom: 0px;
   width: 35px;
   
/*    background-color: gray; */
}

.wrap.main .tabArea.projectTp .tab {
   width: calc(100% - 1px);
   height: 180px;
   
   margin-bottom: 5px;
   
   border: 1px solid #C9CBCD;
   border-radius: 5px 0px 0px 5px;
   
   background-color: #E9EBED;
   
   font-size: 20px;
   font-weight: bold;
   color: gray;
   
   line-height: normal;
   
   text-align: center;
   
   writing-mode: vertical-rl;
   
    cursor: pointer;
}

.wrap.main .tabArea.projectTp .tab.active {
   color: #1b2b55;
   border-right-color: #FFFFFF;
   background-color: #FFFFFF;
}

.wrap.main .row {
   text-align: center;
   margin-bottom: 20px;
}

.wrap.main .row.board {
   height: 70%;
}
.wrap.main .row.chart {
   height: calc(30% - 20px);
}

.wrap.main .row.etc {
   display: inline-block;
   height: 100%;
   width: 80%;
}

.wrap.main .row.inner {
   display: inline-block;
   height: calc(50% - 10px);
   width: 100%;
}

.wrap.main .row.inner .box{
   width: calc(60% - 26px);
}

.wrap.main .box {
   position: relative;
   display: inline-block;
   
   vertical-align: top;
   
   background: #FFFFFF url("/resources/images/main/tab_bg_on.png") no-repeat right top;
   border: 3px #65AEE5 solid;
   border-top: 0px;

   padding: 6px 0px;
   margin-left: 20px;
   
   height: calc(100% - 15px);
}

.wrap.main .row.inner .box.gray {
   background: #FFFFFF url("/resources/images/main/tab_bg_off.png") no-repeat right top;
   border-color: #BBBBBB;
   width: calc(40% - 26px);
}

/* .wrap.main .box:first-child { */
/*    margin-left: 0px; */
/* } */

.wrap.main .box .box_title {
   height: 30px;

   margin-bottom: 6px;
   
   font-size: 18px; 
   font-style: normal;
   color: #FFFFFF;
   
   text-align: center;
}

.wrap.main .box .body {
   overflow-y: auto;
   height: calc(100% - 36px);
   
   padding: 0px 10px;
   font-size: 0px;
}

.wrap.main .box .body .dataRow {
   padding: 7px 1px;
}

.wrap.main .box .body .dataRow:first-child {
   padding-top: 10px;
}
.wrap.main .box .body .dataRow:last-child {
   padding-bottom: 8px;
}


.wrap.main .box .dataTitle {
   display: inline-block;
   
   vertical-align: top;
   text-align: center;
   
   font-size: 20px;
   font-weight: bold;
   line-height: 26px;
   
   color: #35404f;
   margin-right: 5px;
   
   min-width: 60px;
   
   word-break: keep-all;
   text-overflow: clip;
   white-space: nowrap;
  overflow: hidden;
}

.wrap.main .box .dataTitle.large {
   line-height: 52px;
}

.wrap.main .box .body .dataValue {
   position: relative;
   display: inline-block;
   
   vertical-align: top;
   
   font-size: 18px;
   font-weight: BOLD;
   
   text-align: center;
   
   padding: 3px 5px 5px 5px;
   margin: 1px 0px;
}

.wrap.main .box .dataTitle + .dataValue {
   height: 20px;
}

.wrap.main .box .body .dataValue.progress {
   width: 110px;
   padding: 2px;
   background-color: lightgray;
   
   overflow: hidden;
}


.wrap.main .box .body .dataValue.progress .progressPercent {
   max-width: 100%;
   height: 100%;
   background-color: #5e8ab7;
   
   text-align: right;
}

.wrap.main .box .body .dataValue.progress .progressPercent .progressLabel {
   padding: 0px 5px;

   color: white;
   font-size: 12px;
   line-height: 18px;
}

.wrap.main .box .body .dataValue.cnt {
   width: 70px;
   
   overflow: hidden;
}

.wrap.main .box .sub_box {
   display: inline-block;
   
   padding: 0px;
   margin-left: 10px;
   
   vertical-align: top;
   
   height: 100%;
   width: calc(50% - 5px);
}

.wrap.main .box .sub_box.div3 {
   width: calc(33.3% - 6.6px);
}

.wrap.main .box .sub_box.single {
   width: 100%;
}
   
.wrap.main .box .sub_box:first-child {
   margin-left: 0px;
}

.wrap.main .box .sub_box .subTitle {
   font-size: 16px;
   font-weight: bold;
   text-align: left;
   margin-bottom: 5px;
   padding-left: 4px;
}

.wrap.main .box .sub_box .subBody {
   font-size: 14px;
   width: 100%;
   height: calc(100% - 2px);
   background-color: #F0F0F3;
   border: 1px solid #E5E5EA;
   border-radius: 4px;
   
   overflow: auto;
}

.wrap.main .box .sub_box .subTitle + .subBody {
   height: calc(100% - 26px);
}
   
.wrap.main .box .sub_box.white .subBody {
   border: none;
   background-color: #FFFFFF;
}

.wrap.main .box .sub_box .subBody .data_section {
   width: calc(100% - 10px);
   font-size: 0px;
   
   min-height: 25px;
}

.wrap.main .box .sub_box .subBody .data_section.title {
   padding: 10px 5px 5px 5px;
}

.wrap.main .box .sub_box .subBody .data_section .sectTitle {
   display: inline-block;
   font-size: 15px;
   font-weight: bold;
   color: #35404f;
}

.wrap.main .box .sub_box .subBody .data_section .sectText {
   display: inline-block;
   font-size: 15px;
   font-weight: normal;
   color: #75808f;
   vertical-align: middle;
}

.wrap.main .box .sub_box .subBody .data_section .sectProgress {
   display: inline-block;
   font-size: 10px;
   line-height: 14px;
   font-weight: normal;
   color: #35404f;
   vertical-align: middle;
   
   background-color: lightgray;
   text-align: left;
}

.wrap.main .box .sub_box .subBody .data_section .progressPercent {
   max-width: 100%;
   height: 100%;
   background-color: #5e8ab7;
   
   color: #ffffff;
   text-align: right;
   
   display: inline-block;
}

.wrap.main .box .sub_box .subBody .data_section .progressLabel {
   padding: 0px 5px;
   
}

.wrap.main .box .data_section {
   display: inline-block;
   
   text-align: center;
   
   padding: 5px;
   min-width: 90px;
   
   vertical-align: middle;
}

.wrap.main .box .sectTitle {
   font-size: 15px;
   color: #999999;
   margin-bottom: 5px;
}

.wrap.main .box .sectText {
   font-size: 22px;
   font-weight: bold;
}

.wrap.main .box .footer {
   position: absolute;
   left: 15px;
   right: 15px;
   bottom: 10px;
   
   padding-top: 7px;
   
   border-top: 3px solid #7dbcea;
}

/* 설치현황 */
.wrap.main .box.project {
   width: calc(20% - 10px);
   padding-bottom: 80px;
   height: calc(100% - 89px);
   margin-left: 0px;
   
   overflow-x: hidden;
}

.wrap.main .box.project .dataTitle {
   text-align: center;
   width: 120px;
}

.wrap.main .box.project .body {
   padding: 0px 10px;
   overflow-x: hidden;
}

.wrap.main .box.project .body .dataRow {
   min-width: 335px;
}

.wrap.main .box.project .footer {
   min-width: 290px;
}

.wrap.main .box.project .footer .dataTitle {
   width: 85px;
}


.wrap.main .chart .chartArea {
   display: inline-block;
   
   width: calc(50% - 10px);
   height: 100%;
   margin-left: 20px;
   
   vertical-align: top;
   
   font-size: 100%;
}

.wrap.main .chart .chartArea:first-child {
   margin-left: 0px;
}

.wrap.main .chart .chartArea .title {
   font-size: 20px;
   font-weight: bold;
   
   padding-left: 10px;
   
   text-align: left;
}

.wrap.main .chart .chartArea .body {
   width: 100%;
   height: calc(100% - 30px);
   
   margin-top: 10px;

   background-color: #F5F5F8;
   border: 1px solid #F0F0F3;
   border-radius: 4px;
}