@charset "utf-8";
/* 晚风界 WANFENGJIE - 住房租赁资讯站 */

:root{
  --indigo:#333a7b;
  --indigo-2:#3f468f;
  --indigo-3:#5a62ab;
  --gold:#f5c77e;
  --gold-2:#e9b15d;
  --wave:#b3c0dc;
  --ink:#2a3050;
  --txt:#555;
  --txt-2:#888;
  --line:#eceef4;
  --bg:#f6f7fb;
}

*{margin:0;padding:0;border:0;outline:0;background:transparent;vertical-align:baseline;box-sizing:border-box}
*::before,*::after{box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}
html{-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--txt);font-size:14px;line-height:1.65;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,SimSun,sans-serif}
ul,ol{list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none;transition:color .3s ease,background-color .3s ease,opacity .3s ease}
a:hover{color:var(--indigo-2)}
h1,h2,h3,h4,h5,h6{font-weight:700;color:var(--ink)}
.fl{float:left}
.fr{float:right}
.clear{clear:both}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.container{margin:0 auto;padding:0 20px;max-width:1200px}

/* ---------------- header ---------------- */
.header{width:100%;background:#fff}
.header-nav{position:fixed;top:0;left:0;z-index:9999;width:100%;background:#fff;box-shadow:0 2px 12px rgba(51,58,123,.08)}
.nav-box{height:80px;position:relative}
.nav-inner{display:flex;align-items:center;height:80px;max-width:1200px;margin:0 auto;padding:0 20px}
.logo{flex:0 0 auto;display:flex;align-items:center}
.logo img{height:52px;width:auto}
.nav-bar{flex:1 1 auto;margin-left:24px}
.nav{display:flex;flex-wrap:wrap}
.nav>li{position:relative}
.nav>li>a{display:block;padding:0 15px;height:80px;line-height:80px;color:var(--ink);font-size:15px;font-weight:500;white-space:nowrap}
.nav>li>a:hover,.nav>li.on>a{color:var(--indigo-2)}
.nav>li>a::after{content:"";position:absolute;left:50%;bottom:20px;width:0;height:2px;background:var(--gold-2);transform:translateX(-50%);transition:width .3s ease}
.nav>li>a:hover::after,.nav>li.on>a::after{width:26px}
.sub-nav{position:absolute;top:100%;left:50%;z-index:888;min-width:132px;padding:8px 0;background:#fff;border-radius:6px;box-shadow:0 10px 26px rgba(51,58,123,.16);visibility:hidden;opacity:0;transform:translate(-50%,6px);transition:all .28s ease}
.nav>li:hover .sub-nav{visibility:visible;opacity:1;transform:translate(-50%,0)}
.sub-nav li a{display:block;padding:0 18px;height:40px;line-height:40px;font-size:14px;color:#4a5170;text-align:center;white-space:nowrap}
.sub-nav li a:hover{background:#f4f6fd;color:var(--indigo-2)}
.search-form{position:relative;flex:0 0 auto;margin-left:16px}
.search-form input{width:150px;height:38px;padding:5px 40px 5px 18px;border:1px solid var(--line);border-radius:20px;background:#fbfbfe;font-size:14px;color:var(--txt);transition:width .3s ease}
.search-form input:focus{width:190px;border-color:var(--wave);background:#fff}
.search-form button{position:absolute;top:0;right:6px;width:30px;height:38px;background:none;color:var(--indigo);font-size:15px;cursor:pointer}
.m-btn{display:none;position:absolute;top:0;right:14px;height:80px;padding:0 8px;font-size:22px;color:var(--indigo);background:none;cursor:pointer}

/* ---------------- banner ---------------- */
.banner{padding-top:80px}
.banner-inner{position:relative;max-width:1200px;margin:20px auto 0;padding:0 20px}
.slider{position:relative;overflow:hidden;height:300px;border-radius:10px}
.slide-list{position:relative;height:300px}
.slide-item{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide-item.on{opacity:1}
.slide-item a{display:block;position:relative;height:300px}
.slide-item img{width:100%;height:300px;object-fit:cover}
.slide-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 24px 20px;color:#fff;font-size:20px;font-weight:700;
  background:linear-gradient(transparent,rgba(35,40,80,.78))}
.slide-arrow{position:absolute;top:50%;z-index:10;width:38px;height:58px;margin-top:-29px;background:rgba(35,40,80,.42);
  color:#fff;font-size:22px;line-height:58px;text-align:center;cursor:pointer;opacity:.75;transition:opacity .3s ease}
.slide-arrow:hover{opacity:1}
.slide-prev{left:0;border-radius:0 30px 30px 0}
.slide-next{right:0;border-radius:30px 0 0 30px}
.slide-dots{position:absolute;left:0;right:0;bottom:14px;z-index:11;text-align:center}
.slide-dots span{display:inline-block;width:9px;height:9px;margin:0 5px;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;transition:all .3s ease}
.slide-dots span.on{width:22px;border-radius:5px;background:var(--gold)}

/* ---------------- layout ---------------- */
.main{max-width:1200px;margin:0 auto;padding:0 20px}
.content-wrap{display:flex;align-items:flex-start;gap:20px;margin-top:20px}
.article{flex:1 1 auto;min-width:0}
.sidebar{flex:0 0 350px;width:350px}

/* ---------------- headline cards ---------------- */
.recommend{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.first-pro{flex:1 1 0;min-width:280px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:box-shadow .35s ease,transform .35s ease}
.first-pro:hover{box-shadow:0 10px 26px rgba(51,58,123,.14);transform:translateY(-3px)}
.first-pic{position:relative;height:220px;overflow:hidden}
.first-pic img{width:100%;height:220px;object-fit:cover;transition:transform .6s ease}
.first-pro:hover .first-pic img{transform:scale(1.05)}
.first-article{padding:16px 18px 18px}
.first-article h2{font-size:19px;line-height:28px;margin-bottom:8px}
.first-article p{font-size:14px;color:#5f6685;line-height:22px}
.article-bottom{margin-top:10px;color:#9aa1bd;font-size:12px}
.article-bottom span{padding-right:14px}

/* ---------------- post list ---------------- */
.post{position:relative;overflow:hidden;margin-bottom:16px;padding:24px;border:1px solid var(--line);border-radius:8px;background:#fff;transition:box-shadow .35s ease,transform .35s ease}
.post:hover{box-shadow:0 10px 26px rgba(51,58,123,.14)}
.post-img{position:relative;float:left;margin-right:20px;width:250px;height:158px;border-radius:6px;overflow:hidden}
.post-img img{width:250px;height:158px;object-fit:cover;transition:transform .6s ease}
.post:hover .post-img img{transform:scale(1.05)}
.mask-tags{position:absolute;top:0;left:0;z-index:5;padding:5px 12px;background:var(--indigo);color:#fff;font-size:12px;border-radius:0 0 6px 0}
.mask-tags a{color:#fff}
.post h4{padding-bottom:12px;font-size:19px;line-height:28px}
.post-text{font-size:14px;line-height:24px;color:var(--txt-2)}
.postlist{margin-top:10px;color:#b3b9d1;font-size:13px}
.postlist span{display:inline-block;margin-right:14px}
.postlist span .fa,.postlist span i{margin-right:5px;font-style:normal}
.postlist .tag a{color:var(--indigo-3)}

/* ---------------- sidebar ---------------- */
.function{overflow:hidden;margin-bottom:20px;padding:20px;border:1px solid var(--line);border-radius:8px;background:#fff}
.function-t{position:relative;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #eef0f7;font-size:16px;color:var(--ink)}
.function-t::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;background:var(--gold-2)}
.side-list li{position:relative;overflow:hidden;margin-top:18px}
.side-list li:first-child{margin-top:0}
.side-img{float:left;width:78px;height:62px;margin-right:12px;border-radius:5px;overflow:hidden}
.side-img img{width:78px;height:62px;object-fit:cover}
.side-tit{margin-left:90px}
.side-tit h4{margin-bottom:4px;font-size:14px;font-weight:400;line-height:20px;max-height:40px;overflow:hidden}
.side-tit span{color:#a3a9c4;font-size:12px}
.about-intro{padding:0 0 6px}
.about-img{position:relative}
.about-bg{width:100%;height:132px;overflow:hidden;border-radius:8px 8px 0 0}
.about-bg img{width:100%;height:132px;object-fit:cover}
.about-avatar{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%)}
.about-avatar img{width:62px;height:62px;border-radius:50%;border:3px solid #fff;background:#fff}
.about-name{margin:42px 0 16px;text-align:center;font-size:18px;color:var(--ink)}
.about-name span{display:inline-block;margin-left:8px;padding:2px 9px;border:1px solid var(--indigo);border-radius:20px;font-size:11px;color:var(--indigo);vertical-align:middle}
.about-tag{padding:0 14px 8px;font-size:13px;line-height:1.9;color:#6c7391}
.tag-cloud a{display:inline-block;margin:0 8px 9px 0;padding:0 12px;height:30px;line-height:28px;border:1px solid var(--line);border-radius:15px;font-size:12px;color:#6c7391}
.tag-cloud a:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* ---------------- breadcrumb / archive ---------------- */
.breadcrumb{overflow:hidden;max-width:1200px;margin:0 auto;padding:14px 20px;font-size:13px;color:#9aa1bd}
.breadcrumb a{color:#6c7391}
.breadcrumb i{margin-right:6px;color:var(--indigo-3);font-style:normal}
.breadcrumb .sep{padding:0 7px;color:#c6ccdf;font-style:normal}
.archive-meta{margin-top:6px}
.page-tip{margin-top:10px;color:#a3a9c4;font-size:13px}
.page-tip strong{color:var(--indigo-2)}
.archive-head{position:relative;overflow:hidden;margin-bottom:20px;padding:20px 22px;border:1px solid var(--line);border-radius:8px;background:#fff}
.archive-head h1{font-size:22px;line-height:32px;margin-bottom:8px}
.archive-head p{font-size:13px;color:#838aad;line-height:24px}
.archive-head .count{color:var(--indigo-2);font-weight:700}

/* ---------------- pagination ---------------- */
.pagination{padding:22px 0 30px;text-align:center}
.pagination ul{display:inline-block}
.pagination li{display:inline-block;margin:0 5px}
.pagination li a,.pagination li span{display:block;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#6c7391;font-size:14px;line-height:36px;text-align:center}
.pagination li a:hover{border-color:var(--indigo-3);color:var(--indigo-2)}
.pagination li.on span{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pagination li.disabled span{color:#c9cee0;cursor:default}

/* ---------------- article detail ---------------- */
.article-container{margin-bottom:20px;padding:28px 30px;border:1px solid var(--line);border-radius:8px;background:#fff}
.article-title{font-size:26px;line-height:38px;text-align:center;margin-bottom:14px}
.article-meta{text-align:center;padding-bottom:18px;border-bottom:1px solid #eef0f7}
.article-meta span{display:inline-block;margin:0 8px;color:#a3a9c4;font-size:13px}
.article-meta span a{color:var(--indigo-3)}
.article-content{padding-top:22px;overflow:hidden;word-wrap:break-word}
.article-content p{padding-bottom:14px;color:#4d5470;font-size:15px;line-height:1.95}
.article-content p img{border-radius:8px;margin:4px 0 10px}
.article-content h2,.article-content h3{margin:22px 0 12px;padding:8px 0 8px 12px;border-left:4px solid var(--gold-2);font-size:19px;line-height:26px;background:#fafbfe}
.article-content h3{font-size:17px}
.article-content ul,.article-content ol{margin:0 0 16px 20px}
.article-content ul li{list-style:disc;padding-bottom:8px;color:#4d5470;line-height:1.9}
.article-content ol li{list-style:decimal;padding-bottom:8px;color:#4d5470;line-height:1.9}
.article-content strong{color:var(--indigo-2)}
.article-content blockquote{margin:18px 0;padding:14px 18px;border-left:4px solid var(--wave);border-radius:0 6px 6px 0;background:#f7f9ff;color:#5c6488;font-size:14px;line-height:1.9}
.article-content table{width:100%;margin-bottom:18px;border-collapse:collapse}
.article-content th,.article-content td{padding:9px 12px;border:1px solid #e8eaf3;font-size:14px}
.article-content th{background:#f5f7fd;color:var(--ink);font-weight:700}
.article-content a{color:var(--indigo-2);text-decoration:underline}
.article-content .article-lead{margin:0 0 18px;padding:16px 18px;border-left:4px solid var(--indigo-3);border-radius:0 8px 8px 0;background:#f5f7fd;color:#4a5170;font-size:15px;line-height:1.95}
.article-content .notice{margin:0 0 18px;padding:12px 16px;border:1px solid #f7e6c8;border-radius:6px;background:#fffaf0;color:#8a6d3b;font-size:13px;line-height:1.9}
.article-content .imgs{margin:0 0 16px;text-align:center}
.article-content .imgs img{display:inline-block;max-width:100%;border-radius:8px}

/* ---------------- sidebar extras ---------------- */
.side-search{position:relative;margin-bottom:18px}
.side-search input{width:100%;height:42px;padding:0 86px 0 16px;border:1px solid var(--line);border-radius:8px;background:#fbfbfe;font-size:14px;color:var(--txt)}
.side-search button{position:absolute;top:0;right:0;width:78px;height:42px;border-radius:0 8px 8px 0;background:var(--indigo);color:#fff;font-size:14px;cursor:pointer}
.side-search button:hover{background:var(--indigo-2)}
.cat-grid{display:flex;flex-wrap:wrap;gap:10px}
.cat-grid a{flex:1 1 calc(50% - 5px);padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:#fbfbfe;font-size:13px;color:#6c7391;text-align:center}
.cat-grid a:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}

.article-contact{margin-top:10px;padding:18px;border:1px solid var(--line);border-radius:8px;background:#fbfcff;font-size:13px;line-height:1.9;color:#8b92b0}
.article-contact .tag-content{display:inline-block;margin-bottom:8px;padding:3px 12px;border-radius:4px;background:var(--indigo);color:#fff;font-size:12px}
.article-contact a{color:var(--indigo-2)}
.relates{margin-top:22px}
.relates .title{overflow:hidden;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #eef0f7}
.relates .title h3{float:left;font-size:18px}
.related-list{display:flex;flex-wrap:wrap;gap:16px}
.related-item{flex:1 1 200px;max-width:calc(25% - 12px)}
.related-img{width:100%;height:118px;border-radius:6px;overflow:hidden}
.related-img img{width:100%;height:118px;object-fit:cover;transition:transform .5s ease}
.related-item:hover .related-img img{transform:scale(1.06)}
.related-tit{margin-top:8px;font-size:14px;line-height:21px;height:42px;overflow:hidden}
.clike{margin-top:24px}
.clike .title{margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #eef0f7}
.clike .title h3{font-size:18px}
.post-nav{display:flex;gap:16px;margin-top:20px;flex-wrap:wrap}
.post-nav a{flex:1 1 45%;min-width:240px;padding:14px 18px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px;color:#6c7391}
.post-nav a span{display:block;color:#b3b9d1;font-size:12px}

/* ---------------- footer ---------------- */
.footer{margin-top:20px;padding:26px 20px;background:#2b3160;color:#b9bfd8}
.footer-ju{max-width:1160px;margin:0 auto;text-align:center}
.footer-nav{margin-bottom:14px}
.footer-nav a{display:inline-block;padding:0 10px;color:#c3c9e2;font-size:14px}
.footer-nav a:hover{color:#fff}
.footer-ju p{line-height:28px;font-size:13px;color:#9aa1c4}
.footer-ju p a{color:#c3c9e2}
.footer-ju p a:hover{color:#fff}
.footer-copy{margin-top:8px;color:#8b92b8}

/* ---------------- back to top ---------------- */
#backtoTop{position:fixed;right:22px;bottom:26px;z-index:1000;display:none;width:44px;height:44px;border-radius:50%;
  background:var(--indigo);color:#fff;font-size:18px;line-height:44px;text-align:center;cursor:pointer;box-shadow:0 6px 18px rgba(51,58,123,.32)}
#backtoTop:hover{background:var(--indigo-2)}

/* ---------------- responsive ---------------- */
@media screen and (max-width:1200px){
  .content-wrap{display:block}
  .sidebar{display:none}
  .related-item{max-width:calc(33.333% - 11px)}
}
@media screen and (max-width:980px){
  .nav-inner{height:64px}
  .logo img{height:42px}
  .nav-bar{display:none;position:fixed;top:64px;left:0;right:0;margin:0;padding:0 0 12px;max-height:calc(100vh - 64px);overflow-y:auto;background:#fff;box-shadow:0 10px 24px rgba(51,58,123,.16)}
  .nav-bar.open{display:block}
  .nav{display:block}
  .nav>li>a{height:auto;line-height:48px;padding:0 20px;border-bottom:1px solid #f2f4fa}
  .nav>li>a::after{display:none}
  .sub-nav{position:static;visibility:visible;opacity:1;transform:none;box-shadow:none;border-radius:0;padding:0;background:#fafbff}
  .sub-nav li a{text-align:left;padding:0 36px}
  .m-btn{display:block}
  .search-form{display:none}
  .banner{padding-top:64px}
  .first-pic,.first-pic img{height:180px}
  .post{padding:16px}
  .post-img,.post-img img{width:180px;height:114px}
  .related-item{max-width:calc(50% - 8px)}
}
@media screen and (max-width:667px){
  .post-text{display:none}
  .post-img,.post-img img{width:140px;height:92px}
  .post h4{font-size:16px;padding-bottom:8px}
  .article-container{padding:18px 16px}
  .article-title{font-size:20px;line-height:30px}
  .article-content h2{font-size:17px}
  .slide-item a,.slide-item img,.slider,.slide-list{height:180px}
  .related-item{max-width:100%}
  .related-img,.related-img img{height:150px}
}