.temp-bar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 83%;
  height: 50px;
  padding: 5px;
  background: #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}

.temp-bar_ {
  background: #c54;
  width: 0%;
  height: 40px;
  position: relative;
  
  transition: width .5s linear;
}

/*
.humd-bar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 83%;
  height: 50px;
  padding: 5px;
  background: #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}

.humd-bar_ {
  background: #748EDC;
  width: 0%;
  height: 40px;
  position: relative;

  transition: width .5s infinite;
}
*/

.humd-bar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 83%;
  height: 50px;
  padding: 5px;
  background: #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}

.humd-bar_ {
  background: #748EDC;
  width: 0%;
  height: 40px;
  position: relative;
  
  transition: width .5s linear;
}


.comfort-bar {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 98%;
  height: 80px;
  padding: 5px;
  padding-left: 15px;
  margin: 5px;
  background: #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  position: relative;
}



.hit {
  background: rgba(255,255,255,0.6);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0px;
  
  transition: width .5s linear infinite;
}

.wind_vec{
	position: relative;
	width:150px;
	height: 150px;
	margin-top: -280px;
	margin-left: 40px;
	margin-right: 40px;
	transform:rotate(0deg);
	z-index: 0;
	transition: all 1s linear;
	
}

@media screen and (min-width: 500px) {
	.title1{
		width:25%;
		height:45px;
		background-color:#F5F5F5;
		margin-bottom: 2px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 28px;
		font-weight:bold;
	}
	.title2{
		width:25%;
		height:45px;
		background-color:#F5F5F5;
		margin-bottom: 2px;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 28px;
		font-weight:bold;
	}

	.container1{
		width:75%;
		height:45px;
		background-color:#D6D6D6;
		margin-bottom: 2px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 28px;

	}

	.container2{
		width:25%;
		height:45px;
		background-color:#D6D6D6;
		margin-bottom: 2px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 28px;

	}

	.out_container1{
		width:50%;
		height:250px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 28px;

	}

	.out_container2{
		width:50%;
		height:250px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 22px;

	}

	.out_container3{
		width:50%;
		height:180px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 22px;

	}

	.in_container1{
		width:50%;
		height: 250px;
		background-color: #777777;
		float: left;
		z-index: -1
	}

	.in_container2{
		width:100%;
		height: 250px;
		background-color: #777777;
		float: left;
		z-index: -1
	}

	.in_container3{
		width:100%;
		height: 180px;
		background-color: #777777;
		float: left;
		z-index: -1
	}

	.temp_title{
		width:15%;
		margin-top: 60px;
		float:left;
		font-size: 22px;
	}

	.humd_title{
		width:15%;
		margin-top: 20px;
		float:left;
		font-size: 22px;
	}

	.wind_text{
		width:60%;
		float: left;
		font-size: 72px;
		text-align: right;
		line-height:180%;
	}

	.wind_unit_text{
		float: left;
		margin-left:10px;
		font-size: 32px;
		line-height:500%;
	}

	.wind_scale_text{
		width:55%;
		float: left;
		font-size: 72px;
		text-align: right;
		line-height:50%;
	}

	.wind_scale_unit_text{
		float: left;
		margin-left:10px;
		font-size: 32px;
		line-height:200%;
	}

	.uv_text1{
		background-color: #E8D5B5;
		width: 50%;
		font-size: 96px;
		line-height:300%
	}

	.uv_text2{
		background-color: #E8D5B5;
		width: 50%;
		font-size: 64px;
		line-height:450%;
	}

	.uv_inf{
		position:absolute;
		text-align: right;
		line-height:30px;
		right:0px;
		margin-right:10px;
		font-size: 16px
	}

	.rain_10m_text{
		float: left;
		width:50%;
		margin-left:15px;
		text-align: right;
		font-size: 96px;
		line-height:300%

	}

	.rain_10m_text2{
		float: left;
		font-size: 56px;
		margin-left:20px;
		line-height:600%

	}

	.rain_d_text{
		float: left;
		width:50%;
		margin-left:15px;
		text-align: right;
		font-size: 96px;
		line-height:300%

	}

	.rain_d_text2{
		float: left;
		font-size: 56px;
		margin-left:20px;
		line-height:600%

	}

	.comfort{
		font-size: 26px;
	}

	.comfort-bar_ {
		float: left;
		background: #748EDC;
		width: 13.3%;
		height: 70px;
		position: relative;
		margin-left: 1.5px;
		margin-right: 1.5px;
		transition: width .5s linear;
	}

	.aqi_text{
		float: left;
		width:100%;
		margin-left:15px;
		text-align: center;
		font-size: 96px;
		line-height:300%

	}


}

