@charset "utf-8";

body {
	/*font: 100%/1.4 微軟正黑體;
	margin: 0;
	padding: 0;
	overflow:auto; 
	min-width:1500px;
	background:#fafafa url("../image/bg/dots.png") repeat fixed;*/
}
/*.box-shadow{
	box-shadow: 1px 1px 3px #dcdcdc;
	border:1px solid #ccc;
}*/

.topmenu{
  background: #111;
  padding:5px 0;
  position: sticky;
  left: 0;
  /*position: fixed;*/
  z-index: 999;
  border-bottom:1px solid #ccc;
  top:0px;
    -o-transition:color .15s linear,background .15s linear,border .15s linear;
  -webkit-transition:color .15s linear,background .15s linear,border .15s linear;
  -moz-transition:color .15s linear,background .15s linear,border .15s linear;
  transition:color .15s linear,background .15s linear,border .15s linear;
}

.flex-bottom{
	display: flex;
    align-items: baseline;	
}

.arearow{
	padding: 5% 0;
}

.white{
	color: #fff;
}

.lines{
	max-width: 120px;
	height:5px;
	border-radius: 100px;
	background:#121212;
	margin: 15px 0;
}

.lines.white {
	background: #fff;
}

/*主畫面----------------------------*/
.mainbgonly{
	/*background: url("../image/bg/topbg.jpg") no-repeat 0 top;*/
}
.mainbg{
	background: url("../image/bg/topbg.jpg") no-repeat center center;
	background-size: cover;
	padding: 8% 0 5% 0;
}
.clock{
	padding: 40px 40px;
}
.clock:before{
	content:"";
	position: absolute;
	bottom: 5%;
	left: 5%;
	width: 90%;
	height: 90%;
	margin: 0 auto;
	border:1px solid #fff; 
}
.year{font-size: 2.5em;}
.day{font-size: 2em;color:#2ea7e0;margin: 0 0 10px 0;}
.time{font-size: 1.5em;background-color:#2ea7e0;color:#fff; }
.year,.day,.time{
	line-height: 1.1em;
}
.wicon{
	float: left;
	margin: 5px 15px;
}
.weather .itemarea:nth-child(odd){
	background-color: rgba(220,220,220,.85);
}

.weather .itemarea .numbers{
	font-size:1em; 
}

.sendwayarea{
	margin: 6% 0 0 0; 
}

.sendway{
	max-width: 90%;
	margin: 0 auto;
}
.infoarea{
	padding: 15px 45px;
}
.sendinfo{
	border-radius: 5px;
	border:1px solid #fff;
}
.sendarea{
	background:rgba(46,167,224,0.75); 
	line-height: 20px;
	padding: 10px 20px;
	border-radius: 5px 5px 0 0;
	min-height: 60px;
}
.sendnum{
	background:rgba(255,255,225,0.5); 
	font-size: 2.0em;
	text-align: center;
	line-height: 1.3em;
	padding: 5px 0px;
}
.sendunit{
	background:rgba(10,10,10,0.75); 
	line-height: 1.3em;
	text-align: center;
	border-radius: 0 0 5px 5px ;
	padding: 5px 0px;
}

/*Energy MIX--------------------------------*/

.em{
	background:url("../image/bg/embg.jpg") center bottom no-repeat;
	background-size: cover; 
}

.dougnut{
	border-right:0px solid #ccc;
	padding: 30px 0;
	margin: 0 0 15px 0;
	border-bottom: 2px solid #ccc;
}
.dougnut:last-child{
	border-right:0px solid #ccc;
	border-bottom: 0px solid #ccc;
}
.emarea{
	font-size: 1.05em;
	line-height: 22px;
}
.emlist{
	padding: 5px 0;
}
.emlist .cube{
	width: 25px;
	height: 15px;
	border-radius: 0px;
	background:#898989;
	float: left; 
	margin: 7px 5px 0 0;
}

.emlist .unit{
}
.emlist .unitnum{
	color: #666;
}

.emlist .unit,.emlist .unitnum{
	padding: 3px 5px;
}

.supply{
	    position: absolute;
    margin: 16px auto;
    width: 100px;
    left: 31%;
    top: 38%;
    z-index: 2;
    letter-spacing: 0px;
    font-size: 2.5em;
    color: #898989;

}

.doughnut,.doughnut .withiframe,.doughnut iframe{
	/*min-height: 380px;*/
}


/*NRB---------------------------------------*/
.nrb{
	background:url("../image/bg/ngbbg.jpg") center center no-repeat;
	background-size: cover;
}

.counts{
	padding: 20px 30px;
	background:rgba(0,0,0,.5); 
}

.countarea{
	padding: 10px 0;
	border-bottom: 1px solid #fff;
}

.countarea:last-child{
	border-bottom: 0px;
}

.counttopic{
	font-size: 1.4em;
	padding: 5px 0;
}
.countnum .h3{
	color:#f8b62d; 
	font-size: 1.9em;
}
.countnum span{
	color:#fff; 
}
.water{
	background:#00001d;
	padding: 5px 5px;
}
.water:nth-child(even){
	background:#3e3a39; 
}
.water:nth-child(odd){
	background:#231815; 
}
.water:first-child{
	background:#00001d; 
}

.cube{
	width: 20px;
	height: 20px;
	border-radius: 30px;
	background:#898989;
	float: left; 
	margin: 0 5px 0 0;
}

.on,.off{
	padding: 5px 0 0 5px;
	color: #898989;
}

.choose.on{
 	color: #13ae67;
}
.choose.on .cube{
	background: #13ae67;
}

.choose.off{
 	color: #e83828;
}
.choose.off .cube{
	background: #e83828;
}




/*ESS---------------------------------------*/
 
.ess{
	background: url("../image/bg/essbg.jpg") center center no-repeat;
	background-size: cover;
}

.ess:after{
	display: none;
	content: "";
    width: 100%;
    height: 100%;
    float: right;
    position: absolute;
    background: url("../image/bg/essbg.jpg") center center no-repeat;
    background-size: cover;
    right: 0;
    z-index: -1;
    top: 0;
    right: 0;
}  
.essword{
	background:#fff; 
	padding: 5% 3% 5% 3%;
}

.essarea{
	padding:  10px 10%;
}
.essshow{
	background:rgba(0,0,0,.5);
	border-radius: 15px;
	padding:  0px 10px;
}

.essshow .essmodual{
	font-size: 1.3em;
	line-height: 1.3em;
}
.essshow .numbers{
	font-size: 2.7em;
}

.essshow .info{
	padding: 10px 0;
}

/*.energy20:before{
	content: "";
	background: #f00;
	position: absolute;
	width: 80%;
	height: 17%;
	bottom:15px;
	left:10%;
	z-index: 0;
}
.energy40:before{
	content: "";
	background: #ea5514;
	position: absolute;
	width: 80%;
	height: 33%;
	bottom:15px;
	left:10%;
	z-index: 0;
}
.energy60:before{
	content: "";
	background: #f39800;
	position: absolute;
	width: 80%;
	height: 50%;
	bottom:15px;
	left:10%;
	z-index: 0;
}
.energy80:before{
	content: "";
	background: #13ae67;
	position: absolute;
	width: 80%;
	height: 67%;
	bottom:15px;
	left:10%;
	z-index: 0;
}
.energy100:before{
	content: "";
	background: #13ae67;
	position: absolute;
	width: 80%;
	height: 83%;
	bottom:15px;
	left:10%;
	z-index: 0;
}*/

.energyimg{
	z-index: 1;
	position: absolute;
}

.pib{
	-webkit-mask-image: url(../image/ess/battery-em-ma.png);
	background: url(../image/ess/battery-em-ma.png) no-repeat 0 0; 
	background: transparent;
	position: relative;
	width: 100%;
	height: 30px;
	bottom:0px;
	left:10px;
	max-width: 80px;
}

.pibs{
	/*content: "";
	/*background: -webkit-linear-gradient(green,red);
	background: -o-linear-gradient(green,red);
	background: -moz-linear-gradient(green,red);
	background: linear-gradient(green,red);*/
	background: #13ae67;
	position: absolute;
	width: 100%;
	height: 100%;
	bottom:0px;
	left:0%;
	z-index: -1;
}



.pib:before{
	content: "";
	background: url(../image/ess/battery-em.png) no-repeat; 
	position: absolute;
	width: 100%;
	height: 100%;
	bottom:0px;
	left:0%;
	z-index: 5;
}



/*solar-------------------------------*/
.solar{
	background:url("../image/solar/solarbg.jpg") center center no-repeat;
	background-size: cover;
}
.solararea{
	padding: 10px 15px;
}
.solararea:nth-child(odd){
	background:rgba(35,24,21,.8); 
}
.solararea:nth-child(even){
	background:rgba(62,58,57,.8); 
}
.solarcontent{
	width:80%;
	max-width: 300px;
    margin: 0% auto;
    padding: 5px 15px 15px 15px;
    overflow: hidden;
}
.solarinfo{
	padding:0 0 10px 0 ;
}
.solartopic{
	font-size: 1.3em;
	line-height: 1.5em;
}
.solartopic span{
	font-size: 0.5em;
}
.solarnum{
	font-size: 2.3em;
	line-height: 1.2em;
}

.solarnum span{
	font-size: 0.4em;
}
.indexbanner{
	/*font-size: 2.0em;*/
	font-weight: normal: 
}

.sague,.secsolar{
	min-height: unset;
}

.sagunum{
	font-size: 1.3em;
}
.sagunum span{
	font-size: 0.5em;
	padding: 0 0 0 5px;
}
/***********************/
.curve{
		/*min-height: 500px;
		/*background:#111; */
		overflow: auto;
	}

.curve iframe,.widthiframe{
		min-height: 300px;
		/*background:#111; */
	}

img{max-width:100%}

/* ~~ 元素/標籤選取器 ~~ */
ul, ol, dl { /* 由於瀏覽器之間的差異，最佳作法是在清單中使用零寬度的欄位間隔及邊界。為了保持一致，您可以在這裡指定所要的量，或在清單包含的清單項目 (LI、DT、DD) 上指定所要的量。請記住，除非您寫入較為特定的選取器，否則在此執行的作業將重疊顯示到 .nav 清單。 */
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 移除上方邊界可以解決邊界可能從其包含的 Div 逸出的問題。剩餘的下方邊界可以保持 Div 不與接在後面的元素接觸。 */
	/*padding-right: 15px;
	padding-left: 15px; /* 將欄位間隔加入至 Div 內元素的兩側 (而不是 Div 本身)，即可不需執行任何方塊模型的計算作業。具有側邊欄位間隔的巢狀 Div 也可當做替代方法。 */
}
a img { /* 這個選取器會移除某些瀏覽器在影像由連結所圍繞時，影像周圍所顯示的預設藍色邊框 */
	border: none;
}

* a {
	text-decoration: none!important;
}



.marlef{
	margin: 0 .5% 0 .5%!important;
}
.right{
	float: right!important;
}

.showup{display: block;}
.shownone{display:none;}



.box{
    display:inline-flex;
    align-items: center;
    flex-direction:row;
    min-height:60px;
 }

 .marginbottom{
 	margin:0 0 15px 0;
 }
 .max300{
 	max-width: 300px;
 }

 .pictool{
 	margin: 0 10px;
 }

 .picset{
 	padding: 0 5px;
 }
 .order{
 	margin: 0 0 10px 0;
 }

  .inline{display: inline-block;}

/* ~~ 這個容器環繞著所有其他的 Div，並依百分比設定其寬度 ~~ */
.container {
	width: 100%;
	/*max-width: 1920px;/* 建議您使用最大寬度，如此版面在大型螢幕上就不致於過寬，讓行保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
	/*min-width: 1024px;/* 建議您使用最小寬度，如此版面在大型螢幕上就不致於過窄，讓行在側欄中保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
	/*height:100%;*/
	min-height: 100%;
	padding-bottom: 0px;
	/*background:rgba(0,0,0,.4);*/
	background: url("../image/bg/linesbg.png") repeat;
	float: left;
	margin: 0 auto; /* 兩側的自動值與寬度結合後，版面便會置中對齊。如果將 .container 的寬度設為 100%，就不需要這麼做。 */
	/*overflow: auto;*/
}

/* ~~ 頁首沒有指定的寬度，而會橫跨版面的整個寬度。頁首包含影像預留位置，必須由您自己的連結商標加以取代 ~~ */
.header {
	background-color: #222;
	box-shadow: 0px 1px 2px #333;
	width: 100%;
	height: 32px;
	position: fixed;
	padding: 0px 20px ;
	overflow: hidden;
	z-index: 999;
	color:#FFF;
	/*border-bottom:4px solid #ef705b;*/
}

.header {
	width:50%;
}

.hearder span{
	color:#FFF!important;
}


.sidebar {
	max-width: 260px;
	min-width: 240px;
	width: 20%;
	top:0px;
 	height: 100%;
	position: fixed;
	background: #101317;
	border-right:1px solid #cfcfcf;
	float: left;
	z-index: 2;
	/*padding: 18px 0 0 0;*/
	overflow: auto;
}

.allnum{
	float: right;
    background: #2B333E;
    padding: 0px 0px;
    border-radius: 27px;
    line-height: 25px;
    width: 25px;
    text-align: center;
    height: 25px;
    font-size: 12px;
    margin: -3px 0 0 0;
    border:1px solid #454545;
}

.linkhome{
	margin: 0px 0% 0 2%;
	width:100%;
	max-width: 170px;
}
.sec a{
	 background-color: #fff!important;
    color:  #00a0e9!important;
    /*border-left-color: #f3bd43!important;*/
}
.sec:hover a{
	
    color:  #232323!important;
   
}
.sec a span{
	color: #f5a300!important;
}

.content2 {

	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    width: calc(100% - 260px);
    min-height: 100%;
    padding:0px 25px 0 25px;
    left: 0;
    position: relative;
    float: right;
   /* background:url("../image/bg/dots.png") repeat;
    /*overflow: auto;*/
 
    z-index:1;
}

.wrapper{
	margin:0px;
	position: relative;
	/*background-color: #f00;*/
	width: 100%;
	padding: 100px 0px 50px 0px;
	float: left;
	min-height: 100%;
	

}
.menu{
	float:left;
	width:100%;
	margin: 60px 0 0 0;
	max-width: 260px;
}

.logo{
	width: 100%;
	max-width: 200px;
	float: left;
	/*padding: 0 0% 5% 0;*/
	text-align: center;
	/*background: #444;*/
}

.names{
	width: 100%;
	float: left;
	padding: 5% 2%;
	background: #2ea7e0;
	color:#FFF;
	margin: 0 0 3% 0;
}
.set,.out{
	float: left;
	width: 48%;
	margin: 0 1%;
	padding: 2% 2%;
	border-radius: 3px;
	border:1px solid #777;
	color: #999;
}
.set:hover,.out:hover{
	cursor: pointer;
	color: #f00;
	border:1px solid #fff;
}
footer{
	width:100%;
	padding: 5px 15px;
	color: #666;
	position:relative!important;/* 這會為 IE6 提供 hasLayout 以進行適當的清除動作 */
	bottom: 10px;
	font-size: 12px;
	text-align: center;
}






/* ~~ 這個群組選取器會在 .content 區域空間中提供清單 ~~ */

/* ~~ 頁尾 ~~ */
.footer {
	width:60%;
	padding: 8px 0;
	color: #bcbcbc;
	/*background-color: #6F7D94;*/
	position:absolute;/* 這會為 IE6 提供 hasLayout 以進行適當的清除動作 */
	bottom: 10px;
	clear: both; /* 這個 clear 屬性可以強制 .container 辨識欄結束於何處以及包含欄的位置 */
	font-size: 10px;
}

/* ~~ 其他 float/clear 類別 ~~ */
.fltrt {  /* 這個類別可用來讓元素在頁面中浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* 這個類別可用來讓元素在頁面左方浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* 這個類別可放置在 <br /> 或空白的 Div 上，當做接在 #container 內最後一個浮動 Div 後方的最後一個元素 (如果從 #container 移除或取出 #footer) */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

.toolwebonly{display: none;}
.tools{
		position: relative;
		padding: 5px 0;
		width: auto;
		float: right;
		/*background: #ff0;
		/*right: 0;
		/*background: #f00;*/
		/*top: 13px;*/
	}

	.toolitem{
		color:#fff;
		padding: 5px 15px;
		border: 2px solid #fff;
		border-radius: 50px;
		margin: 0 5px;
		font-size: 14px;
	}

	a.toolitem:hover{
		background: #fff;
		color: #454545;
	}

@media screen and (min-width: 600px) {
	/*em*/
	.dougnut{
		border-right:2px solid #ccc;
		padding: 30px 15px;
		border-bottom: 0px solid #ccc;
	}

	.dougnut:last-child{
		border-right:0px solid #ccc;
		border-bottom: 0px solid #ccc;
	}

	.curve{
		/*min-height: 470px;
		/*background:#111; */
	}

	

}

@media (min-width: 640px) and (max-width: 999px) {
.infoarea{
	padding: 15px 0px;
}
.secsolar{
	/*min-height: 269px;*/
	padding: 10.5% 15px;
}
	.allsagu{
		background:rgba(62,58,57,.8); 
	}

	.allsagu .secsolar,.allsagu .solararea{
		background: none;
	}
	.allsagu .sague{
		border-right:1px solid #ccc;
	}

	.doughnut,.doughnut .withiframe,.doughnut iframe{
	/*min-height: 402px;*/
}

.essarea{
	padding:  10px 5px;
}


}
@media screen and (min-width: 1000px) {




	.topmenu{
	  padding:5px 0;
	  left: 0;
	  position: sticky;
	  z-index: 999;
	  top:0px;
	  /*background: transparent;*/
	  background: rgba(0,0,0,.75)!important;
	}

	/*主畫面*/
	.infoarea{
		padding: 15px 20px;
	}


	/*SOlAR*/
	.sague{
		min-height: 380px;
	}
	.secsolar{
		min-height: 214px;
	}
	.sagunum{
		font-size: 1.9em;
	}

	.solartopic{
		font-size: 1.7em;
		line-height: 1.2em;
	}
	.solarnum{
		font-size: 3em;
		line-height: 1.2em;
	}


	/*ess*/
	.ess:after{
		display: block;
		content: "";
	    width: 65%;
	    height: 100%;
	    float: right;
	    position: absolute;
	    background: url("../image/bg/essbg.jpg") center center no-repeat;
	    background-size: cover;
	    right: 0;
	    z-index: -1;
	    top: 0;
	    right: 0;
	}  
	.ess{
		background: none;
		background-size: cover;
	}
	.essword{
		padding: 10% 3% 10% 0;
	}

	.essarea{
		padding:  10px 5px;
	}

	/*power curve*/
	.curve{
		/*height: 600px;*/
	}
	.curve iframe,.widthiframe{
		min-height: 600px;
		/*background:#111; */
	}

	
	.labonly{display: block!important;}
	

	
	

}



@media screen and (min-width: 1800px) {
	.toolwebonly{display: block;}
	.labonly{display: none!important;}
	.tools{
		position: absolute;
		width: 350px;
		right: 0;
		/*background: #f00;*/
		top: 10px;
	}
}