@charset "utf-8";
/* ============================================================
   LECMS 天气站 - 即墨天气APP风格（清新简洁·模块化·风景背景）
   ============================================================ */
:root{
    --blue:#3a8fe0;--blue-deep:#2b6fc0;--sky-grad:linear-gradient(160deg,#6db8f0,#3a8fe0 55%,#2b6fc0);
    --card:#ffffff;--border:#e6eef6;--text:#333;--text-dim:#7a8ea6;
    --shadow:0 6px 24px rgba(90,140,190,.10);--radius:16px;
}
*{box-sizing:border-box;}
body{
    text-align:center;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
    margin:0;padding:0;font-size:14px;color:var(--text);
    /* 风景般的天空渐变背景 */
    background:
        radial-gradient(ellipse at 85% 0%, rgba(255,214,140,.20), transparent 42%),
        radial-gradient(ellipse at 15% 8%, rgba(135,206,235,.35), transparent 48%),
        radial-gradient(ellipse at 60% 100%, rgba(140,200,255,.12), transparent 50%),
        linear-gradient(180deg,#a7d4f5 0%,#cfe8fb 30%,#eef7fd 65%,#f7fbff 100%);
    background-attachment:fixed;min-height:100vh;
}
div,form,img,ul,ol,li,dl,dt,dd{margin:0;padding:0;border:0;text-align:left;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:14px;font-weight:600;}
table,td,tr,th{font-size:14px;color:var(--text);}
li{list-style-type:none;}

.left{float:left;}.right{float:right;}
.clear{clear:both;font-size:0;height:0;visibility:hidden;}
.clear2:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.hidden{display:none;}
.unLine,.unLine a{text-decoration:none;}
.noBorder{border:none;}
.cen{text-align:center;}
.right_more{margin:3px 20px 0 0;}
a{text-decoration:none;color:var(--blue);transition:color .2s;}
a:hover{color:var(--blue-deep);}

/* 输入控件 */
input.itstyle{border:1px solid #d3e3f2;background:rgba(255,255,255,.9);color:#666;padding:0 14px;line-height:36px;height:36px;vertical-align:middle;width:278px;border-radius:18px;outline:none;transition:border .2s;box-shadow:0 2px 6px rgba(90,140,190,.08);}
input.itstyle:focus{border-color:var(--blue);}
input.ibstyle{background:var(--blue);border:none;color:#fff;font-weight:bold;height:36px;line-height:36px;padding:0 18px;vertical-align:middle;width:72px;border-radius:18px;cursor:pointer;transition:opacity .2s;}
input.ibstyle:hover{opacity:.9;}
.wdd{color:var(--blue-deep);font-weight:bold;}
.wds{color:#ff6b4a;font-weight:bold;}
h1{font-size:15px;font-weight:bold;display:inline-block;}

/* ==================== 头部（简洁白底） ==================== */
.header{background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.6);}
.main{width:1100px;margin:0 auto;padding:14px 0;overflow:hidden;}
.site_logo{display:block;float:left;height:42px;line-height:42px;}
.site_logo a{font-size:26px;font-weight:bold;color:var(--blue);letter-spacing:1px;}
.site_logo a:hover{color:var(--blue);text-decoration:none;}
.main_right{display:block;float:right;height:42px;line-height:42px;}

/* 导航（浅蓝条+蓝字，清新） */
.nav_box{background:rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.7);}
.nav{width:1100px;margin:0 auto;height:44px;line-height:44px;font-size:14px;font-weight:600;padding:0;}
.nav a{color:var(--blue-deep);display:inline-block;padding:0 18px;text-decoration:none;transition:all .2s;}
.nav a:hover{color:var(--blue);background:rgba(58,143,224,.10);border-radius:8px;text-decoration:none;}
.nav a.home{color:#fff;background:var(--blue);border-radius:8px;padding:0 20px;}

/* 面包屑 */
.path{width:1100px;margin:0 auto;padding:12px 0;height:auto;line-height:22px;color:var(--text-dim);font-size:13px;}
.path a{color:var(--blue);}
.top_banner{width:1100px;margin:0 auto;padding:8px 0;}

/* ==================== 主体布局 ==================== */
.info{width:1100px;margin:12px auto 0;padding:0;}
.info_left{float:left;width:745px;margin-right:10px;}
.info_right{float:right;width:345px;}

/* 模块化白色圆角卡片 */
.box1{margin-bottom:16px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.box1_title{display:flex;align-items:center;height:46px;line-height:46px;padding:0 18px;color:var(--blue-deep);font-weight:bold;font-size:16px;}
.box1_title::before{content:"";width:5px;height:18px;background:var(--blue);border-radius:3px;margin-right:10px;display:inline-block;}
.box1_title h2{float:left;color:var(--blue-deep);font-weight:bold;font-size:16px;}
.box1_title h3{float:left;font-size:13px;font-weight:normal;color:var(--text-dim);margin-left:10px;}
.box1_info{background:#fff;padding:14px 16px;}

.box2{margin-bottom:16px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.box2_title{height:44px;line-height:44px;padding:0 14px;color:var(--blue-deep);font-weight:bold;font-size:15px;}
.box2_title::before{content:"";width:5px;height:16px;background:var(--blue);border-radius:3px;margin-right:10px;display:inline-block;}
.box2_info{background:#fff;padding:12px;}

/* ==================== 今日天气主区（风景渐变卡） ==================== */
.main_info{margin:0 0 10px;padding:18px;border-radius:var(--radius);background:var(--sky-grad);color:#fff;box-shadow:0 8px 28px rgba(43,111,192,.28);position:relative;overflow:hidden;}
.main_info::before{content:"☁";position:absolute;top:-8px;right:24px;font-size:90px;opacity:.18;}
.main_info::after{content:"";position:absolute;bottom:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);}
.main_info_img{float:left;padding:5px;}
.main_info_img img{width:96px;height:96px;}
.main_info_today{float:left;height:auto;overflow:hidden;padding:5px 0;width:220px;position:relative;z-index:1;}
.main_info_today li{text-align:center;line-height:22px;color:#fff;}
.main_info_today li.title{font-weight:bold;font-size:17px;color:#fff;}
.main_info_today li.img{padding:5px 0;}
.main_info_today li.wb{color:rgba(255,255,255,.92);}
.main_info_today li.tp{font-size:30px;font-weight:bold;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.12);}
.main_info_today li.fx{color:rgba(255,255,255,.92);}
.main_info_live{float:left;padding:5px 12px;height:auto;width:330px;position:relative;z-index:1;}
.main_info_live li{line-height:24px;color:rgba(255,255,255,.96);}
.main_info_live li b{color:#fff;font-weight:600;}
.main_info_live span.t1{color:#fff;font-weight:bold;}
.main_info_live span.t2{color:rgba(255,255,255,.88);}
.main_info_note,.main_info_note2{background:rgba(255,255,255,.85);padding:8px 12px;border-radius:10px;text-align:center;color:var(--text-dim);line-height:20px;margin-top:12px;}
.leftgg_main{width:700px;padding:0 5px 5px;}

/* 天气7天/30天表格（模块化小卡） */
.tianqi_content{padding:12px 4px;}
.tianqi_content span.date{font-weight:bold;color:var(--blue-deep);font-size:14px;}
.tianqi_content tr{margin:0;padding:0;border:0;}
.tianqi_content td{width:20%;background:transparent;padding:0 4px 10px;margin:0;border:0;vertical-align:top;}
.tianqi_content ul{border:1px solid var(--border);background:#fafcff;border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.tianqi_content ul:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(90,140,190,.18);border-color:var(--blue);}
.tianqi_content ul li{line-height:26px;height:26px;text-align:center;overflow:hidden;color:#555;font-size:13px;}
.tianqi_content li.p1{height:34px;line-height:34px;color:var(--text-dim);font-size:12px;background:#f0f7fd;border-bottom:1px solid var(--border);}
.tianqi_content li.p2{height:42px;padding:4px 0;line-height:36px;}

/* 文字介绍 */
.weather_intro{line-height:24px;padding:8px 16px;color:var(--text-dim);}
.weather_intro p{margin:0;padding-bottom:6px;text-indent:2em;}
.weather_other,.weather_othercity,.weather_hot{padding:12px;}
.weather_other li,.weather_othercity li,.weather_hot li{float:left;height:34px;line-height:34px;width:122px;background:#f4f9fe;margin:6px;text-align:center;border-radius:10px;transition:all .2s;}
.weather_other li:hover,.weather_othercity li:hover,.weather_hot li:hover{background:var(--blue);}
.weather_other a,.weather_othercity a,.weather_hot a{text-decoration:none;display:block;color:#555;}
.weather_other li:hover a,.weather_othercity li:hover a,.weather_hot li:hover a{color:#fff;}

/* 30天 */
.weather30_intro{line-height:22px;padding:8px 16px;color:var(--text-dim);}
.weather30_intro p{margin:0;}
.weather30_intro_img{float:left;width:130px;padding:10px 10px 10px 0;}
.weather30_intro_img img{border-radius:12px;}
.weather30_intro_text{float:left;width:520px;line-height:26px;padding-top:10px;}
.weather30_intro_text h1{text-indent:0;font-weight:bold;font-size:30px;margin-bottom:12px;color:var(--blue-deep);font-family:"Microsoft YaHei";}
.weather30_link{padding:16px;text-align:center;border-top:1px solid var(--border);margin-top:10px;}
.weather30_link a{text-decoration:none;padding:12px 34px;background:var(--sky-grad);color:#fff;font-size:18px;font-weight:bold;border-radius:22px;box-shadow:0 6px 18px rgba(43,111,192,.3);transition:opacity .2s;}
.weather30_link a:hover{opacity:.9;}
.weather30_seeother{font-size:14px;font-weight:bold;text-align:center;padding:10px;color:var(--text-dim);}
.weather30_seeother span{cursor:pointer;color:var(--blue);}

/* 预报搜索 */
.weather_searchqxt{padding:12px;}
.weather_searchqxt select{border:1px solid #d3e3f2;background:#fff;padding:8px 10px;border-radius:10px;color:#555;}

/* 列表 */
.weather_ncity{padding:8px 6px;}
.weather_ncity li{float:left;height:34px;line-height:34px;width:152px;background:#f4f9fe;margin:6px;text-align:center;border-radius:10px;transition:all .2s;}
.weather_ncity li:hover{background:var(--blue);}
.weather_ncity a{text-decoration:none;color:#555;display:block;}
.weather_ncity a:hover{color:#fff;}

.weather_news{padding:6px;}
.weather_news li{height:34px;line-height:34px;background:#f4f9fe;margin:6px;display:block;width:auto;padding:0 12px;overflow:hidden;border-radius:10px;transition:all .2s;}
.weather_news li:hover{background:var(--blue);}
.weather_news a{text-decoration:none;color:#555;}
.weather_news li:hover a{color:#fff;}

.city_footbox{width:1100px;margin:14px auto;height:auto;line-height:26px;text-align:center;color:var(--text-dim);font-size:13px;}
.city_footbox a{color:var(--blue);}

/* 页脚 */
.footer{width:1100px;margin:16px auto;text-align:center;line-height:26px;color:var(--text-dim);font-size:13px;}
.footer a{color:var(--blue);}
.footer p a{display:inline-block;margin:0 5px;}

/* 城市列表 */
.citylist{padding:12px;}
.citylist ul{border-bottom:1px solid var(--border);}
.citylist li{float:left;height:34px;line-height:34px;width:122px;background:#f4f9fe;margin:6px;text-align:center;border-radius:10px;transition:all .2s;}
.citylist li:hover{background:var(--blue);}
.citylist li.title a{background:var(--blue);color:#fff;font-weight:bold;border-radius:10px;}
.citylist li.title a:hover{opacity:.9;}
.citylist a{text-decoration:none;display:block;color:#555;}
.citylist a:hover{color:#fff;}

/* 新闻 */
.weather_send{padding:8px 14px;}
.weather_send dt{font-weight:bold;height:32px;line-height:32px;color:var(--blue-deep);}
.weather_send p{padding:10px 14px;background:#f7fbff;margin:0;line-height:24px;border-radius:10px;color:#555;}
.news_list{padding:8px;}
.news_list li{height:34px;line-height:34px;background:#f4f9fe;margin:6px;display:block;padding:0 12px;overflow:hidden;border-radius:10px;transition:all .2s;}
.news_list li:hover{background:var(--blue);}
.news_list a{text-decoration:none;color:#555;}
.news_list a:hover{color:#fff;}
.news_list dt{line-height:30px;height:30px;padding:0 0 0 6px;color:var(--blue-deep);}
.news_list li span.date{color:var(--text-dim);float:right;font-size:12px;}

/* 热门城市 */
.hotcity{padding:8px 6px;}
.hotcity li{float:left;height:34px;line-height:34px;width:100px;background:#f4f9fe;margin:6px;text-align:center;border-radius:10px;transition:all .2s;}
.hotcity li:hover{background:var(--blue);}
.hotcity a{text-decoration:none;color:#555;display:block;}
.hotcity a:hover{color:#fff;}

/* 文章 */
.news_info{padding:8px 20px;line-height:30px;font-size:15px;min-height:600px;color:#555;}
.news_info p{text-indent:2em;}
.news_info li.title{font-weight:bold;line-height:42px;text-align:center;color:var(--blue-deep);font-size:22px;}
.news_info li.date{color:#ff6b4a;font-size:13px;text-align:center;border-bottom:1px dashed var(--border);}

/* 首页 */
.home_hotprovince,.home_hotcity,.home_ncity{padding:6px;}
.home_hotprovince li,.home_hotcity li,.home_ncity li{float:left;height:34px;line-height:34px;width:132px;background:#f4f9fe;margin:6px;text-align:center;border-radius:10px;transition:all .2s;}
.home_hotprovince li:hover,.home_hotcity li:hover,.home_ncity li:hover{background:var(--blue);}
.home_hotprovince a,.home_hotcity a,.home_ncity a{text-decoration:none;display:block;color:#555;}
.home_hotprovince a:hover,.home_hotcity a:hover,.home_ncity a:hover{color:#fff;}

.home_map{padding:8px;}
.map_list_box{background:#fff;padding:14px;}
.map_list_box li{line-height:30px;background:#f4f9fe;margin-bottom:6px;padding:0 10px;border-radius:8px;color:#555;}
.map_list_box p.tips{color:var(--text-dim);}

.home_topnews{background:var(--card);padding:0 16px;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;}
.home_topnews p.title{padding:0;margin:0;text-align:center;font-size:24px;font-weight:bold;line-height:56px;border-bottom:1px dashed var(--border);font-family:"Microsoft YaHei";color:var(--blue-deep);}
.home_topnews p.title a{color:var(--blue-deep);}
.home_topnews p.list{padding:0;margin:0;line-height:42px;text-align:center;color:var(--text-dim);}
.home_topnews p.list a{color:#555;margin:0 10px;}
.home_topnews p.list a:hover{color:var(--blue);}

/* 大数字天气卡（风景渐变） */
.weather_jm_box1{padding:22px;background:var(--sky-grad);color:#fff;border-radius:var(--radius);box-shadow:0 8px 28px rgba(43,111,192,.28);position:relative;overflow:hidden;}
.weather_jm_box1::before{content:"☁";position:absolute;top:-10px;right:30px;font-size:110px;opacity:.18;}
.weather_jm_box1 li{font-size:16px;text-align:center;font-family:"Microsoft YaHei";margin-bottom:14px;position:relative;z-index:1;color:#fff;}
.weather_jm_box1 li.l1{color:#fff;font-size:18px;font-weight:bold;}
.weather_jm_box1 li.l2 h1{font-size:30px;font-weight:bold;color:#fff;}
.weather_jm_box1 li.l3 h2{font-size:17px;color:rgba(255,255,255,.92);}
.weather_jm_box1 li.l4{margin-bottom:6px;}
.weather_jm_box1 li.l5{font-size:62px;margin-bottom:6px;color:#fff;font-weight:bold;text-shadow:0 3px 14px rgba(0,0,0,.12);}
.weather_jm_box1 li.l6{font-size:30px;color:#fff;}
.weather_jm_box1 li.l7{color:rgba(255,255,255,.92);}
.weather_jm_box1 li.l8 img{padding:3px;border:2px solid rgba(255,255,255,.5);border-radius:12px;background:rgba(255,255,255,.15);}
.weather_jm_box1 li.l9,.weather_jm_box1 li.l10{line-height:34px;margin-bottom:0;color:rgba(255,255,255,.92);}
.weather_jm_box1 li.l10 p{margin:0;}
.weather_jm_box1 li.l10 p span.t1{color:#fff;font-weight:bold;}
.weather_jm_box1 li.l10 p span.t2{color:rgba(255,255,255,.88);}

/* 内容页 */
.tqcontent{width:100%;min-height:170px;background:#fff;padding:20px;box-sizing:border-box;border-radius:var(--radius);box-shadow:var(--shadow);}
.tqcontent p:first-child{font-size:16px;color:var(--blue-deep);border-bottom:1px dashed var(--border);padding-bottom:10px;margin-bottom:10px;}
.tqcontent p{font-size:14px;color:#555;line-height:26px;}
.tqcontent .tags a{margin-right:10px;color:var(--blue);}
.tqcontent .tags a:last-child{margin-right:0;}

/* 温度大字 */
.zixunday__pretop{width:100%;height:auto;background:var(--sky-grad);border-radius:var(--radius);color:#fff;margin-top:20px;position:relative;overflow:hidden;box-shadow:0 8px 28px rgba(43,111,192,.28);}
.tempbox{width:100%;padding:20px 40px;box-sizing:border-box;}
.tempbox_left span{display:inline-block;}
.tempbox_left span:first-child{font-size:64px;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.12);}
.tempbox_left span:nth-child(2){padding:0 10px;box-sizing:border-box;vertical-align:-5px;font-size:34px;max-width:150px;white-space:nowrap;overflow:hidden;color:#fff;}
.tempbox_left span:nth-child(3){height:24px;line-height:24px;padding:0 12px;box-sizing:border-box;border-radius:12px;vertical-align:super;background:rgba(255,255,255,.25);color:#fff;font-size:13px;}

/* emoji 天气图标 */
.tq-emoji{display:inline-block;vertical-align:middle;}

/* ==================== 覆盖模板硬编码浅色背景 ==================== */
table[bgcolor="#FFFFFF"], table[bgcolor="#ffffff"]{background-color:#e4edf7 !important;}
td[bgcolor="#FFFFFF"], td[bgcolor="#ffffff"]{background-color:#fff !important;}
td[bgcolor="#f9fcff"], td[bgcolor="#f2f9ff"], td[bgcolor="#f6fbff"]{background-color:#f7fbff !important;}
td[bgcolor="#e4f3ff"], td[bgcolor="#e6f7ff"]{background-color:#eef6ff !important;}

/* ==================== 台风相关样式 ==================== */
/* 台风介绍 */
.typhoon_intro p{line-height:26px;color:var(--text);}

/* 台风卡片列表 */
.typhoon_list{display:flex;flex-wrap:wrap;gap:16px;}
.typhoon_card{display:block;width:calc(50% - 8px);background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:all .25s;text-decoration:none;color:var(--text);}
.typhoon_card:hover{box-shadow:0 8px 24px rgba(90,140,190,.15);transform:translateY(-2px);border-color:var(--blue);text-decoration:none;}
.ty_card_header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.ty_card_header .ty_name{font-size:18px;font-weight:bold;color:var(--blue-deep);}
.ty_card_header .ty_id{font-size:12px;color:var(--text-dim);background:#f0f5fa;padding:2px 8px;border-radius:4px;}
.ty_card_body{display:flex;flex-wrap:wrap;gap:8px 16px;}
.ty_card_item{width:calc(50% - 8px);display:flex;align-items:center;gap:6px;}
.ty_card_item .ty_label{font-size:12px;color:var(--text-dim);min-width:48px;}
.ty_card_item .ty_val{font-size:13px;color:var(--text);font-weight:500;}
.ty_intensity_badge{display:inline-block;color:#fff;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;white-space:nowrap;}
.ty_card_foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:10px;border-top:1px solid var(--border);font-size:12px;color:var(--text-dim);}
.ty_card_foot .ty_arrow{color:var(--blue);font-weight:600;}

/* 台风详情页 */
.typhoon_detail_header{padding:4px 0;}
.ty_detail_summary{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.ty_detail_stats{display:flex;flex-wrap:wrap;gap:10px 20px;flex:1;}
.ty_stat label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:2px;}
.ty_stat span{font-size:15px;font-weight:600;color:var(--text);}
.ty_detail_meta{margin-top:12px;display:flex;gap:20px;font-size:12px;color:var(--text-dim);}

/* 台风数据表格 */
.typhoon_table_wrap{overflow-x:auto;}
.typhoon_table{font-size:13px;}
.typhoon_table th{background:#f0f5fa;color:var(--blue-deep);font-weight:600;white-space:nowrap;text-align:center;}
.typhoon_table td{text-align:center;border-bottom:1px solid #f5f8fb;white-space:nowrap;}
.typhoon_table tr:hover td{background:#f9fcff;}

/* 台风等级表 */
.typhoon_levels table{font-size:13px;}
.typhoon_levels th{background:var(--sky-grad);color:#fff;font-weight:600;}
.typhoon_levels td{border-bottom:1px solid #f0f5fa;}
.level_dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:4px;}

/* 空态 */
.typhoon_empty p{line-height:28px;}

/* 年份按钮 */
.typhoon_years{display:flex;flex-wrap:wrap;gap:8px;}
.ty_year_btn{display:inline-block;padding:6px 14px;background:#f0f5fa;border-radius:6px;color:var(--blue);font-size:13px;transition:all .2s;}
.ty_year_btn:hover{background:var(--blue);color:#fff;text-decoration:none;}
.ty_year_active{background:var(--blue);color:#fff;}

/* 查看按钮 */
.ty_view_btn{display:inline-block;padding:3px 10px;background:var(--blue);color:#fff;border-radius:4px;font-size:12px;transition:opacity .2s;}
.ty_view_btn:hover{opacity:.85;color:#fff;text-decoration:none;}

/* 分页 */
.ty_page_current{display:inline-block;padding:4px 10px;background:var(--blue);color:#fff;border-radius:4px;font-weight:600;}

/* 地图图例 */
.typhoon_legend{font-size:12px;line-height:18px;}
.typhoon-current-icon{background:transparent !important;border:none !important;}