.toc-pro{
background:radial-gradient(circle at top right,#1b5a0f 0,#03240d 45%,#000 100%);
border-radius:32px;
padding:24px;
position:sticky;
top:100px;
overflow:hidden;
color:#fff;
box-sizing:border-box;
width:100%;
}
.toc-pro:before{
content:'';
position:absolute;
top:-50px;
right:-40px;
width:180px;
height:180px;
border-radius:50%;
background:rgba(154,199,44,.12);
}
.toc-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.toc-head span{width:4px;height:90px;background:#9ac72c;border-radius:20px}
.toc-head small{display:block;color:#9ac72c;font-size:18px;line-height:1}
.toc-head h3{
margin:4px 0 0;
font-size:30px;
font-weight:800;
line-height:1;
color:#fff;
}
.toc-pro ul{list-style:none;padding:0;margin:0}
.toc-pro li{border-top:1px solid rgba(154,199,44,.35);padding:14px 0}
.toc-pro a{display:flex;gap:14px;text-decoration:none;color:#fff}
.toc-pro em{
font-style:normal;
font-size:18px;
font-weight:800;
color:#9ac72c;
min-width:36px;
}
.toc-pro strong{
font-size:18px;
line-height:1.5;
font-weight:600;
color:#fff;
}
.toc-pro a.active strong,
.toc-pro a:hover strong{
color:#fff !important;
font-weight:800;
}
html{scroll-behavior:smooth}

@media (max-width:1024px){
.toc-head h3{font-size:30px}
.toc-pro strong,.toc-pro em{font-size:18px}
}

@media (max-width:768px){
.toc-pro{padding:20px;border-radius:24px;position:relative;top:0}
.toc-head span{height:70px}
.toc-head h3{font-size:30px}
.toc-pro strong,.toc-pro em{font-size:18px}
}

@media (max-width:480px){
.toc-pro{padding:18px}
.toc-head{gap:12px}
.toc-head h3{font-size:30px}
.toc-head small{font-size:16px}
.toc-pro strong,.toc-pro em{font-size:18px}
}


h2[id]{scroll-margin-top:90px!important}.toc-pro a.active strong{font-weight:800!important;color:#fff!important;}