.main{padding-top:160px;padding-bottom:60px;}
.blog-list ul{display:-webkit-flex;display:flex;margin:0 -20px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.blog-list ul li{width:33.333333333%;padding:20px;overflow:hidden;cursor:pointer;box-sizing:border-box;}
.blog-list ul li .pic{width:100%;display:block;position:relative;}
.blog-list ul li .pic img{width:100%;}
.blog-list ul li .pic span{position:absolute;z-index:20;top:10px;left:10px;width:62px;height:62px;box-sizing:border-box;padding:7px 0 0;text-align:center;background:rgba(1,150,31,0.7);color:#fff;font-size:15px;display:block;font-weight:300;}
.blog-list ul li .pic span em{font-size:24px;font-weight:600;line-height:1;display:block;}
.blog-list ul li .pic span em::after{content:"";width:50px;height:1px;background:rgba(255,255,255,0.4);display:block;margin:3px auto 0;}
.blog-list ul li .t{border-bottom:1px solid #B5B5B5;padding:20px 0 25px;position:relative;}
.blog-list ul li .t::after{content:"";height:3px;background:var(--active-color,#F6A42A);position:absolute;left:0;width:0;bottom:-2px;transition:all 0.3s ease 0s;}
.blog-list ul li .t h5{font-size:22px;line-height:1;color:#010101;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.blog-list ul li .t h5 a:hover{color:var(--active-color,#666);}
.blog-list ul li .t span{font-size:15px;margin:15px 0 0;color:#7e7e7e;display:block;}
.blog-list ul li .t p{font-size:17px;margin:10px 0 0;color:#7e7e7e;line-height:22px;height:44px;overflow:hidden;}
.blog-list ul li .t .more{font-size:16px;color:var(--active-color,#666);margin:15px 0 0;display:inline-block;}

@media screen and (min-width:768px){
    .blog-list ul li:hover .t::after{width:100%;}
}

@media screen and (max-width:768px){
    .blog-list ul{margin:0 -10px;}
    .blog-list ul li{width:100%;padding:10px;}
    .blog-list ul li .t .more{display:none;}
}



.blog-nr{width:1200px;margin:0 auto;}
/* Blog detail pages (uniquely marked by body[data-target="#affixMenu"]) use a wide
   two-column layout: the article (title + meta + hero + body) fills the big left
   column, and the right sidebar (TOC + related) is a full-height column on the far
   right that starts beside the title (the render step moves the title/hero into the
   left column so .blog-content is the top-level flex row). Desktop only — other
   pages that use .wp are untouched, and ≤768px stays single-column. */
@media screen and (min-width:769px){
  body[data-target="#affixMenu"] .wp.main{width:94%;max-width:1680px;margin-left:auto;margin-right:auto;box-sizing:border-box;}
  body[data-target="#affixMenu"] .blog-nr{width:100%;max-width:none;}
}
.blog-nr h1{font-size:36px;line-height:1.2;margin:20px 0 0;font-weight:700;color:#333;text-align:center;text-transform:capitalize;}
.blog-nr .tips{padding:0 0 20px;border-bottom:1px solid #D9D9D9;text-align:center;margin:35px 0 0;position:relative;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;align-items:center;}
.blog-nr .tips span{margin-right:0;line-height:20px;display:inline-block;font-size:15px;color:#666;}
/* Share buttons pinned to the right of the meta row, so the date sits centred
   under the (centred) title instead of being stretched to the far left by the
   old space-between layout. */
.blog-nr .tips .blog-share{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.blog-nr .artInfo span.time{background:url(../images/time.png) no-repeat left center;padding:0 0 0 20px;}
.blog-nr .artInfo span.hit{background:url(../images/hit.png) no-repeat left center;padding:0 0 0 23px;}

.blog-top{margin:50px 0 0;}
.blog-top .txt{line-height:24px;font-size:17px; word-break: break-all;}
.blog-top .txt p~p{margin-top:10px;}

.blog-content{margin:50px 0 0;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;position:relative;}
.blog-content-left{-webkit-flex:1;flex:1;margin-right:48px;overflow:hidden;}
.blog-content-scroll{position:relative;}

.blog-content .text-box{line-height:28px;font-size:17px;color:#666;word-break: break-all;}
.blog-content .text-box h2{padding-top:15px;font-size:24px;color:#333;line-height:1.2;text-align:left;font-weight:bold;}
.blog-content .text-box h3{padding-top:10px;line-height: 1.2;font-size:22px; color:#000;font-weight: bold;}
.blog-content .text-box p{margin-bottom:10px;    word-break: break-word;}
.blog-content .text-box h5{font-size:22px;color:#333;line-height:1.2;font-weight:bold;margin-bottom:10px;}
/* TOC anchor offset. The TOC click handler scrolls the page to heading.offset().top,
   which tucks the heading under the fixed site header. Shifting each target heading's
   border-box up by ~100px (padding-top + an equal-ish negative margin-top) moves the
   point offset().top reports without changing the visual flow, so the scroll lands
   with the heading clear of the header. Also covers native #hash / :target jumps. */
.blog-content .text-box h2[id],
.blog-content .text-box h3[id]{padding-top:100px;margin-top:-85px;}

.inkey{font-weight:bold;}
.inkey:hover{font-weight:bold; color:#0CF;}

.blog-pnbar{margin-top:40px;}
.blog-pnbar p{max-width:100%;margin:-1px 0 0 0;padding:10px 14px;border:1px solid #ddd;font-size:18px;color:#545454;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.blog-pnbar p:hover a{color:var(--active-color,#3E3F80);}

.blog-content-right{width:288px;position:-webkit-sticky;position:sticky;top:100px;align-self:flex-start;}
.blog-content-nav{border:1px solid #9C8D7C;}
.blog-content-nav h4{padding:14px 18px;font-size:17px;color:#333;font-weight:bold;border-bottom:1px solid #9C8D7C;position:relative;cursor:pointer;}
.blog-content-nav h4::after{display:block;font-family:"qico";content:"\e699";position:absolute;top:calc(50% - 20px);right:10px;width:40px;height:40px;line-height:40px;text-align:center;font-size:20px;-webkit-transition: -webkit-transform .3s ease;transition: -webkit-transform .3s ease;transition: transform .3s ease;transition: transform .3s ease, -webkit-transform .3s ease;transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);}
.blog-content-nav h4.close::after{transform:rotate(0);-webkit-transform:rotate(0);-ms-transform:rotate(0);}
/* The parent .blog-content-right is already position:sticky, so the whole
   sidebar (TOC + related) pins as one unit. Bootstrap's affix on #affixMenu is
   redundant and, at the bottom boundary, sets the TOC to position:absolute and
   pulls it out of flow — which let the related block slide up under it and
   overlap. Neutralise every affix state to static (!important beats the inline
   top affix.js writes) so the sticky parent fully governs the column. */
.blog-content-right .affix,
.blog-content-right .affix-top,
.blog-content-right .affix-bottom{position:static !important;top:auto !important;width:auto !important;}
.blog-nav{padding:14px 18px;}
.blog-nav > li{counter-increment:item;font-size:15px;color:#333;margin-bottom:9px;}
.blog-nav > li a{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;font-size:15px;line-height:20px;}
.blog-nav > li a::before{content:counters(item,".") ". ";font-size:16px;color:#333;margin-right:8px;}
.blog-nav > li > ul{counter-reset:item;margin:8px 0 0 16px;}
.blog-nav > li > ul > li{counter-increment:item;margin-top:8px;}
.blog-nav li.active > a{color:var(--active-color,#3E3F80);}

/* Related articles: a second boxed section under the TOC, styled to match it. */
.blog-content-related{border:1px solid #9C8D7C;margin-top:20px;}
.blog-content-related h4{padding:14px 18px;font-size:17px;color:#333;font-weight:bold;border-bottom:1px solid #9C8D7C;}
.blog-content-related ul{padding:14px 18px;list-style:none;margin:0;}
.blog-content-related li{margin-bottom:10px;line-height:20px;}
.blog-content-related li:last-child{margin-bottom:0;}
.blog-content-related li a{font-size:15px;color:#333;display:block;transition:color .2s ease;}
.blog-content-related li a:hover{color:var(--active-color,#3E3F80);}


/*---------news-----------*/

.newslist{}
.newslist ul li{margin:0 0 20px;padding:15px;transition:all 0.3s ease 0s;box-sizing:border-box;box-shadow:0 0 5px rgba(0,0,0,0.2);display:-webkit-flex;display:flex;}
.newslist ul li .pic{width:380px;display:block;overflow:hidden;}
.newslist ul li .pic img{width:100%;transition:all 0.3s ease 0s;}
.newslist ul li .t{-webkit-flex:1;flex:1;margin:0 0 0 40px;}
.newslist ul li .t h5{font-size:22px;text-transform:capitalize;font-weight:700;}
.newslist ul li .t h5 a{color:#333;}
.newslist ul li .t h5 a:hover{color:var(--active-color,#3E3F80);}
.newslist ul li .t > span{background:url("../images/time.png") no-repeat left center;padding:0 0 0 20px;display:block;font-size:14px;color:#777;margin:15px 0 0;}
.newslist ul li .t p{color:#666;font-size:17px;height:48px;overflow:hidden;margin:15px 0 0;line-height:24px;}

.newslist ul li .pic:hover img{transform:scale(1.08);-webkit-transform:scale(1.08);}

.newslist ul li h1 {font-size: 24px;font-weight: 500;}
.newslist ul li h2 {font-size: 18px;}
.newslist ul li .more {border: 1px solid #ccc;padding: 10px;border-radius: 11px;display: inline-block;margin-top: 10px;}


@media screen and (max-width:768px){
	
.blog-nr{width:100%;padding-right:10px;box-sizing:border-box;padding-left:10px;}

.blog-nr h1{font-size:30px;}

.blog-content{margin:30px 0 0;-webkit-flex-direction:column;flex-direction:column;}
.blog-content-left{width:100%;-webkit-flex:none;flex:none;margin-right:0;}
.blog-content-right{width:100%;}

.blog-content-nav{display:none;}


}


@media screen and (max-width:480px){

.blog-nr h1{font-size:24px;}


}