/*! ©2026 shanghai life and info zhaozhishi.net */
/* CSS Document */

/* 基础 */
* {margin:0; padding:0; box-sizing:border-box}
html,body {height:100%; font:14px/1.5 Arial,"Microsoft YaHei",sans-serif; background:#f8f9fa}
a {color:#333; text-decoration:none; transition:color .3s}
a:hover {color:#ed4040}
ul,ol {list-style:none}
img {max-width:100%; height:auto; border:none}
.clearfix::after {content:""; display:block; clear:both}

.wrapper {min-height:100%; padding-top:60px}
.container {width:95%; max-width:1200px; margin:0 auto; padding:15px 0}
.main-layout {display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start}

/* 头部 */
.header {
    position:fixed; top:0; left:0; right:0; height:60px; line-height:60px;
    background:#fff; border-bottom:1px solid #e9ecef; box-shadow:0 2px 8px rgba(0,0,0,.05); z-index:9999;
    transition:height .3s, line-height .3s;
}
.header-inner {width:95%; max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between}
.logo {width:120px}
.logo img {height:40px; object-fit:contain}
.search-form {flex:1; max-width:500px; margin:0 20px}
.search-input {
    width:100%; height:38px; padding:0 15px 0 35px; border:1px solid #e9ecef; border-radius:19px; outline:0; font-size:14px;
    background:#f8f9fa url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 0 1-11 0 5.5 5.5 0 1 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 12px center;
    transition:border-color .3s, box-shadow .3s;
}
.search-input:focus {border-color:#ed4040; box-shadow:0 0 0 3px rgba(237,64,64,.1)}
.menu-btn-wrapper {display:flex; align-items:center; gap:8px; cursor:pointer}
.menu-text {display:none; font-size:15px; color:#333; font-weight:500}
.menu-arrow {display:none; width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:6px solid #ed4040; transition:transform .3s}
.menu-btn {width:42px; height:42px; background:#ed4040; color:#fff; border-radius:50%; text-align:center; line-height:42px; font-size:20px; cursor:pointer; transition:background .3s,transform .3s; border:none; outline:0}
.menu-btn:hover {background:#d93636; transform:scale(1.05)}
.global-menu {display:none; position:fixed; top:60px; right:0; width:280px; background:#fff; border:1px solid #e9ecef; border-top:none; border-radius:0 0 0 8px; box-shadow:0 4px 12px rgba(0,0,0,.1); z-index:9998; max-height:calc(100vh - 60px); overflow-y:auto; opacity:0; transform:translateX(10px); transition:opacity .3s, transform .3s}
.global-menu.show {display:block; opacity:1; transform:translateX(0)}
.global-menu ul {padding:8px 0}
.global-menu li {border-bottom:1px solid #f8f9fa}
.global-menu a {display:block; height:48px; line-height:48px; padding:0 20px; font-size:15px}
.global-menu a:hover {background:#f8f9fa; color:#ed4040}

/* 文章区 * 此部分见sh_wen.css/


/* 文章后css */
.article-actions {background:#fff; padding:12px 15px; border-radius:8px; margin-bottom:15px; box-shadow:0 2px 8px rgba(0,0,0,.05); display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.action-left {display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.favorite-tip {color:#000; font-weight:500; white-space:nowrap}
.favorite-tip strong {color:#ff0000}
.share-group {display:flex; gap:2px; flex-wrap:wrap}
.share-group a {color:#000; font-size:12px; display:inline-flex; align-items:center; transition:all 0.2s ease;}
.share-group a.red-text {color:#ff0000;}
.areport {color:#000; font-weight:500;}

.page-links {width:100%; background:#fff; padding:10px 15px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.05); font-size:13px; color:#666; line-height:1.8; display:flex; flex-wrap:wrap; gap:10px}
.page-pre,.page-next {display:block; flex:1 1 auto}

#pagelet-relatednews {background:#fff; padding:15px; border-radius:8px; margin-top:15px; box-shadow:0 2px 8px rgba(0,0,0,.05)}
.dtag {font-size:16px; font-weight:700; margin-bottom:10px; padding-left:8px; border-left:3px solid #ed4040}
.relatednews .item {margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #eee}
.relatednews .item:not(:has(.lbox)) {display:flex; align-items:center}
.lbox {width:100px; height:70px; float:left; margin-right:10px; flex-shrink:0}
.lbox img {width:100%; height:100%; object-fit:cover; border-radius:4px}
.rbox {margin-left:110px; overflow:hidden; width:auto; max-width:100%; box-sizing:border-box}
.title-box {font-size:14px; font-weight:700; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.abstract {font-size:12px; color:#666; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.footer {font-size:12px; color:#999}

.detail-main {flex:1; min-width:300px}
.detail-right {width:280px; position:relative; z-index:1; flex-shrink:0; display:block !important; visibility:visible !important; opacity:1 !important}
@media (min-width:769px) {.detail-right {position:sticky; top:70px; align-self:flex-start}}
.sideGap {margin-bottom:20px; background:#fff; padding:15px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.05)}
.Pgc_name {display:block; text-align:center; font-weight:700; margin-bottom:5px}
.Pgc_details {display:block; text-align:center; font-size:12px; color:#999; margin-bottom:10px}
.image_head {width:60px; height:60px; border-radius:50%; margin:0 auto -10px; background:url(/style/sh_logo.png); background-size:cover}

.monthhot li,
.Pgc_article li {height:28px; line-height:28px; font-size:13px; border-bottom:1px dashed #eee; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.monthhot i {display:inline-block; width:16px; height:16px; line-height:16px; text-align:center; background:#ccc; color:#fff; border-radius:50%; margin-right:5px; font-size:12px}
.monthhot li:nth-child(1) i,.monthhot li:nth-child(2) i,.monthhot li:nth-child(3) i {background:#ed4040}
.Pgc_article ul {padding:0; margin:0; list-style:none}
.Pgc_article li {display:flex; align-items:center; height:34px; line-height:34px; font-size:14px}
.Pgc_article li::before {content:""; width:6px; height:6px; border-radius:50%; background:#999; margin-right:10px; flex-shrink:0}
.Pgc_article li a {flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.hotgallery_show img {width:100%; height:160px; object-fit:cover; border-radius:4px; margin-bottom:5px}
.pic_number {position:absolute; background:rgba(0,0,0,.5); color:#fff; padding:2px 5px; font-size:12px; border-radius:3px; right:5px; top:5px}
.gallery-con {position:relative}
.gallery_item .title p {white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.feedback_dialog {position:fixed; right:-380px; bottom:100px; width:320px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,.2); z-index:9999; transition:all .3s ease; border-radius:6px; opacity:0}
.feedback_dialog.on {right:10px; opacity:1}
.feedback_dialog:hover {right:10px; opacity:1}
.dialog-header {padding:10px; background:#f5f5f5; border-bottom:1px solid #eee; font-weight:700; display:flex; justify-content:space-between; align-items:center}
.feedback_panel {padding:15px}
.feedback_item {margin-bottom:12px}
.feedback_panel p {margin-bottom:6px; font-size:14px; color:#333}
.email,.content {width:100%; border:1px solid #eee; padding:8px; border-radius:4px; outline:0; font-size:14px; transition:border-color .3s}
.email:focus,.content:focus {border-color:#ed4040}
.content {height:100px; resize:none}
.btn_group {display:flex; gap:10px; margin-top:10px}
.submit-btn,.close-btn {flex:1; padding:8px 0; text-align:center; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:14px; transition:background .3s}
.submit-btn {background:#ed4040}
.submit-btn:hover {background:#d93636}
.close-btn {background:#6c757d}
.close-btn:hover {background:#5a6268}

#aboutus {text-align:center; padding:15px 0; font-size:12px; color:#999; background:#fff; margin-top:20px; border-top:1px solid #eee; line-height:1.8}

@media (min-width:769px) {
    .menu-text,.menu-arrow {display:block}
    .relatednews .item:not(:has(.lbox)) {flex-wrap:nowrap}
}
@media (max-width:768px) {
    .header {height:50px; line-height:50px}
    .wrapper {padding-top:50px}
    .logo {width:80px}
    .search-form {max-width:none; margin:0 10px}
    .menu-btn {width:38px; height:38px; line-height:38px}
    .global-menu {top:50px; width:100%; border-radius:0}
    .main-layout {flex-direction:column}
    .detail-right {width:100%}
    .action-left {gap:6px}
    .article-content p {text-indent:0}
    .lbox {width:80px; height:60px}
    .rbox {margin-left:90px}
    .feedback_dialog {width:90%; bottom:20px; right:-100%; max-width:320px}
    .feedback_dialog.on {right:5%}
}
@media (max-width:480px) {
    .share-group {gap:6px}
    .favorite-tip {font-size:12px}
    .article-header .title {font-size:20px}
}