@charset "utf-8";

@import url("../../css/common.css");

/* mobile */
html, body, .m_wrap {height:100%;overflow:hidden;}
body {background:#f2f4f6;}
.m_wrap {}
#m_header {position:fixed;top:0;left:0;width:100%;min-height:72px;border-bottom:1px solid #e8e9eb;box-shadow:4px 4px 8px rgba(0,0,0,0.06);background:#fff;z-index:10;}
#m_header .m_logo {position:absolute;top:20px;left:20px;width:120px;height:38px;text-indent:-9999px;}
#m_header .m_logo a {display:block;width:100%;height:100%;background:url(/app/img/m_logo.svg) left top no-repeat;background-size:120px;}
#m_header #gnb2 .open {background-position:left -32px;}

#gnb {}
/*#m_contents {padding:72px 0 90px 0;height:100%;overflow-y:auto;}*/
.popup_group {width:100%;maqrgin:15px auto;}
.popup_group .popup_bar {position: relative;width: 100%;height: 47px;background:#fff;padding: 10px 0 0 24px;z-index:1;}
.popup_group .popup_bar h3 {font-weight: 900;color: #535353;font-size: 20px;}
.popup_group .bx-controls .bx-pager {position: absolute;bottom:10px;right:20px;padding: 0 15px;font-size: 15px;border-radius: 60px;color: #fff;z-index:2;background:rgba(0,0,0,0.4); width: 14%}
.popup_group .bx-controls-direction {display:none;}
.popup_group .popup_btn {position:absolute;right:20px;top:0;z-index:2;}
.popup_group .popup_btn > a {position:relative;float:left;display:block;width:24px;height:47px;padding-top:47px;overflow:hidden;background-position:center center;background-repeat:no-repeat;}
.popup_group .popup_btn > a::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;}
.popup_group .popup_btn > a.btn_popup_prev::before,
.popup_group .popup_btn > a.prev::before {background-image:url(../img/main/icon_popup_prev.png);}
.popup_group .popup_btn > a.btn_popup_next::before,
.popup_group .popup_btn > a.next::before {background-image:url(../img/main/icon_popup_next.png);}
.popup_group .popup_control {float:left;position:relative;width:26px;height:47px;}
.popup_control .btn_popup_start,
.popup_control .btn_popup_stop {display:block;position:absolute;left:0;top:0;width:100%;height:100%;padding-top:47px;z-index:10;overflow:hidden;}
.popup_control .btn_popup_start::before,
.popup_control .btn_popup_stop::before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;}
.popup_control .btn_popup_start::before {background-image:url(../img/main/icon_popup_start.png);}
.popup_control .btn_popup_stop::before {background-image:url(../img/main/icon_popup_stop.png);}
.popup_control .btn_popup_start,
.popup_control .btn_popup_start.active,
.popup_control .btn_popup_stop.active {display:none;}
.popup_group .more {position:absolute;right:5px;top:0;width:47px;height:47px;padding-top:47px;overflow:hidden;z-index:3;-webkit-transition:all 0.2s;transition:all 0.2s;}
.popup_group .more:hover {-webkit-transform:rotate(180deg);transform:rotate(180deg);}
.popup_group .more::before,
.popup_group .more::after {content:'';position:absolute;left:50%;background-color:#333;}
.popup_group .more::before {top:22px;width:15px;height:3px;margin-left:-8px;}
.popup_group .more::after {top:16px;width:3px;height:15px;margin-left:-2px;}
.bx-wrapper img {width:100%;}

.graph_wrap {width:100%;border-radius:6px;background:#fff;width:calc(100% - 30px);margin:15px auto;padding:20px;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;}
#m_contents .main_banner {overflow:hidden;}
#m_contents .main_banner ul {width:calc(100% - 20px);margin:0 auto;}
#m_contents .main_banner ul li {float:left;width:calc(33.33% - 10px);background:#fff;border-radius:10px;box-shadow:7px 7px 8px rgba(0,0,0,0.07);margin:5px;}
#m_contents .main_banner ul li a {display:block;padding:60px 0 10px 0;font-size:15px;text-align:center;font-weight:500;cursor:pointer;}
#m_contents .main_banner ul li a span {display:-webkit-box;display:flex;width:100%;height:40px;-webkit-box-pack:center;justify-content: center;-webkit-box-align:center;align-items: center;}
#m_contents .main_banner ul li.list01 a {background:url(/app/img/icon_banner01.png) center top 20px no-repeat;}
#m_contents .main_banner ul li.list02 a {background:url(/app/img/icon_banner02.png) center top 20px no-repeat;}
#m_contents .main_banner ul li.list03 a {background:url(/app/img/icon_banner03.png) center top 20px no-repeat;}
#m_contents .main_banner ul li.list04 a {background:url(/app/img/icon_banner04.png) center top 20px no-repeat;}
#m_contents .main_banner ul li.list05 a {background:url(/app/img/icon_banner05.png) center top 20px no-repeat;}
#m_contents .main_banner ul li.list06 a {background:url(/app/img/icon_banner06.png) center top 20px no-repeat;}
#m_contents .main_banner ul li.list07 a {background:url(/app/img/icon_banner07.png) center top 20px no-repeat;}
#m_contents .main_banner ul li.list08 a {background:url(/app/img/icon_banner08.png) center top 20px no-repeat;}

/* 고객센터 */
#m_contents .main_banner ul li.list99 {width:calc(100% - 10px);}
#m_contents .main_banner ul li.list99 a {background:url(/app/img/icon_banner06.png) left 40px center no-repeat;padding:10px 10px 10px 100px;position:relative;}
#m_contents .main_banner ul li.list99 a::after {content:'\e93e';font-family:'xeicon';font-size:20px;font-weight:bold;position:absolute;right:30px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
#m_contents .main_banner ul li.list99 a span {justify-content: flex-start;}