*{margin:0;padding:0;font-family:'Trebuchet MS';outline:0;text-decoration:none}

a {color: #08E;}

.center{text-align:center;}
.red{color:#D00;}
.green{color:#060;}
.bold{font-weight:bold;}

.inline{display:inline-block;}

button.active{border:2px solid #FFA700}

html{min-height: 100%;position: relative;}

body{background:url('/img/main_bg.png');font-size:12px;overflow-y:scroll; min-width:704px;padding-bottom: 40px;}
	header>h1{color:#808080;font-size:32pt;font-weight:bold;margin:20px 8px;text-align:center;position:relative; line-height:50px}
		header>h1>a{color:#808080 !important}
	section{margin:0 auto;min-height:100%; /* max-width:1368px; */ max-width:1026px;}
		article{float:left;text-align:left;width:280px;height:214px;border:1px solid #D0D0D0;background:#FFF;margin:0 10px 20px;padding:20px;position:relative;transition:box-shadow 0.3s linear 0s;cursor:pointer}
			article>a{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2; font-size:0; opacity:0;}
			article.page>a{background:#EEE;position:absolute;bottom:0;left:0;height:24px;border-top:1px solid #D0D0D0;padding:9px 0 0 20px;color:#08E;border:all 0.3s linear 0s; opacity:1; font-size: 12px;}
			h1{font-size:16pt;color:black;white-space:nowrap;padding:1px 0;line-height:28px}
			figure{margin:16px 10px 6px 0;border:1px solid #EEE;float:left;width:100px;height:100px}
			p{padding-top:13px;text-align:left;color:#333;position:relative;line-height:16px}
			article>aside{background:#EEE;position:absolute;bottom:0;left:0;width:300px;height:24px;border-top:1px solid #D0D0D0;padding:9px 0 0 20px;color:#08E;border:all 0.3s linear 0s; opacity:1; font-size: 12px;}
			.empty{background:none; color:#DDD; font-size:30pt; text-shadow:1px 1px 1px #F5F5F5; border-color:#DDD; text-align:center; padding-top:100px;height:134px}
				.empty:hover{box-shadow:none; border-color:#DDD; cursor:default;}
			ul{padding:5px 0 5px 20px;}
	footer{text-align:center;font-size:7.5pt;color:#999;margin:12px auto 10px;clear:both;
position: absolute;
width: 100%;
bottom: 0;}
		footer>a{color:#999}

article:hover{border-color:#BBB;box-shadow:0 0 20px #CCC}
	article:hover>aside,.page:hover>a{border-top:1px solid #BBB}

#cat>figure{	background:url('/img/sprite.jpg') -300px 0}
#c4>figure{		background:url('/img/sprite.jpg') -100px 0}
#wa>figure{		background:url('/img/wa.svg') no-repeat center; background-size:cover;}
#sc>figure{		background:url('/img/sprite.jpg') -400px 0}
#se>figure{		background:url('/img/sprite.jpg') -500px 0}
#vid>figure{	background:url('/img/sprite.jpg') -200px 0}
#sandisk>figure{background:url('/img/sprite.jpg')}
#temp>figure{background:url('/img/temp.jpg')}
#power>figure{background:url('/img/engine.png')}
#info>figure{background:url('/img/info.jpg')}
#ip>figure{background:url('/img/map.png'); background-size: contain;}
#bike>figure{background:url('/img/bike.png') no-repeat; background-size: cover; background-position:-50px 0}

#screenshot{position:fixed;display:none;background:rgba(255,255,255,0.7);z-index:10;height:100%;width:100%;top:0;left:0;cursor:pointer}
	#screenshot>img{position:absolute;left:50%;top:50%;max-height:95%;max-width:95%}
	#screenshot>img:first-of-type{box-shadow:0 0 20px #AAA;border:5px solid #FFF}
	
section>aside{opacity:0;display:none;position:absolute;top:-94px;left:45px;border:1px solid #D0D0D0;background:#FFF;padding:10px 20px;width:210px;line-height:16px;z-index:3;}
section>div{display:none;opacity:0;position:absolute;top:-45px;left:166px;width:0px;height:0px;width:10px; height:10px; background:#D0D0D0; transform:rotate(45deg);z-index:2;}

.page{padding:20px 30px 50px;float:none;margin:0 auto 15px;width:640px;min-height:180px;height:auto;font-size:10pt;text-align:justify;cursor:default;}
	.page>a{top:auto;width:680px;font-size:13px}
	.page>h1{text-align:center}
	.page>p, .page td{line-height:18px}
	.page>p:nth-of-type(n+2){padding-top:0px !important}

b#ma:after{content:"@"}
pre{font-family:'Courier New', monospace; font-size:10pt;color:#666;margin-left:0px}
pre i{font-family:inherit;font-size:inherit;color:#060; font-weight:600; font-style:normal;}
pre u{background: #DDD;display: inline-block;width: 12px;height: 12px;text-align: center;line-height: 13px;font-size: 10px;border-radius: 12px;margin-left: 7px;cursor: help;}
/* pre u.green{background: #282; color:#EEE;} */
pre u.green{border: 1px solid #060;background: #FFF;width: 10px;height: 10px;line-height: 11px;}
pre a{background: #DDD;display: inline-block;width: 12px;height: 12px;text-align: center;line-height: 13px;font-size: 10px;border-radius: 12px;margin-left: 4px; color:#666;}
pre a.green{border: 1px solid #060;background: #FFF;width: 10px;height: 10px;line-height: 11px;}


table th.h2{text-align:center; font-size:12pt; padding:25px 0 10px; font-family:'Trebuchet MS'}

.t{border:1px solid #CCC;padding:20px;margin:30px 0 15px 83px}
	.t th,.t td{font-family:'Courier New';font-size:10pt;color:#777;width:200px}
	.t th{text-align:right;padding-right:5px; width:210px}

.tt{border:1px solid #CCC;padding:20px;margin:30px 0 15px 58px}
	.tt th{width:230px}
	.tt td{width:240px}
	
.ttt{padding-bottom:10px; margin:0 0 20px; width:100%;}
	.ttt td{text-align:center;}
	.ttt input[type="button"]{margin-top:10px;}

.tttt{border:1px solid #CCC;padding:0 20px 20px;margin:15px 0 0 0}
	.tttt th,.tttt td{font-size:10pt;color:#777;text-align:left;}
	.tttt th{font-family:'Courier New';text-align:right;padding-right:5px; width:200px}
	.tttt i{color:#f90; font-style:normal;} 
	.tttt u{color:#f00; text-decoration:none;} 
	.tttt s{color:#AAA; text-decoration:none;} 

	
.wide{width:100%; margin:30px 0 15px 0px}
	
.small{font-family:arial !important; font-size:7.5pt !important;}
.big{font-size:14pt !important;}

.log{border:1px solid #CCC;margin-bottom:20px; width:100%;border-collapse:collapse;}
	.log td{border:1px solid #CCC; padding:20px; width:50%;vertical-align: top;}

.flag{height: 16px;border-radius: 2px;box-shadow: 0px 1px 3px #0008;}

#pentile{font-size:9pt;width:134px;}
input{width:4em;text-align:right; padding:0 2px;}
#resY{width:4em;text-align:left}
#st tr:nth-of-type(3) th, #st tr:nth-of-type(3) td, #st tr:nth-of-type(6) th, #st tr:nth-of-type(6) td{padding-bottom:20px}
#set tr:nth-of-type(2) th, #set tr:nth-of-type(2) td, #set tr:nth-of-type(6) th, #set tr:nth-of-type(6) td{padding-bottom:20px}

#pt{color:#333;border:1px solid #CCC;margin:20px 20px;border-collapse:collapse;text-align:center}
	#pt th, #pt td{border:1px solid #CCC;padding:5px 10px}
	#pt th{background:#F5F5F5}
	#pt td:nth-of-type(1){width:28%}
	#pt td:nth-of-type(2){text-align:left}
	#pt td:nth-of-type(3){width:20%}
	
/* #matr{padding-left:30px;}
	#matr div{position:absolute; bottom:0; left:0;}
	#matr>div{width:360px; height:240px; background:#FCF7C4; position:relative;}
	#matr>div>div{width:251px; height:167px; background:#B7D4F5;}
	#matr>div>div>div{width:180px; height:135px; background:#D3FBD3;}
	#matr>div>div>div>div{width:128px; height:96px; background:#FDC3C4;}
	#img{width:0px; height:0px; background:#DDD; overflow:hidden;}
	#matr p{padding-top:0px;position:absolute; top:2px; right:5px; font-size:8pt; display:block;} */
	
	
#matr{padding-left:30px;}
	#matr>div{position:relative;width:360px; height:230px; padding-top:10px;}
	#matr>div>div{position:absolute; bottom:0; left:0;}

	#m_ff{width:360px; height:240px; background:#FCF7C4; position:relative;}
	#m_apsc{width:251px; height:167px; background:#B7D4F5;}
	#m_43{width:180px; height:135px; background:#D3FBD3;}
	#m_1{width:128px; height:96px; background:#FDC3C4;}
	#m_ym{width:0px; height:0px; background:#DDD; overflow:hidden;}
	#matr p{padding-top:0px;position:absolute; top:2px; right:5px; font-size:8pt; display:block;}

#mon{padding-left:30px;}
	#mon>div{position:relative;width:360px; height:202px; padding-top:10px;}
	#mon>div>div{position:absolute; bottom:0; left:0;}
	#mon p{padding-top:0px;position:absolute; top:2px; right:3px; font-size:8pt; line-height:8pt; display:block; text-align:right;}
	
	#s42{width:360px; height:202px; background:#FCF7C4;}
	#s37{width:316px; height:178px; background:#B7D4F5;}
	#s32{width:274px; height:154px; background:#D3FBD3;}
	#s34{width:308px; height:130px; background:#FDC3C4;}
	
	#s27{width:231px; height:130px; background:#FCF7C4;}
	#s29{width:262px; height:110px; background:#B7D4F5;}
	#s24{width:205px; height:116px; background:#D3FBD3;}
	#s20{width:171px; height:96px;	background:#FDC3C4;}
	
	#s17{width:146px;	height:82px; background:#FCF7C4;}
	#s156{width:133px; height:75px; background:#B7D4F5;}
	#s133{width:114px; height:64px; background:#D3FBD3;}
	#s106{width:91px;	height:51px; background:#FDC3C4;}
	
	#s8{width:68px;	 height:39px; background:#FCF7C4;}
	#s5{width:43px; height:24px; background:#B7D4F5;}
	
	#smy{width:100px; height:50px; display:none; background:#000; opacity:0.4}
		#smy p{color:#FFF; top:2px; right:3px;}
		

#size{margin: 15px 0; width: 100%;}
#size_g{padding-left:20px;}
	#size_g>div{position:relative;width:360px; height:500px; padding-top:10px;}
	#size_g>div>div{position:absolute; bottom:0; left:0; opacity:0.5}
	#size_g p{padding-top:0px;position:absolute; top:2px; right:5px; font-size:8pt; display:block;text-align:right;}
	
	#size_g>div>div:nth-of-type(1){background:#FCF7C4}
	#size_g>div>div:nth-of-type(2){background:#B7D4F5}
	#size_g>div>div:nth-of-type(3){background:#D3FBD3}
	#size_g>div>div:nth-of-type(4){background:#FDC3C4}
	
	#size_g>div>div:nth-of-type(5){background:#FCF7C4}
	#size_g>div>div:nth-of-type(6){background:#B7D4F5}
	#size_g>div>div:nth-of-type(7){background:#D3FBD3}
	#size_g>div>div:nth-of-type(8){background:#FDC3C4}



#gControls{margin:0 auto; padding:20px; text-align:center;}
	#cardList{width:230px; padding:10px;}
	button{padding:10px;}

	
/* #graph{border:1px solid #BBB; margin-top:-5px; padding:15px 10px 5px;}
	#graph .gtext{float:left;width:170px;text-align:right; line-height:28px; }
	#graph .gline{height:30px; background:green;width:430px;margin:0px 0 10px 180px;color: white;text-align: right;line-height: 30px;padding-right:5px;box-sizing: border-box;}
	#graph .gclear{margin-bottom:10px; text-align:center;} */
	
#graph{border:1px solid #BBB; padding:5px 10px; position:relative;}
	#graph .gclear{text-align:center; }
	#graph .gline{height:30px; background:green;margin:10px 0;color: white;line-height: 30px;box-sizing: border-box; white-space:nowrap; display: flex; justify-content: space-between; border-radius: 3px; transition: all 1s;}
		#graph .gtext{white-space:nowrap; padding-left:8px;color: #000; }
		#graph .gperc{padding:0 7px 0 7px;color: #000;}
	.res_div{text-align:center; padding-top:25px;}
		.res_div button{padding:5px;}

form>input[name=phone]{margin:20px 0; padding:10px; font-size:14pt; width:150px; text-align:center;}
input[type=submit], input[type=button]{margin:20px 0; padding:10px; font-size:14pt; width:250px; text-align:center;}
input[type=color]{height: 30px;padding: 0;}

#temp_outside{font-size:50pt;line-height:90pt;text-align:center; border: 1px solid #CCC; margin:15px 0;}
#temp_inside{font-size:36pt;line-height:60pt;text-align:center; border: 1px solid #CCC; margin:10px 0;}

.temp_table{border-collapse:collapse; width:100%;}
.temp_table td{border: 1px solid #CCC; padding:10px; font-size:12pt; width:50%;}
.temp_table td:last-of-type{text-align:center; font-size:14pt; }
.temp_table td span{font-size:10pt;}
	
/* #chart_today{border: 1px solid #CCC;width: 638px; height: 450px; margin:15px 0;}
#chart_all{border: 1px solid #CCC;width: 638px; height: 450px; margin:15px 0;} */

div[id^="chart"]{border: 1px solid #CCC;width: 638px; height: 450px; margin:15px 0;}


/* ========= */

.bounce-enter-active {
	animation: bounce-in .5s;
	transition: none !important;
}
.bounce-leave-active {
	animation: bounce-in .5s reverse;
	transition: none !important;
}
@keyframes bounce-in {
	0% {
	height:0;
	opacity: 0;
	margin:0;
	/* line-height:0; */
	}
	100% {
	height:30px;
	opacity: 1;
	margin:10px 0;
	/* line-height:30px; */
	}
}

.bounce-move {
	transition: all 1s;
}


.fade-enter-active, .fade-leave-active {
	transition: all .5s;
	/* overflow:hidden; */
}

.fade-enter, .fade-leave-to {
	opacity: 0;
	height:0;
}
.fade-enter-to, .fade-leave {
	opacity: 1;
	height:16px;
}




.fade-auto-enter-active, .fade-auto-leave-active {
	transition: all .5s;
}

.fade-auto-enter, .fade-auto-leave-to {
	opacity: 0;
	height:0;
}
.fade-auto-enter-to, .fade-auto-leave {
	opacity: 1;
	height:auto;
}


/* ======== */
	
@media (max-width: 1026px){
	section{width:684px;}
	section.page{width:700px;}
}