/* ============================================================
   森满蓝色博客主题 sm_blogblue
   仿 qz_blogBluedl（天湖/TianHu）蓝色博客版式
   窄单栏 / 白卡片 / 浅灰描边 / 主色 #0c83e8
   ============================================================ */

@charset "utf-8";

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { font-size: 10px; margin: 0; padding: 0; }
body {
    font-family: "PingFang SC", "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #888;
    background-color: #f9f9f9;
    margin: 0; padding: 0;
}
ul, li, dl, dd, dt, p { list-style: none; margin: 0; padding: 0; }
a { color: #333; text-decoration: none; }
a:hover { color: #0c83e8; }

/* 容器（窄单栏，最大约 870px，居中） */
.container { margin-right: auto; margin-left: auto; padding-left: 10px; padding-right: 10px; }
.container:before, .container:after { content: " "; display: table; }
.container:after { clear: both; }

.th_top { margin-top: 20px; }

/* ---------- 移动端顶栏（含 Logo + 汉堡按钮），桌面隐藏 ---------- */
.wap_nav { display: none; }
.thlogocon { height: 70px; overflow: hidden; margin: 10px 0; position: relative; }
.th_logo { float: left; }
.th_logo a { color: #fff; font-size: 17px; font-weight: 200; line-height: 50px; }
.wap_click {
    position: absolute; display: inline-block; width: 28px; height: 28px;
    top: 20px; right: 0; vertical-align: middle; cursor: pointer;
}
.wap_click i {
    position: absolute; top: 50%; left: 50%; display: block; width: 100%; height: 2px;
    margin: -1px 0 0 -50%; background-color: rgba(255,255,255,.68); transition: background-color .3s;
}
.wap_click i:before, .wap_click i:after {
    position: absolute; left: 0; width: 100%; height: 100%;
    background-color: rgba(255,255,255,.68); content: ''; transition: transform .3s;
}
.wap_click i:before { transform: translateY(-400%); }
.wap_click i:after  { transform: translateY(400%); }
.wap_click.wapact i { background-color: transparent; }
.wap_click.wapact i:before { transform: translateY(0) rotate(45deg); }
.wap_click.wapact i:after  { transform: translateY(0) rotate(-45deg); }

/* ---------- 蓝色导航条 ---------- */
.th_header {
    height: 45px; line-height: 45px;
    background-color: #0c83e8;
    box-shadow: 0 1px 5px rgba(0,0,0,.25);
}
.th-menu > li { position: relative; float: left; height: 45px; line-height: 45px; }
.th-menu > li > a {
    display: inline-block; font-size: 15px; padding: 0 15px; color: #fff; transition: .4s ease-out;
}
.th-menu > li > a:hover { color: #fff; background-color: #0b73cc; }
.th-menu .hover { color: #fff; background-color: #0b63af; }

/* ---------- 搜索区（居中大标题 + 输入框） ---------- */
.search-top { margin-top: 30px; }
.search { text-align: center; }
.search-img { max-width: 150px; margin: 0 auto; }
.search-title { font-size: 25px; color: #000; font-weight: 200; margin-top: 20px; }
.search-btn { text-align: center; margin-top: 15px; }
.search-btn form { display: flex; width: 80%; max-width: 520px; margin: 0 auto; }
.search-input {
    flex: 1; width: auto; text-align: left; padding: 7px 12px;
    border: 2px solid #0c83e8; border-right: none;
    border-radius: 3px 0 0 3px; font-size: 16px; outline: none;
}
.search-sub {
    padding: 7px 18px; border: 2px solid #0c83e8; border-radius: 0 3px 3px 0;
    font-size: 16px; background-color: #0c83e8; color: #fff; cursor: pointer; white-space: nowrap;
}
.search-sub:hover { background-color: #0b73cc; }

/* ---------- 卡片容器（白底 + 浅灰描边） ---------- */
.sou-con { border: 1px solid #EDEDED; background: #fff; }
.sou-con-title {
    height: 50px; line-height: 50px; font-size: 18px; font-weight: 200;
    color: #0c83e8; padding-left: 15px; border-bottom: 1px solid #EDEDED;
}
.sou-con-title.top { color: #da2222; }
.sou-con-list { padding: 15px; }
.title-desc { float: right; color: #a9a9a9; font-size: 13px; margin-right: 12px; }
.sou-con-list ul li {
    line-height: 42px; height: 42px; font-size: 15px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sou-con-list ul li span a { color: #999; }
.sou-con-list ul li a { color: #525252; transition: .3s ease-out; }
.sou-con-list ul li a:hover { color: #0c83e8; }
.sou-con-list ul li span { margin-right: 10px; }
.sou-con-list ul li span.date { float: right; color: #bbb; }

/* ---------- 分页 ---------- */
.th_page { background-color: #fff; text-align: center; line-height: 40px; padding: 8px 0; }
.th_page a, .th_page span.now-page {
    display: inline-block; background-color: #999; color: #fff;
    padding: 5px 12px; margin: 0 3px; border-radius: 3px; transition: .3s ease-out;
}
.th_page a:hover { background-color: #0c83e8; }
.th_page span.now-page { background-color: #0c83e8; }

/* ---------- 标签云 / 友情链接 ---------- */
.hot-tags { overflow: hidden; background: #fff; padding: 10px; border: 1px solid #EDEDED; }
.hot-tags ul li { float: left; line-height: 30px; height: 30px; }
.hot-tags ul li.litags { margin-right: 10px; }
.hot-tags ul li.litags a { transition: .3s ease-out; color: #0c83e8; }
.hot-tags ul li.litags a:hover { color: #0b63af; text-decoration: underline; }
.links li { margin-right: 5px; }
.links li.link-item a { color: #0c83e8; }

/* ---------- 页脚 ---------- */
.footer { margin-top: 20px; margin-bottom: 10px; text-align: center; color: #999; }
.footer p a { color: #999; }
.footer p a:hover { color: #0c83e8; }
.foot_info { margin-top: 10px; }

/* ============================================================
   文章详情页（干净版，无吸底联系栏）
   ============================================================ */
.detail_title { color: #333; font-size: 20px; font-weight: 200; text-align: center; }
.detail-icon {
    margin-top: 5px; font-size: 12px; text-align: center;
    border-bottom: 1px solid #EDEDED; padding-bottom: 15px; margin-bottom: 15px; color: #999;
}
.detail-icon p span { margin-right: 10px; }
.article-content {
    font-size: 15px; line-height: 26px; text-indent: 30px;
    word-break: break-all; word-wrap: break-word;
    position: relative; padding: 10px 20px 20px; background-color: #fff;
    border: 1px solid #EDEDED;
}
.article-content p { margin: 0 0 15px 0; }
.article-content img { max-width: 100%; display: block; margin: 0 auto; height: auto !important; }
.article-content a { color: #0c83e8; }
.detail-arr { padding: 10px; overflow: hidden; }
.detail-arr-left, .detail-arr-right { color: #bbb; line-height: 30px; }
.detail-arr-left a, .detail-arr-right a { font-size: 14px; color: #999; }
.detail-arr-left a:hover, .detail-arr-right a:hover { color: #0c83e8; }
.detail-arr-left { float: left; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-arr-right { float: right; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 相关文章 */
.xiangguan { background-color: #fff; padding: 15px; border: 1px solid #EDEDED; margin-top: 15px; }
.xiangguan .sou-con-title { border: none; padding-left: 0; height: auto; line-height: normal; margin-bottom: 8px; }
.xiangguan ul li { line-height: 30px; }
.xiangguan ul li a { color: #888; }
.xiangguan ul li a:hover { color: #0c83e8; }

/* 文章内标签 */
.neitags { overflow: hidden; padding: 10px 15px; background: #fff; border: 1px solid #EDEDED; border-top: none; }
.neitags a { float: left; line-height: 30px; height: 30px; margin-right: 10px; color: #0c83e8; }

/* 评论区 */
.comment-box { background: #fff; border: 1px solid #EDEDED; padding: 15px; margin-top: 20px; }
.comment-box .sou-con-title { border: none; padding-left: 0; height: auto; line-height: normal; margin-bottom: 10px; }
.comment-item { border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
.comment-item .c-name { color: #0c83e8; font-size: 14px; margin-right: 10px; }
.comment-item .c-time { color: #bbb; font-size: 12px; }
.comment-item .c-text { color: #666; font-size: 14px; line-height: 22px; margin-top: 5px; }
.comment-post { margin-top: 15px; }
.comment-post .text, .comment-post textarea {
    border: 1px solid #d7d7d7; padding: 6px 8px; width: 100%; font-size: 14px; margin-top: 8px;
    border-radius: 3px; outline: none;
}
.comment-post .cmtbut {
    display: block; background: #0c83e8; color: #fff; border: 0; line-height: 32px;
    padding: 0 20px; border-radius: 5px; margin-top: 10px; cursor: pointer; float: right;
}
.comment-post .cmtbut:hover { background: #0b73cc; }
.comment-post img.tx-code { vertical-align: middle; cursor: pointer; margin-left: 6px; }

/* ============================================================
   响应式
   ============================================================ */
@media (min-width: 768px)  { .container { width: 730px; } }
@media (min-width: 992px)  { .container { width: 950px; } }
@media (min-width: 1200px) { .container { width: 870px; } }

@media screen and (max-width: 850px) {
    .wap_nav { display: block; background-color: #202935; }
    .th_header {
        position: fixed; top: 0; left: -100%; height: 100%;
        background: rgba(242,246,249,.98); z-index: 9999;
        transition: all .3s linear; width: 160px; text-align: center; box-shadow: none;
    }
    .th-menu { width: 140px; }
    .th-menu > li { float: none; height: 40px; line-height: 40px; border-bottom: 1px rgba(0,0,0,.09) solid; }
    .th-menu > li > a { display: inline-block; font-size: 15px; padding: 0 15px; color: #666; width: 100%; }
    .th_header.thact { left: 0; box-shadow: 20px 0 20px rgba(0,0,0,.38); }
    .thlogocon { height: 50px; margin: 0; }
    .th_logo a { line-height: 50px; }
    .search-btn form { width: 92%; }
}
@media screen and (max-width: 600px) {
    .sou-con-list ul li span.date { display: none; }
    .search-input { width: 70%; }
}