* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; box-sizing: border-box;-ms-overflow-style:none;scrollbar-width:none;}
*:active { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); }

*::-webkit-scrollbar { display:none; }

body { background-color: #000; margin: 0; overflow: hidden; font-size:16px; }
.eng { letter-spacing: normal !important; }
.kr.r { font-family: "NotoSansKR-Regular"; }
.eng.r { font-family: "Roboto-Regular"; }
.kr.m { font-family: "NotoSansKR-Medium"; }
.eng.m { font-family: "Roboto-Medium"; }

p { margin: 0; }

/* 도넛 css */

/* svg { -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.3) ); filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.25) ); } */

polyline { stroke: #e6e6e6; stroke-width: 2px; fill: none;shape-rendering: geometricPrecision; }

path { shape-rendering: geometricPrecision; }

.toolCircle { display:none; }

#donutTitle { text-align:center;font-size:14px;letter-spacing:-0.7px; }

#donutChart .labelName>text:nth-child(1)>tspan:nth-child(2) { fill: #00e6c0;stroke-width:0px; }
#donutChart .labelName>text:nth-child(2)>tspan:nth-child(2) { fill: #ff8373;stroke-width:0px; }
#donutChart .labelName>text:nth-child(3)>tspan:nth-child(2) { fill: #f7c434;stroke-width:0px; }
#donutChart .labelName>text:nth-child(4)>tspan:nth-child(2) { fill: #f5e700;stroke-width:0px; }
#donutChart .labelName>text:nth-child(5)>tspan:nth-child(2) { fill: #41cbff;stroke-width:0px; }

.labelName { font-size:12px;fill:#999;stroke-width:0px; }
/* 도넛 css */

.hidden { display: none; }

.lan { display: none; }
.lan.active { display: inline-block; }

.aft { z-index:99; }

.fs-14 { font-size:14px; }
.fs-12 { font-size:12px; }

#main_canvas_container { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;transition:all 0.4s ease-in-out;  }

#logo { position: absolute; top: 27px; left: 27px; width: 178px; height: 48px; }

div.passive { opacity: 0.5; }
div.passive:hover { cursor: default; }

th { font-weight:normal; }

.mainMenu { display:none;position:absolute; bottom:0; left: 0; width:100%; background-color: #f7f7f7;z-index:9999; }
.mainBtn { float: left; flex:1; height: 72px; text-align: center; transition: all 0.3s ease-in-out; }
.mainBtn:hover { cursor: pointer }
.mainBtn.active { background-color: #fff; border-bottom: 4px solid #00e6c0; }
.mainBtn.language { display:flex;background-color:#e6e6e6; }
.mainBtn.language>p { flex:1;text-align:center;line-height:72px;color:#333; transition: all 0.3s ease-in-out; }
.mainBtn.language>p>span { opacity:0.2; }
.mainBtn.language>p.active { color:#999; }
.mainBtn.language>p.active>span { opacity:1; }
.mainBtn.language>p:not(:last-child) { border-right: 1px solid rgba(51,51,51,0.1); }

.mainBtn>span { display: inline-block; height:48px; margin:12px 0; line-height: 48px; font-size:16px; color: #333; padding-left:58px;opacity:0.6; }
.mainBtn>span>.doubleLine { line-height:24px; }
.mainBtn>span>p { text-align: left; }
.mainBtn.active>span { opacity:1; }

.m_home { background: url("./menu_img/home.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_home.active { background: url("./menu_img/home_active.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_energy_all { background: url("./menu_img/energy_all.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_energy_all.active { background: url("./menu_img/energy_all_active.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_energy_use { background: url("./menu_img/energy_use.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_energy_use.active { background: url("./menu_img/energy_use_active.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_energy_nat { background: url("./menu_img/energy_nat.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_energy_nat.active { background: url("./menu_img/energy_nat_active.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_air_state { background: url("./menu_img/air_state.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_air_state.active { background: url("./menu_img/air_state_active.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_more { background: url("./menu_img/more.png") no-repeat 0 50%; background-size: 48px 48px; }
.m_more.active { background: url("./menu_img/more_active.png") no-repeat 0 50%; background-size: 48px 48px; }

.sideMenu { display:none; position:absolute; bottom: 168px; left: 30px;}
.sideBtn { width: 72px; height: 72px;  background-color: #fff; text-align: center; }
.sideBtn:hover { cursor: pointer; }
.sideBtn:not(:last-child) { margin-bottom: 24px; }
.sideBtn>div>img { width: 48px; height: 48px; margin: 12px; }
.sideBtn>div:last-child { font-size: 10px; color: #fff; letter-spacing: -0.5px; }

.lanMenu { position: absolute; top: 27px; right: 27px; width: 86px; height: 48px;   background-color: #4e575f;  border: 1px solid #4e575f; }
.lanBtn {position:absolute; top: auto; left: 0; width: 86px; height: 48px; text-align: center; font-size: 14px; color: #f2f2f2; line-height: 46px; vertical-align: middle;  bottom: 0; z-index: 1; transition: all 0s; }
.lanBtn.active { background-color: #2d3136; top: 0; z-index: 2; font}
.lanBtn:hover { cursor: pointer; background-color: #2d3136; }

#lang { font-size: 14px; line-height: 52px; color: #fff;}

.pathfindContainer { display:none;position:absolute;top:0;right:-350px;background-color:#20262c;height:100vh;transition: right 0.4s ease-in-out;width:314px;color:#fff; }
.pfbtn { position:relative;width:calc(100% - 40px);height:72px;line-height:72px;background-color:#2b333b;padding-left:34px;margin:30px 20px;font-size:16px; }
.pfArea { transition:all 0.8s ease-in-out;height:0;overflow-y:auto;margin:0; }
/* .pfArea.active { display:block; } */
#pfs_area .gateIcon { width:72px; height:72px; background: url("menu_img/icon.png") no-repeat 50% 50%;background-size: 80% 80%;margin:0 auto; }

#pfs::after { display:block;content:"";position:absolute;top:28px;left:10px;width:14px;height:14px;border-radius:50%;background-color:#fff;border: 2px solid #41cbff; }
#pfe::after { display:block;content:"";position:absolute;top:28px;left:10px;width:14px;height:14px;border-radius:50%;background-color:#fff;border: 2px solid #f76034; }

.gateBtn { position:relative; }
.gateBtn>p { color:#fff;display:inline-block;width:100%;font-size:18px;height:96px;line-height:96px;padding-left:76px; }
#pfs_area>.gateBtn>p { background:url("./menu_img/gatePoint.png") no-repeat 20px 50%;background-size:48px; }
#pfe_area>.gateBtn>p { background:url("./menu_img/storePoint.png") no-repeat 20px 50%;background-size:48px; }
#pfs_area>.gateBtn.active { background-color:rgba(65, 203, 255, 0.3); }
#pfe_area>.gateBtn.active { background-color:rgba(247, 96, 52, 0.3); }
.gateLine { width:calc(100% - 40px);margin:0 20px;height:1px;background-color:#353f49; }

#pfe_area .storeIcon { width:72px;background:url("menu_img/icon.png") no-repeat 50% 50%;background-size: 80%;margin-right:10px; }
#pfe_area .storeText { flex:1;line-height:160%;color:#fff; }

.navAnchor { display:none;position:absolute;transform:translate(-100%, -50%);height:34px;line-height:34px;padding:0 16px;font-size:14px;color:#fff; }
.navAnchor img { position:absolute;top:100%;left:50%;transform:translateX(-50%);
width:10px;height:26px; }

.guideContainer { display:none;position:absolute;width:100vw;height:calc(100vh - 144px);background-color:#eff3f4; z-index: 100;}
.guideHeader { width:100vw; margin: 30px 0 0 30px; display: flex; }
.g_img { width:96px; height: 96px; background: url("./menu_img/user_guide.png") no-repeat 50% 50%; background-size: 96px 96px; }
.g_title { font-size: 32px; font-weight: 500; letter-spacing: -1.4px; color: #333333; margin: auto 0 auto -21px; }
.g_title_desc { font-size: 20px; letter-spacing: -0.9px; color: #333333; margin: auto 0 auto 24px; }

.guideContent { width: 1232px; height: 666px; margin: 24px auto; }
.guideCont_smartGrid { width: 100%; height: 100%; }
.guideCont_usage_energy { width: 100%; height: 100%; padding: 24px 24px 64px; background-color: #ffffff;overflow:hidden; }
.g_cont_top { display: flex; }
.g_cont_left { width: 50%; height: 100%; }
.g_cont_left_title { display: flex; width: 556px; height: 56px; border-bottom: 1px solid #dddddd; line-height: 56px; }
.g_cont_left_title > p { font-size: 24px; font-weight: 500; letter-spacing: -1.2px; text-align: left; color: #333333; }
.g_cont_left_content { display: flex; width: 100%; height: 100%; padding: 24px 24px 0 }

.g_cont_left_cont_img { width:60px; height: 60px; background: url("./menu_img/energy_all_white.png") no-repeat 50% 50%; background-size: 48px 48px; background-color: #00e6c0;  }

.g_cont_left_cont_img.use { background: url("./menu_img/energy_use_white.png") no-repeat 50% 50%; background-size: 48px 48px; background-color: #00e6c0; }
.g_cont_left_cont_img.air { background: url("./menu_img/air_state_white.png") no-repeat 50% 50%; background-size: 48px 48px; background-color: #00e6c0; }
.g_cont_left_cont_img.renew { background: url("./menu_img/energy_nat_white.png") no-repeat 50% 50%; background-size: 48px 48px; background-color: #00e6c0; }


.g_cont_left_cont_desc { width: 85%; height: 100%; margin-left: 24px;word-break:keep-all;}
.g_cont_left_cont_desc_title_kor { width: 100%; height: 100%; font-size: 22px; font-weight: 500; letter-spacing: -1px; color: #333333;}
.g_cont_left_cont_desc_desc_kor { width: 100%; height: 100%; font-size: 18px; line-height: 1.5; letter-spacing: -0.8px; color: #333333; margin-top: 10px; }
.g_cont_left_cont_desc_title_eng { width: 100%; height: 100%; font-size: 22px; font-weight: 500; letter-spacing: normal; color: #333333;}
.g_cont_left_cont_desc_desc_eng { width: 100%; height: 100%; font-size: 18px; line-height: 1.5; letter-spacing: normal; color: #333333; margin-top: 10px; }
.g_cont_right { width: 50%; height: 340px;}
.g_cont_right > video { width: 100%; height: 100%; }
.g_cont_bottom { width: 100%; height: 100%; }
.g_cont_bottom_title { display: flex; width: 100%; height: 56px; border-bottom: 1px solid #dddddd; line-height: 56px; }
.g_cont_bottom_title > p { font-size: 24px; font-weight: 500; letter-spacing: -1.2px; text-align: left; color: #333333; }
.g_cont_bottom_content { display: flex; width: 100%; justify-content: space-between; margin-top: 48px; }
.g_cont_bottom_content_backBtn { width: 10%; height: 100%;}
.g_cont_bottom_content_backBtn:hover { cursor:pointer; }
.g_cont_bottom_content_operateArea { display: flex; width: 80%; height: 100%; justify-content: space-between; }
.g_cont_bottom_content_nextBtn { width: 10%; height: 100%;}
.g_cont_bottom_content_nextBtn:hover { cursor:pointer; }
.g_cont_bottom_content_zoomIn, .g_cont_bottom_content_zoomOut, .g_cont_bottom_content_movingMarker { display: flex; }
.g_cont_bottom_content_backBtn { width:72px; height: 86px; background: url("./menu_img/back.png") no-repeat 50% 50%; background-size: 48px 48px; }
.g_cont_bottom_content_nextBtn { width:72px; height: 86px; background: url("./menu_img/next.png") no-repeat 50% 50%; background-size: 48px 48px; }
.zoomIn_img { width:60px; height: 60px; background: url("./menu_img/zoomIn_1.png") no-repeat 50% 50%; background-size:100%; }
.zoomOut_img { width:60px; height: 60px; background: url("./menu_img/zoomOut_1.png") no-repeat 50% 50%; background-size:100%;  }
.movingMarker_img { width:60px; height: 60px; background: url("./menu_img/moving_marker.png") no-repeat 50% 50%; background-size:100%;  }

.g_cont_bottom_content_desc { width: 206px; margin-left: 24px; display: grid; }
.g_cont_bottom_content_desc_title { height: 28px; font-size: 20px; font-weight: 500; letter-spacing: -0.9px; text-align: left; color: #333333; }
.g_cont_bottom_content_desc_desc { height: 48px; font-size: 18px; letter-spacing: -0.8px; text-align: left; color: #333333; margin-top: 10px; }

.title_dot { width: 8px; height: 8px; margin: auto 10px auto 0; background-color: #00e6c0; border: none; border-radius: 50%; }
.opacity02 { opacity: 0.2; }
.guideFooter { width: 60vw; height: 72px; border: solid 1px #dddddd;  margin: auto; box-sizing: content-box; margin-bottom: 24px;}
.guideFooter:hover { cursor: pointer; }
.guideBtn { float: left; width: 20%; height: 72px; text-align: center; transition: all 0.3s ease-in-out;  }
.guideBtn.active { background-image: linear-gradient(to bottom, #00e6c0, #00aa8e); }
.guideBtn > span { display: inline-block; line-height: 72px; }
.guideBtn > span > p { font-size: 16px; color: #999999; letter-spacing: -0.8px; line-height: 22px;margin-top:14px; }
.guideBtn.active > span > p { color: #ffffff; }


.mainDataContainer, .renewableContainer, .consumptionContainer, .chContainer { display:none; }
.containerGroup { position:absolute;top:30px;left:30px; width:314px;background-color:#f0f0f0;overflow: hidden; transition: width 0.4s ease-in-out, height 0.4s ease-in-out, padding 0.4s ease-in-out; }
.containerGroup>p { text-align:center;color:#333; white-space: nowrap; }
.containerGroup>.statusPannerToggle { width: 30px; height: 30px }
.containerGroup>.expand { background: url("./menu_img/expand.png") no-repeat 50% 50%; background-size: 30px; }
.containerGroup>.compress { background: url("./menu_img/compress.png") no-repeat 50% 50%; background-size: 30px; }

.consData { display:none; }

.logoTitle { padding:20px 0 20px 50px;font-size:16px;background: url("menu_img/logo.png") no-repeat 47px 50%, #fff;background-size:48px;border-top:3px solid #00e6c0; }
.totalKwCont { margin: 10px 6px;background-color:#fff;color:#333; }
.totalKwCont>.totalKw::after { display:block;content:"";clear:both; }
.totalKwCont>.totalKw { font-size:14px;letter-spacing: -0.7px;padding: 14px 8px;line-height:28px; }
.totalKwCont>.totalKw:not(:last-child) { border-bottom:1px solid #e6e6e6; }
.totalKwCont>.totalKw>span:first-child { float:left; }
.totalKwCont>.totalKw>span:last-child { float:right;color:#999; }
.totalKwCont>.totalKw>span:last-child>span { color:#333; }
.totalBold { font-size:22px;margin-right:10px; }


.mainData { width:calc(100% - 12px);padding:0 6px;border-collapse:collapse;font-size:14px;color:#333;margin: 10px 6px 0px; }
.mainData th { background-color:#fff;text-align:left; }
.mainData td { position: relative; background-color:#fff;}
.mainData th, .mainData td { padding:0 8px;line-height:40px; }
.mainData td>span:last-child { color:#999; }

.containerGroup:not(.mainDataContainer) .mainData th { border-bottom:1px solid #e6e6e6; }

.mainData.peakData th { padding: 7px 14px 6px;border-bottom:1px solid #e6e6e6; }
.mainData.peakData th:not(:last-child), .mainData.peakData td:not(:last-child) { border-right:1px solid #e6e6e6; }
.mainData.peakData th.peakData { line-height:20px; }

.mainDatacontainer .mainData tr th:not(:last-child), .mainDatacontainer .mainData tr td:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.1); }
/* .mainDataContainer .mainData td span:last-child, .renewableContainer .last, .consumptionContainer .last { float:right;line-height:44px; } */
.mainDataContainer .mainData td span:last-child, .renewableContainer .last, .consumptionContainer .last { position:absolute;top:3px;right:9px;line-height:44px; }
.mainDataContainer .mainData td span:first-child { font-size:18px; }

.renewableContainer .mainData .hard, .consumptionContainer .mainData .hard { display:inline-block;width:100%;font-size:26px; text-align:center; }
.renewableContainer .mainData td { border-right: none; }

p.peakTime { font-size:12px;padding-right:8px; }

.nowTime { font-size:16px; text-align:center;margin:12px 0; }
.nowTimes { font-size:16px; }

.allEnergyState { position:absolute;display:none;color:#333; }
.allEnergyImg { position:absolute;top:0;left:0;width:96px;height:96px;   transition-property: width, height, border-radius;transition-duration: 0.4s;transition-timing-function: ease-in-out;}
.allEnergyImg.active { width:72px;height:72px;border-radius:0; }
.allEnergyImg>img { width:100%; }
.allEnergyTable { display:none;position:absolute;top:0;left:72px;width:220px;background:#f0f0f0; }
.aetLine { width:100%; height:2px; }
.aetTitle { width:100%; padding:0 12px; background-color:#fff;font-size:14px;line-height:40px; }
.aetText { width:100%; padding:0 12px;background-color:#f0f0f0;font-size:14px;line-height:46px;height:46px; }
.aetText>div:first-child { float:left; }
.aetText>div:last-child { float:right; }
.aetText>div:last-child>span, .aetText.aetText2>span { font-size:20px;margin-right:5px; }

#lightAnchorGroup .aetTitle { text-align:center; }

.aetText>div.eng { color:#999; }
.aetText>div.eng>span { color:#333; }

.aetText2 { text-align:center; }

.allEnergyTable.next { display:none;top:-50px;font-size:14px; }

.allEnergyText { text-align: center;margin-top:64px;font-size:14px;letter-spacing:-0.7px;color:#fff; }

#sun_outAnchor .allEnergyTable { width:144px;left:-180px; }
#sun_outAnchor .aetTitle { line-height:36px;font-size:14px;letter-spacing:-0.7px;color:#fff; }
#sun_outAnchor .aetText { line-height:36px;height:36px;font-size:16px; }

/* #sun_outAnchor .aetText>div:last-child>span, .aetText.aetText2>span { font-size:16px; } */

#kepcoAnchor .allEnergyImg { background: url("menu_img/kepco_glow.png") no-repeat 50% 10px, rgba(255, 201, 54, 0.6);background-size:48px 48px; border:2px solid #ffc936; }
#kepcoAnchor .allEnergyText { text-shadow:0 0 6px #ffc936; }
#kepcoAnchor .aetLine { background:linear-gradient(to right, #ffc936, #2b333b); }

#sunAnchor .allEnergyImg { background: url("menu_img/pv_glow.png") no-repeat 50% 10px, rgba(0, 230, 192, 0.6);background-size:48px 48px; border:2px solid #00e6c0; }
#essAnchor .allEnergyImg { background: url("menu_img/battery_glow.png") no-repeat 50% 10px, rgba(0, 230, 192, 0.6);background-size:48px 48px; border:2px solid #00e6c0; }
#sunAnchor .allEnergyText, #essAnchor .allEnergyImg { text-shadow:0 0 6px #00e6c0; }
#sunAnchor .aetLine, #essAnchor .aetLine { background:linear-gradient(to right, #00e6c0, #fff); }

#jwAnchor .aetLine { background: linear-gradient(to right, #ff8373, #fff); }
#lightAnchor .aetLine { background: linear-gradient(to right, #f5e700, #fff); }
#airAnchor .aetLine { background: linear-gradient(to right, #41cbff, #fff); }
#evAnchor .aetLine { background: linear-gradient(to right, #f7c434, #fff); }
#electricCarAnchor .aetLine { background: linear-gradient(to right, #00e6c0, #fff); }

#sunAnchor.renew .aetLine, #essAnchor.renew .aetLine, #sunAnchor2 .aetLine, #jysAnchor .aetLine { background: linear-gradient(to right, #17ee50, #fff); }

#sunAnchor.renew .allEnergyImg, #sunAnchor2 .allEnergyImg { background: url("menu_img/pv_glow_renew.png") no-repeat 50% 10px, rgba(23, 238, 80, 0.6);background-size:48px 48px; border:2px solid #17ee50; }
#essAnchor.renew .allEnergyImg { background: url("menu_img/battery_glow_renew.png") no-repeat 50% 10px, rgba(23, 238, 80, 0.6);background-size:48px 48px; border:2px solid #17ee50; }

#jysAnchor .allEnergyImg { background: url("menu_img/jys_glow.png") no-repeat 50% 10px, rgba(23, 238, 80, 0.6);background-size:48px 48px; border:2px solid #17ee50; }
#sunAnchor.renew .allEnergyText, #essAnchor.renew .allEnergyImg, #jysAnchor .allEnergyText, #sunAnchor2 .allEnergyText { text-shadow:0 0 6px #17ee50; }

#jwAnchor .allEnergyImg { background: url("menu_img/jw_glow.png") no-repeat 50% 10px, rgba(255,131,115,0.6); background-size:48px 48px; border: 2px solid #ff8373; }
#lightAnchor .allEnergyImg { background: url("menu_img/light_glow.png") no-repeat 50% 10px, rgba(245, 236, 64, 0.6); background-size:48px 48px; border: 2px solid #f5e700; }
#airAnchor .allEnergyImg { background: url("menu_img/temp_glow.png") no-repeat 50% 10px, rgba(65, 203, 255, 0.6); background-size:48px 48px; border: 2px solid #41cbff; }
#evAnchor .allEnergyImg { background: url("menu_img/ev_glow.png") no-repeat 50% 10px, rgba(247, 196, 52, 0.6); background-size:48px 48px; border: 2px solid #f7c434; }
#electricCarAnchor .allEnergyImg { background: url("menu_img/car_glow.png") no-repeat 50% 10px, rgba(13, 255, 215, 0.6); background-size:48px 48px; border: 2px solid #00e6c0; }

#jwAnchor .allEnergyText { text-shadow: 0 0 6px #ff8373; }
#lightAnchor .allEnergyText { text-shadow: 0 0 6px #f5e700; }
#airAnchor .allEnergyText { text-shadow: 0 0 6px #41cbff; }
#electricCarAnchor .allEnergyText { text-shadow: 0 0 6px #41cbff; }

.color_yellow { color:#ffc936 !important; }
.bcolor_yellow { background-color:#ffc936 !important; }
.color_blue, .color_car { color:#00e6c0 !important; }
.bcolor_blue { background-color:#00e6c0 !important; }
.color_green { color:#17ee50 !important; }
.bcolor_green { background-color:#17ee50 !important; }
.color_panner_green { color:#5cff00 !important; }
.color_jw { color:#ff8373 !important; }
.bcolor_jw { background-color:#ff8373 !important; }
.color_light { color:#f5e700 !important; }
.bcolor_light { background-color:#f5e700 !important; }
.color_air { color:#41cbff !important; }
.bcolor_air { background-color:#41cbff !important; }
.color_ev { color:#f7c434 !important; }
.color_red { color:#f76034 !important; }
.color_stop { color:#f77f71 !important; }
.bcolor_stop { background-color:#f77f71 !important; }

.pannerGroup { position:absolute;top:0;right:-350px;width:320px;height:100vh;background-color:#fff;color:#333;transition:right 0.4s ease-in-out;overflow:hidden; }
.pannerTitle { display:block;position: relative;font-size:16px; line-height:72px;margin-bottom:30px;background-color:#fff;padding-left:38px;box-shadow:0 3px 20px 0 rgba(0,0,0,0.16); }
.pannerTitle::after { display:block;content:"";width:8px;height:8px;border-radius:50%;background-color:#00e6c0;position:absolute;top:32px;left:20px; }
.pannerGraph { position:relative;width:calc(100% - 24px);margin:0 12px 30px;height:168px;overflow:hidden;background-color:#fff; }
.donutGraph { position:relative;width:calc(100% - 24px);height:220px;margin: 0 12px 30px;background-color:#fff; }
#pannerName { display:inline-block;width:100%;position: absolute;top:8px;text-align:center;font-size:14px;letter-spacing: -0.7px;}
#pannerUnit { position: absolute;top:48px;left:8px;font-size:10px;z-index:101; }
#pannerCycle { position: absolute;top:48px;right:8px;font-size:10px;z-index:101;color:#999; }

.mainGraph, .renewGraph { position:absolute;z-index: 98;bottom:8px;left:8px; }
.mainGraph.active, .renewGraph.active { z-index: 100; }

.pannerBtn { position:relative;width:100%;overflow:hidden; }
.pannerBtn::after { position:absolute;bottom:0;left:12px;width:calc(100% - 24px);height:1px;background-color:rgba(53, 63, 73, 0.2);content:""; }
.pannerBtn.passive { opacity:0.5; }
.pannerText { position:absolute;left:80px;line-height:96px;font-size:14px;letter-spacing:-0.7px; }
.pannerText>.secondLine { text-align: left;line-height:130%;margin-top:30px; }
.pannerText>.secondLine>.secondLine { color:#999;font-size:12px; }
.pannerImg { position:absolute;width:48px;height:48px;margin: 24px 10px 24px 0; }
.pannerImg>img { width:100%; }
.pannerDataArea { padding:0 20px;font-size:12px;text-align:right;transition:all 0.4s ease-in-out; }
.pannerDataArea.active { background-color:#00e6c0;color:#fff; }
.pannerDataArea>span { font-size:24px;margin-right:10px;line-height:96px; }

/* .pannerDataArea.active .pannerData { color:#fff; } */

.airPanner, .evPanner { overflow:hidden;height:0;padding:0;transition:all 0.4s ease-in-out;line-height:72px; }
.airBtns, .evBtns { display:flex;border:1px solid #ddd;color:rgba(51,51,51,0.3); }
.airBtn, .evBtn { flex: 1; text-align:center; font-size:14px;letter-spacing:-0.7px; }
.airBtn.active, .evBtn.active { background-color:#00e6c0;color:#fff; }

.kwG { display:inline; }

#panner_all_img, #panner_renewable_all_img, #cpPanner_all_img { background: url("menu_img/panner_all.png") no-repeat 50% 50%; background-size:100% 100%; }
#panner_kepco_img { background: url("menu_img/kepco.png") no-repeat 50% 50%; background-size:100% 100%; }
#panner_sun_img { background: url("menu_img/pv.png") no-repeat 50% 50%; background-size:100% 100%; }
#panner_jys_img { background: url("menu_img/jys.png") no-repeat 50% 50%; background-size:100% 100%; }
#panner_ess_img { background: url("menu_img/battery.png") no-repeat 50% 50%; background-size:100% 100%; }
#panner_all_img.active, #panner_renewable_all_img.active, #cpPanner_all_img.active { background: url("menu_img/panner_all_active.png") no-repeat 50% 50%; background-size:100% 100%; }
#panner_kepco_img.active { background: url("menu_img/kepco_active.png") no-repeat 50% 50%; background-size:100% 100%; }
#panner_sun_img.active { background: url("menu_img/pv_active.png") no-repeat 50% 50%; background-size:100% 100%; }
#panner_jys_img.active { background: url("menu_img/jys_active.png") no-repeat 50% 50%; background-size:100% 100%; }
#panner_ess_img.active { background: url("menu_img/battery_active.png") no-repeat 50% 50%; background-size:100% 100%; }

#cpPanner_jw_img { background: url("menu_img/jw.png") no-repeat 50% 50%;background-size:100% 100%; }
#cpPanner_light_img { background: url("menu_img/light.png") no-repeat 50% 50%;background-size:100% 100%; }
#cpPanner_air_img { background: url("menu_img/temp.png") no-repeat 50% 50%;background-size:100% 100%; }
#cpPanner_ev_img { background: url("menu_img/ev.png") no-repeat 50% 50%;background-size:100% 100%; }
#cpPanner_car_img { background: url("menu_img/car.png") no-repeat 50% 50%;background-size:100% 100%; }

#cpPanner_jw_img.active { background: url("menu_img/jw_active.png") no-repeat 50% 50%;background-size:100% 100%; }
#cpPanner_light_img.active { background: url("menu_img/light_active.png") no-repeat 50% 50%;background-size:100% 100%; }
#cpPanner_air_img.active { background: url("menu_img/temp_active.png") no-repeat 50% 50%;background-size:100% 100%; }
#cpPanner_ev_img.active { background: url("menu_img/ev_active.png") no-repeat 50% 50%;background-size:100% 100%; }
#cpPanner_car_img.active { background: url("menu_img/car_active.png") no-repeat 50% 50%;background-size:100% 100%; }

#panner_renewable_all { display:none; }

.smoothie-chart-tooltip { color:#fff; }

.pannerToggle { display:none;position:absolute;bottom: 72px;right:calc(-100vw / 12);background-color:#393e44;color:#fff;height:72px;text-align:center;line-height:72px;width:calc(100vw / 12);transition:right 0.8s ease-in-out; }
.pannerToggle.active { background-color:#2d3136; }

.moreContainer { display:none;position:absolute;bottom:0px;left:0;width:100%;height:72px;padding:0 33vw;background-color:#fff;transition:all 0.4s ease-in-out;color:#333; }
.moreBtn { flex:1;font-size:16px;letter-spacing:-0.8px;line-height:72px;padding-left:103px; }

#pathfind { background:url("./menu_img/pathfind.png") no-repeat 45px 50%;background-size:48px; }
#pathfind.active { background:url("./menu_img/pathfind_active.png") no-repeat 45px 50%;background-size:48px;color:#00e6c0; }
#round { background:url("./menu_img/round.png") no-repeat 45px 50%;background-size:48px; }
#round.active { background:url("./menu_img/round_active.png") no-repeat 45px 50%;background-size:48px;color:#00e6c0; }
#usePage { background:url("./menu_img/menual.png") no-repeat 45px 50%;background-size:48px; }
#usePage.active { background:url("./menu_img/menual_active.png") no-repeat 45px 50%;background-size:48px;color:#00e6c0; }
#emergency { background:url("./menu_img/moreExit.png") no-repeat 45px 50%;background-size:48px; }
#emergency.active { background:url("./menu_img/moreExit_active.png") no-repeat 45px 50%;background-size:48px;color:#00e6c0; }

.lightPanner { display:none;position:absolute;bottom:96px;left:50%;transform:translateX(-50%);width:290px;height:72px;background-color:#fff;line-height:72px;color:rgba(51,51,51,0.5);text-align:center; }
.lightBtn { width:50%;float:left;letter-spacing:-0.9px; }
.lightBtn.active { background:linear-gradient(to bottom, #00e6c0, #00aa8e);color:#fff; }

.pannerExitGroup { display:none; position:absolute;top:50%;left:0;width:50px;height:50px;background-color:#2d3136;color:#fff;font-size:16px;line-height:50px;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);transition:left 0.4s ease-in-out; }

.renewableAnchor { display:none; }
#consumptionGroup { display:none; }
/* #evAnchorGroup { display:none; } */

.evAnchor>p>span { font-size:20px;font-weight:900; }

.test { position:absolute;top:50%;left:0; }

.insideBack { position:absolute;top:0;left:0;width:100vw;height:100vh;display:none; }
.insideBack img { width: 100%; height: 100%; }

/* .chBtn { display:none;position:absolute;bottom:78px; width:60px;height:60px;line-height:60px;text-align:center;background-color:#393e44;color:#fff;border-radius:50%; }
.chBtn.active { background-color:#2d3136;color:#00e6c0; } */

#chLeft {left: 40%;}
#chRight {right: 40%;}

.chBtns, .innerBtns, .speedBtns { display:none;position:absolute;bottom:96px;left:50%; transform:translateX(-50%); }
.chBtn, .innerBtn, .speedBtn { width:72px;height:72px;line-height:72px;text-align: center;color:#fff;float:left; }
#chLeft, #innerLeft { background:url("./menu_img/leftArrow.png") no-repeat 50% 50%, linear-gradient(to bottom, #fff, #ddd);background-size:48px 48px, 100% 100%; }
#chLeft.active, #innerLeft.active { background:url("./menu_img/leftArrow_active.png") no-repeat 50% 50%, linear-gradient(to bottom, #00e6c0, #00aa8e);background-size:48px 48px, 100% 100%; }

.speedBtn { background-color:#fff;color:#333;line-height:72px;text-align:center; }

#innerLeft { margin-right:146px; }
#chLeft, #chStop, #speed1, #speed2 { margin-right:37px; }

#chRight, #innerRight { background:url("./menu_img/rightArrow.png") no-repeat 50% 50%,  linear-gradient(to bottom, #fff, #ddd);background-size:48px 48px, 100% 100%; }
#chRight.active, #innerRight.active { background:url("./menu_img/rightArrow_active.png") no-repeat 50% 50%,  linear-gradient(to bottom, #00e6c0, #00aa8e);background-size:48px 48px, 100% 100%; }

#chStop { background:url("./menu_img/stop.png") no-repeat 50% 50%, linear-gradient(to bottom, #fff, #ddd);background-size:48px 48px, 100% 100%; }
#chStop.active { background:url("./menu_img/stop_active.png") no-repeat 50% 50%, linear-gradient(to bottom, #00e6c0, #00aa8e);background-size:48px 48px, 100% 100%; }

.speedBtn.active { background:linear-gradient(to bottom, #00e6c0, #00aa8e);color:#fff; }

.jys_c_out_anchor, .jys_h_out_anchor { display:none;position:absolute;width:144px;height:36px;line-height:36px;text-align:center;color:#fff;font-size:14px;letter-spacing:-0.7px; }

.jys_c_out_anchor { background-color:rgba(65,203,255,0.5);box-shadow:0 0 6px 0 rgba(65, 203, 255, 0.5); }
.jys_h_out_anchor { background-color:rgba(255,131,115,0.5);box-shadow:0 0 6px 0 rgba(255, 131, 115, 0.5); }

.lobbyVideoArea { display:none;position:absolute;top:45%;left:50%;width:calc(100vw * (1232 / 1920));height:calc((100vw * (1232 / 1920)) / 16 * 9);transform:translate(-50%, -50%);}
.lobbyVideoArea video { width:100%; }
.lobbyBtnArea { margin:0 auto; width:604px;margin-top:48px; }
.lobbyBtn { display:inline-block;width:290px;height:72px;text-align:center;line-height:72px;float:left;font-size:18px;letter-spacing:-1.2px; }
#lobby_exit { margin-right: 24px;background:linear-gradient(to bottom, #fff, #dcdcdc);color:#999; }
#lobby_3f { background: linear-gradient(to bottom, #00e6c0, #00aa8e);color:#fff; }

.renewableNext { display:none;text-align:center;padding:5px 10px; }

#didPanner { display:none;position:absolute;top:50%;left:0%;width:100vw;transform:translateY(-50%); }
#didPanner img { width:100%; }

#sunInfoAnchor { display:none;color:#fff; }

.renewableGroup { display:none; }
#sunInfo1 { display:block; }

.rnBtns, .essTour { display:none;position:absolute;bottom:96px;left:50%;transform:translateX(-50%); background:linear-gradient(to bottom, #00e6c0, #00aa8e);color:#fff;text-align:center;line-height:72px;width:290px;height: 72px;letter-spacing:-0.9px;font-size:18px; }

#imgTest { posisztion:absolute;top:0;left:0;width:192px;background-color:#ddd; }
#imgTest canvas { width:192px; }

#essInfo1 { display:none;position:absolute;left:150px;background-color:#f0f0f0;width:242px;height:276px; }
#essSocBody { position: relative;width:85px;height:128px;margin:40px auto;overflow:hidden;border:2px solid #333;background-color:#f0f0f0; }
.essHide { position:absolute;top:0;width:20px;height:20px;background-color:#f0f0f0; }
#essSocBody>p { position:absolute;bottom:20px;;text-align:center;color:#fff;width:100%;font-size:14px; }
#essSocBodyValue { position:absolute;bottom:10px;width:calc(100% - 20px);height:50%;transition:all 1s ease-in-out;left:50%;transform:translate(-50%); }
.essInfoTitle { width:100%;height:48px;text-align:center;line-height:48px;font-size:16px;color:#333;letter-spacing:-0.8px;background-color:#fff; }
#essHead { position:absolute;width:35px;height:35px;border:2px solid #fff;left:50%;transform:translate(-50%, -50%);margin-top:40px; }
#essStateBody { position:absolute;bottom:20px;text-align:center;width:100%;font-size:16px;color:#333;letter-spacing:-0.8px; }

#essInfo2 { display:none;position:absolute;transform:translate(-50%,-50%);width:100px;height:100px;background-color:#393e44;color:#00e6c0;text-align:center;line-height:100px; }

#blackOut { display:none;position:absolute;top:0;left:0;width:100vw;height:100vh;background-color:#000;}

.jysTempAnchor { display:none;position:absolute;background-color:#f0f0f0;color:#333;min-width: 144px;text-align: center;font-size:12px;}
.jysTempAnchor>div { line-height:36px;font-size:14px;background-color:#fff;padding:0 10px; }
.jysTempAnchor span { font-size:16px;line-height:36px; }

.esContainer, .evContainer { display:none;position:absolute;bottom:-72px;left:0;width:100vw;height:72px;background-color:#fff;overflow:hidden;transition:bottom 0.8s ease-in-out; }
.evGroup, .esGroup { position:relative;display:flex;width:100%; }
.evGroup { padding: 0 30vw; }
.esGroup { padding: 0 25.9vw; }
.sevBtn, .sesBtn { flex:1;margin:6px;height:60px;line-height:60px;color:#rgba(51,51,51,0.5);font-size:14px;letter-spacing:-0.7px;text-align:center;border:1px solid #ddd; }
.sevBtn.active, .sesBtn.active { background:#00e6c0;color:#fff;border:none; }

.ecVideoContainer { display:none;position:absolute;top:0;right:314px;width:0;transition:width 0.4s ease-in-out; }
#ecVideo { width:100%; }

#pf_uds { width:100%;line-height:80px;text-align:center;background-color:#2a9cf6;color:#fff;font-size:16px;font-weight:900;margin-top:20px;padding: 0 16px; }
#newPathfind { display:none;position:absolute;top:12px;right:20px;width:72px;height:72px;line-height:72px;text-align:center;background-color:#f76034;color:#fff;font-size:16px;letter-spacing:-0.8px; }

#skip, #pv2Exit { display:none;position: absolute;bottom: 96px;left:50%;transform:translateX(-50%);width:290px;height:72px;background:linear-gradient(to bottom, #fff, #dcdcdc);color:#333;text-align:center;line-height:72px;font-size:18px;letter-spacing:-0.9px; }

.emergGuideContainer { display:none; position:absolute;z-index:100; }
.emergGuideImgGroup img { width:100%; display:none;}
.emergGuideBtnGroup { top:90%; left:840px; width: 432px; height: 72px;  border: solid 2px #dddddd; position:absolute;}
.emergGuideBtn { position:absolute;top:-2px;width: 146px; height: calc(100% + 4px); padding: 24px 62px;  border: 0; background-color:transparent; color: #999999;font-size: 18px;line-height: 1.33;}
.emergGuideBtn.active { background-image: linear-gradient(to bottom, #00e6c0, #00aa8e);color: #ffffff;}
.emergGuideBtn:focus {outline:none;}

#emergGuideBtn_1f { left:-2px; }
#emergGuideBtn_2f { left:50%;transform:translateX(-50%); }
#emergGuideBtn_3f { right:-2px; }

.consumptionPannerMoreArea { position:absolute;bottom:72px;width:100%;height:120px;background-color:#fff;padding:24px 20px;box-shadow: 0 -3px 20px 0 rgba(0,0,0,0.1); }
.consumptionPannerMoreBtn { width: 100%;height:72px;line-height:72px;font-size:16px;letter-spacing:-0.8px; text-align: center;border:1px solid #00e6c0;color:#00e6c0; }

.pannerBtnArea { overflow-y: auto; max-height:535px; }

.innerTitle { display:none;width:100%;height:48px;line-height:48px;text-align:center;background-color:#fff;color:#333;border-top:1px solid #e6e6e6; }

.chTitle { position:relative;width:100%;height:48px;line-height:48px;text-align:center;color:#333;font-size:14px;letter-spacing:-0.7px;background-color:#fff;border-top:1px solid #ddd;margin-bottom:10px; }
.chDataTable { position:relative;width:calc(100% - 12px);height:48px;line-height:48px;border-bottom:1px solid #e6e6e6;margin: 0 6px; color:#333;background-color:#fff; }
.chDataTitle { position:absolute;left:8px;display:inline-block; }
.chDataValueGroup { position:absolute;right:8px;display:inline-block; }
.chDataValue { font-size:26px;margin-right:10px; }
.chUnit {  }

.chMsList { width:calc(100% - 12px);height:70px;padding:10px 8px;display:flex;line-height:24px;color:#333;margin: 0 6px 4px;background:#fff; }
.chMs { flex:1;text-align:center;font-size:14px; }
.chMsLine { width:calc(100% - 10px);height:2px;margin: 0 5px; }

.chDots { position:absolute;top:18px;right:8px; }
.chDot { display:inline-block;float:left;width:6px;height:6px;border-radius:50%;background-color:#e6e6e6; }
.chDot:not(:last-child) { margin-right:6px; }
.chDot.active { background-color:#00e6c0; }

.chsGroup { width:calc(314px * 3); margin-left:0; transition:marginLeft 0.4s ease-in-out; }
.chsGroup::after { display:block;content:"";clear:both; }
.chs { float:left;width:314px; }

.evAnchors, .esAnchors { position:absolute;width:220px;height:86px;background-color:#f0f0f0;color:#333;font-size:14px; }


.evTitle, .esTitle { width:100%;height:40px;background-color:#fff;line-height:40px;padding:0 12px; }
.evTitleLeft, .esTitleLeft { display:inline-block;float:left; }
.evStatus, .esStatus { position:relative;float:right; }
.evStatusPoint, .esStatusPoint { position:absolute;top:16px;left:-12px;width:6px;height:6px;border-radius:50%;background-color:#fff; }
.evBody, .esBody { display:inline-block;width:100%;height:46px;line-height:46px;padding:0 12px; }
.evBody::after, .evTitle::after, .esBody::after, .esTitle::after { display:block;content:"";clear:both; }
.evBodyLeft, .esBodyLeft { display:inline-block;float:left; }
.evLast, .esLast { display:inline-block;float:right;color:#999; }
.evLast span, .esLast span { font-size:20px; }

.mainDataPerc { display:none;position:absolute;top:44px;right:-183px;width:158px;height:90px;background-color:#f0f0f0;color:#333;text-align:center;font-size:14px; }
.mainDataPercHead { background-color:#fff;height:42px;line-height:42px;width:100%; }
.mainDataPercBody { width:100%;height:48px;line-height:48px; }
.mainDataPercBody>span { font-size:22px; }

.energyMoreContainer { position:absolute;left:-4000px;width:100vw;height:100vh;background-color:#f0f0f0; padding: 0 187px;z-index:200; }

.emcRenew, .emcCons { position:absolute; }

.t1 { position:absolute;top:68px;width:507px;height:144px;background-color:#fff;color:#333;font-size:18px;line-height:72px;padding: 0 40px;box-shadow:0 2px 10px 0 rgba(0,0,0,0.15); }
.energyMoreContainer .t1:first-child { left:428px; }
.energyMoreContainer .t1:nth-child(2) { left:985px; }
.t1Group { width:100%;height:72px; }
.t1Group::after { display:block;content:"";clear:both; }
.t1 .t1Group:not(:last-child) { border-bottom:1px solid #e6e6e6; }
.t1 .title { display:inline-block;position:absolute; }
.t1 .value { display:inline-block;position:absolute;right:40px;color:#999; }

#tdCo2, #adCo2, #tdTree, #adTree { font-size:36px;margin-right:10px; }

.t2 { position: absolute;top:252px;width:482px;height:708px;color:#333;background-color:#fafafa;box-shadow:0 2px 10px 0 rgba(0,0,0,0.15); }
.t2.sun { left:187px; }
.t2.jys { left:719px; }
.t2.ess { left:1251px; }

.t2>.title { width:100%;height:96px;line-height:96px;font-size:20px;letter-spacing:-1px;padding-left:78px;border-bottom:1px solid #e6e6e6; }
.t2 .title.sun { background:url("./menu_img/tSun.png") no-repeat 20px 50%, #fff;background-size:48px; }
.t2 .title.jys { background:url("./menu_img/tJys.png") no-repeat 20px 50%, #fff;background-size:48px; }
.t2 .title.ess { background:url("./menu_img/tEss.png") no-repeat 20px 50%, #fff;background-size:48px; }
.t2 .subTitle { position:relative;width:100%;height:72px;line-height:72px;font-size:18px;padding:0 20px;border-bottom:1px solid #e6e6e6;background-color:#fff; }
.t2 .subTitle:first-child { border-top: 1px solid #e6e6e6; }
.t2 .subTitle .title { position:absolute; }
.t2 .subTitle .value { position:absolute;right:20px;color:#999; }
.t2 .subTitle .value>span { color:#333; }

.subTitle.borderTop { border-top: 1px solid #e6e6e6; }

.t2 .graphArea { position:relative;width:calc(100% - 40px);height:212px;margin:20px auto;border:1px solid #e6e6e6;background-color:#fff; }
.t2 .graphArea .title { position:absolute;top:33px;font-size:16px;letter-spacing:-0.8px;line-height:24px;width:calc(100% - 40px);text-align:center; }
.t2 .graphArea .unit { position:absolute;top:70px;left:10px;font-size:12px;line-height:18px; }
.t2 .graphArea .time { position:absolute;top:70px;right:20px;font-size:12px;line-height:18px;color:#999; }
.t2 .graphArea .graph { position:absolute;bottom:20px; }

#sunMainValue, #jysMainValue, #essMainValue, #sunTodayValue, #sunMonthValue, #sunYearValue, #sunTodayCo2Value, #jysAdValue, #jysAdHValue, #jysTodayCo2Value, #essChargeValue, #essDischargeValue { font-size:30px; }

.subMainMenu { position:absolute;bottom:0;left:0;width:100vw;height:72px;background-color:#f7f7f7;z-index:99999; }
.subMainBtns { width:710px;height:72px;margin-left:533px; }
.subMainBtn { float:left;width:355px;height:72px;line-height:72px;color:#333;font-size:16px;padding-left:160px;opacity:0.6; }

#renewT1 { background: url("./menu_img/energy_nat.png") no-repeat 105px 50%;background-size:48px; }
#consT1 { background: url("./menu_img/energy_use.png") no-repeat 105px 50%;background-size:48px; }
#renewT1.active { background: url("./menu_img/energy_nat_active.png") no-repeat 105px 50%, #fff;background-size:48px;border-bottom:4px solid #00e6c0;opacity:1; }
#consT1.active { background: url("./menu_img/energy_use_active.png") no-repeat 105px 50%, #fff;background-size:48px;border-bottom:4px solid #00e6c0;opacity:1; }

.subMainLans { position:absolute;top:0;right: 0;width:320px;display:flex;background-color:#e6e6e6;text-align:center;height:72px;line-height:72px;color:#333; }
.subMainLan { flex:1 }
.subMainLan.active { color:#999; }
.subMainLan>span { opacity:0.2; }
.subMainLan.active>span { opacity:1; }

#subExit { position:absolute;top:0;right:320px;width:175px;height:72px;line-height:72px; color:#999;padding-left:89px;background:url("./menu_img/subExit.png") no-repeat 31px 50%;background-size:48px; }

.t3 { position:absolute;top:68px;left:584px;width:745px;height:120px;line-height:120px;background-color:#fff;color:#333;padding: 0 40px;box-shadow:0 2px 10px 0 rgba(0,0,0,0.15); }

.t3 .title { position:absolute;font-size:24px; }
.t3 .value { position:absolute;right:20px; }

.t4Group { position:absolute;top:228px;left:0;width:100vw;padding:0 187px;height:120px; }

.t4 { position:relative; float: left; width:379px; height:120px;background-color:#fff;padding:0 20px; color:#333;font-size:18px;box-shadow:0 2px 10px 0 rgba(0,0,0,0.15); }

.t4Group .t4:not(:last-child) { margin-right:10px; }

.t4 .peakTime { position:absolute;left:0;width:100%;top:8px;text-align:center;font-size:16px; }
.t4 .title { position:absolute;line-height:120px; }
.t4 .value { position:absolute;right:20px;line-height:120px;color:#999; }

#conTotalValue { font-size:42px;color:#00e6c0; }
#consKepcoValue, #consPeakValue, #consSunValue, #consEssValue { font-size:30px; }

.t5Group { position:absolute;top:414px;left:0;width:100vw;padding:0 187px; }
.t5 { position:relative;float:left;width:298px;height:546px;background-color:#fafafa; }
.t5Group .t5:not(:last-child) { margin-right:14px; }

.t5>.title { width:100%;height:72px;line-height:72px;font-size:18px;padding-left:68px;background-color:#fff;color:#333; }

.t5 .subTitle { position:relative;width:100%;height:72px;line-height:72px;font-size:18px;padding:0 20px;border-bottom:1px solid #e6e6e6;color:#333;font-size:14px; }
.t5 .subTitle .title { position:absolute;left:20px; }
.t5 .subTitle .value { position:absolute;right:20px;color:#999; }

.t5 .graphArea { position: relative;width:calc(100% - 20px);height:146px;margin:20px auto;background-color:#fff;border:1px solid #e6e6e6; }

.t5 .title.jw { background: url("./menu_img/consJw.png") no-repeat 10px 50%, #fff;background-size:48px;border-top:4px solid #ff8373; }
.t5 .title.light { background: url("./menu_img/consLight.png") no-repeat 10px 50%, #fff;background-size:48px;border-top:4px solid #f5e700; }
.t5 .title.temp { background: url("./menu_img/consTemp.png") no-repeat 10px 50%, #fff;background-size:48px;border-top:4px solid #41cbff; }
.t5 .title.ev { background: url("./menu_img/consEv.png") no-repeat 10px 50%, #fff;background-size:48px;border-top:4px solid #f7c434; }
.t5 .title.car { background: url("./menu_img/consCar.png") no-repeat 10px 50%, #fff;background-size:48px;border-top:4px solid #00e6c0; }

.t5 .graphArea .title { position:absolute;width:100%;text-align:center;top:10px;color:#333;font-size:14px; }
.t5 .graphArea .unit { position:absolute;top:42px;left:10px;font-size:10px;color:#999; }
.t5 .graphArea .time { position:absolute;top:42px;right:10px;font-size:10px;color:#999; }
.t5 .graphArea .graph { position:absolute;bottom:10px;width:100%;height:70px;padding:0 10px; }

#consJwValue1, #consTdJwValue, #consMonthJwValue, #consYearJwValue, #consLightValue, #consTdLightValue, #consMonthLightValue, #consYearLightValue, #consTempValue, #consTdTempValue, #consMonthTempValue, #consYearTempValue, #consTdEvValue1, #consMonthEvValue, #consYearEvValue, #consCarValue, #consCarValue1, #consTdCarValue, #consMonthCarValue, #consYearCarValue, #consEvValue1, #consTdEvValue { font-size:18px;color:#333; }

.dimming { display:none; position:absolute;bottom:96px;right:344px;width:360px;height:72px;background-color:#fff;padding:14px 10px; }
.dimBody { display:flex;width:100%;height:20px;background:linear-gradient(to right, #a7a593, #f5e700); }
.dimLine { flex:1; }
.dimBody .dimLine:not(:last-child) { border-right:1px solid rgba(255, 255, 255, 0.2); }
.dimText { display:flex;font-size:12px;color:#333;text-align:center; }
.dimText p { flex:1;margin-top:4px; }

#break { position:absolute;left:-4000px;width:1px;height:1px; }
#csMore3 { display:none; }

.insideTitle { display:none;position:absolute;top:30px;left:50%;transform:translateX(-50%);height:60px;line-height:56px;text-align:center;background-color:#fff;border-top:2px solid #00e6c0;font-size:20px;letter-spacing:-1px;color:#333;padding:0 20px; }
.insideTitle>span { float:left; }

.insideTitle>.jysText.left, .insideTitle>.jysText.right { font-size:16px;color:#333;letter-spacing:-0.8px;opacity:0.3;width:110px; }

.insideTitle .left .eng, .insideTitle .right .eng { font-size:15px;text-align:center; }
.insideTitle .eng.doubleLine { line-height:20px;margin-top:10px; }

.jysArrow { display:inline-block;width:36px;height:36px;margin:12px 10px; }
.jysArrow.left { background:url("./menu_img/jysLeft.png") no-repeat 50% 50%;background-size:100% 100%; }
.jysArrow.right { background:url("./menu_img/jysRight.png") no-repeat 50% 50%;background-size:100% 100%; }

.pv2Image { display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); width:700px; }
.pv2Image img { width:100%; }

.fullscreen { position:absolute;bottom:10px;left:10px;z-index:9999;font-size:20px;padding:10px 20px;color:#fff;background-color:#353f49; }

.exitFullscreen { position:absolute;top:0;left:0;width:50px;height:50px;z-index:9999; }

#mute, #subMute { background: url("./menu_img/bgmOn.png") no-repeat 50% 50%;background-size:36px; }
#mute.mute, #subMute.mute { background: url("./menu_img/bgmOff.png") no-repeat 50% 50%; background-size: 36px; }

.fsContainer { display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:640px;height:1020px;border-top:4px solid #00e6c0;color:#333;text-align:center; }

.fsHeader { width:100%;background-color:#fff; }
.fsHeader::after { display:block;content:"";clear:both; }
.fsLogo { width:120px;height:77px;background:url("./menu_img/fsLogo.png") no-repeat 50% 50%;background-size:100%;margin:20px 40px 20px 70px;float:left; }
.fsTitle { font-size:30px;letter-spacing:-1.6px;line-height:47px;height:94px;float:left;text-align:left;margin-top:12px; }

.fsBody { width:100%;background-color:#f0f0f0;padding:20px; }
.fsData { width:100%;list-style: none;margin:0;padding:0 20px;background:#fff; }
.fsData>li { line-height:65px;text-align:left;border-bottom: 1px solid rgba(255,255,255,0.2); }
.fsData>li::after { display:block;content:"";clear:both; }
.fsData>li:not(:last-child) { border-bottom:1px solid #fff; }

.fsDataTitle { float:left;font-size:20px; }
.fsDataValues { float:right; }
.fsDataValue { font-size:32px; }
.fsDataUnit { font-size:16px;color:#999; }

.fsDataPeak span span { font-size:14px; }
.fsPeakGroup { font-size:14px;margin-top:20px; }
.fsFooter { width:100%;background-color:#fff;padding:0 40px 40px; }

.fsText { font-size:18px;letter-spacing:-0.9px;line-height:28px; }
.fsGuide { font-size:18px;letter-spacing:-0.9px;line-height:48px; }
.fsText { padding-top:15px; }
.fsFinger { width:72px;height:116px; }
.fsFingerBody { position:relative;background:url("./menu_img/finger.png") no-repeat 50% 50%;background-size:100%;animation: finger 1s infinite;margin: 10px auto 20px; }
.fsFingerLine { position:absolute;top:0;left:0;background:url("./menu_img/fingerLine.png") no-repeat 50% 50%;background-size:100%; }

#firstStart { width:100%;background:linear-gradient(to bottom, #00e6c0, #00aa8e);font-size:24px;height:72px;line-height:72px;letter-spacing:-1.5px;color:#fff; }

.fsLan { position:absolute;bottom:0;right:0;width:212px;height:72px;line-height:72px;color:rgba(51,51,51,0.3);background-color:#e6e6e6;font-size:16px;display:none; }
.fsLanBtn { flex:1;text-align:center; }
.fsLanBtn.active { color:#999; }

.fsRot { position:absolute;bottom:0;left:0;width:212px;height:72px;line-height:72px;color:#999;background:linear-gradient(to bottom, #fff, #dcdcdc);font-size:18px;display:none; }
.fsRotBtn { flex:1;text-align:center; }
.fsRotBtn.active { color:#fff;background:linear-gradient(to bottom, #00efc0, #00aa8e); }
.fsStop { background:url("./menu_img/fsStop.png") no-repeat 50% 50%, linear-gradient(to bottom, #fff, #dcdcdc);background-size: 48px; }
.fsStop.active { background:url("./menu_img/fsStop_active.png") no-repeat 50% 50%, linear-gradient(to bottom, #00efc0, #00aa8e);background-size:48px; }

.fsnContainer { display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:0;height:0;overflow:hidden;border-radius:50%; }
.fsnBody { position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:640px;height:800px;background-color:rgba(0,0,0,0.8); }
.fsnText { display:none;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center;color:#fff;font-size:32px;letter-spacing:-1.6px;white-space:nowrap;}

#mdpss { position:absolute;width:52.5px;bottom:0;left:-39px; }

@keyframes finger {
  0% { transform:translateY(0%); }
  50% { transform:translateY(10%); }
  100% { transform:translateY(0%); }
}

@keyframes fingerLine {
  0% { transform:scale(1);opacity:1; }
  100% { transform:scale(1.5);opacity:0; }
}