@charset "utf-8";
@import url(/main/css/content.css);

/* 실시간 전력수급현황 */
.graph_wrap {width:100%;border-radius:6px;background:#fff;width:calc(100% - 30px);margin:15px auto;padding:20px;border:1px solid #e1e1e1;/*box-shadow:7px 7px 8px rgba(0,0,0,0.07);*/}
.graph_wrap .graph_head {position:relative;}
.graph_wrap .graph_head .title {font-size:18px;font-weight:500;color:#3b3b3b;}
.graph_wrap .graph_head .title + p {font-size:16px;font-weight:500;color:#3b3b3b;}
.graph_wrap .graph_head .title + p span {color:#0080f7;font-weight:bold;}
.graph_wrap .graph_head .step {font-size:33px;font-weight:900;color:#c9c9c9;position:absolute;top:-5px;right:0;}
.graph_wrap.step01 .graph_head .title + p span,
.graph_wrap.step01 .graph_head .step {color:#333333;}
.graph_wrap.step02 .graph_head .title + p span,
.graph_wrap.step02 .graph_head .step {color:#6849c3;}
.graph_wrap.step03 .graph_head .title + p span,
.graph_wrap.step03 .graph_head .step {color:#1278e0;}
.graph_wrap.step04 .graph_head .title + p span,
.graph_wrap.step04 .graph_head .step {color:#3eb52a;}
.graph_wrap.step05 .graph_head .title + p span,
.graph_wrap.step05 .graph_head .step {color:#ff8706;}
.graph_wrap.step06 .graph_head .title + p span,
.graph_wrap.step06 .graph_head .step {color:#d40000;}
.graph_wrap .graph {width:178px;max-width:100%;height:129px;position:relative;background:url(/app/img/graph.png) center bottom no-repeat;margin:25px auto 0 auto;}
.graph_wrap .graph::after {content:'';width:23px;height:61px;position:absolute;bottom:30px;left:79px;background:url(/app/img/graph_arrow.png);-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transform-origin:11px 49px;transform-origin:11px 49px;-webkit-animation: graph 1s ease;animation: graph 1s ease;}
.graph_wrap.step01 .graph::after {-webkit-transform:rotate(-90deg);transform:rotate(-90deg);}
.graph_wrap.step02 .graph::after {-webkit-transform:rotate(-53deg);transform:rotate(-53deg);}
.graph_wrap.step03 .graph::after {-webkit-transform:rotate(-18deg);transform:rotate(-18deg);}
.graph_wrap.step04 .graph::after {-webkit-transform:rotate(16deg);transform:rotate(16deg);}
.graph_wrap.step05 .graph::after {-webkit-transform:rotate(49deg);transform:rotate(49deg);}
.graph_wrap.step06 .graph::after {-webkit-transform:rotate(89deg);transform:rotate(89deg);}
@keyframes graph {
    0% {-webkit-transform:rotate(-90deg);transform:rotate(-90deg);}
    100% {}
}
.graph_wrap .graph_foot {margin-top:20px;overflow:hidden;}
.graph_wrap .graph_foot .reserve_power {overflow:hidden;margin-bottom:10px;}
.graph_wrap .graph_foot .reserve_power span {font-size:15px;}
.graph_wrap .graph_foot .reserve_power span:nth-child(1) {float:left;font-weight:500;color:#606060;padding-left:25px;background:url(/app/img/icon_reserve_power.png) center left no-repeat;}
.graph_wrap .graph_foot .reserve_power span:nth-child(2) {float:right;font-weight:bold;color:#484848;}
.graph_wrap .graph_foot .update span:nth-child(1) {float:left;font-weight:500;color:#606060;padding-left:25px;background:url(/app/img/icon_update.png) center left no-repeat;}
.graph_wrap .graph_foot .update span:nth-child(2) {float:right;color:#5f5f5f;}
.graph_bar01 {border:0; border-bottom:3px solid #FF0000 ;width:50px;height:10px;display:inline-block;vertical-align: top;margin-right:10px;}
.graph_bar02 {border:0; border-bottom:3px solid #0000FF ;width:50px;height:10px;display:inline-block;vertical-align: top;margin-right:10px;}
.graph_bar01d {border:0; border-bottom:1px dotted #FF0000 ;width:50px;height:10px;display:inline-block;vertical-align: top;margin-right:10px;}
.graph_bar02d {border:0; border-bottom:1px dotted #0000FF ;width:50px;height:10px;display:inline-block;vertical-align: top;margin-right:10px;}

/* 관련사이트 */
.related_group ul li {width:33.33%;float:left;-webkit-transition:0.4s ease;transition:0.4s ease;}
.related_group ul li a {display:block;margin:5px;padding:55% 10px 5% 10px;border:1px solid #d8dee5;border-radius:4px;text-align:center;position:relative;background-repeat:no-repeat;background-size:60%;background-position:top 15px center;font-weight:bold;-webkit-transition:0.4s ease;transition:0.4s ease;}
.related_group ul li a span {display:-webkit-box;display:flex;height:40px;-webkit-box-pack:center;justify-content: center;-webkit-box-align:center;align-items: center;}
.related_group ul li.list01 a {background-image:url(../img/content/related_icon01.png);}
.related_group ul li.list02 a {background-image:url(../img/content/related_icon02.png);}
.related_group ul li.list03 a {background-image:url(../img/content/related_icon03.png);}
.related_group ul li.list04 a {background-image:url(../img/content/related_icon04.png);}
.related_group ul li.list05 a {background-image:url(../img/content/related_icon05.png);}
.related_group ul li.list06 a {background-image:url(../img/content/related_icon06.png);}
.related_group ul li.list07 a {background-image:url(../img/content/related_icon07.png);}
.related_group ul li.list08 a {background-image:url(../img/content/related_icon08.png);}
.related_group ul li.list09 a {background-image:url(../img/content/related_icon09.png);}
.related_group ul li.list10 a {background-image:url(../img/content/related_icon10.png);}
.related_group ul li.list11 a {background-image:url(../img/content/related_icon11.png);}
.related_group ul li.list12 a {background-image:url(../img/content/related_icon12.png);}
.related_group ul li.list13 a {background-image:url(../img/content/related_icon13.png);}

/* 금일 최대 부하 전망 */
.maxload .graph_wrap02 .graph01 .title {left:0;margin-left:0;}

/* 고객센터 */
.service .service_box01 {padding-top:130px;position:relative}
.service .service_box01::before {content:'';width:84px;height:83px;position:absolute;top:30px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background:url(../img/content/icon_service.png);}
.service .service_box01 div p:nth-child(1) {font-weight:bold;}

/* 전력수급 기본계획 */
.board_list02 {border-top: 2px solid #3b3b3b;border-bottom: 1px solid #a1a1a1;}
.board_list02 table {width: 100%;margin-bottom: -1px;}
.board_list02 table td {padding: 10px;border-bottom: 1px solid #dedede;color: #666;text-align: left;line-height: 35px;}