@charset "utf-8";
/* 공공 데이터 통계 */
.energy-dashboard{padding:80px 20px 130px;background-color: #fafafc;}
.energy-dashboard .inner{max-width: 1400px; margin: auto;}
.tab-box ul{display: flex;align-items: center;height: 100%;}
.tab-box li{display: flex;justify-content: center;}

.tab-box.top{display: table; z-index: 20;height:60px;padding:6px;margin:0 auto 100px; border-radius: 40px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);background-color: #fff;}
.tab-box.top ul { position: relative; }
.tab-box.top li {position: relative;z-index: 1;}
.tab-box.top button{display: flex;align-items: center;justify-content: center;height: 48px;padding: 0 26px;font-size: 20px; font-weight: 600; color: #666666;transition: color 0.3s ease;}
.tab-box.top li.on button,
.tab-box.top li.hover button{ color: #fff; }
.tab-box.top li.on.off-indicator button { color: #666666; }
.tab-box.top li.on.hover button { color: #fff; }
.tab-box.top li.hover button { color: #fff; }
.tab-indicator {position: absolute;top: 0;border-radius: 26px;background-color: #1e43a0;transition: left 0.3s ease, width 0.3s ease, height 0.3s ease;z-index: 0;pointer-events: none;}

.board .tab-box.top{height: 48px;margin: 0 auto 28px;background-color: #f2f2f2; box-shadow: none;}
.board .tab-box.top button{height:38px;font-size: 18px;color:#888888;}
.board .tab-box.top li.on button, .board .tab-box.top li.hover button{color:#444444}
.board .tab-indicator{background: #fff;}

.tab-box.cont{position: absolute;right: 0; z-index: 10;}
.tab-box.cont ul{gap: 65px;}
.tab-box.cont li{}
.tab-box.cont button{position: relative;font-size: 20px;font-weight: 600;color: #888888; transition: color 0.3s ease}
.tab-box.cont li.on button,
.tab-box.cont li.hover button{font-weight: 700; color:#1e43a0;}
.tab-box.cont button:after{content:'';position: absolute; bottom: -16px;left: 0;width:0;height: 4px; background:#1e43a0;  transition: width 0.25s ease;}
.tab-box.cont li.on button:after,
.tab-box.cont li.hover button:after{width:100%;}

.tab-cont{display: none}
.tab-cont.on{display: block}
.tab-cont.on{display: block}

.energy-dashboard .cont-item{position: relative;}
.energy-dashboard .top-box{display: flex;align-items: baseline;flex-wrap: wrap;padding-bottom: 50px;}
.energy-dashboard .top-box .title{position: relative;padding-right: 30px;font-size: 36px;font-weight: 600;color: #222222;}
.energy-dashboard .top-box .title:before{content:'';position: absolute; top: -34px;left:0; width: 44px;height: 3px;background: #1e43a0;}
.energy-dashboard .top-box span{padding-right: 15px;font-size: 16px;font-weight: 600;color:#888888;}
.energy-dashboard .top-box .date{color:#1e43a0;}

.energy-dashboard .board-wrap{display: flex;flex-wrap: wrap;gap: 24px;}
.energy-dashboard .board-wrap + .board-wrap{margin-top:24px;}
.energy-dashboard .board{position: relative;padding:40px 45px;border-radius: 16px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);background-color:#fff;}
.energy-dashboard .board .title{padding-bottom:28px;font-size: 23px;font-weight: 700;line-height: 1.4;color: #222222;}

.power-realtime-bar-graph{display: flex;align-items: center;width: calc(45% - 24px);min-height: 250px;}
.power-realtime-bar-graph ul{width: 100%;}
.power-realtime-bar-graph p{flex: 1;text-indent: -12px;padding-left: 12px;font-size: 17px;font-weight: 500;color: #222222; word-break: keep-all;}
.power-realtime-bar-graph p:before{content:'';display: inline-block;width: 6px;height: 6px;margin-top: -4px;margin-right: 7px;border-radius: 100%;vertical-align: middle;}
.power-realtime-bar-graph .type1 p:before{background:#eb0000}
.power-realtime-bar-graph .type2 p:before{background:#1a65b1}
.power-realtime-bar-graph .type3 p:before{background:#6e1fc1}
.power-realtime-bar-graph .type4 p:before{background:#358d4d}
.power-realtime-bar-graph li{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 10px;}
.power-realtime-bar-graph li + li{margin-top:28px}
.power-realtime-bar-graph .graph{display: flex;align-items: center;gap:3px;width: calc(100% - 172px);}
.power-realtime-bar-graph span{min-width: 88px;font-size: 15px;font-weight: 600; letter-spacing: -.8px;color: #666666;}
.power-realtime-bar-graph .bar{display: block;width: 100%;height:6px;border-radius: 15px;background-color:#eeeeee;}
.power-realtime-bar-graph .bar div{height: 100%;border-radius: 15px;}
.power-realtime-bar-graph .type1 .bar div{background:#eb0000;}
.power-realtime-bar-graph .type2 .bar div{background:#1a65b1;}
.power-realtime-bar-graph .type3 .bar div{background:#6e1fc1;}
.power-realtime-bar-graph .type4 .bar div{background:#358d4d;}

.reserve-rate{display: flex;align-items: center;justify-content: space-between;gap: 30px;width: 55%;min-height: 250px;}
.reserve-rate .con-txt{font-size: 17px;font-weight: 500;line-height: 1.88; color: #444444;}
.reserve-rate .con-txt .col{color:#358d4d;}
.reserve-rate-chart{position: relative;margin-right: 30px;}
.needle{position: relative;width: 224px;height: 124px;}
.needle img{width:100%;}
.needle-pin {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform-origin: left center;
    transition: transform 0.5s ease;
    width: 51px;
    height:41px;
    margin-left: 0px;
    background-image: url(/images/sub/needle-pin.png);
    background-repeat: no-repeat;
    background-position: center;}

.reserve-rate-chart li{position: absolute;font-size: 16px;color: #888888;}
.reserve-rate-chart .type1{bottom: 50px;left: -30px;}
.reserve-rate-chart .type2{top: -18px;left: 40px;}
.reserve-rate-chart .type3{top: -18px;right: 40px;}
.reserve-rate-chart .type4{bottom: 50px;right: -30px;}
.reserve-rate-chart span{position: absolute;left: 50%;transform: translateX(-50%);bottom: -20px;font-size: 20px;font-weight: 700;color: #444444;}

.chart-wrap{display: flex;flex-wrap: wrap;gap: 35px;align-items: center;}
.energy-dashboard .legend li{text-indent: -14px;padding-left: 14px;font-size: 15px;font-weight: 600;color: #888888;}
.energy-dashboard .legend li + li{margin-top:14px;}
.energy-dashboard .legend.row{display: flex;align-items: center;gap: 32px;justify-content: center;}
.energy-dashboard .legend.row li + li{margin-top:0;}
.energy-dashboard .legend.type1 li + li{margin-top:0;}
.energy-dashboard .legend li:before{content:'';display: inline-block;width: 8px;height: 8px;margin-right: 12px;margin-top: -2px;border-radius: 2px;vertical-align: middle;}
.energy-dashboard .legend li.col1:before{background:#4472c4;}
.energy-dashboard .legend li.col2:before{background:#ed7d31;}
.energy-dashboard .legend li.col3:before{background:#a5a5a5;}
.energy-dashboard .legend li.col4:before{background:#ffc000;}
.energy-dashboard .legend li.col5:before{background:#70b0eb;}
.energy-dashboard .legend li.col6:before{background:#70ad47;}
.energy-dashboard .legend li.col7:before{background:#6794dc;}
.energy-dashboard .legend li.col8:before{background:#e5e5e5;}
.energy-dashboard .legend li.col9:before{background:#6794dc;}
.energy-dashboard .legend li.col10:before{background:#6771dc;}
.energy-dashboard .legend li.col11:before{background:#a367dc;}
.energy-dashboard .legend li.col12:before{background:#dc67ce;}
.energy-dashboard .legend li.col13:before{background:#dc6788;}
.energy-dashboard .legend li.col14:before{background:#dc6e3b;}
.energy-dashboard .legend li.col-type1:before{width: 16px;height: 10px;background:url(/images/sub/line-graph-legend-ic.png) 0 0 no-repeat;}

.legend.type1{display: flex;flex-wrap: wrap; align-items: center;justify-content: center;gap: 32px;margin-top: 27px;}
.legend.type1 li{ font-size: 13px;color: #888888;}
.legend.type1 li:before{content:'';width:10px;height:10px;}

.energy-dashboard .tbl-wrap table{width:100%;}
.energy-dashboard .tbl-wrap thead th{text-align: left;height: 48px;padding: 0 15px 0 25px;font-size: 16px;font-weight: 600;color: #444444;background-color:#f7f7f7; vertical-align: middle;}
.energy-dashboard .tbl-wrap thead th:first-child{border-top-left-radius: 7px;}
.energy-dashboard .tbl-wrap thead th:first-child{border-bottom-left-radius: 7px;}
.energy-dashboard .tbl-wrap thead th:last-child{border-top-right-radius: 7px;}
.energy-dashboard .tbl-wrap thead th:last-child{border-bottom-right-radius: 7px;}
.energy-dashboard .tbl-wrap td{height: 42px;text-align: left;padding: 5px 15px 5px 25px;border-bottom:1px solid #ededed;font-size: 15px;line-height: 1.3;color: #666666;vertical-align: middle;}
.energy-dashboard .tbl-wrap .line th,
.energy-dashboard .tbl-wrap .line td{border-left: 1px solid #ededed;}
.energy-dashboard .tbl-wrap .line th:first-child,
.energy-dashboard .tbl-wrap .line td:first-child{border-left: none;}
.energy-dashboard .tbl-wrap .t-center{text-align: center !important;}
.energy-dashboard .tbl-wrap .t-left{text-align: left !important;}

.energy-dashboard .generation-mix{width: calc(36% - 19px);}
.generation-mix .title{padding-bottom: 45px;}
.generation-mix-chart{flex: 1;max-width: 253px;width:100%;height:253px;}
.generation-mix-chart canvas{width: 100% !important;}

.energy-dashboard .energy-forecast{width: calc(64% - 5px);padding: 42px 50px;}
.energy-forecast .title{padding-bottom: 27px;}
.energy-forecast-chart{height: 243px}
.energy-forecast .legend-type{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 30px;padding-top: 10px;}
.energy-forecast .legend-type li{font-size: 13px;color: #888888;}
.energy-forecast .legend-type li:before{content:'';display: inline-block;width: 20px;height: 2px;margin-right: 6px; vertical-align: middle;}
.energy-forecast .legend-type .type1:before{background: linear-gradient(90deg, #477cff, #20a2b4);}
.energy-forecast .legend-type .type2:before{background:url(/images/sub/energy-forecast-chart-legend.png) repeat-x 0 0}

.operation-status{flex: 1;}
.environment-radiation{flex: 1;}
.operation-status .title{padding-bottom: 28px;}
.energy-dashboard .operation-status .title.col{padding-bottom: 12px;font-size: 28px; font-weight: 700;letter-spacing: -1px;color:#1e43a0;}
.operation-status .status-box{margin-top: 38px;padding-bottom: 40px;margin-bottom: 55px;border-bottom:1px solid #dbdbdb;}
.energy-dashboard .status-box ul{display: flex;flex-wrap: wrap;}
.energy-dashboard .status-box li{flex: 1;}
.energy-dashboard .status-box .tit{position: relative;padding-bottom: 18px;font-size: 18px;font-weight: 600;color: #444444;}
.energy-dashboard .status-box .tit:before{content:'';position: absolute;top: -45px;width: 30px;height: 30px;border-radius: 100%;background-repeat: no-repeat;background-position: center;background-color:#e8ecf5;}
.energy-dashboard .status-box .ic1 .tit:before{background-image:url(/images/sub/status-ic8.png)}
.energy-dashboard .status-box .ic2 .tit:before{background-image:url(/images/sub/status-ic10.png)}
.energy-dashboard .status-box .ic3 .tit:before{background-image:url(/images/sub/status-ic23.png)}
.energy-dashboard .status-box .ic4 .tit:before{background-image:url(/images/sub/status-ic2.png)}
.energy-dashboard .status-box .ic5 .tit:before{background-image:url(/images/sub/status-ic3.png)}
.energy-dashboard .status-box .ic6 .tit:before{background-image:url(/images/sub/status-ic4.png)}
.energy-dashboard .status-box .ic7 .tit:before{background-image:url(/images/sub/status-ic5.png)}
.energy-dashboard .status-box .ic8 .tit:before{background-image:url(/images/sub/status-ic6.png)}
.energy-dashboard .status-box .ic9 .tit:before{background-image:url(/images/sub/status-ic7.png)}
.energy-dashboard .status-box .ic10 .tit:before{background-image:url(/images/sub/status-ic9.png)}
.energy-dashboard .status-box .ic11 .tit:before{background-image:url(/images/sub/status-ic11.png)}
.energy-dashboard .status-box .ic12 .tit:before{background-image:url(/images/sub/status-ic12.png)}
.energy-dashboard .status-box .ic13 .tit:before{background-image:url(/images/sub/status-ic13.png)}
.energy-dashboard .status-box .ic14 .tit:before{background-image:url(/images/sub/status-ic14.png)}
.energy-dashboard .status-box .ic15 .tit:before{background-image:url(/images/sub/status-ic15.png)}

.energy-dashboard .status-box .type1 .tit:before{background-image:url(/images/sub/status-ic19.png)}
.energy-dashboard .status-box .type2 .tit:before{background-image:url(/images/sub/status-ic20.png)}
.energy-dashboard .status-box .type3 .tit:before{background-image:url(/images/sub/status-ic21.png)}
.energy-dashboard .status-box .type4 .tit:before{background-image:url(/images/sub/status-ic22.png)}

.energy-dashboard .status-box .type1 .tit:before{background-color: #eaf3ed;}
.energy-dashboard .status-box .type2 .tit:before{background-color: #fde5e5;}
.energy-dashboard .status-box .type3 .tit:before{background-color: #f0e8f9;}
.energy-dashboard .status-box .type4 .tit:before{background-color: #e8eff7;}

.board-wrap.status{display: flex;flex-wrap: wrap;gap: 24px;}
.board-wrap.status .board{flex:1;min-height: 180px;padding:36px;}
.board-wrap.status .status-box {display: flex;align-items: center;height: 100%;margin-top: 8px;}
.board-wrap.status .status-box li{margin-top: 25px}
.energy-dashboard .status .status-box .data strong{font-size: 30px;}
.energy-dashboard .status .status-box .type1 .data strong{color:#358d4d}
.energy-dashboard .status .status-box .type2 .data strong{color:#eb0000}
.energy-dashboard .status .status-box .type3 .data strong{color:#6e1fc1}
.energy-dashboard .status .status-box .type4 .data strong{color:#204180}


.usage-type-share-chart{max-width:253px;width:100%;height:253px;}
.usage-type-share-chart canvas{width: 100% !important;height:253px;}
.usage-type-share{width: calc(35% - 4px);}
.usage-type-usage-customer{width: calc(65% - 20px);}

.energy-dashboard .status-box .data{font-size: 14px;font-weight: 500;line-height: 1.3;color: #888888;}
.energy-dashboard .status-box .data strong{padding-right: 10px;font-size: 22px;font-weight: 600;letter-spacing: -1px;color:#204180;}
.operation-status .s-txt{font-size: 16px;font-weight: 500;color: #888888;}
.operation-status .map-plant{ display: flex;flex-wrap: wrap;justify-content: space-between;gap: 10px;position: relative;}
.operation-status .text-item{display:none;width: calc(34% - 5px);}
.operation-status .text-item.active{display:block;}
.operation-status .status{display: flex;flex-wrap: wrap;gap: 25px; padding-top: 48px;}
.operation-status .status dl{width: calc(50% - 13px);margin: 0;}
.operation-status .status dt{padding-bottom: 8px;font-size: 17px;font-weight: 500;color: #666666;}
.operation-status .status dd{padding: 0;font-size: 16px;font-weight: 500;line-height: 1;color: #999999;}
.operation-status .map{position: relative;width: calc(66% - 8px);}
.operation-status .map-cont a{transition: 0.3s ease-in-out;}

.map-cont {display: block;position: absolute; right: 0;opacity: 0;visibility: hidden;pointer-events: none;transition: opacity 0.3s ease, visibility 0.3s ease;}
.map-cont.active {opacity: 1;visibility: visible;pointer-events: auto;z-index: 1;}
.map-cont .map-btn {transition: transform 0.3s ease, opacity 0.3s ease;transform: translateY(-6px);opacity: 0;}
.map-cont.active .map-btn {transform: translateY(0);opacity: 1;}
.map-cont svg{width:100%; overflow: visible;}


.environment-radiation .status{display:none;}
.environment-radiation .status.active{display:block;}


.environment-radiation .title{padding-bottom: 30px;}
.tbl-wrap .status-badge{display: inline-block;width: 53px;height: 24px;line-height: 24px;border-radius: 13px;font-size: 15px;}
.tbl-wrap .status-badge em:before{content:'';display: inline-block;width:4px;height:4px;;margin-top: -2px;margin-right:3px;border-radius: 100%;text-align: center;vertical-align: middle;}
.tbl-wrap .status-badge.col1{color: #358d4d;background: #eff6f1;}
.tbl-wrap .status-badge.col2{color:#1e43a0;background:#edf0f8;}
.tbl-wrap .status-badge.col3{color:#ba0d00;background:#faeceb;}
.tbl-wrap .status-badge.col1 em:before{background:#358d4d;}
.tbl-wrap .status-badge.col2 em:before{background:#1e43a0;}
.tbl-wrap .status-badge.col3 em:before{background:#ba0d00;}
.environment-radiation .tbl-wrap{max-height: 307px;overflow-y: auto;}
.environment-radiation .tbl-wrap thead th {position: sticky;top: 0;}
.environment-radiation .mapArea{overflow: hidden;height: 370px;margin-bottom: 30px;border-radius: 13px; border: 1px solid #f4f4f4;}
.environment-radiation .mapArea img{width: 100%;height: 100%;object-fit: cover;}
.energy-dashboard .energy-usage{display: flex;flex-wrap: wrap;align-items: center;gap: 50px;justify-content: space-between;padding: 40px 45px 50px}

.energy-usage-box {width: calc(60% - 10px);}

.energy-usage .title{padding-bottom: 28px;}
.graph-data{display: flex; align-items: flex-start; gap: 20px;margin-top: 25px; }
.graph-data .bar{flex-shrink: 0; width: 9px;height: 264px;border-radius: 22px;background: linear-gradient(to bottom, #dee6f2, #365faf);box-shadow: 6px 0px 0px rgba(0, 0, 0, 0.07);}
.graph-data ul{display: flex;flex-direction: column;justify-content: space-between; height: 264px;}
.graph-data li{font-size: 15px;font-weight: 600;color: #666666}
.graph-data li:first-child{padding-top:4px;}
.graph-data p{margin-left: -30px;margin-top: 32px;font-size: 14px;font-weight: 500;color: #888888;}
.energy-usage .map{display: flex;flex-wrap: wrap;width: calc(40% - 40px);}


.energy-usage .status-box{margin-bottom:40px;}
.energy-usage .status-box ul{display: flex;flex-wrap: wrap;gap: 16px;}
.energy-usage .status-box li{display: flex;align-items: center;height: 106px; padding: 10px 20px;border-radius: 13px;border:1px solid #f4f4f4;background:#fdfdfd;}
.energy-dashboard .energy-usage .status-box .tit{font-size: 17px;font-weight: 600;color: #444}
.energy-dashboard .energy-usage .status-box .tit:before{content:none;}
.energy-dashboard .energy-usage .type1 strong{padding-right:0;}
.energy-dashboard .status-box .data strong.col{color:#4071ca;}
.energy-dashboard .energy-usage .slash{padding: 0 2px;font-size: 26px;font-weight: 600;color: #888888;}
.energy-dashboard .energy-usage .status-box .data strong{font-size: 26px;}

.energy-status{height:320px;}

.energy-dashboard .power-usage-status{padding: 40px 45px;}
.energy-dashboard .power-usage-status,
.energy-dashboard .board-item{ flex: none;width: calc(50% - 12px);}
.power-usage-status .title{padding-bottom: 28px;}
.power-usage-status .box{display: flex;flex-wrap: wrap;justify-content: space-between;gap:10px;}
.power-usage-status .tit{display: flex;gap: 6px;align-items: center;font-size: 17px;font-weight: 600;color: #444444;}
.power-usage-status .tit span{font-size: 16px;font-weight: 600;color: #888888;}
.power-usage-status .tit:before{content:'';display:inline-block;width:28px;height:28px;border-radius: 100%;margin-right: 12px;margin-top: -2px;background-repeat: no-repeat;background-position: center;vertical-align: middle;}
.power-usage-status .up .tit:before{background-color:#f6e5e3;}
.power-usage-status .down .tit:before{background-color:#e8ecf5;}
.power-usage-status .type1.up .tit:before{background-image: url(/images/sub/status-ic1.png)}
.power-usage-status .type1.down .tit:before{background-image: url(/images/sub/status-ic2.png)}
.power-usage-status .type2.up .tit:before{background-image: url(/images/sub/status-ic26.png)}
.power-usage-status .type2.down .tit:before{background-image: url(/images/sub/status-ic3.png)}
.power-usage-status .type3.up .tit:before{background-image: url(/images/sub/status-ic25.png)}
.power-usage-status .type3.down .tit:before{background-image: url(/images/sub/status-ic4.png)}
.power-usage-status .type4.up .tit:before{background-image: url(/images/sub/status-ic24.png)}
.power-usage-status .type4.down .tit:before{background-image: url(/images/sub/status-ic5.png)}

.power-usage-status .up .data strong{color:#ba0d00;}
.power-usage-status .down .data strong{color:#4071ca;}
.power-usage-status .up .value{background-image:url(/images/sub/up-ic.png);color:#ba0d00}
.power-usage-status .down .value{background-image:url(/images/sub/down-ic.png);color:#4071ca}

.power-usage-status .box{display: flex;align-items: center;justify-content: space-between;height: 145px; margin-bottom: 38px;padding: 20px 40px;border-radius: 13px;border: 1px solid #f4f4f4; background-color: #fdfdfd;}
.power-usage-status .data{display:flex;flex-wrap: wrap;align-items: baseline;gap: 28px;}
.power-usage-status .data .num{font-size: 14px;font-weight: 500;color: #888888;}
.power-usage-status .data .num strong{font-size: 30px;font-weight: 600;letter-spacing: -1.4px;padding-right: 12px;}
.power-usage-status .value{padding-left: 15px;font-size: 14px;font-weight: 700;background-repeat: no-repeat;background-position: 0 50%;}
.status-num-badge{display: block;width: 74px;height: 24px;text-align: center;margin: auto; border-radius: 15px;line-height: 24px;}
.status-num-badge.up{background-color:#faeceb;}
.status-num-badge.down{background-color: #edf0f8;}
.status-num-badge em{padding-left: 10px;background-repeat: no-repeat;background-position: 0 50%;}
.status-num-badge.up em{background-image:url(/images/sub/up-ic.png);color: #ba0d00}
.status-num-badge.down em{background-image:url(/images/sub/down-ic.png);color: #1e43a0;}

.industry-share .chart-wrap{justify-content: center;}
.industry-share-chart{max-width:253px;width:100%;height:253px;}
.industry-share-chart canvas{width:100% !important;}

.energy-dashboard .board.industry-usage-customer-status{margin-top:24px;}
.energy-dashboard .board.industry-usage-customer-status .title{padding-bottom:30px;}
.industry-usage-customer-status .legend{margin-top:25px;}
.industry-usage-customer-status-chart{height:160px;}
.energy-dashboard .usage-type-share .title,
.energy-dashboard .usage-type-usage-customer .title{padding-bottom:28px;}
.butterfly-chart{display: flex; align-items: end;width: 100%; border-top: 1px solid #eeeeee;}
.butterfly-chart .left-label{width: 40px; flex-shrink: 0;}
.butterfly-chart .label{display:flex; flex-direction:column; justify-content:space-around; height:200px; }
.butterfly-chart .label span{display:flex; flex-direction:column; justify-content:space-around; height:200px; font-size:13px;color:#888888; }
.butterfly-left{flex: 1; position: relative; min-width: 0;height: 200px;}
.butterfly-chart .zero{text-align: center; font-size: 13px; color: #888; flex-shrink: 0;}
.butterfly-item{flex: 1; position: relative; min-width: 0;height: 200px;}

.usage-type-usage-customer .legend{margin-top:28px;}
.board.contract-type-share{margin-top:24px;}
.board.contract-type-share .flex-item{display: flex;flex-wrap: wrap;gap: 50px;}
.contract-type-share-chart{max-width:253px;width:100%;height:253px;}
.contract-type-share-chart canvas{width: 100% !important;}
.board .top-title-box{ display: flex;align-items: baseline;gap: 20px;}
.board .top-title-box span{font-size: 16px;font-weight: 600;color: #888888;}
.board .etc-txt{padding-bottom: 20px;font-size: 15px;font-weight: 500;color: #888888;text-align: right;}
.board.contract-type-share .chart-wrap{max-width: 350px;width: 100%;}
.board.contract-type-share .value-wrap{flex:1;}
.value-wrap > ul{display: flex;flex-wrap: wrap;gap: 16px;}
.value-wrap > ul > li{display: flex;flex-wrap: wrap;align-items: center;width: calc(33.333% - 11px);height: 105px; padding: 15px 23px;border: 1px solid #f4f4f4;border-radius: 13px;}
.value-wrap .top{ display: flex;align-items: center;justify-content: space-between;flex: auto;width: 100%;}
.value-wrap .cont{display: flex;align-items: center;justify-content: space-between;flex: auto;width: 100%;}
.value-wrap .top p{font-size: 17px;font-weight: 600;color: #444444;}
.value-wrap .top strong{font-size: 26px;font-weight: 600;letter-spacing: -1px;color: #204180;}
.value-wrap .cont p{font-size: 14px;font-weight: 500;  line-height: 1.3;color: #888888;}
.value-wrap .value{display: flex;align-items: center;gap: 15px;justify-content: right;flex:1;}
.value-wrap .value li{padding-left: 16px;font-size: 14px;font-weight: 700;letter-spacing: -.8px;background-repeat: no-repeat;background-position: 0 50%;}
.value-wrap .value li.up{background-image:url(/images/sub/up-ic.png);color: #ba0d00}
.value-wrap .value li.down{background-image:url(/images/sub/down-ic.png);color: #1e43a0;}

.generation-source-share .title,
.power-capacity .title{padding-bottom: 28px;}

.generation-source-share{width: calc(36% - 19px);}
.generation-source-share-chart{max-width: 253px;width:100%;height:253px;}
.generation-source-share-chart canvas{width: 100% !important;}
.power-capacity{width: calc(64% - 5px);}
.power-capacity-chart{height:280px;}
.power-capacity .legend{margin-top: 25px;}

.power-region-status .top-title-box{justify-content: space-between;width: calc(40% - 40px);padding-bottom: 40px}
.energy-dashboard .power-region-status .top-title-box .title{padding-bottom:0;}
.board select{max-width: 190px;width: 100%;height:44px;padding: 0 20px;border-radius: 12px;border:1px solid #c8c8c8;font-size: 16px;font-weight: 500;color: #666666;background-image: url(/images/sub/box_sel_arrow.png);background-repeat: no-repeat;background-position: center right 20px;}
.power-region-status .info-item .title{padding-bottom: 28px}
.power-region-status .wrap{display: flex;flex-wrap: wrap;align-items: center;gap: 50px;justify-content: space-between;}
.power-region-status .map{display: flex;flex-wrap: wrap;width: calc(40% - 40px);}

.energy-dashboard .map-area{width: calc(100% - 88px);}
.energy-dashboard .map svg{width:100%;}

.map-area .bubble{display:none;visibility: hidden;pointer-events: none; position: absolute; opacity: 0;transition: opacity 0.3s ease;}

.map-area .bubble.active{display:block; visibility: visible;opacity: 1;}


.power-region-status .info-item{width: calc(60% - 10px);}
.power-region-status .status-box{padding-bottom: 40px;margin-bottom: 40px;border-bottom: 1px solid #dbdbdb;}

.energy-dashboard .power-region-status .status-box ul{gap:12px;}
.energy-dashboard .power-region-status .status-box li{flex:auto;}
.energy-dashboard .power-region-status .status-box .data strong.col{padding-right: 4px;}
.energy-dashboard .plant-generation{flex: 1;}
.energy-dashboard .plant-detail{flex: 1;}
.plant-generation .title{padding-bottom: 28px;}
.plant-detail .title{padding-bottom: 28px;}
.plant-generation-chart{height:430px}
.bottom-etc-txt{padding-top: 13px;font-size: 13px;line-height: 1.4;color: #888888;}

.energy-dashboard .industry-energy-status{flex:1;}
.energy-dashboard .carbon-intensity{flex:1;}
.industry-energy-status .title,
.carbon-intensity .title{padding-bottom: 28px;}

.industry-energy-status-chart canvas,
.carbon-intensity-chart  canvas{width:100% !important;}

.industry-energy-status-chart,
.carbon-intensity-chart{height: 315px;}

.board-list-wrap{display: flex;flex-wrap: wrap;gap: 24px;}

.board-list-wrap .board-wrap.status{width: calc(25% - 20px);}
.board-list-wrap .board-wrap.status .board{flex: auto;width: 100%;}
.energy-dashboard .energy-usage-emission{width: calc(75% - 4px);}
.energy-usage-emission-chart{height:400px;}

.board-list-wrap + .board-wrap{margin-top:24px;}
.board-list-wrap .board-wrap{width: 100%;}
.energy-dashboard .emission-region{width: calc(54% - 8px);}
.energy-dashboard .industry-emission{width: calc(46% - 16px);}
.emission-region-chart{height:350px;}
.industry-emission-chart{height:350px;}

@media screen and (max-width: 1400px) {
    .energy-dashboard .board{padding: 30px 34px;}
    .energy-dashboard .board .title{padding-bottom: 25px;font-size: 21px;}
    .power-region-status .top-title-box .title{padding-bottom:0}
    .board select{max-width: 160px;padding: 0 16px;}

    .board .top-title-box span{font-size: 15px;}
    .power-realtime-bar-graph .graph{width: calc(100% - 125px);}
    .graph-data{flex-wrap: wrap;width: 100%; margin-top: 0;}
    .graph-data .bar{width: 100%;height: 9px;box-shadow: 2px 4px 0px rgba(0, 0, 0, 0.07);background: linear-gradient(to right, #dee6f2, #365faf);}
    .graph-data .num{width:100%;}
    .graph-data ul{flex-direction: row;height: auto;}
    .graph-data li:first-child{padding-top:0;}
    .graph-data p{margin-left: 0;margin-top: 20px;text-align: right;}
    .energy-dashboard .map-area{width:100%;margin-top: 20px;}

    .needle{width: 195px;height: 108px;}
    .reserve-rate-chart li{font-size: 15px;}
    .reserve-rate-chart span{font-size: 17px;}
    .energy-dashboard .status-box .tit{font-size: 17px;}
    .energy-dashboard .energy-usage .status-box .tit{font-size: 16px;}
    .energy-dashboard .status-box .data strong{font-size: 20px;}
    .energy-dashboard .energy-usage .status-box .data strong {font-size: 22px;}
    .energy-dashboard .operation-status .title.col{font-size: 25px;}
    .board .tab-box.top button{font-size: 17px;}
    .board-wrap.status .board{padding: 30px;}
    .energy-dashboard .status .status-box .data strong{font-size: 26px;}
    .power-usage-status .data .num strong{font-size: 27px;}
    .value-wrap .top strong{font-size: 22px;}
    .value-wrap .cont{margin-top: 8px;}
    .value-wrap .cont p{flex: auto;}
    .value-wrap .value{gap: 8px;}
    .value-wrap .value li{min-width: 52px;}
}



@media screen and (max-width: 1280px) {
    .tab-box.top{height: 55px; padding:5px; margin: 0 auto 90px;}
    .tab-box.top button{height: 42px;padding: 0 22px;font-size: 18px;}
    .energy-dashboard .top-box .title{width: 100%;padding-right: 0;padding-bottom: 15px;font-size: 32px;}
    .energy-dashboard .top-box .title:before{top: -28px; width: 38px;}
    .tab-box.cont ul{gap: 45px;}
    .tab-box.cont button{font-size: 19px;}
    .tab-box.cont button:after{bottom: -12px;height: 3px;}
    .board .tab-box.top{width: 100%;}
    .board .tab-box.top li{flex:1}

    .energy-dashboard .top-box{padding-bottom: 40px;}
    .energy-dashboard .board{ padding: 30px;}
    .energy-dashboard .tbl-wrap thead th{padding: 0 10px 0 15px;font-size: 15px;}
    .energy-dashboard .tbl-wrap td{padding: 5px 10px 5px 15px;font-size: 14px;}

    .reserve-rate .con-txt .m-br{display: none;}
    .board-wrap.status .board{min-height: 165px;}
    .board-wrap.status .status-box{margin-top:0;}
    .board-wrap.status .status-box li{margin-top: 37px;}
    .energy-usage .status-box li{flex: auto;width: calc(50% - 8px);}

    .energy-dashboard .usage-type-usage-customer .title{padding-bottom: 0;}
    .butterfly-chart-item{display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;}

    .generation-mix-chart,
    .contract-type-share-chart,
    .usage-type-share-chart,
    .generation-source-share-chart{margin: auto;}
    .chart-wrap .legend{display: flex;flex-wrap: wrap;gap: 14px 5px;width:100%;text-align: center;}
    .energy-dashboard .chart-wrap .legend li {flex: auto;width: calc(33.333% - 10px);}
    .energy-dashboard .chart-wrap .legend li + li{margin-top: 0;}
    .energy-dashboard .industry-share .chart-wrap .legend li{width: auto;text-align: center;}
    .energy-dashboard .legend li:before{margin-right: 6px;}
    .energy-dashboard .operation-status .title.col{position: absolute;font-size: 22px;}

    .energy-dashboard .status-box .tit{padding-bottom: 10px;}
    .energy-dashboard .power-region-status .status-box ul{gap: 70px 0;}
    .energy-dashboard .power-region-status .status-box li{width: calc(50% - 6px);}

    .operation-status .status-box{margin-bottom: 40px;}
    .energy-dashboard .map svg{max-height: 450px;}
    .board .tab-box.top button{padding: 0 10px;}
    .power-usage-status .box{padding:20px;}
    .power-region-status .top-title-box,
    .energy-usage .map,
    .energy-usage-box,
    .power-region-status .map,
    .power-region-status .info-item{width: calc(50% - 25px);}
    .power-usage-status .tit span{font-size: 15px;}
    .power-usage-status .tit:before{margin-right: 6px;}
    .power-usage-status .data .num strong{padding-right: 6px;font-size: 25px;letter-spacing: -1.2px;}
    .energy-dashboard .status .status-box .data strong{padding-right: 6px;font-size: 24px;}

    .operation-status .s-txt{position: absolute;top: 45px; font-size: 15px;}
    .operation-status .status{gap: 16px;}
    .operation-status .text-item > div{margin-top:45px;}

    .environment-radiation .mapArea{height: 260px;}
    .operation-status .status dd{line-height: 1.4;}
    .power-usage-status .data{flex-direction: column;gap: 15px;align-items: end;}
    .energy-dashboard .power-usage-status,
    .energy-dashboard .board-item{flex:auto;}
    .value-wrap > ul > li{width: calc(50% - 8px);padding: 15px;}

}

@media screen and (max-width: 1024px) {
    .energy-dashboard{padding: 60px 20px 80px;}
    .tab-box.top{height: 51px;}
    .tab-box.cont ul{gap: 32px;}
    .tab-box.cont button{font-size: 17px;}
    .tab-box.top button{height: 38px;padding: 0 18px;font-size: 16px;}
    .energy-dashboard .top-box{padding-bottom: 20px;}
    .energy-dashboard .top-box .title{padding-right: 15px;font-size: 26px;}
    .energy-dashboard .top-box span{font-size: 15px;}

    .tab-box.cont{top:0;}
    .energy-dashboard .board{width:100%;}
    .energy-dashboard .board .title{padding-bottom: 15px;font-size: 19px;}
    .energy-dashboard .chart-wrap .legend li{width: auto;padding-left: 0;}

    .operation-status .text-item{min-height: 450px;}

    .graph-data{align-items: center;width: auto;}
    .graph-data .bar{width: 9px;height: 264px;background: linear-gradient(to bottom, #dee6f2, #365faf);box-shadow: 6px 0px 0px rgba(0, 0, 0, 0.07);}
    .graph-data .num{width: auto;}
    .graph-data ul{flex-direction: column;height: 264px;margin-top: 35px;}
    .graph-data p{margin-left: -30px;}
    .energy-dashboard .map-area{width: calc(100% - 118px);margin-top: 0;}
    .map-cont{left: 50%;right: auto;transform: translateX(-50%);width: 100%;}
    .board .etc-txt{padding-bottom: 15px;font-size: 14px;}
    .reserve-rate .con-txt{padding-right:10px;}
    .needle-pin{bottom: -12px;}
    .reserve-rate-chart span{ bottom: -25px;}

    .board-list-wrap .board-wrap.status{width:100%;}
    .board-list-wrap .board-wrap.status .board{width: calc(33.333% - 16px);}

    .operation-status{flex: auto; gap: 20px 30px;}
    .operation-status .status{gap: 70px 16px;}
    .operation-status .status dl{width: calc(33.333% - 11px);}
    .environment-radiation .mapArea{height: auto;border: none;}
    .environment-radiation .mapArea img{border-radius: 13px;}
    .power-region-status .top-title-box,
    .energy-usage .map,
    .energy-usage-box,
    .power-region-status .map,
    .power-region-status .info-item{width:100%}
    .energy-dashboard .energy-usage .status-box .data strong{font-size: 20px;}
    .power-usage-status .data{ flex-direction: row;align-items: center;}
    .power-region-status .status-box{margin-top:20px;}
    .board-wrap.status .board{flex: auto;width: calc(50% - 12px);}
    .energy-dashboard .status .status-box .data strong{font-size: 22px;}
    .butterfly-chart-item{height: auto;}
    .chart-wrap .legend{gap: 15px;}
    .board.contract-type-share .chart-wrap{margin: auto;max-width: 100%;}
    .board.contract-type-share .value-wrap{flex: auto;width: 100%;}
    .generation-source-share-chart{margin:auto;}
    .energy-dashboard .plant-generation,
    .energy-dashboard .industry-energy-status,
    .energy-dashboard .carbon-intensity{flex: auto;}
}

@media screen and (max-width: 768px) {
    .tab-box.top{height: auto;margin: 0 auto 60px;}
    .tab-box.top button{height:auto;padding: 6px 14px;}
    .tab-box.cont{position: static; margin-bottom: 50px;}
    .tab-box.cont ul{justify-content: center;}
    .tab-box.cont button:after{height: 2px}
    .tab-box.cont ul {width: max-content;  margin: 0 auto;}
    .tab-box.cont ul{gap: 25px;}

    .board .tab-box.top button{padding: 0 8px;font-size: 15px;}
    .energy-dashboard .top-box{padding-bottom: 20px;}
    .energy-dashboard .top-box .title{font-size: 22px;}
    .energy-dashboard .top-box .title:before{top: -15px;width: 28px;height: 2px;}
    .tab-box.top {margin: 0 auto 40px;}
    .energy-dashboard .board{padding: 25px 20px}
    .operation-status .status-box{padding-bottom: 30px;margin-bottom: 30px;}
    .graph-data{gap: 14px;width: 100%;}
    .graph-data .num{width:100%;}
    .graph-data .bar{width: 100%;height: 9px; box-shadow: 2px 4px 0px rgba(0, 0, 0, 0.07);background: linear-gradient(to right, #dee6f2, #365faf);}
    .graph-data ul{flex-direction: row;height: auto;margin-top: 0;}
    .graph-data li{ font-size: 14px;}
    .energy-dashboard .map-area{width: 100%;}
    .power-realtime-bar-graph .graph{width: calc(100% - 105px);}
    .power-realtime-bar-graph p{font-size: 16px;}
    .power-realtime-bar-graph span{min-width: 78px;font-size: 14px;}
    .reserve-rate{flex-wrap: wrap;}
    .reserve-rate .con-txt{padding-right: 0;font-size: 16px;line-height: 1.6;}
    .reserve-rate-chart{margin: 20px auto;}
    .energy-dashboard .chart-wrap .legend li{width: calc(33.333% - 10px);}
    .power-usage-status .data{justify-content: space-between;width: 100%;}
    .energy-dashboard .board-wrap{gap: 14px;}
    .board-wrap.status .board{min-height: auto;padding: 20px;}
    .power-realtime-bar-graph{min-height: auto;}
    .power-realtime-bar-graph li + li{margin-top: 25px;}
    .board.contract-type-share,
    .energy-dashboard .board.industry-usage-customer-status{margin-top:14px;}
    .value-wrap > ul{gap:14px;}
    .board-wrap.status{gap: 14px;}
    .energy-dashboard .status-box .tit{font-size: 16px;}
    .energy-dashboard .status .status-box .data strong{font-size: 19px;}
    .value-wrap .top strong{font-size: 19px;letter-spacing: -.6px;}
    .value-wrap .cont{flex-wrap: wrap;}
    .value-wrap .value{margin-top: 8px;}
    .power-region-status .top-title-box{padding-bottom: 20px;}
    .board select{height: 40px;padding: 0 14px;font-size: 15px;}
    .energy-dashboard .status-box .data{font-size: 13px;}
    .energy-dashboard .status-box .data strong{font-size: 19px;}
    .energy-dashboard .energy-usage{gap: 20px;}
    .board-list-wrap .board-wrap.status{width:100%;}
    .industry-energy-status-chart, .carbon-intensity-chart,
    .energy-usage-emission-chart,
    .emission-region-chart,
    .industry-emission-chart,
    .plant-generation-chart,
    .energy-status{height: 280px;}
    .operation-status .text-item{min-height: auto;}
    .map-cont{display:none;position: static; transform: initial;}
    .map-cont.active{display:block;s}
    .operation-status .status{gap: 20px 16px;text-align: center;}
    .operation-status .status dt{font-size: 16px;}
    .operation-status .status dd{font-size: 15px;}
    .operation-status .text-item{width: 100%;}
    .operation-status .map{width:100%;margin-top: 20px;}
    .power-usage-status .box{gap: 20px;height: auto;}
    .generation-mix-chart,
    .contract-type-share-chart,
    .generation-source-share-chart{max-width: 220px; height: 220px;}
}
@media only screen and (max-width:520px) {
    .board-list-wrap .board-wrap.status .board,
    .board-wrap.status .board{width:100%;}
}

@media screen and (max-width: 480px) {
    .tab-box.cont{overflow-x: auto;-webkit-overflow-scrolling: touch;scrollbar-width: none; min-height: 33px;}
    .tab-box.cont::-webkit-scrollbar {display: none;}
    .tab-box.top button{padding: 6px 10px;font-size:15px;}
    .tab-box.cont button {font-size: 16px;}
    .value-wrap .value li,
    .power-usage-status .value{padding-left: 10px;}
    .value-wrap .top strong{font-size: 18px;}
    .board select{max-width: 130px;}
    .energy-dashboard .top-box .date{width: 100%;padding-bottom: 10px;}
    .map-cont svg{height:100%;}

}
@media only screen and (max-width:380px) {
    .energy-dashboard .status-box li{flex: auto;width: 100%;}
    .energy-dashboard .operation-status .status-box li:first-child{margin-top:10px;}
    .energy-dashboard .operation-status .status-box li + li{margin-top: 55px;}
}