.slist_top_right{font-size:10px;width:700px;float:left;position:relative;display:block;margin:15px 15px 15px 55px;margin-top:20px;}
.str1{width:100%;margin-bottom:40px;display:block;clear:both;}
.str1 .str1-1{font-size:2.1em;margin-bottom:10px;color:#161616;}
.str1 .str1-2 ul{display:flex;flex-wrap:wrap;}
.str1 .str1-2 ul li{width:24%;margin:0.5% 0.3%;font-size:1.8em;height:30px;line-height:30px;padding:0 0px;border-radius:15px;color:#262626;position:relative;}
.str1 .str1-2 ul li a{font-size:1.8em;color:#262626}
.str1 .str1-2 ul li:hover, .str1 .str1-2 ul li a:hover{color:#0048e5;}
.str1-2 ul li::before{
width: 0%;
background: -webkit-gradient(linear, left top, right bottom, from(rgba(0, 72, 229, 1)), to(rgba(0, 48, 153, 1))); background: linear-gradient(to right bottom, rgba(0, 72, 229, 1), rgba(0, 48, 153, 1));
height:1px;
content: "";
position: absolute;
top: 50%;
left: 0%;
transition: all 0.8s; 
}
.str1-2 ul li:hover::before{
left: 0%;
width: 8px; /* 横线展开宽度 */
transform: translateX(-10px);
}
.str1-2 ul li:hover{
    background: -webkit-linear-gradient(#0048e5, #003099);
    background: linear-gradient(135deg,#0048e5, #003099);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
   /* display: inline-block; */
     transform: translateX(10px);
  transition: 0.6s ease; /* 宽度动画 */
}
.str2-2 ul li::before{
width: 0%;
background: -webkit-gradient(linear, left top, right bottom, from(rgba(0, 72, 229, 1)), to(rgba(0, 48, 153, 1))); background: linear-gradient(to right bottom, rgba(0, 72, 229, 1), rgba(0, 48, 153, 1));
height:1px;
content: "";
position: absolute;
top: 50%;

left: 0%;
transition: all 0.8s; 
}
.str2-2 ul li:hover::before{
left: 0%;
width: 8px; /* 横线展开宽度 */
transform: translateX(-10px);
}
.str2-2 ul li:hover{
    background: -webkit-linear-gradient(#0048e5, #003099);
    background: linear-gradient(135deg,#0048e5, #003099);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
   /* display: inline-block; */
     transform: translateX(10px);
  transition: 0.8s ease; /* 宽度动画 */
}
.str2{width:100%;margin-bottom:40px;display:block;clear:both;}
.str2 .str2-1{font-size:2.1em;margin-bottom:10px;color:#161616}
.str2 .str2-2 ul{display:flex;flex-wrap:wrap;}
.str2 .str2-2 ul li{width:24%;margin:0.5% 0.5%;font-size:1.8em;height:30px;line-height:30px;padding:0 0px;border-radius:15px;color:#262626;position:relative;}
.str2 .str2-2 ul li a{font-size:1.8em;color:#262626}
.str2 .str2-2 ul li:hover, .str1 .str1-2 ul li a:hover{color:#0048e5}
.str3{margin:20px 0;}
.str3 a{

background: #125bff;
color:#fff;
font-size:1.6em;
padding:8px 25px;
border-radius: 25px;
  }
  .str3 a:hover{background:#0048e5}
.str4{ display: flex; flex-direction: row;flex-wrap:wrap;margin:40px 0 0 0}
.str4-1{width:31%;margin:1%;}
.str4-2{width:31%;margin:1%;}
.str4-3{width:31%;margin:1%;}
.str4n{font-size:3em;margin-bottom:15px;color:#161616}
.str4n-character{font-size:1.8em;color:#363636}



@media (max-width: 850px) {

.slist_top_right{font-size:10px;width:96%;float:left;position:relative;display:block;margin:40px 2%;}
.str1 .str1-2 ul li{width:48%;margin:0.5% 0.3%;font-size:1.6em;height:30px;line-height:30px;padding:0 0px;border-radius:15px;color:#262626;position:relative;}
.str1 .str1-2 ul li a{font-size:1.6em;color:#262626}
.str2 .str2-2 ul li{width:48%;margin:0.5% 0.3%;font-size:1.6em;height:30px;line-height:30px;padding:0 0px;border-radius:15px;color:#262626;position:relative;}
.str2 .str2-2 ul li a{font-size:1.6em;color:#262626}
.str4n{font-size:2.4em;margin-bottom:15px;color:#161616}
.str4n-character{font-size:1.6em;color:#363636}
}