div {
    background-color: #0000;
}
#weatherarea {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}
.wthboxmain {
    width: calc(100% - 12px); /**/
    float: left;
    border-radius: 10px;
    border: solid 1px #000;  /**/
    margin: 5px 5px 5px 5px;   /**/
}
.wthbox {
    width: calc(50% - 12px); /**/
    float: left;
    border-radius: 10px;
    border: solid 1px #000;  /**/
    margin: 5px 5px 5px 5px;   /**/
}

.wthboxmain .wthbox {
    border: solid 1px #0000;  /**/
}

.wthicon {
    float: left;
    width: 30%;
}
.wthicon img {
    width: 100%;
}
.wthtext {
    width: calc(70%-30px);
    margin-left: 30px;
    float: left;
    font-size: 21px;
}

@media (max-width: 1000px) {
    #weatherarea {
        width: 680px;
    }
    .wthicon {
        width: 20%;
    }
    .wthtext {
        width: calc(80%-30px);
        margin-left: 10px;
        font-size: 18px;
    }
}
@media (max-width: 700px) {
    #weatherarea {
        width: 360px;
    }
    #wthbox0a{
        display: none;
    }
    #wthbox0b{
        width:calc(100%);
        margin: 0px;
    }
    .wthbox {
        width: calc(100% - 12px); /**/
    }
    .wthicon {
        width: 20%;
    }
    .wthtext {
        width: calc(80%-30px);
        margin-left: 10px;
        font-size: 18px;
    }
}