@charset "utf-8";
/* CSS Document */
*{ margin: 0 auto; padding: 0; border: 0;  font-size: 14px;outline:medium;box-sizing: border-box;font-family: "Arial";}
a{ text-decoration: none; color: #000; }
img{ display:block; max-width: 100%; height: auto !important; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; }
.big img:hover{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
ul{ margin: 0; padding: 0; }
li{ list-style: none; }
pre{ white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
i{ font-style: normal;}
h1,h2,h3,h4,h5,h6{ font-weight: normal;}
body{max-width: 750px;background: #f8f8f8;}
.head{padding-left: 25px;padding-right:10px;background: url("../images/home.png") no-repeat left 10px center #fff;background-size: auto 35%;height: 35px;overflow: hidden;color: #999;font-size: 12px;}
.head a{font-size: 12px;color: #999;line-height: 35px;margin: 0 1px;}
.fr{float:right;}
.today{min-height: 400px;position: relative;overflow: auto;}
.today .area{position: absolute;left: 5%;top: 5%;}
.today .area h1{font-size: 16px;color: #fff;line-height: 120%;font-weight: bold;}
.today .area p{font-size: 12px; color: #fff;}
.today .r{position: absolute;right: 5%;top: 6%;}
.today .r .air,.today .r .alarm{line-height: 24px;border-radius:12px;color: #fff;display: inline-block;padding: 0 12px;}
.today .r .air{margin-right: 5px;padding-left: 30px;position: relative;}
.today .r .air img{position: absolute;left: 6px;top: 4px;width: 16px;height: 16px;border-radius: 50%;padding: 1%;background: #fff;}
.today .r .air.l1{background-color: #a3d765}
.today .r .air.l2{background-color: #f0cc35}
.today .r .air.l3{background-color: #f1ab62}
.today .r .air.l4{background-color: #ef7f77}
.today .r .air.l5{background-color: #b28ccb}
.today .r .air.l6{background-color: #ad788a}
.today .r .alarm.l01{background-color: #4791ff;}
.today .r .alarm.l02{background-color: #ffbe15}
.today .r .alarm.l03{background-color: #ff6e30}
.today .r .alarm.l04{background-color: #ed4c48}
.today .info{text-align: center;margin-top: 100px;width: 60%;display: flex;}
.today .info .weather{font-size: 20px;color: #fff;padding-top: 7px;}
.today .info .weather img{max-width: 70px;}
.today .info .degree{font-size: 100px;position: relative;color: #fff;}
.today .info .degree::after{content: '';position: absolute;background: none;border: 2px solid #fff;border-radius: 50%;width: 10px;height: 10px;top: 15px;}
.today .tips{text-align: center;font-size: 20px;line-height: 120%;width: 80%;margin: 5% auto;color: #fff;}
.today .observe{text-align: center;display: flex;width: 90%;margin-top: 70px;}
.today .observe .wind,.today .observe .humidity,.today .observe .precipitation,.today .observe .pressure{padding-left: 25px;color: #fff;}
.today .observe .wind{background: url("../images/wind.png") no-repeat left center;background-size: auto 100%;}
.today .observe .humidity{background: url("../images/humidity.png") no-repeat left center;background-size: auto 100%;}
.today .observe .precipitation{background: url("../images/precipitation.png") no-repeat left center;background-size: auto 100%;}
.today .observe .pressure{background: url("../images/pressure.png") no-repeat left center;background-size: auto 100%;}
.tomorrow{background: #fff;display: flex;}
.tomorrow .item{width: 50%;padding: 0 20px;margin: 20px auto;}
.tomorrow .item:first-child{border-right: 1px solid #eee;}
.tomorrow .item .top,.tomorrow .item .bottom{overflow: auto;width: 100%;}
.tomorrow .item .date,.tomorrow .item .weather{float: left;}
.tomorrow .item .temperature,.tomorrow .item .bottom img{float: right;}
.tomorrow .item .date,.tomorrow .item .weather,.tomorrow .item .temperature{line-height: 24px;}
.tomorrow .item .bottom img{height: 20px !important;margin-top: 2px;}
.tit{position: relative;padding-left: 15px;margin-top: 10px;font-size: 14px;}
.hours{margin: 10px auto;background: #fff;}
.hours ul li{text-align: center;margin: 20px auto;}
.hours ul li p{color: #666;font-size: 12px;}
.hours ul li img{width:24px;height: 24px;margin: 10px auto;}
.days{margin: 10px auto;background: #fff;overflow: auto;}
.days dl{overflow: auto;margin: 15px auto;padding-bottom: 15px;border-bottom: 1px solid #eee;}
.days dl:last-child{border: none;padding-bottom: 0;}
.days dl dd{overflow: auto;}
.days dl dd span{display: inline-block;width: 15%;text-align: center;float: left;line-height: 22px;color: #666;}
.days dl dd span:last-child{width: 25%;}
.days dl dd span img{width: 22px;}
.index{margin: 10px auto;background: #fff;/*border-top: 1px solid #eee;border-left: 1px solid #eee;*/ overflow: auto;}
.index .item{border-right: 1px solid #eee;border-bottom: 1px solid #eee;float: left;width: 25%;text-align: center;min-height: 80px;}
.index .item:nth-child(4n){border-right: none;}
.index .item:nth-last-child(-n+4){border-bottom: none;}
.index .item .pop{display: none;position: fixed;top: 50%;left: 50%;background: #fff;width:80%;max-width:600px;z-index: 100;transform: translate(-50%,-50%);padding: 15px;border-radius: 5px;}
.index .item img{width: 25px;margin-top: 10px;}
.index .item span{color: #333;line-height: 20px;}
.index .item p{font-size: 12px;color: #999;margin-bottom: 10px;}
.index .item .pop dt{font-weight: bold;line-height:200%;}
.index .item .pop dd {margin: 10px;}
.nearby{margin: 15px auto;background: #fff;padding: 20px;}
.nearby a{line-height: 20px;margin: 0 10px 0 0;}
.nearby dl{margin: 2% auto;}
.nearby dl dt a{font-weight: bold;}

.menu{margin: 10px auto;background: #fff;padding: 15px;}
.menu a{width:20%;display:inline-block;text-align:center;}
.menu a.active{color:#0892f7;font-weight:bold;}

.news-list{margin: 10px auto;background: #fff;padding: 15px;}
.news-list .item{margin:2% auto;overflow:auto;border-bottom:1px solid #eee;padding-bottom:2%;}
.news-list .item .text{width:calc(100% - 150px); float:left;}
.news-list .item .text h2{margin-bottom:10px;}
.news-list .item .text h2 a{font-size:18px;font-weight:bold;line-height:120%;}
.news-list .item .text span{font-size:14px;display:block;margin-bottom:10px;}
.news-list .item .text p{font-size:14px;color:#888;}
.news-list .item .pic{width:120px; float:right;}

.news-show{margin: 15px auto;background: #fff;padding: 20px;}
.news-show .title{font-size:18px;font-weight:bold;line-height:120%;margin:10px auto;}
.news-show .info span{font-size:14px;color:#888;}
.news-show .content{font-size:14px;line-height:180%;margin:20px auto;}
.news-show .content p{margin-bottom:10px;}

.bg{background:rgb(0,0,0,0.7);position:fixed;top:0;width:100%;height:100%;z-index:99;display:none;max-width:750px;}
.index .item.open .pop,.bg.open{display:block;}

.copyright{text-align: center;margin-bottom: 10px;}
.copyright i{font-size: 10px;color: #ccc;font-style: normal;}
.copyright p{font-size: 12px;color: #999;}

/*Common For Max 480*/
@media only screen and (max-width: 766px) {
  .today .observe .wind,.today .observe .humidity,.today .observe .precipitation,.today .observe .pressure{padding-left: 20px;font-size: 12px;}
  .today .tips{font-size: 18px;}
  .days dl dd span,.index .item span,.nearby a{font-size: 12px;}
  .index .item p{font-size: 10px;}
  .news-list .item{margin:5% auto;padding-bottom:5%;}
  .news-list .item .text{width:calc(100% - 100px);}
  .news-list .item .text h2 a{font-size:16px;font-weight:normal;}
  .news-list .item .text span{display:none;}
  .news-list .item .pic{width:80px; float:right;}
}