/* 기본레이아웃 */
#wrapper {position:fixed; top:0; left:0; width:100%; min-width:1160px; height:100%; transition:all .3s; overflow:hidden;}
#wrapper canvas {width:100% !important; height:auto !important; }
#wrapper section.side_wrp,
#wrapper section.con_wrp {position:fixed; top:0; height:100%; overflow:hidden; transition:all .3s; border:2px solid blue;}
#wrapper section.side_wrp {width:250px; left:0;}
#wrapper section.con_wrp {width:calc(100% - 250px); right:0;}
#wrapper header {position:relative; top:0; left:0; width:100%; min-width:1160px; height:80px; overflow:hidden; background:var(--bg_header); z-index:100;
transform:translateY(0%); transition:all .3s;}
#wrapper header.hidden {height:0;}
#wrapper header.mb_hidden {transform:translateY(-100%)}
#wrapper .contents {position:relative; height:calc(100% - 140px); transition:all .3s; font-size:0;}
#wrapper .contents.full {height:100%; }
#wrapper footer {position:relative; height:60px; overflow:hidden; background:var(--bg_footer);transition:all .3s; z-index:10;}
#wrapper footer.hidden {height:0;}

#wrapper footer .gs_lic {position:absolute; top:50%; left:50%; transform:translateY(-50%); height:50%;}
#wrapper footer .gs_lic img {width:auto; height:100%;}

#wrapper .contents nav.sub {position:absolute; top:0; left:0; width:300px; height:100%; transition:all .3s; }
#wrapper .contents nav.sub.hidden {width:0;}
#wrapper .contents nav.sub .st_wrp	{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:/*calc(100% - 30px)*/100%; height:/*calc(100% - 30px)*/100%; background:var(--bg_main_left); border-radius:0px; overflow:hidden; min-width:240px;transition:all .3s;}
#wrapper .contents nav.sub .exp_icon	{position:absolute; top:50%; transform:translateY(-50%) rotate(-90deg); font-size: 20px;transition: all .3s; color:var(--bg_menu_arrow); cursor:pointer;transition:all .3s;}
#wrapper .contents nav.sub .exp_icon:hover	{color:#0068a9;}
#wrapper .contents nav.sub .exp_icon.left	{transform:translateY(-50%) rotate(-90deg); right:-25px; opacity: 1; z-index: 10;}
#wrapper .contents nav.sub .exp_icon.left.hide	{right:0; opacity: 0;}
#wrapper .contents nav.sub .exp_icon.right	{transform:translateY(-50%) rotate(-90deg); left:-25px; opacity: 0; z-index: 10;}
#wrapper .contents nav.sub .exp_icon.right.show	{left:5px; opacity: 1;}
#wrapper .contents section.data {position:absolute; top:0; right:0; width:calc(100% - 300px); height:100%; background:var(--bg_sec); transition:all .3s;}
#wrapper .contents section.data.full {width:100%;}
#wrapper .contents section.data.wide {width:100%;}
#wrapper .contents section.data {overflow-y:overlay;}
#wrapper .contents section.data:: {-ms-overflow-style: none;}
#wrapper .contents section.data::-webkit-scrollbar {background: transparent; width:2px; height:2px; border-radius:15px;}
#wrapper .contents section.data::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); border-radius:15px; }
.inc_wide {width:100%;}

@media screen and (max-width: 1650px){
	#wrapper .contents {/*height:auto;*/ padding-top:100px;}
	/*
	#wrapper .contents nav.sub,
	#wrapper .contents section.data {position:relative; height:auto; display:inline-block; vertical-align:top; border:1px solid red;}
	#wrapper .contents section.data {height:auto;}
	#wrapper .contents nav.sub .st_wrp	{position:sticky; top:0; left:0; transform:none; height:auto; }
	*/
}

/* 사이드 nav */
nav.side {position:fixed; top:0; left:0; width:250px; height:100%; transform: translateX(0); transition:all .3s; }
nav.side.hidden {transform: translateX(-100%);}

