h1,h2 {
    margin: 0;
}



/*-----------------*/
h1,h2 {
    margin: 0;
}

.all {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    /* margin-top: 2vw; */
}

/**/
.up_0 {
    width: 100%;
    display: flex;
}

/*-*/
.up_left {
    width: 0%;
    display: flex;
    flex-direction: column;
}
.up_left_title {
    display: flex;
    justify-content: center;
}

.f_table {
    display: flex;
    /* width: 100%; */
    margin-left: 3vh;
    margin-right: 3vh;
    margin-bottom: 3vh;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

/*-*/
.up_center {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.connect {
    width: 100%;
    display: none;
}
.connect img {
    width: 100%;
}

.connect .a {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect .b {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect .c {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect .d {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect .e {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.a_img{
    width: 9vh;
}
.b_img{
    width: 10vh;
}
.c_img{
    width: 30vh;
}
.d_img{
    width: 10vh;
}
.e_img{
    width: 10vh;
}

.title {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.title_time{
    font-size: 1.4rem;
    margin: 3vw;
}

.title_bar {
    width: 100%;
}

.bar {
    display: flex;
    align-items: center;
    background: linear-gradient(rgb(190, 190, 190), rgb(255, 255, 255), rgb(190, 190, 190));
}

.bar_menu {
    width: 20%;
    display: flex;
}

.bar_addr {
    width: 100%;
    display: flex;
    justify-content: center;
}

.bar_none {
    width: 20%;
    display: flex;
}

/*-*/
.up_right {
    width: 0%;
    display: flex;
    flex-direction: column;
}
.up_right_title {
    display: flex;
    justify-content: center;
}
/**/
.down_0 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.down_1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.down_div {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 1vh;
}

.down_data {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.data_abbr {
    font-size: 2em;
    font-family: cursive;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 5px rgb(0 0 0);
}
.data_camera {
    width: 100%;
    display: flex;
    justify-content: center;
}
.data_camera video{
    width: 90%;
}

.data_s {
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom-style: solid;
    border-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0)) 100% 1;
}

.data_sensor {
    width: 25%;
}

.data_img {
    width: 5vh;
    height: 5vh;
}

.data_img img {
    width: 100%;
    height: 100%;
}

.data_value {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    /*margin-right: 2vw;*/
    color: #1aff00;
    text-shadow: 0 0 5px #000;
    font-family: Microsoft JhengHei;
    font-size: 2em;
}

.data_unit {
    width: 15%;
}
/*---------------*/
.rain_data {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 3em;
}
.rain_data_0x {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 3em;
}
.rain_s {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.rain_value {
    width: 100%;
    display: flex;
    color: #34ddcd;
    text-shadow: 0 0 5px #000;
    font-family: Microsoft JhengHei;
    font-size: 2em;
    justify-content: center;
}
.rain_value h4{
    margin: 0;
}
/*-----------------*/

@media screen and (min-width:1024px) {
.all {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    /* margin-top: 2vw; */
}

/**/
.up_0 {
    width: 100%;
    display: flex;
}

/*-*/
.up_left {
    width: 30%;
    display: flex;
    flex-direction: column;
}
.up_left_title {
    display: flex;
    justify-content: center;
}

.f_table {
    margin-left: 3vh;
    margin-right: 3vh;
    margin-bottom: 3vh;
}

/*-*/
.up_center {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.connect {
    width: 100%;
    display: flex;
}
.connect img {
    width: 100%;
}

.connect .a {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect .b {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect .c {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect .d {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.connect .e {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.a_img{
    width: 9vh;
}
.b_img{
    width: 10vh;
}
.c_img{
    width: 30vh;
}
.d_img{
    width: 10vh;
}
.e_img{
    width: 10vh;
}

.title {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title_time{
    font-size: 1rem;
    margin: 0vw;
}

.title_bar {
    width: 100%;
}

.bar {
    display: flex;
    align-items: center;
    background: linear-gradient(rgb(190, 190, 190), rgb(255, 255, 255), rgb(190, 190, 190));
}

.bar_menu {
    width: 20%;
    display: flex;
}

.bar_addr {
    width: 100%;
    display: flex;
    justify-content: center;
}

.bar_none {
    width: 20%;
    display: flex;
}

/*-*/
.up_right {
    width: 30%;
    display: flex;
    flex-direction: column;
}
.up_right_title {
    display: flex;
    justify-content: center;
}
/**/
.down_0 {
    width: 100%;
    display: flex;
}

.down_1 {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
	justify-content: center;
}

.down_div {
    width: 25%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.down_data {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 0.5em;
}

.data_abbr {
    font-size: 2em;
    font-family: cursive;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 5px rgb(0 0 0);
}
.data_camera {
    width: 100%;
    display: flex;
    justify-content: center;
}
.data_camera video{
    width: 90%;
}

.data_s {
    width: 80%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom-style: solid;
    border-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff, hsla(0, 0%, 100%, 0)) 100% 1;
}

.data_sensor {
    width: 25%;
}

.data_img {
    width: 5vh;
    height: 5vh;
}

.data_img img {
    width: 100%;
    height: 100%;
}

.data_value {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    /*margin-right: 2vw;*/
    color: #1aff00;
    text-shadow: 0 0 5px #000;
    font-family: Microsoft JhengHei;
    font-size: 2em;
}

.data_unit {
    width: 15%;
}

/* --------------- */
.rain_data {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    /* margin-top: 3em; */
    margin-bottom: 0em;
}
.rain_data_0x {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 3em;
}
.rain_s {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.rain_value {
    width: 100%;
    display: flex;
    color: #34ddcd;
    text-shadow: 0 0 5px #000;
    font-family: Microsoft JhengHei;
    font-size: 2em;
    justify-content: center;
}
.rain_value h4{
    margin: 0;
}
/* --------------- */
}