*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#fff;color:#333;font:14px/1.6 "Microsoft YaHei","PingFang SC",sans-serif}
a{color:#333;text-decoration:none}
img{max-width:100%;border:0}
ul{list-style:none}
button,input{font-family:inherit}
.page{padding-top:50px}
body.has-ad-top .page{padding-top:98px}
body.has-ad-bottom{padding-bottom:64px}

.m-head{position:fixed;z-index:40;left:0;right:0;top:0;height:50px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 12px;box-shadow:0 1px 0 #eee}
body.has-ad-top .m-head{top:48px}
.logo{font-size:18px;font-weight:700;color:#f58220;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.icon{width:28px;height:28px;border:0;background:transparent;position:relative}
.icon.menu:before,.icon.menu:after,.icon.menu{color:#5686e8}
.icon.menu:before,.icon.menu:after{content:"";position:absolute;left:4px;right:4px;height:2px;background:#5686e8}
.icon.menu:before{top:8px;box-shadow:0 5px 0 #5686e8}
.icon.menu:after{bottom:8px}
.icon.find:before{content:"";position:absolute;left:4px;top:4px;width:12px;height:12px;border:2px solid #5686e8;border-radius:50%}
.icon.find:after{content:"";position:absolute;left:16px;top:16px;width:7px;height:2px;background:#5686e8;transform:rotate(45deg)}
.search-pop{display:none;position:absolute;left:0;right:0;top:50px;background:#fff;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.search-pop.on{display:flex}
.search-pop input{flex:1;height:34px;border:0;background:#f5f5f5;padding:0 12px;outline:none}
.search-pop button{width:56px;margin-left:8px;border:0;background:#5686e8;color:#fff}

.nav-box{display:none;position:fixed;z-index:50;inset:0;background:#fff;padding:18px 16px;overflow:auto}
.nav-box.on{display:block}
.nav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.nav-top b{color:#4B96F6;font-size:17px}
.nav-top button{border:1px solid #4b96f6;background:#fff;color:#4b96f6;border-radius:20px;height:24px;padding:0 12px;font-size:12px}
.nav-all{display:flex;flex-wrap:wrap}
.nav-all a{width:calc(25% - 8px);margin:0 8px 8px 0;background:#F3F3F5;color:#565462;text-align:center;line-height:38px;border-radius:3px;font-size:13px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nav-all a.on{background:#5686e8;color:#fff}

.m-banner{width:95%;height:212px;margin:16px auto 0;background:#f3f3f3;overflow:hidden}
.m-banner img,.m-banner a{display:block;width:100%;height:212px;object-fit:cover}
.ad-ph{height:212px;line-height:212px;text-align:center;color:#999}
.m-block{padding:14px 12px 4px}
.tabs{border-bottom:1px solid #ddd}
.tabs span{display:inline-block;margin-right:18px;padding:4px 0;font-size:16px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs span.on{color:#5686e8;font-weight:700;border-bottom-color:#5686e8}
.m-block h2{border-bottom:1px solid #ddd;font-size:16px}
.m-block h2 a{display:inline-block;padding:4px 0;margin-bottom:-1px;border-bottom:2px solid #5686e8;color:#5686e8}
.dots{display:none;padding-top:8px}
.dots.on{display:block}
.dots li{position:relative;padding:6px 0 6px 12px}
.dots li:before{content:"";position:absolute;left:0;top:14px;width:4px;height:4px;border-radius:50%;background:#5686e8}
.dots li a{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#666;font-size:15px}

.m-page{padding:12px}
.crumb{color:#707070;font-size:14px;padding:4px 0 10px}
.crumb a{color:#333}
.crumb em{margin:0 4px;font-style:normal;color:#999}
.page-h{font-size:17px;color:#3e5e87;margin-bottom:8px}
.intro{color:#666;margin-bottom:8px}
.subtabs{margin-bottom:8px;white-space:nowrap;overflow:auto}
.subtabs a{display:inline-block;margin:0 8px 8px 0;padding:2px 10px;background:#f3f4f4;color:#3c3e45;border-radius:2px}
.subtabs a.on{background:#0C7FF2;color:#fff}
.news-list li{padding:8px 0;border-bottom:1px dotted #eee}
.news-list li:nth-child(4n){margin-bottom:8px}
.news-list a{display:block;font-size:16px;line-height:1.5;color:#000}
.news-list span{display:block;color:#838383;font-size:12px;margin-top:2px}
.pager{margin:16px 0;text-align:center}
.pager a,.pager span{display:inline-block;min-width:32px;height:32px;line-height:32px;padding:0 8px;margin:2px;background:#F3F4F4;color:#3c3e45}
.pager span,.pager a:hover{background:#0C7FF2;color:#fff}
.empty{padding:30px 12px;text-align:center;color:#999}
.back{text-align:center}
.back a{color:#1482F0}

.m-art{padding:12px}
.m-art h1{font-size:20px;line-height:1.45}
.meta{margin:10px 0 14px;padding-bottom:10px;border-bottom:1px solid #ccc;color:#8b8b8b;font-size:13px}
.meta span{margin-right:12px}
.buy{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:10px;background:#f7fbff;border:1px solid #e6eef8}
.buy img,.buy .ph{width:56px;height:56px;object-fit:cover;background:#eef3f8;line-height:56px;text-align:center;color:#5686e8;flex:0 0 56px}
.buy div{flex:1;min-width:0}
.buy h3{font-size:15px}
.buy p{color:#0C7FF2}
.buy b{background:#1482F0;color:#fff;font-weight:400;padding:4px 10px;border-radius:2px}
.body{font-size:16px;line-height:1.8}
.body p{margin-top:12px}
.body img,.gallery img{display:block;max-width:100%;height:auto;margin:10px auto}
.art-tags{margin-top:12px}
.art-tags a{display:inline-block;margin:0 8px 8px 0;padding:2px 8px;background:#f3f4f4;color:#3c3e45}

.m-foot{position:relative;margin-top:16px;padding:18px 12px 14px;background:#333;color:#fff;text-align:center;font-size:12px}
.m-foot:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:#1482F0}
.m-foot a{color:#fff}
.friends{text-align:left;margin-bottom:8px}
.friends b{display:block;font-weight:400;margin-bottom:4px}
.friends a{display:inline-block;margin:0 10px 4px 0}
.note{margin-top:6px}

.ad-float{position:fixed;left:0;right:0;z-index:35;background:#fff}
.ad-float-top{top:0}
.ad-float-bottom{bottom:0}
.ad-float img{display:block;width:100%;max-height:48px;object-fit:cover}
.ad-close{position:absolute;right:0;top:0;width:28px;height:22px;border:0;background:rgba(0,0,0,.35);color:#fff}