/* header - nav */
.h_logo,
.h_nav {position:absolute; top:50%; transform:translateY(-50%); }
.h_logo {left:0; width:300px; height:100%; background:rgba(0,0,0,0.0);}
.h_logo .sys_logo {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; padding:0 25px;font-size:0;}
.h_logo .sys_logo .cm_pic,
.h_logo .sys_logo .cm_if {display:inline-block; vertical-align:middle; position:relative; z-index:1;}
.h_logo .sys_logo .cm_pic {width:80px; height:80px; background:url(/images/ci_bg_light.png) no-repeat; background-size:auto auto !important; background-position:center center !important; position:relative; font-size:0;	border: 2px solid #283c49}/*ci_white.png*/
.h_logo .sys_logo .cm_pic.dark {background:url(/images/ci_bg_dark.png) no-repeat; border-color:#15252e}/*ci_white.png*/
.h_logo .sys_logo .ani {position:absolute; top:0; left:25px; width:80px; height:100%; background:#fff; overflow:hidden;}
.h_logo .sys_logo .ani .play {position:absolute; top:50%; left:50%; animation: logo_ani 5s forwards infinite; transition:all .3s;}
.h_logo .sys_logo .cm_if {width:calc(100% - 80px); padding-left:15px;}
.h_logo .sys_logo .cm_if h2,
.h_logo .sys_logo .cm_if span {display:inline-block; width:100%;transition:all .3s;}
.h_logo .sys_logo .cm_if h2 {font-size:14px; letter-spacing:-0.05em; font-weight:normal; color:#fff;}
.h_logo .sys_logo .cm_if span {line-height:100%; color:rgba(255,255,255,0.4); font-family:tahoma; font-size:11px; padding-top:2px; letter-spacing:0.05em;transition:all .3s;}
.h_logo .sys_logo em {position:absolute; top:10px; right:10px; line-height:100%; color:var(--vol_text); font-family:tahoma; font-size:10px; font-style:normal;transition:all .3s;}

.h_logo .gs_lic {position:absolute; top:50%; right:-85px; transform:translateY(-50%); min-width:70px; height:60%; padding:5px; background:#fff; border-radius:5px;}
.h_logo .gs_lic img {width:auto; height:100%;}


.h_nav {right:80px; width:calc(100% - 380px); font-size:0; text-align:left; padding-right:10px;}
.h_nav nav,
.h_nav .rest {display:inline-block; vertical-align:middle; transition:all .3s;}
.h_nav nav {width:680px; text-align:left; padding:0 35px; font-size:0; position:relative;}
.h_nav nav.solar {padding:0 0 0 105px; }
.h_nav nav.client {}
.h_nav nav li {display:inline-block; vertical-align:middle; width:calc(100%/9); font-size:15px; text-align:center; position:relative; border-right:0px solid #eee;}
.h_nav nav.client li {width:calc(100%/6);}
.h_nav nav li:last-child {}
.h_nav nav li a {display:block; padding:5px 0; transition:all .3s;}
.h_nav nav li .m_pos {position:relative;}
.h_nav nav li a i,
.h_nav nav li a span {display:inline-block; vertical-align:middle; position:relative; transition:all .3s;}
.h_nav nav li a i {font-size:22px; color:#dfdfdf;width:100%;}
.h_nav nav li a span {font-size:12px; color:#b7b7b7; padding-top:8px; letter-spacing:-0.05em; font-weight:bold; }
.h_nav nav li a em {position:absolute; top:-5px; left:calc(50% + 12px); line-height:12px; transform:translateX(-50%); min-width:12px; padding:3px; font-family:tahoma; font-size:11px; background:#ff2929; color:#fff; font-style:normal; border-radius:3px; text-align:center; z-index:1;}
.h_nav nav li a em.hide-em {display:none;}
.h_nav nav li:hover a {}
.h_nav nav li:hover a i {color:#fff;}
.h_nav nav li:hover a span {color:#fff;}
.h_nav nav li.on {}
.h_nav nav li.on a i {color:#8fdfff;}
.h_nav nav li.on a span {color:#8fdfff;}
.h_nav nav li.on a span:after {content:""; position:absolute; bottom:-13px; left:50%; transform:translateX(-50%); border-top:5px solid #006af1; border-left:5px solid transparent; border-right:5px solid transparent; display:none;}
.h_nav nav li.on a em {background:red;}
.h_nav nav.solar li.gs_lic {position:absolute; top:50%; left:10px; transform:translateY(-50%); min-width:70px; height:90%; padding:5px; background:#fff; border-radius:5px;}
.h_nav nav.solar li.gs_lic img {width:auto; height:100%;}
.h_nav .rest {width:calc(100% - 815px);position:relative; text-align: right; font-size: 0;}
.h_nav .rest .notice {display: inline-block; vertical-align: middle;position: relative; width:calc(100% - 60px); font-size:0;}
.h_nav .rest .notice span {display: inline-block; vertical-align: middle; }
.h_nav .rest .notice .tit {width:40px; font-size: 11px; text-align: center; background:rgba(0,0,0,0.3); color: rgba(255,255,255,0.7);padding:4px 0; border-radius: 3px;}
.h_nav .rest .notice > .txt {width:calc(100% - 120px); font-size: 12px; text-align: left; color: #fff; padding:0 15px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.h_nav .rest .notice > .txt a {display:block; color: #fff; padding:0 15px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.h_nav .rest .notice > .txt a em {font-style:normal; display:inline-block;}
.h_nav .rest .notice > .txt a em:before {content:"N"; width:13px; height:13px; line-height:13px; background:var(--ic_new); color:#fff; text-align:center; display:inline-block; font-family:tahoma; font-size:11px;}
.h_nav .rest .notice > .date {width:80px; font-size: 12px; text-align: left; color:rgba(255,255,255,0.4); font-family: tahoma;}
.h_nav .rest .notice p {display:none; width:100%; font-size: 12px; text-align: left; color:rgba(255,255,255,0.6);}
.h_nav .rest .search {display: inline-block; vertical-align: middle;position: relative; width:60px; height: 60px; cursor: pointer;}
.h_nav .rest .search > i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:20px; color:#cb5b5b;}
.h_nav button.mode_btn {display:inline-block; vertical-align:middle; width:110px; margin-left:25px; font-size:0; border:0; border-radius:35px; padding:10px 0; color:rgba(255,255,255,0.7); background:#292929; transition:all .3s; cursor:pointer; text-align:center; position:relative;}
.h_nav button.mode_btn:hover {color:rgba(255,255,255,1); background:#000;}
.h_nav button.mode_btn:hover span {color:rgba(255,255,255,1);}
.h_nav button.mode_btn i,
.h_nav button.mode_btn span {display:inline-block; vertical-align:middle;}
.h_nav button.mode_btn i {font-size:13px; padding-right:8px; color:orange;}
.h_nav button.mode_btn span {font-size:11px; font-family:tahoma; color:rgba(255,255,255,0.8);}
.h_nav button.mode_btn.dark {background:#005689; transition:all .3s;}
.h_nav button.mode_btn.dark:hover {background:#1d80bb;}
.h_nav button.mode_btn.dark i {color:#fff;}
.h_info {width:80px; height:100%; cursor:pointer; position:absolute; top:0; right:0; background:rgba(0,0,0,0.0); transition:all .3s;}
.h_info:hover {background:rgba(0,0,0,0.0);}
.h_info .i_pos {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);width:100%; text-align: center;}
.h_info .i_pos > i {position:absolute; top:-5px; right:27px; font-size:18px; color:#eee; z-index:1; display:none;}
.h_info .u_pic {display: inline-block; width:35px; background-position:center center !important; background-size:cover !important; border-radius:100%; position:relative;}
.h_info .u_pic:after {content:""; display:block; padding-top:100%;}
.h_info .u_pic i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:38px; color:rgba(255,255,255,0.5); transition:all .3s;}
.h_info .u_pic:hover i {color:rgba(255,255,255,0.9);}

.h_info .i_pos span {position: absolute; bottom: -20px; left: 0; width: 100%; color:rgba(255,255,255,0.3); font-family: tahoma; font-size: 10px; display:none;}
.menu_open {position:absolute; top:0; left:0; width:80px; height:100%; transition:all .3s; display:none;}
.menu_open i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:var(--mb_open_nav);}
/*
.mobile {position:absolute; top:0; left:0; width:100%; height:100%; display:none;}
.mobile .menu_open {position:absolute; top:0; left:0; width:80px; height:100%; transition:all .3s;}
.mobile .menu_open i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:35px; color:var(--mb_open_nav);}
.mobile .sys_logo {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:0;}
.mobile .sys_logo .cm_pic {display:inline-block; vertical-align:middle; width:80px; height:80px; background:url(/images/ci_black.png) no-repeat; background-size:100% auto !important; background-position:center center !important; position:relative;transition:all .3s;}
.mobile .sys_logo .cm_pic.dark {background:url(/images/ci_white.png) no-repeat;transition:all .3s;}
.mobile .sys_logo .cm_pic img {display:none;}
.mobile .sys_logo .cm_if {display:none;}
.mobile .sys_logo em {display:none;}
.mobile .mwrp {position:absolute; top:0; right:0; height:100%; font-size:0;}
.mobile button.mode_btn {width:80px; height:100%; margin:0; border-radius:0; padding:0; background:transparent !important; border:0; position:relative;}
.mobile button.mode_btn span {display:none;}
.mobile button.mode_btn i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:30px; padding:0; background:rgba(0,0,0,0.0); border-radius:100%; color:orange;}
.mobile button.mode_btn.dark i {color:#ffd993;}
*/
@media screen and (max-width: 1650px){
	.h_nav .rest .notice,
	.h_nav .rest .search {display:none;}
}

@media screen and (max-width: 1260px){
	.h_nav nav {width:580px; padding:0 25px;}
	.h_nav .rest {width:calc(100% - 715px);}
}

@media screen and (max-width: 1160px){
	.h_logo .gs_lic {display:none;}
}

/* 검색창 영역 */
.sc_box	{position: absolute; top:50%; right: 0; transform:translateY(-50%); width:0%; transition:all .6s; overflow: hidden; opacity: 0;}
.sc_box.show	{width:100%; opacity: 1;}
.sc_box input	{background:white; width:100%; font-size:15px; height:60px; padding:0 70px 0 105px; border:0px solid #eee; color:#fff; border-radius:7px; background:#174561;outline:none; font-weight:bold; transition:all .3s;}
.sc_box input:focus {background:#174561; }
.sc_box input::placeholder {color:rgba(255,255,255,0.0); font-size:12px;transition:all .3s;}
.sc_box input:focus::placeholder {color:rgba(255,255,255,0);}
.sc_box span			{position:absolute; top:50%; left:25px; transform:translateY(-50%); color:rgba(255,255,255,0.6); font-size:11px; font-family:tahoma; border-right:1px solid rgba(255,255,255,0.1); padding:5px 20px 5px 0; text-transform:uppercase; letter-spacing:0.05em;}
.sc_box button		{position:absolute; top:0; right:0; width:60px; height:100%; text-align:center;  cursor:pointer; border:0; background:transparent;}
.sc_box button i		{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:20px; color:#fff;}

/* footer - info */
.status_box {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;text-align:left; font-size:0;}
.status_box .logo,
.status_box .data_call {display:inline-block; vertical-align:middle; position:relative;}
.status_box .logo {width:300px; text-align:center;}
.status_box .logo img {position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:85px;}
.status_box .data_call {width:calc(100% - 300px); font-size:0; padding:0 35px;}
.status_box .data_call h4,
.status_box .data_call ul.now_site {display:inline-block; vertical-align:middle; position:relative;}
.status_box .data_call h4 {font-size:12px; font-weight:bold; color:var(--footer-title); padding-left:20px; transition:all .3s;}
.status_box .data_call h4 i {position:absolute; top:50%; left:0; transform:translateY(-50%); color:red; font-size:15px; font-weight:normal;}
.status_box .data_call ul.now_site {}
.status_box .data_call ul.now_site li {display:inline-block; vertical-align:middle; padding-left:15px; margin-left:15px; border-left:1px solid rgba(0,0,0,0.1); line-height:100%; position:relative;}
.status_box .data_call ul.now_site li span {display:inline-block; vertical-align:middle; line-height:100%;}
.status_box .data_call ul.now_site li .tit {font-size:12px; padding-right:10px;color:var(--footer-sta); transition:all .3s;}
.status_box .data_call ul.now_site li .txt { font-size:12px;font-family:tahoma; color:var(--footer-sta_cn); font-weight:bold; transition:all .3s;}
.status_box .cmp_name {display:inline-block; vertical-align:middle; position:relative;font-size:12px; font-weight:bold; color:var(--footer-title); padding-right:20px; transition:all .3s;}
.status_box address {display:inline-block; vertical-align:middle; position:relative; font-size:12px;color:var(--footer-sta); transition:all .3s; font-style:normal;}
.status_box ul.wt_info {display:inline-block; vertical-align:middle; position:relative; padding:0 0px 0 20px; font-size:0; float:right;}
.status_box ul.wt_info li {display:inline-block; vertical-align:middle; padding-right:15px; font-size:0;}
.status_box ul.wt_info li > span {display:inline-block; vertical-align:middle;}
.status_box ul.wt_info li .tt {font-size:12px; color:#777; padding-right:5px;}
.status_box ul.wt_info li .txt {font-size:12px; color:var(--wt_info_txt); transition:all .3s;}
.status_box ul.wt_info li .txt span {color:var(--wt_info_txt_span); font-weight:bold; transition:all .3s;}
.status_banner {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;text-align:left; font-size:0;}
.status_banner .sb_pic {position:absolute; top:50%; left:25; transform:translateY(-50%); width:30px; height:100%; background:url(/images/ci_black.png) no-repeat; background-size:100% auto !important; background-position:center center !important; transition:all .3s; opacity:0.6;}
.status_banner .sb_pic.dark {background:url(/images/ci_white.png) no-repeat;transition:all .3s;}
.status_banner .slider-item {font-size:0; position:relative; padding:0 25px 0 65px; height:100%;}
.status_banner .slider-item .loc_name,
.status_banner .slider-item .loc_energy {display:inline-block; vertical-align:middle;}
.status_banner .slider-item .loc_name {width:calc(100% - 130px); font-size:12px;}
.status_banner .slider-item .loc_energy {width:130px; font-size:0;}
.status_banner .slider-item .loc_energy .kind_e {display:inline-block; vertical-align:middle; width:50%; text-align:right;}
.status_banner .slider-item .loc_energy .kind_e span,
.status_banner .slider-item .loc_energy .kind_e em {display:inline-block; vertical-align:middle; font-style:normal; font-family:tahoma;}
.status_banner .slider-item .loc_energy .kind_e span {font-size:12px;}
.status_banner .slider-item .loc_energy .kind_e em {padding-left:5px; font-size:11px;}
.site_banner {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%;text-align:left; font-size:0; display:none;}
.site_banner ul.main-slider {font-size:0;position:relative;width:100%;height:100%;}
.site_banner > ul.main-slider .slick-list,
.site_banner > ul.main-slider .slick-track {height:100%;}
.site_banner > ul.main-slider .slick-slide {position:relative;overflow:hidden;}
.site_banner ul.main-slider > li {position:absolute; top:0; left:0; width:100%; height:100%; }
.site_banner ul.main-slider > button	{position:absolute; top:160px; bottom:0; margin:auto 0; width:40px; height:40px; z-index:1; font-size:0;transform:rotate(45deg); background:transparent; transition:all .2s; cursor:pointer; display:none !important;}
.site_banner .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.site_banner .slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.site_banner .slick-list:focus{outline:0}
.site_banner .slick-list.dragging{cursor:pointer;cursor:hand}
.site_banner .slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.site_banner .slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}
.site_banner .slick-track:after,.slick-track:before{display:table;content:''}
.site_banner .slick-track:after{clear:both}
.site_banner .slick-loading .slick-track{visibility:hidden}
.site_banner .slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] 
.site_banner .slick-slide{float:right}
.site_banner .slick-slide img{display:block}
.site_banner .slick-slide.slick-loading img{display:none}
.site_banner .slick-slide.dragging img{pointer-events:none}
.site_banner .slick-initialized .slick-slide{display:block}
.site_banner .slick-loading .slick-slide{visibility:hidden}
.site_banner .slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.site_banner .slick-arrow.slick-hidden{display:none}
.site_banner .slick-dots		{position:absolute; bottom:5%; left:0; width:100%; font-size:0; text-align:center; display:none !important;}
.site_banner .sb_pic {position:absolute; top:50%; left:25; transform:translateY(-50%); width:25px; height:100%; background:url(/images/ci_black.png) no-repeat; background-size:100% auto !important; background-position:center center !important; transition:all .3s; opacity:0.6;}
.site_banner .sb_pic.dark {background:url(/images/ci_white.png) no-repeat;transition:all .3s;}
.site_banner .sb_logo {position:absolute; top:50%; left:25; transform:translateY(-50%); width:30px; transition:all .3s; color:#fff; font-size:10px; background:#e77704; line-height:100%; padding:3px 0; text-align:center; font-family:tahoma; border-radius:3px; z-index:1000;}
.site_banner .slider-visual {font-size:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); padding:0 25px 0 65px; width:100%; }
.site_banner .slider-visual .loc_name,
.site_banner .slider-visual .loc_energy {display:inline-block; vertical-align:middle;}
.site_banner .slider-visual .loc_name {width:100px; font-size:12px; color:var(--site_banner_name); text-overflow: ellipsis; white-space: nowrap; overflow:hidden;}
.site_banner .slider-visual .loc_energy {width:calc(100% - 100px); font-size:0; text-align:right;}
.site_banner .slider-visual .loc_energy .kind_e {display:inline-block; vertical-align:middle; width:auto; padding-left:15px; text-align:right;}
.site_banner .slider-visual .loc_energy .kind_e span,
.site_banner .slider-visual .loc_energy .kind_e em {display:inline-block; vertical-align:middle; font-style:normal; font-family:tahoma;text-overflow: ellipsis; white-space: nowrap; overflow:hidden;}
.site_banner .slider-visual .loc_energy .kind_e span {font-size:12px; color:var(--site_banner_span);}
.site_banner .slider-visual .loc_energy .kind_e em {padding-left:5px; font-size:11px; color:var(--site_banner_em);}

@media screen and (max-width: 1500px){
	.status_box .logo img {position:absolute; top:-22px; left:50%; transform:translateX(-50%); width:85px;}
	.status_box .data_call {padding:0 25px;}
	.status_box .data_call h4 {display:none;}
	.status_box .data_call ul.now_site li {padding-left:10px; margin-left:10px;}
}

/* 사이드 회원요약정보 */
.client_wrap {position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(var(--blur_fileter)); z-index:1000; visibility: hidden; opacity: 0; transition:all .3s;}
.client_wrap.show {opacity: 1; visibility: visible; }
.client_wrap > i {position:absolute; top:25px; right:300px; font-size:25px; transition:all .3s; color: #fff; cursor:pointer;}
.client_wrap > i:hover { transform:rotate(270deg);}
.slide_info {position:fixed;top:0; right:0; width:280px; height:100%; border-radius:0px; over flow:hidden; transform:translateX(100%); background:var(--side_menu_bg);transition:all .3s;z-index:1001; visibility: hidden; opacity: 0;}
.slide_info.show {opacity: 1; visibility: visible; transform:translateX(0%);}
.slide_info > em {position:absolute; top:20px; right:20px; z-index:2;}
.slide_info > em a {display:block; font-style:normal; font-family:tahoma; font-size:11px; color:#fff; line-height:100%; padding:6px 12px; border-radius:35px; background:var(--bg_side_in_sec_out); transition:all .2s;}
.slide_info .call_center {position:absolute; top:100px; left:0; width:250px; height:220px; transform:translateX(0%); transition:all .3s; cursor:pointer;}
.slide_info.show .call_center {transform:translateX(-100%);}
.slide_info .call_center .in_ga {position:absolute; top:0; left:0; width:225px; height:100%; background:var(--call_center); border-radius:10px;}
.slide_info .call_center .in_ga:after {content:""; position:absolute; top:50%; right:-10px; transform:translateY(-50%); border-left:10px solid var(--call_center); border-bottom:10px solid transparent; border-top:10px solid transparent;}
.slide_info .call_center .in_ga > i {position:absolute; top:20px; right:20px; font-size:20px; color:var(--biw_div); opacity:0.2;}
.slide_info .call_center .in_ga .cc_wrp {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; text-align:center; font-size:0; padding:0 30px;}
.slide_info .call_center .in_ga .sys_logo {position:relative; text-align:left;font-size:0;}
.slide_info .call_center .in_ga .sys_logo .cm_pic,
.slide_info .call_center .in_ga .sys_logo .cm_if {display:inline-block; vertical-align:middle;}
.slide_info .call_center .in_ga .sys_logo .cm_pic {width:100%; height:25px; background:url(/images/ci_black.png) no-repeat; background-size:auto 100% !important; background-position:left center !important; position:relative; font-size:0; transition:all .3s;}
.slide_info .call_center .in_ga .sys_logo .cm_pic.dark {background:url(/images/ci_white.png) no-repeat; transition:all .3s;}
.slide_info .call_center .in_ga .sys_logo .cm_if,
.slide_info .call_center .in_ga .sys_logo em,
.slide_info .call_center .in_ga .sys_logo .ani {display:none;}
.slide_info .call_center .in_ga .tel_no {display:inline-block; width:100%; text-align:left;font-family: 'GmSansB';font-size:18px; padding:15px 5px 0 5px;color:var(--biw_div);}
.slide_info .call_center .in_ga .tel_no span {display:inline-block; text-align:left;font-family:NanumBarunGothic, sans-serif; font-weight: normal; font-size:13px; color:var(--biw_div); opacity: 0.8;padding-bottom:5px;}
.slide_info .call_center .cc_wrp > p {display:inline-block; width:100%; text-align:left; font-size:11px; color:var(--biw_div); opacity: 0.35;padding:10px 5px 0 5px; line-height:140%;}
.slide_info .call_center .cc_wrp .url {display:inline-block; width:100%; text-align:left; font-size:12px; color:var(--biw_div); opacity: 0.6;padding:10px 5px 0 5px; line-height:140%; font-family:tahoma; letter-spacing:0.05em;}

.slide_info .call_center .cc_wrp .gs_lic {position:absolute; top:15px; right:15; width:70px; padding:5px; background:#fff; border-radius:3px; display:none;}
.slide_info .call_center .cc_wrp .gs_lic img {width:100%; }

.slide_info .cl_logo {position:relative; height:470px; padding-top:65px; background:var(--bg_side_in_sec); z-index:1;}
.slide_info .cl_logo:after {content:""; display:block; padding-top:100%;}
.slide_info .cl_logo .cl_pos {position:relative; text-align:center;}
.slide_info .cl_logo .cl_pos .c_pic,
.slide_info .cl_logo .cl_pos span,
.slide_info .cl_logo .cl_pos p {display:inline-block; line-height:100%; position:relative;}
.slide_info .cl_logo .cl_pos .c_pic {width:60px;background-position:center center !important; background-size:cover !important; border-radius:100%;}
.slide_info .cl_logo .cl_pos .c_pic:after {content:""; display:block; padding-top:100%;}
.slide_info .cl_logo .cl_pos .c_pic i {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:60px; color:rgba(255,255,255,0.6);}


.slide_info .cl_logo .cl_pos span {width:100%; padding:15px 30px 7px 30px; font-size:16px;font-family: 'Noto Sans KR'; font-weight:500; color:var(--bg_mb_sh_head_h2); letter-spacing:-0.05em; /*font-weight:bold;*/}
.slide_info .cl_logo .cl_pos p {width:100%; font-style:normal; font-family:tahoma; font-size:11px; color:var(--bg_mb_sh_head_h2); opacity:0.6;}
.slide_info .cl_logo ul.cp {position:absolute; padding:40px 40px; bottom:0; left:0; width:100%; background:rgba(0,0,0,0.0);}
.slide_info .cl_logo ul.cp li {position:relative; font-size:0; margin-top:5px; padding-left:45px;}
.slide_info .cl_logo ul.cp li:first-child {margin:0;}
.slide_info .cl_logo ul.cp li span {display:inline-block; vertical-align:top; line-height:140%; font-size:11px; letter-spacing:-0.05em;}
.slide_info .cl_logo ul.cp li .tit {width:70px; color:#999; opacity:0.7;}
.slide_info .cl_logo ul.cp li .txt {width:calc(100% - 0px); font-size:11px; color:var(--bg_mb_sh_head_h2); }
.slide_info .cl_logo ul.cp li i {position:absolute; top:0px; left:0; font-size:13px;width:32px; height:32px; padding-top:10px; background:var(--bg_mb_nav); border:0px solid #f4f4f4; border-radius:3px; text-align:center; color:var(--bg_mb_sh_head_h2);}
.slide_info .cl_info {position:relative; height:calc(100% - 470px); overflow-y:overlay; z-index:1; }
.slide_info .cl_info:: {-ms-overflow-style: none;}
.slide_info .cl_info::-webkit-scrollbar {background: transparent; width:2px; height:2px; border-radius:15px;}
.slide_info .cl_info::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); border-radius:15px; }
.slide_info .cl_adm {position:relative; height:300px; padding-top:65px; background:#f4f4f4;}
.slide_info .cl_adm > em {position:absolute; top:20px; right:20px; }
.slide_info .cl_adm > em a {display:block; font-style:normal; font-family:tahoma; font-size:11px; color:#333; line-height:100%; padding:6px 12px; border-radius:35px; border:1px solid #eee; background:#fff; transition:all .2s;}
.slide_info .cl_adm > em a:hover {border:1px solid #ddd; background:#fff;}
.slide_info .cl_adm .cl_pos {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; }
.slide_info .cl_adm .cl_pos .sys_logo {position:relative; text-align:center;;font-size:0;}
.slide_info .cl_adm .cl_pos .sys_logo .cm_pic,
.slide_info .cl_adm .cl_pos .sys_logo .cm_if {display:inline-block; vertical-align:middle;}
.slide_info .cl_adm .cl_pos .sys_logo .cm_pic {width:100%; height:45px; background:url(/images/ci_black.png) no-repeat; background-size:auto 100% !important; background-position:center center !important; position:relative; font-size:0; transition:all .3s;}
.slide_info .cl_adm .cl_pos .sys_logo .cm_pic.dark {background:url(/images/ci_black.png) no-repeat; transition:all .3s;}
.slide_info .cl_adm .cl_pos .sys_logo .cm_if {width:100%; padding:7px 0 0 3px;}
.slide_info .cl_adm .cl_pos .sys_logo .cm_if h2,
.slide_info .cl_adm .cl_pos .sys_logo .cm_if span {display:inline-block; width:100%;}
.slide_info .cl_adm .cl_pos .sys_logo .cm_if h2 {font-size:12px; letter-spacing:-0.05em; font-weight:normal; color:#333;transition:all .3s; margin-top:5px;}
.slide_info .cl_adm .cl_pos .sys_logo .cm_if span {line-height:100%; color:#999; font-family:tahoma; font-size:11px; padding-top:3px; letter-spacing:0em;transition:all .3s; display:none;}
.slide_info .cl_adm .cl_pos .sys_logo em {position:absolute; bottom:0; right:0px; line-height:100%; color:var(--bg_mb_sh_head_em); font-family:tahoma; font-size:10px; font-style:normal;transition: all .3s; display:none;}
.slide_info .cl_arest {position:relative; height:calc(100% - 300px); overflow-y:overlay; background:#fff;border-left:0px solid #eee;}
.slide_info .cl_arest:: {-ms-overflow-style: none;}
.slide_info .cl_arest::-webkit-scrollbar {background: transparent; width:2px; height:2px; border-radius:15px;}
.slide_info .cl_arest::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); border-radius:15px; }
.slide_info .data_backup {position:relative; font-size:0; text-align:left;padding:20px 45px; background: var(--graph_all_bg_default);}
.slide_info .data_backup a {position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
.slide_info .data_backup i,
.slide_info .data_backup span {display:inline-block; vertical-align:middle; line-height:100%; position:relative; color: var(--bg_mb_sh_head_h2); }
.slide_info .data_backup i {font-size:15px; padding-right:10px;}
.slide_info .data_backup span {font-size:12px; font-family:tahoma;}
.slide_info .today_make {position:relative; padding:35px; letter-spacing:-0.05em; /*border-bottom:1px solid #f4f4f4; background:#fdfdfd;*/}
.slide_info .today_make .backup,
.slide_info .today_make h3,
.slide_info .today_make .count,
.slide_info .today_make p,
.slide_info .today_make > span {display:inline-block; width:100%; line-height:100%; position:relative;}
.slide_info .today_make .backup {font-size:18px; font-family: 'Noto Sans KR'; font-weight:800; padding-bottom:20px; color:var(--biw_div); }
.slide_info .today_make h3 {font-size:18px; font-family: 'Noto Sans KR'; font-weight:800; padding-bottom:20px; color:var(--biw_div); }
.slide_info .today_make .count {font-size:30px;font-family: 'GmSansB'; color:var(--biw_div);}
.slide_info .today_make .count em {position:absolute; top:0; right:0;font-family:tahoma; font-size:13px; font-style:normal; font-weight:normal; line-height:100%;}
.slide_info .today_make p {font-size:13px; color:var(--biw_div); padding-top:10px;}
.slide_info .today_make p em {font-size:11px;font-family:tahoma; font-style:normal;  font-weight:normal;}
.slide_info .today_make > span {font-size:11px; line-height:140%; color:#555; padding-top:10px;}
.slide_info .today_make ul.short_i {position:relative; font-size:0;  margin-top:20px;}
.slide_info .today_make ul.short_i li {display:inline-block; vertical-align:middle; margin-top:3px; width:100%;}
.slide_info .today_make ul.short_i li.total {width:100%; /*margin-top:10px;*/}
.slide_info .today_make ul.short_i li span {display:inline-block; vertical-align:top; width:100%; font-size:11px; letter-spacing:0em; position:relative;}
.slide_info .today_make ul.short_i li .si_t {width:100px; color:#999;}
.slide_info .today_make ul.short_i li .si_t:before {content:"ㆍ";}
.slide_info .today_make ul.short_i li .si_c {width:calc(100% - 100px); font-size:11px; color:#111;  text-align:right;}
.slide_info .today_make ul.short_i li i {position:absolute; top:50%; left:20px; transform:translateY(-50%); font-size:11px; color:rgba(0,0,0,0.5);}
.slide_info .today_make ul.short_i li.total .si_t {color:#000;}
.slide_info .today_make ul.short_i li.total .si_t:before {/*opacity:0;*/}
.slide_info .today_make ul.short_i li.total .si_c {color:red;}
.slide_info .today_make ul.short_i li.total i {}
.slide_info .today_make ul.sht_now {position:relative; font-size:0; padding:0px; width:100%; padding:20px 0 0 5px;}
.slide_info .today_make ul.sht_now li {display:inline-block; vertical-align:top; width:50%; margin-top:10px; position:relative;}
.slide_info .today_make ul.sht_now li h4,
.slide_info .today_make ul.sht_now li p {display:inline-block; vertical-align:top; width:100%;}
.slide_info .today_make ul.sht_now li h4 {font-size:12px; color:#999; font-weight:normal;}
.slide_info .today_make ul.sht_now li p {font-size:13px; padding-top:3px;}
.slide_info .today_make ul.sht_now li p.color1 {color:#f48a00;}
.slide_info .today_make ul.sht_now li p.color2 {color:#ff524a;}
.slide_info .today_make ul.sht_now li p.color3 {color:#149d63;}
.slide_info .today_make ul.sht_now li span {display:inline-block; font-size:11px;font-family:NanumBarunGothic, sans-serif; font-weight:normal; color:#777; letter-spacing:0em; line-height:180%;}
.slide_info .today_make ul.sht_now li span.full {width:100%; padding-top:0px; color:#999; line-height:110%;}
.slide_info .today_make .graph_money {position:relative; margin-top:0px;}
.slide_info .today_make .graph_money:after {content:""; display:block; padding-top:100%; }
.slide_info .today_make .gpb_bar_box {position:absolute; width:100%; height:100%;}
.u_txt span,
.u_txt em {display:inline-block; width:100%; font-style:normal; text-align:right; line-height:100%;}
.u_txt span {font-size:13px; color:#000;}
.u_txt em {font-size:11px; font-family:tahoma; color:#777;}
.site_care {position:relative;}
.site_care h2 {font-size:15px; font-weight:bold; color:#000; padding:30px 30px 20px 30px;position:relative;}
.site_care .live {position:relative;}
.site_care .live > ul {position:relative; font-size:0; border:1px solid #eee; border-width:1px 0;}
.site_care .live > ul li {display:inline-block; width:100%;position:relative; padding:15px 30px; border-bottom:1px dashed #eee;}
.site_care .live > ul li:last-child {border:0;}
.site_care .live > ul li.on {background:#fff;}
.site_care .live > ul li.off {background:#fafafa;}
.site_care .live > ul li .company,
.site_care .live > ul li .power {display:inline-block; width:100%; font-size:0; position:relative;}
.site_care .live > ul li .company .who {display:inline-block; width:100%; font-size:0; position:relative;}
.site_care .live > ul li .company span,
.site_care .live > ul li .company em {display:inline-block; width:100%; font-size:0; position:relative; line-height:100%;}
.site_care .live > ul li .company span {font-size:13px; color:#333;}
.site_care .live > ul li .company em {font-size:11px; font-family:tahoma; color:#999; font-style:normal; margin-top:5px;}
.site_care .live > ul li .company i {position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:15px;}
.site_care .live > ul li.on .company i {color:green;}
.site_care .live > ul li.off .company i {color:red;}

/* 사이드메뉴 */
.side_mask {width: 100%; height: 100%; position: fixed; top: 0;  left: 0; background: rgba(0,0,0,0.7); visibility: hidden;  backdrop-filter: blur(var(--blur_fileter)); opacity: 0; transition: all .3s; z-index:101;}
.side_mask.show {opacity: 1; visibility: visible; }
.side_mask > i {position:absolute; top:25px; right:25px; transform:translateX(-100%); color:#fff; font-size:22px; transition:all .3s;}
.side_mask.show > i { transform:translateX(0);}
.side_box {position:fixed; top:0; left:0; transform:translateX(-100%); max-width:300px; width:calc(100% - 75px); height:100%; visibility: hidden; opacity: 0; transition: all .3s; background:var(--side_menu_bg); z-index:102;}
.side_box.show {transform:translateX(0); visibility: visible; opacity: 1; }
.side_box .sd_head {position:relative; height:150px; background:var(--bg_mb_sh_head); border-bottom:1px solid var(--bg_mb_sh_head_line);transition: all .3s;}
.side_box .sd_head .sys_logo {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; padding:0 35px;font-size:0;}
.side_box .sd_head .sys_logo .cm_pic,
.side_box .sd_head .sys_logo .cm_if {display:inline-block; vertical-align:middle;}
.side_box .sd_head .sys_logo .cm_pic {width:100%; height:40px; background:url(/images/ci_black.png) no-repeat; background-size:90px auto !important; background-position:top left !important; position:relative; font-size:0; transition:all .3s;}
.side_box .sd_head .sys_logo .cm_pic.dark {background:url(/images/ci_white.png) no-repeat; transition:all .3s;}
.side_box .sd_head .sys_logo .cm_if {width:100%; padding:7px 0 0 3px;}
.side_box .sd_head .sys_logo .cm_if h2,
.side_box .sd_head .sys_logo .cm_if span {display:inline-block; width:100%;}
.side_box .sd_head .sys_logo .cm_if h2 {font-size:13px; letter-spacing:-0.05em; font-weight:normal; color:var(--bg_mb_sh_head_h2);transition:all .3s;}
.side_box .sd_head .sys_logo .cm_if span {line-height:100%; color:var(--bg_mb_sh_head_span); font-family:tahoma; font-size:11px; padding-top:3px; letter-spacing:0em;transition:all .3s;}
.side_box .sd_head .sys_logo em {position:absolute; bottom:-15px; right:20px; line-height:100%; color:var(--bg_mb_sh_head_em); font-family:tahoma; font-size:10px; font-style:normal;transition: all .3s;}

.side_box .sd_head .gs_lic {position:absolute; top:15px; right:15; width:70px; padding:5px; background:#fff; border-radius:3px;}
.side_box .sd_head .gs_lic img {width:100%; }

.side_box .sd_content {position:relative; height:calc(100% - 150px); overflow-y:overlay; }
.side_box .sd_content:: {-ms-overflow-style: none;}
.side_box .sd_content::-webkit-scrollbar {background: transparent; width:2px; height:2px; border-radius:15px;}
.side_box .sd_content::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); border-radius:15px; }
.side_box .sd_content nav.default {width:100%; text-align:left; font-size:0; position:relative; padding:0;background:var(--bg_mb_nav_wrp); border-bottom:1px solid var(--bg_mb_nav_line);transition: all .3s;}
.side_box .sd_content nav.default.client {}
.side_box .sd_content nav.default li {display:inline-block; vertical-align:middle; width:33.3333%; margin:0; font-size:15px; text-align:center; position:relative; border:1px solid var(--bg_mb_nav_out); border-width:0 1px 1px 0; overflow:hidden; background:var(--bg_mb_nav); border-radius:0;transition: all .3s;}
.side_box .sd_content nav.default.client li {}
.side_box .sd_content nav.default li:last-child {}
.side_box .sd_content nav.default li:after {content:""; display:block; padding-top:100%;}
.side_box .sd_content nav.default li:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%;}
.side_box .sd_content nav.default li:nth-child(3) {border-width: 0 0 1px 0;}
.side_box .sd_content nav.default li:nth-child(6) {border-width: 0 0 1px 0;}
.side_box .sd_content nav.default li:nth-child(7) {border-width: 0 1px 0 0;}
.side_box .sd_content nav.default li:nth-child(9) {border-width: 0 0 1px 0;}
.side_box .sd_content nav.default li a {position:absolute; top:0; left:0; width:100%; height:100%; transition:all .3s;}
.side_box .sd_content nav.default li .m_pos {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%;}
.side_box .sd_content nav.default li a i,
.side_box .sd_content nav.default li a span {display:inline-block; vertical-align:middle; position:relative; transition:all .3s;}
.side_box .sd_content nav.default li a i {font-size:25px; color:var(--bg_mb_nav_i);width:100%;transition: all .3s;}
.side_box .sd_content nav.default li a span {font-size:12px; color:var(--bg_mb_nav_span); padding-top:8px; letter-spacing:-0.05em;transition: all .3s;}
.side_box .sd_content nav.default li a em {position:absolute; top:-8px; left:calc(50% + 12px); line-height:11px; transform:translateX(-50%); min-width:12px; padding:3px; font-family:tahoma; font-size:11px; background:#ff2929; color:#fff; font-style:normal; border-radius:3px; text-align:center; z-index:1;}
.side_box .sd_content nav.default li.on {/*border-color:var(--bg_mb_nav_on);*/ background:var(--bg_mb_nav_out_on);transition: all .3s;}
.side_box .sd_content nav.default li.on a i {color:var(--bg_mb_nav_i_on);transition: all .3s;}
.side_box .sd_content nav.default li.on a span {color:var(--bg_mb_nav_span_on);transition: all .3s;}
.side_box .sd_content nav.default li.on a span:after {content:""; position:absolute; bottom:-13px; left:50%; transform:translateX(-50%); border-top:5px solid #006af1; border-left:5px solid transparent; border-right:5px solid transparent; display:none;}
.side_box .sd_content nav.default li.on a em {background:red;}

.side_box .sd_content nav.solar li.gs_lic {position:relative;width:100%; padding:5px; background:#fff; }
.side_box .sd_content nav.solar li.gs_lic img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:50%;}

.side_box .sd_content .notice {display: inline-block; vertical-align: middle;position: relative; width:100%; font-size:0; padding:35px;}
.side_box .sd_content .notice span {display: inline-block; vertical-align: middle; }
.side_box .sd_content .notice .tit {width:35px; font-size: 11px; text-align: center; background:var(--bg_ntc_bx); color: var(--bg_ntc_bx_tit);padding:2px 0; border-radius: 3px;transition: all .3s;}
.side_box .sd_content .notice .txt {width:100%; font-size: 13px; text-align: left; color: var(--bg_ntc_bx_txt); margin:5px 0 0 0;transition: all .3s;}
.side_box .sd_content .notice .txt a {display:block;; font-size: 13px; text-align: left; color: var(--bg_ntc_bx_txt); margin:5px 0 0 0;transition: all .3s;}
.side_box .sd_content .notice .txt a em {display:inline-block;font-style:normal;}
.side_box .sd_content .notice .txt a em:before {content:"N"; width:13px; height:13px; line-height:13px; background:var(--ic_new); color:#fff;text-align:center; display:inline-block;font-family:tahoma; font-size:11px;}
.side_box .sd_content .notice .date {width:80px; font-size: 11px; text-align: left; color:var(--bg_ntc_bx_date); font-family: tahoma; padding-top:5px;transition: all .3s;}
.side_box .sd_content .notice p {display:inline-block; width:100%; font-size: 11px; text-align: left; color:var(--bg_ntc_bx_p); line-height:140%; margin-top:7px;transition: all .3s;}
.side_box .sd_content .notice p a {display:block; font-size: 11px; text-align: left; color:var(--bg_ntc_bx_p); line-height:140%; padding-top:7px;transition: all .3s;display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:3;}
.side_box button.mode_btn {position:absolute; top:10px; right:10px; width:90px; margin-left:25px; font-size:0; border:1px solid #f4f4f4; border-radius:35px; padding:5px 0; color:rgba(255,255,255,0.7); background:#fafafa; transition:all .3s; cursor:pointer;}
.side_box button.mode_btn i,
.side_box button.mode_btn span {display:inline-block; vertical-align:middle;}
.side_box button.mode_btn i {font-size:13px; padding-right:5px; color:orange;}
.side_box button.mode_btn span {font-size:11px; font-family:tahoma; color:rgba(0,0,0,0.5);}
.side_box button.mode_btn.dark {background:rgba(0,0,0,0.6); transition:all .3s; border:0;}
.side_box button.mode_btn.dark i {color:#fff;}
.side_box button.mode_btn.dark span {color:rgba(255,255,255,0.5);}