.blog-detail-page{max-width:1280px;padding-top:48px;padding-left:16px;padding-right:16px;padding-bottom:32px;margin:0 auto}.blog-detail-header{padding:8px 128px 32px}.blog-breadcrumb{display:flex;align-items:center;gap:4px;padding:4px;margin:0 0 16px;list-style:none;& li{color:#46506a;font-size:12px;line-height:16px;white-space:nowrap}& li.active{color:#46506a}& a{color:#46506a}& a:hover{color:#081131}& img{width:4px;height:6px;transform:rotate(180deg)}}.blog-hero{display:flex;align-items:center;gap:48px}.blog-hero-content{flex:1 1 0%;max-width:380px}.blog-hero-content h1{color:#0a0a0a;font-size:36px;font-weight:700;line-height:54px;margin:0 0 8px}.blog-hero-meta{display:flex;align-items:center;gap:8px;& img{width:16px;height:16px}& span{color:#46506a;font-size:12px;line-height:16px}}.blog-hero-share{display:flex;align-items:center;gap:8px;padding-top:16px;& span{color:#46506a;font-size:12px;line-height:16px}}.blog-share-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #eaecf0;border-radius:999px;& img{width:16px;height:16px}}.blog-hero-image{flex:1 1 0%;min-width:0;aspect-ratio:1600 / 840;& img{width:100%;height:100%;object-fit:cover}}.blog-detail-body{display:flex;align-items:flex-start;gap:0;padding:40px 128px}.blog-toc,.blog-related{flex-shrink:0;width:220px;position:sticky;top:16px;align-self:flex-start;max-height:calc(100vh - 32px);overflow-y:auto}.blog-toc-title,.blog-related-title{color:#081131;font-size:16px;font-weight:500;line-height:24px;padding:8px 0;margin:0}.blog-toc ul{list-style:none;margin:0;padding:0}.blog-toc li{padding:8px 0}.blog-toc a{color:#46506a;font-size:14px;line-height:20px}.blog-toc a:hover{color:#6980e2}.blog-related ul{list-style:none;margin:0;padding:0}.blog-related li{padding:8px 0;border-bottom:1px solid #eaecf0}.blog-related li:last-child{border-bottom:none}.blog-related a{color:#46506a;font-size:14px;line-height:20px}.blog-related a:hover{color:#081131}.blog-content{flex:0 1 552px;width:552px;min-width:0;padding:0 20px;color:#46506a;font-size:16px;line-height:24px;& p{margin:0 0 12px}& h2{color:#081131;font-size:24px;font-weight:700;line-height:32px;margin:32px 0 16px}& h3{color:#081131;font-size:20px;font-weight:700;line-height:28px;margin:24px 0 12px}& img{max-width:100%;height:auto;border-radius:12px}& ul,& ol{margin:0 0 12px;padding-left:20px}}@media screen and (max-width:1024px){.blog-detail-header{padding:8px 24px 32px}.blog-detail-body{flex-direction:column;padding:24px}.blog-toc,.blog-related{width:100%;position:static;max-height:none;overflow-y:visible}.blog-content{width:100%;padding:24px 0;order:-1}}@media screen and (max-width:768px){.blog-hero{flex-direction:column;align-items:stretch}.blog-hero-content{max-width:100%}.blog-detail-header{padding:8px 16px 24px}.blog-detail-body{padding:24px 16px}}