@media screen and (max-width: 500px) {
	.title1{
		width:40%;
		height:35px;
		background-color:#F5F5F5;
		margin-bottom: 2px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 18px;
		font-weight:bold;
	}
	.title2{
		width:40%;
		height:35px;
		background-color:#F5F5F5;
		margin-bottom: 2px;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 18px;
		font-weight:bold;
	}

	.container1{
		width:60%;
		height:35px;
		background-color:#D6D6D6;
		margin-bottom: 2px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 22px;

	}

	.container2{
		width:60%;
		height:35px;
		background-color:#D6D6D6;
		margin-bottom: 2px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 22px;

	}

	.out_container1{
		width:100%;
		height:250px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 22px;

	}

	.out_container2{
		width:100%;
		height:125px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 22px;

	}

	.out_container3{
		width:100%;
		height:180px;
		float: left;
		text-align:center;
		line-height:150%;
		font-family:Microsoft JhengHei;
		font-size: 22px;

	}

	.in_container1{
		width:50%;
		height: 250px;
		background-color: #777777;
		float: left;
		z-index: -1
	}

	.in_container2{
		width:100%;
		height: 125px;
		background-color: #777777;
		float: left;
		z-index: -1
	}

	.in_container3{
		width:100%;
		height: 180px;
		background-color: #777777;
		float: left;
		z-index: -1
	}

	.temp_title{
		width:13%;
		margin-top: 60px;
		float:left;
		font-size: 16px;
	}

	.humd_title{
		width:13%;
		margin-top: 20px;
		float:left;
		font-size: 16px;
	}

	.wind_text{
		width:60%;
		float: left;
		font-size: 56px;
		text-align: right;
		line-height:250%;
	}

	.wind_unit_text{
		float: left;
		margin-left:10px;
		font-size: 20px;
		line-height:850%;
	}

	.wind_scale_text{
		width:55%;
		float: left;
		font-size: 56px;
		text-align: right;
		line-height:50%;
	}

	.wind_scale_unit_text{
		float: left;
		margin-left:10px;
		font-size: 20px;
		line-height:250%;
	}

	.uv_text1{
		background-color: #E8D5B5;
		width: 50%;
		font-size: 64px;
		line-height:240%
	}

	.uv_text2{
		background-color: #E8D5B5;
		width: 50%;
		font-size: 56px;
		line-height:240%;
	}

	.uv_inf{
		position:absolute;
		text-align: right;
		line-height:30px;
		right:0px;
		margin-right:10px;
		font-size: 16px;
	}

	.rain_10m_text{
		float: left;
		width:50%;
		margin-left:10px;
		text-align: right;
		font-size: 64px;
		line-height:250%

	}

	.rain_10m_text2{
		float: left;
		font-size: 20px;
		margin-left:20px;
		line-height:1000%

	}

	.rain_d_text{
		float: left;
		width:50%;
		margin-left:10px;
		text-align: right;
		font-size: 64px;
		line-height:250%

	}

	.rain_d_text2{
		float: left;
		font-size: 20px;
		margin-left:20px;
		line-height:1000%

	}

	.comfort{
		font-size: 16px;
	}

	.comfort-bar_ {
		float: left;
		background: #748EDC;
		width: 13.3%;
		height: 70px;
		position: relative;
		margin-left: 0.5px;
		margin-right: 0.5px;
		transition: width .5s linear;
	}

	.aqi_text{
		float: left;
		width:100%;
		margin-left:10px;
		text-align: center;
		font-size: 64px;
		line-height:250%

	}
}