@font-face {
  font-family: 'iconfont';
  src: url('fonticon/iconfont.woff2?t=1758530933391') format('woff2'),
       url('fonticon/iconfont.woff?t=1758530933391') format('woff'),
       url('fonticon/iconfont.ttf?t=1758530933391') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

        .weather-header {
            background: linear-gradient(120deg, #1e9fff, #5fb878);
            color: white;
            padding: 20px 0;
            margin-bottom: 20px;
        }
        .current-weather {
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .weather-card {
            background-color: white;
            border-radius: 5px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .temp-large {
            font-size: 48px;
            font-weight: bold;
            color: #1e9fff;
        }
        .weather-icon i{
            font-size: 68px;
            margin: 20px 0;
            display:block;color:red
        }
        .city-name {
            font-size: 24px;
            margin-bottom: 10px;
        }
        .aqi-index {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 15px;
            color: white;
            font-size: 14px;
        }
        .aqi-good {
            background-color: #5fb878;
        }
        .aqi-moderate {
            background-color: #ffb800;
        }
        .aqi-bad {
            background-color: #ff5722;
        }
        .life-index {
            margin-top: 15px;
        }
        .index-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .index-item:last-child {
            border-bottom: none;
        }
        .footer {
            text-align: center;
            padding: 20px 0;
            color: #999;
            margin-top: 30px;
            border-top: 1px solid #eee;
        }
        .search-box {
        }
        .search-results {
            background: rgba(255,255,255,0.89);
            position:absolute;top:50Px;width:300Px;
            max-height:200Px;overflow:auto;
            z-index:9999;
            border-radius: 5px;
            margin-top: 10px;
            padding: 10px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .city-item {
            padding: 8px 15px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
 .city-item, .city-item * {color:#000}
        
        .city-item:hover {
            background-color: #f8f8f8;
        }
        .city-item:last-child {
            border-bottom: none;
        }
        .forecast-day {
            text-align: center;
            padding: 10px;
        }
        .forecast-icon {
            font-size: 30px;
            margin: 5px 0;
        }

.topnav {float:right}
.topnav a {padding:8Px 18Px 8Px 18Px;color:#fff;font-size:15Px;background:rgba(255,255,255,0.1);line-height:250%;}
.webtitle i {font-size:28Px;color:yellow}
.webtitle a {font-size:28Px;color:#fff}
.searchins {float:left;padding:9Px;max-width:70%;width:300Px}
.search-box {margin:20Px 0;float:left}
.cityitem {padding:20Px;display:flex;flex-wrap:wrap}
.cityitem a {display:block;padding:8Px 24Px;border:1Px solid #f0f0f0;background:#f9f9f9;margin:5Px 6Px}
.layui-elem-quote {font-weight:bold;font-size:130%}
.haf2 {display:flex;flex-wrap:wrap}
.haf2 .city-item  {width:40%;}