body{margin:0;padding:0;font-size:1em;font-family:Helvetica,Arial,"微軟正黑體",sans-serif}body *{-webkit-box-sizing:border-box;box-sizing:border-box}.weatherAQI{position:relative;overflow:hidden;width:92vw;margin:10px auto 30px;padding:13px 3vw;border-radius:5px;border:1px solid #c7c7c7;color:#444;background-image:linear-gradient(160deg, #f4f4f4 20%, #eee 90%);-webkit-box-shadow:rgba(0,0,0,.2) 0 4px 7px -2px;box-shadow:rgba(0,0,0,.2) 0 4px 7px -2px}.weatherAQI::before{content:"";position:absolute;top:5px;left:-5px;width:200%;height:200%;border-radius:50%;background-color:rgba(0,0,0,.018)}.weatherAQI .heading{margin:0 0 5px;padding:0;font-size:1.3em;letter-spacing:.08em;color:#0e677c;font-weight:bold}.weatherAQI .weatherIcon{display:block;width:64px;height:64px}.weatherAQI .weatherIcon img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.weatherAQI .precipitation{display:block;padding:0 0 0 28px;font-size:1.1em;line-height:1em;min-height:22px;line-height:22px;background:url(../images/icon_umbrella.png) no-repeat 2px center;background-size:auto 20px}.weatherAQI .currently .aqi{line-height:1.3;margin-bottom:2px}.weatherAQI .currently .aqi>*{display:inline-block;vertical-align:bottom}.weatherAQI .currently .aqi abbr{text-decoration:none;font-weight:bold;font-size:1.15em}.weatherAQI .currently .aqi .data{font-size:1.15em;margin:0 6px}.weatherAQI .currently .aqi .data.good{color:#056e26}.weatherAQI .currently .aqi .data.fair{background-color:#ffd70f;color:#333;border-radius:3px}.weatherAQI .currently .aqi .data.poor{color:#c34101}.weatherAQI .currently .aqi .data.veryPoor{color:#d40000}.weatherAQI .currently .aqi .data.extremelyPoor{color:#842285}.weatherAQI .currently .aqi .data.hazardous{color:#7c003e}.weatherAQI .currently .aqi p{margin:0;color:#595959}.weatherAQI .currently .weather{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.weatherAQI .currently .precipitation{margin-bottom:4px}.weatherAQI .currently .weatherIcon{-ms-flex-preferred-size:1 0 64px;flex-basis:1 0 64px;margin-left:auto;margin-right:8px}.weatherAQI .currently .temperature{line-height:1}.weatherAQI .currently .temperature .tempNow .celsius,.weatherAQI .currently .temperature .tempHigh .celsius,.weatherAQI .currently .temperature .tempLow .celsius{display:inline-block;font-size:.6em}.weatherAQI .currently .temperature .tempNow{display:block;margin:0 0 4px;white-space:nowrap;font-size:3em;line-height:.9;font-weight:bold}.weatherAQI .currently .temperature .tempHigh,.weatherAQI .currently .temperature .tempLow{display:inline-block;vertical-align:bottom;color:#595959}.weatherAQI .currently .temperature .tempHigh:last-child,.weatherAQI .currently .temperature .tempLow:last-child{margin-left:.06em}.weatherAQI .currently .temperature .tempHigh:last-child::before,.weatherAQI .currently .temperature .tempLow:last-child::before{content:"-";margin-right:.3em}.weatherAQI .forecast{display:none}@media screen and (min-width: 700px){.weatherAQI{padding:22px 3vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.weatherAQI .heading{margin-bottom:10px}.weatherAQI .currently{-webkit-box-flex:0;-ms-flex:0 1 41%;flex:0 1 41%;margin-right:2.5%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.weatherAQI .currently .weather{margin-top:auto}.weatherAQI .currently+.forecast{margin-left:auto}.weatherAQI .forecast{display:block;position:relative;-webkit-box-flex:0;-ms-flex:0 0 27%;flex:0 0 27%;margin-left:2.4%;padding-left:2.6%;border-left:2px solid #e0e0e0}.weatherAQI .forecast .tempHigh,.weatherAQI .forecast .tempLow{line-height:1.3;margin-bottom:5px}.weatherAQI .forecast .tempHigh em,.weatherAQI .forecast .tempLow em{font-size:1.06em;font-style:normal;color:#000}.weatherAQI .forecast .tempHigh .celsius,.weatherAQI .forecast .tempLow .celsius{display:inline-block;font-size:.7em;margin-left:1px}.weatherAQI .forecast .tempLow{display:inline-block;width:auto;margin-right:5px}.weatherAQI .forecast .precipitation{position:absolute;bottom:4px}.weatherAQI .forecast .weatherIcon{float:right;margin-top:.7em}}@media screen and (min-width: 1000px){.weatherAQI{max-width:984px}}/*# sourceMappingURL=weatherAQI.css.map */