@charset "UTF-8";

/*格式化*/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td, span, input, textarea {
margin: 0;
padding: 0;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}

body {
font-size: 14px;
font-family: "微软雅黑", "Arial", Verdana, Arial, Helvetica, sans-serif;
background: #fff;
color: #333
}

li, ol {
list-style: none;
}

ins {
text-decoration: none;
}

i, em {
font-style: normal;
}

a {
text-decoration: none;
font-family: "微软雅黑";
}

a:hover {
cursor: pointer;
text-decoration: none;
}

:focus {
outline: 0;
}

img {
padding: 0;
margin: 0;
}

a img {
border: none;
}

input, textarea {
border: none;
font-family: "微软雅黑";
font-size: 13px;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 14px;
font-family: "微软雅黑";
}


body {
max-width: 42%;
margin: 0 auto;
background: #44444412;
}

*, div, a, img {
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
.header {background: white;border-bottom: 1px solid #e5e7eb;position: sticky;top: 0;z-index: 1;}
.container {
padding: 10px 10px 5px;
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
/* height: 70px; */
}

.logo {
font-size: 1.4rem;
font-weight: 700;
background: linear-gradient(135deg, #7c3aed, #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.mobile-menu-btn {
display: block;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #6b7280;
margin-top: -10px;
}

.nav-menu {
display: none;
position: fixed;
top: 70px;
left: 0;
right: 0;
background: white;
flex-direction: column;
/*padding: 10px;*/
gap: 5px;
transform: translateY(-100%);
opacity: 0;
transition: all 0.3s ease;
}

.nav-menu.active {
display: flex;
transform: translateY(0);
opacity: 1;
width:42%;
margin-left: auto;
margin-right: auto;
}

.nav-link {
text-decoration: none;
color: #6b7280;
font-weight: 500;
padding: 12px 16px;
border-radius: 8px;
transition: all 0.3s ease;
display: block;
}

.nav-link:hover,
.nav-link.active {
color: #7c3aed;
background: rgba(124, 58, 237, 0.05);
}

.article-header {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.article-header {
background: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
}

.article-title {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937;
margin-bottom: 10px;
line-height: 1.2;
}

.meta-info {
/* display: flex; */
flex-wrap: wrap;
gap: 5px;
align-items: center;
padding-bottom: 25px;
border-bottom: 1px solid #e5e7eb;
width: 100%;
}

.author-section {
display: flex;
align-items: center;
gap: 15px;
}

.author-avatar {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.5rem;
}

.author-details p:first-child {
font-weight: 600;
color: #1f2937;
}

.meta-item {
display: flex;
align-items: center;
gap: 8px;
color: #6b7280;
}

.article-content {
background: white;
border-radius: 16px;
padding: 10px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.article-content img{
width: 100%;
height: auto;
}
.content-section {
margin-bottom: 10px;
font-size: 1.1rem;
}
.miaosu{
padding: 1px;
overflow: hidden;
-o-text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
background: #f3f3f3;
}	
.section-title {
font-size: 1.3rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #e5e7eb;
}

.content-text {
color: #4b5563;
line-height: 1.7;
margin-bottom: 15px;
}

.quote-block {
background: linear-gradient(135deg, #f0f9ff, #fdf2f8);
padding: 5px;
border-radius: 12px;
border-left: 4px solid #8b5cf6;
margin: 5px 0;
font-style: italic;
color: #6b7280;
}

.tags-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 30px 0;
}

.tag {
padding: 6px 16px;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}

.author-bio {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
border-radius: 12px;
padding: 30px;
margin-top: 40px;
border: 1px solid #e2e8f0;
}

.bio-title {
font-size: 1.125rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 15px;
}

.action-buttons {
display: flex;
gap: 15px;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #e5e7eb;
}

.action-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: none;
border-radius: 8px;
background: #f8fafc;
color: #6b7280;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 8px;
font-weight: 500;
}

.action-btn:hover {
background: #e5e7eb;
transform: translateY(-2px);
}

.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.fade-in {
animation: fadeIn 0.8s ease-in;
}
.related-articles {
background: white;
border-radius: 12px;
padding: 10px;
margin-top: 10px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.related-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}

.related-card {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 8px;
}		
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}	
.image-grid{display:flex;gap: 5px;justify-content:center;flex-wrap:wrap;margin-top: 10px;margin-bottom: 10px;}
.grid-item{flex:1;min-width: 20%;width: 100%;height: 100px;border-radius: 5px;overflow:hidden;/* box-shadow:0 6px 20px rgba(0,0,0,0.15); */transition:all 0.3s ease}
.grid-item:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,0.25)}
.grid-image{width: 100%;height: 100%;/* object-fit:cover; */transition:transform 0.3s ease;/* height: 150px; */overflow: hidden;border-radius: 3px 3px 0 0;position: relative;}
.grid-item:hover .grid-image{transform:scale(1.08)}	

.centre_box {
float: left;
width: 720px;
margin: 0 0 0 15px;
}
.crumb {
font-size: 13px;
color: #2c2e3b;
background-color: #fff;
position: relative;
padding: 5px 5px;
margin-bottom: 8px;
margin-top: 8px;
border: 2px solid #eeeeee;
border-radius: 5px;
box-shadow: 0 0 10px -5px rgb(158 158 158 / 22%);
}
.tags-container {
width: 100%;
background: #fff;
box-shadow: 0 0 20px -5px rgb(158 158 158 / 22%);
border-radius: 5px;
padding-top: 5px;
padding-bottom: 30px;
overflow: hidden;
}						
.tag-list {height: auto;overflow: hidden;margin-right: -15px;margin-top: -15px;}
.tag-list .tag-item {
float: left;
width: 30.9%;
margin: 15px 0 0 0;
margin-left: 0;
padding-right: 15px;
}
.tag-list .tag-item a {position: relative;display: block;padding: 0 34px 0 10px;height: 35px;line-height: 37px;font-size: 13px;background: #ffffff;border-radius: 4px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;transition: all .3s;}
.tag-list .tag-item .tag-count {
position: absolute;
right: 16px;
color: #8d8f96;
text-align: right;
} 
.tag-list .tag-item a:hover {
background: #e83630;
color: #fff;
}
/*广告*/
.bd {width: 100%;margin: 0 auto;margin-top: 10px;}

.ban {position: relative;/* z-index: 3; */width: 100%;overflow: hidden;border-radius: 0px;}

.ban img {display: block;width: 100%;transition: all 4s ease;border-radius: 0px;}

.ban .swiper-pagination {
bottom: 10px;
}

.ban .swiper-pagination-bullet {
width: 15px;
opacity: 1;
height: 3px;
margin: 0 3px !important;
background: rgba(255,255,255,0.4);
border-radius: 1px;
}

.ban .swiper-pagination-bullet-active {
border-radius: 1px;
opacity: 1;
background: #fff;
width: 15px
}

.ch_1 {
display: flex;
align-items: center;
border-radius: 10px;
width: 100%;       /* 或者具体宽度 */
}

.ch_1 p img {
width: 52px;
height: auto;
}

.ch_1 div {
padding-left: 5px;
}

.ch_1 div h1 {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
margin-top: -5px;
}

.ch_1 div h2 {
font-size: 14px;
color: #999;
}

.ch_2 {
width: 94%;
margin: 0 auto;
}

.ch_2 img {
display: block;
width: 100%;
height: auto;
border-radius: 10px
}

.ch_3 {
position: fixed;
bottom: 0px;
width: 42%;
height: 68px;
}

.ch_3 ul {
justify-content: space-around;
display: flex;
padding: 5px;
background: #fff;
border-top: 1px solid #f3f3f3;
}

.ch_3 ul li img {
display: block;
width: 40px;
height: auto;
margin: 0 auto
}

.ch_3 ul li span {
display: block;
text-align: center;
font-size: 14px;
}





#new_box {
width: 100%;
margin: 0 auto;
overflow: hidden;
padding-bottom: 0px;
}

.new_con {
width: 100%;
margin: 0 auto;
}

.newtel {
height: 40px;
font-size: 18px;
color: #666;
background: #fff;
border-radius: 5px;
padding: 10px;
margin: 0px 0% 10px 0%;
}

.newtel2 {
height: 40px;
padding-bottom: 5px;
font-size: 18px;
color: #666;
margin: 0.8em auto;
width: 80%;
}

.new_telst {
width: 100%;
margin: 0 auto;
position: relative;
top: 6px;
text-align: center
}

.new_telst2 {
width: 100%;
margin: 0 auto;
position: relative;
top: 6px;
text-align: center
}

.new_telst li {
width: 20%;
text-align: center;
float: left;
display: inline;
cursor: pointer;
height: 40px;
font-size: 15px;
color: #333;
position: relative
}
.new_telst2 li {
width: 30%;
text-align: center;
float: left;
display: inline;
cursor: pointer;
height: 40px;
font-size: 20px;
color: #333;
position: relative
}

.new_telst li.newon {
color: #1a54fa;
font-weight: bold;
position: relative
}
.new_telst2 li.newon {
color: #1a54fa;
font-weight: bold;
position: relative
}
.new_telst li::after {
position: absolute;
content: "";
right: 0;
top: 15%;
background: #eee;
height: 70%;
width: 1px;
}

.new_telst2 li::after {
position: absolute;
content: "";
right: 0;
top: 15%;
background: #eee;
height: 32%;
width: 1px;
}
@media screen and (max-width: 540px) {
.new_telst2 li {
width: 30%;
text-align: center;
float: left;
display: inline;
cursor: pointer;
height: 40px;
font-size: 18px;
color: #333;
position: relative
}
}
@media screen and (max-width: 430px) {
.new_telst2 li {
width: 30%;
text-align: center;
float: left;
display: inline;
cursor: pointer;
height: 40px;
font-size: 16px;
color: #333;
position: relative
}
} 

/*.new_telst li.newon::after{background: #217af0;}
*/ .new_lst {
position: relative;
overflow: hidden;
display: none;
}

.new-wrap {
margin-top: 10px;
}

.new_telst li span {
display: block;
background: #fff;
border-radius: 20px;
color: #999;
font-weight: normal;
font-size: 11px;
width: 62px;
margin: 0 auto;
margin-top: 0px;
padding: 1px 0
}

.new_telst li.newon span {
background: #1a54fa;
color: #fff;
}

.fa {
overflow: hidden;
width: 100%;
margin: 0 auto;
}

.fa li {
box-shadow: 0px 0px 10px #eee;
border-radius: 5px;
background: #fff;
overflow: hidden;
padding: 10px;
margin: 0px 0% 10px 0%;
}

.fa .f1 {
display: flex;
align-items: center;
justify-content: space-between;
}

.fa .f1 .dt {
width: 120px;
height: auto;
}

.fa .f1 .dt img {
display: block;
width: 100%;
height: 110px;
border-radius: 5px
}

.fa .f1 .dd {width: calc(100% - 130px);margin-top: -25px;}

.fa .f1 .dd h1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
font-size: 16px;
color: #333
}

.fa .f1 .dd .b1 {
padding: 8px 0;
display: flex;
}

.fa .f1 .dd .b1 span {
display: inline-block;
border-radius: 80px;
padding: 2px 7px;
background: #fcf5f2;
color: #fa7a4f;
font-size: 12px;
margin-right: 2px
}

.fa .f1 .dd .b1 span:nth-child(3) {
    margin-right: 0
}

.fa .f1 .dd .b1 span.xl {
    background: #ebfefc;
    color: #4bc9be;
}

.fa .f1 .dd .b1 span.yr {
    background: #f1f7ff;
    color: #4598ff;
}

.fa .f1 .dd .b2 span {
display: block;
position: relative;
padding-left: 10px;
color: #999;
font-size: 12px;
margin-bottom: 2px;
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制行数为3 */
-webkit-box-orient: vertical;
overflow: hidden;
}

.fa .f1 .dd .b2 span::after {
content: "";
background: #999;
border-radius: 10px;
width: 5px;
height: 5px;
position: absolute;
top: 7px;
left: 0
}

.fa .f2 {
padding-top: 10px;
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center
}

.fa .f2 .b3 {
color: #999;
width: calc(100% - 100px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.b4 a{
color: #fff;
line-height: 32px;
}
.b4 a:hover{background:#e83630;color:#fff;border-radius: 100px;}

.fa .f2 .b4 {
background: #1a54fa;
color: #fff;
border-radius: 100px;
text-align: center;
line-height: 32px;
width: 90px;
font-size: 13px;
}

.kong_ts img {
display: block;
width: 100px;
height: auto;
margin: 0 auto;
padding-top: 50px
}

.kong_ts span {
display: block;
text-align: center;
width: 100%;
padding-top: 20px;
padding-bottom: 50px
}


.ggtc {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
z-index: 888888;
max-width: 640px;
margin: 0 auto;
display: none;
}

.kefucen {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
z-index: 888888;
max-width: 640px;
margin: 0 auto;
display: none;
}

.dw {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100vh;
}

.yizhengchaxun {
width: 60%;
border-radius: 10px;
background: #fff;
/* padding: 5% 7%; */
position: relative
}

.fw0 {
text-align: center;
font-size: 17px;
font-weight: bold;
padding-bottom: 30px;
padding-top: 5px
}

.fw2 {
padding-bottom: 15px;
}

.fw2 h1 {
position: relative;
font-size: 15px;
padding-left: 15px
}

.fw2 h1::after {
content: "";
position: absolute;
left: 4px;
top: 8px;
background: #666;
width: 7px;
height: 7px;
border-radius: 10px
}

.fw2 h2 {
overflow: hidden
}

.fw2 h2 a {
display: block;
float: left;
text-align: center;
line-height: 26px;
background: #dfe5f9;
color: #5371c8;
border-radius: 6px;
margin-top: 8px;
font-size: 11px;
margin-left: 8px;
padding: 0 12px
}

.fw2 h3 {
overflow: hidden;
font-size: 14px;
color: #666;
line-height: 24px;
margin-top: 8px;
padding-left: 10px
}

.fw2 h2 a:nth-child(1) {
margin-left: 15px;
}

.closebtn img {
padding: 8px;
border-radius: 50px;
background: #f7f7f7;
margin-top: 10px
}

.closebtn {
position: absolute;
top: 0px;
right: 10px
}



.kfimg img {
display: block;
width: 100%;
height: auto
}



.cx_cen {
background-image: -webkit-linear-gradient(left top, #1a54fa,#57cefc);
background-image: -o-linear-gradient(bottom right, #1a54fa,#57cefc);
background-image: -moz-linear-gradient(bottom right, #1a54fa,#57cefc);
background-image: linear-gradient(to bottom right, #1a54fa,#57cefc);
min-height: 100vh;
overflow: hidden;
position: relative;
/*background: url(../images/hq-03.jpg) no-repeat top center;
background-size: 100% 100vh*/
}


.cx_1 {
overflow: hidden;
padding-top: 30px;
}

.cx_1 img {
display: block;
width: 80%;
height: auto;
margin: 0 auto
}


.cx_2 {
overflow: hidden;
width: 85%;
margin: 0 auto
}

.cx_2 input {
display: block;
height: 50px;
border: 0;
width: 86%;
border-radius: 500px;
margin-top: 30px;
padding: 0 7%;
font-size: 15px;
background: #eee
}

.cx_btn {
width: 100%;
font-size: 16px;
background: #1a54fa;
color: #fff;
border-radius: 100px !important;
display: block;
line-height: 50px;
margin-top: 20px;
text-align: center;
font-weight: bold;
}


.cx_text::-webkit-input-placeholder {
color: #999;
font-size: 15px;
}

.cx_text::-moz-placeholder {
color: #999;
font-size: 15px;
}

.cx_text:-ms-input-placeholder {
color: #999;
font-size: 15px;
}

.cx_img {
width: 100%;
overflow: hidden
}

.cx_img img {
display: block;
width: 85%;
height: auto;
padding-top: 20px;
margin: 0 auto
}

.cx_wo {
position: absolute;
left: 9%;
top: 32%;
background: rgba(255,255,255,1);
width: 82%;
border-radius: 10px;
padding-bottom: 50px
}



.view_1 {
width: 100%;
overflow: hidden
}

.view_1 img {
display: block;
width: 100%;
height: auto;
}

.viewcen {
width: 94%;
padding: 0 3%
}

.view_2 {
padding: 22px 0
}

.view_2 h1 {
font-size: 19px;
font-weight: bold;
padding-bottom: 8px
}

.view_2 h2 {
font-size: 14px;
color: #999
}

.view_3 {
margin-top: 10px
}

.view_3_1 {
display: flex;
align-items: flex-end
}

.view_3_1 dl {
display: flex;
align-items: center
}

.view_3_1 dl dt {
color: #ff4c15;
font-size: 15px;
padding-top: 3px
}

.view_3_1 dl dd {
color: #ff4c15;
font-size: 27px;
display: flex;
align-items: flex-end;
font-weight: bold;
padding-left: 6px
}

.view_3_1 dl dd span {
font-size: 15px;
font-weight: normal;
padding-bottom: 3px;
padding-left: 3px
}

.view_3_1 .bg {
margin-left: 8px;
margin-bottom: 3px
}

.view_3_1 .bg {
color: #999;
font-size: 15px;
}

.view_3_1 .bg span {
color: #999;
font-size: 15px;
margin-left: 3px;
text-decoration: line-through
}

.view_3_2 {
color: #ff4c15;
font-size: 14px
}

.view_4 {
background: url(../images/bg.jpg) no-repeat center center;
background-size: 100%;
color: #966417;
text-align: center;
padding: 7px 0;
margin-top: 10px
}

.view_5 {
border: 1px solid #f1dfa3;
border-radius: 5px
}

.view_5_tit {
display: flex;
background: #fcf8eb;
border-radius: 5px 5px 0 0;
border-bottom: 1px solid #f1dfa3
}

.view_5_tit span {
display: block;
width: 33.3333333%;
text-align: center;
padding: 8px 0;
color: #966417
}

.view_5_cen {
display: flex;
background: #fcf8eb;
border-radius: 0 0 5px 5px;
}

.view_5_cen span {
display: block;
width: 33.3333333%;
text-align: center;
padding: 8px 0;
color: #966417
}

.view_5_tit span:nth-child(2) {
border-left: 1px solid #f1dfa3
}

.view_5_tit span:nth-child(3) {
border-left: 1px solid #f1dfa3
}

.view_5_cen span:nth-child(2) {
border-left: 1px solid #f1dfa3
}

.view_5_cen span:nth-child(3) {
border-left: 1px solid #f1dfa3
}

.view_6 {
display: flex;
justify-content: space-between;
padding-top: 20px
}

.view_6 li {
width: 48%;
border-radius: 5px;
background: #f7f7f7;
padding: 10px 0;
text-align: center;
}

.view_6 li:nth-child(1) span {
background: url(../images/1.png) no-repeat left center;
background-size: 21px;
padding: 8px 0 8px 35px
}

.view_6 li:nth-child(2) span {
background: url(../images/2.png) no-repeat left center;
background-size: 21px;
padding: 8px 0 8px 35px
}

.view_7 {
font-weight: bold;
font-size: 16px;
position: relative;
padding-left: 15px;
margin: 25px 0
}

.view_7::after {
position: absolute;
content: "";
left: 0;
top: 4px;
width: 3px;
height: 16px;
background: #1a54fa;
border-radius: 2px
}

.view_8 {
width: 100%;
overflow: hidden;
padding-bottom: 65px
}

.view_8 .view_text img {
max-width: 100%;
height: auto
}

.view_kong {
color: #999;
padding: 0px 0 30px 15px
}

.view_bottom {
position: fixed;
bottom: 0;
background: #fff;
padding: 9px 3%;
width: 94%;
box-shadow: 0px 2px 8px #ccc;
max-width: calc(640px - 6%);
}

.view_bottom dl {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between
}

.view_bottom dl dt {
display: flex;
justify-content: space-around;
width: 42%
}

.view_bottom dl dt img {
display: block;
width: 19px;
height: auto;
margin: 0 auto
}

.view_bottom dl dt span {
display: block;
text-align: center;
font-size: 11px
}

.view_bottom dl dd {
width: 56%;
border-radius: 100px;
color: #fff;
background: #1a54fa;
text-align: center;
line-height: 43px;
font-size: 15px;
background-image: -webkit-linear-gradient(left top, #1a54fa,#4850f7);
background-image: -o-linear-gradient(bottom right, #1a54fa,#4850f7);
background-image: -moz-linear-gradient(bottom right, #1a54fa,#4850f7);
background-image: linear-gradient(to bottom right, #1a54fa,#4850f7);
}


 /* 核心容器：宽度为浏览器的42%，最大宽度可根据需求调整 */
        .blog-wrapper {
            min-width: 300px; /* 防止容器过窄导致卡片变形 */
            padding: 10px;
            background-color: #fff;
        }

        /* 卡片容器 - 在42%宽度的容器内实现3列布局 */
        .blog-card-container {
            display: grid;
            /* 3列等宽，列间距1rem（可根据需求调整） */
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            margin: 0 auto;
        }

        /* 博客卡片样式 */
        .blog-card {
            background-color: #ffffff;
            border-radius: 2px; /* 适配窄容器，适当缩小圆角 */
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        /* 卡片悬停效果 */
        .blog-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }

        /* 卡片图片容器 - 适配窄卡片的比例 */
        .blog-card__image {
            width: 100%;
            height: 140px; /* 根据42%容器宽度调整图片高度，保证比例协调 */
            overflow: hidden;
        }

        /* 卡片图片 */
        .blog-card__image img {
            width: 100%;
            height: 100%;
            /* object-fit: cover; */
            transition: transform 0.5s ease;
        }

        /* 悬停时图片缩放 */
        .blog-card:hover .blog-card__image img {
            transform: scale(1.05);
        }

        /* 卡片内容区域 - 适配窄卡片的内边距 */
        .blog-card__content {
            padding: 0.3rem;
        }

        /* 博客分类标签 - 缩小尺寸适配窄卡片 */
        .blog-card__tag {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 600;
            color: #0041fc;
            background-color: #e8f4f8;
            padding: 0.2rem 0.5rem;
            border-radius: 16px;
            margin-bottom: 0.2rem;
        }

        /* 博客标题 - 缩小字体适配窄卡片 */
        .blog-card__title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 0.2rem;
            line-height: 1.4;
            /* 标题超出1行省略 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 博客摘要 - 适配窄卡片的文本展示 */
        .blog-card__excerpt {
            font-size: 0.75rem;
            color: #718096;
            margin-bottom: 0.2rem;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 窄卡片下限制2行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 作者信息栏 - 简化布局适配窄卡片 */
        .blog-card__author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding-top: 0.6rem;
            border-top: 1px solid #f0f0f0;
        }

        /* 作者头像 - 缩小尺寸 */
        .author__avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            overflow: hidden;
        }

        .author__avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 作者信息 - 缩小字体 */
        .author__info {
            flex: 1;
        }

        .author__name {
            font-size: 0.75rem;
            font-weight: 600;
            color: #2d3748;
        }

        .author__date {
            font-size: 0.65rem;
            color: #a0aec0;
        }

        /* 响应式调整：根据容器和屏幕宽度适配 */
        /* 当屏幕宽度小于900px时，42%容器内改为2列 */
        @media (max-width: 900px) {
            .blog-card-container {
                grid-template-columns: repeat(2, 1fr);
            }

            .blog-card__image {
                height: 120px;
            }
        }

        /* 当屏幕宽度小于600px时，42%容器内改为1列 */
        @media (max-width: 600px) {
            .blog-card-container {
                grid-template-columns: repeat(2, 1fr);
            }

            .blog-card__image {
                height: 120px;
            }

            .blog-card__title {
                font-size: 1rem;
                white-space: normal; /* 小屏下标题恢复多行 */
            }
        }

        /* 可选：当容器宽度过窄时，强制调整内边距 */
        @media (max-width: 400px) {
            .blog-wrapper {
                width: 100%; /* 小屏下让容器占满屏幕，提升体验 */
                padding: 0px;
            }

            .blog-card__content {
                padding: 0.2rem;
            }
        }

.goto-1 {
text-align: center;
font-weight: 700;
color: #ffffff;
background: #1a54fa;
border-radius: 2px;
padding-top: 4px;
padding-bottom: 5px;
cursor: pointer;
display: inline-block;
width: 100%;
/* box-shadow: 0 0 15px #e0e0e0; */
}
.goto-1 a {
color: #ffffff;
}
.goto-1:hover {
background: #e83630;
color: #fff;
}
.leibiao.list {list-style: none;background: #fff;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);max-width: 1000px;margin: 0 auto;}
.leibiao.item {display: flex;padding: 10px 5px 10px;border-bottom: 1px solid #c1c1c1;transition: all 0.3s ease;position: relative;overflow: hidden;}
.leibiao.item:last-child { border-bottom: none; }
.leibiao.item:hover { background: #f8fafc; transform: translateX(4px); }
.leibiao.item::before {content: '';position: absolute;left: 0;top: 0;height: 100%;width: 2px;background: linear-gradient(135deg, #4a80f0, #8b5cf6);opacity: 0;transition: opacity 0.3s ease;}
.leibiao.item:hover::before { opacity: 1; }
.leibiao.img {width: 140px;height: 110px;border-radius: 8px;margin-right: clamp(0.5rem, 1vw, 0.2rem);flex-shrink: 0;}
.leibiao.c { flex: 1; min-width: 0; }
.leibiao.t { font-size: clamp(1rem, 2vw, 1.2rem); color: #1e293b; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.leibiao.meta {display: flex;align-items: center;gap: clamp(0.5rem, 1vw, 1rem);margin-top: 24px;}
.leibiao.author {font-size: 0.875rem;color: #64748b;display: flex;align-items: center;}
.leibiao.author::before {content: '👤';/* margin-right: 4px; */font-size: 0.9rem;}
.leibiao.date { font-size: 0.875rem; color: #94a3b8; display: flex; align-items: center; }
.leibiao.date::before { content: '🗓️'; margin-right: 4px; font-size: 0.9rem; }
.leibiao.interact {font-size: 0.875rem;color: #94a3b8;/* display: flex; *//* align-items: center; *//* gap: 4px; */}
.leibiao.interact::before {content: '💬';/* margin-right: 4px; */font-size: 0.9rem;}
.leibiao.miaosu {font-size: 0.85rem;color: #94a3b8;padding: 1px;overflow: hidden;-o-text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;background: #ffffff00;}



.lingqu {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.7);
position: fixed;
bottom: 0;
z-index: 888888;
max-width: 640px;
margin: 0 auto;
display: none;
}

.lingqu_cen {
background: #fff;
position: absolute;
bottom: 0;
width: 90%;
border-radius: 10px 10px 0 0;
padding: 20px 5% 10px;
}

.lqgrxx h1 {
text-align: center;
font-size: 19px;
font-weight: bold;
}

.lqgrxx11 h2 {
font-size: 16px;
font-weight: bold;
position: relative;
padding: 0 12px;
margin-top: 20px
}

.lqgrxx11 h2::after {
position: absolute;
content: "";
left: 0;
top: 4px;
width: 3px;
height: 13px;
background: #1a54fa;
border-radius: 2px
}

.lqgrxx11 h3 {
font-size: 12px;
padding-bottom: 10px;
color: #1a54fa;
padding-top: 4px;
margin-left: 13px;
}

.lqgrxx11 dl {
display: flex;
align-items: center;
border-bottom: 1px solid #f7f7f7;
padding-bottom: 10px;
margin-bottom: 10px;
width: 100%
}

.lqgrxx11 dl span {
display: block;
width: 70px;
font-size: 15px;
}

.lqgrxx11 dl input {
width: calc(100% - 70px);
padding-left: 8px;
font-size: 15px;
}

.c1 {
margin-bottom: 10px
}

.t1 {
background: url(../images/jt.png) no-repeat right 1px;
background-size: 18px;
}

.t1 input {
width: calc(100% - 100px) !important;
}

.lqgrxx11 dl input::placeholder {
color: #ccc;
font-size: 15px;
}

.holder textarea::placeholder {
color: #ccc;
font-size: 13px;
}

.tcbtn a {
width: 100%;
border-radius: 100px;
color: #fff;
background: #1a54fa;
text-align: center;
line-height: 43px;
font-size: 15px;
background-image: -webkit-linear-gradient(left top, #1a54fa,#4850f7);
background-image: -o-linear-gradient(bottom right, #1a54fa,#4850f7);
background-image: -moz-linear-gradient(bottom right, #1a54fa,#4850f7);
background-image: linear-gradient(to bottom right, #1a54fa,#4850f7);
display: block;
margin-top: 20px;
margin-bottom: 15px;
box-shadow: 0px 2px 6px #1a54fa;
}




.fenxiang {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.7);
position: fixed;
bottom: 0;
z-index: 888888;
max-width: 640px;
margin: 0 auto;
display: none;
}

.fenxiang .fx {
display: flex;
justify-content: center;
flex-direction: column;
height: 100vh;
align-items: center
}

.fenxiang_cen {
background: #fff;
width: 83%;
border-radius: 10px;
padding: 10px 0;
position: relative
}


.fx_img {
width: 92%;
padding: 0 4%;
margin-top: 5px
}

.fx_img img {
display: block;
width: 100%;
height: auto
}

.fx_e {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 4%
}

.fx_e dt {
width: 36%;
background: url(../images/ewm_bg.png) no-repeat center center;
background-size: 100%;
padding: 3%
}

.fx_e dd {
width: 52%;
font-size: 16px;
}

.fx_e dt img {
display: block;
width: 100%;
height: auto
}

.fx_e dd span {
display: block;
font-size: 12px;
color: #999;
padding-top: 7px
}


.fenxiang_cen .closebtn img {
width: 13px;
height: 13px;
display: block;
}

.fx_btn1 {
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
margin: 0 auto;
padding-bottom: 16px
}

.fx_btn1 a {
display: block;
width: 44%;
line-height: 38px;
text-align: center;
font-size: 15px;
border-radius: 60px;
}

.fx_btn1 a.w1 {
color: #1a54fa;
background: #fff;
border: 1px solid #1a54fa
}

.fx_btn1 a.w2 {
color: #fff;
background: #1a54fa;
border: 1px solid #1a54fa
}




.haoma {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.7);
position: fixed;
bottom: 0;
z-index: 888888;
max-width: 640px;
margin: 0 auto;
display: none;
}

.haoma .fx {
display: flex;
justify-content: center;
flex-direction: column;
height: 100vh;
align-items: center
}

.haoma_cen {
background: #fff;
width: 83%;
border-radius: 10px;
padding: 30px 0;
position: relative
}

.haoma_cen h1 {
text-align: center;
font-size: 18px;
font-weight: bold;
}

.haoma_cen ul {
display: flex;
flex-wrap: wrap;
width: 85%;
margin: 0 auto;
justify-content: space-between;
padding: 15px 0 15px
}

.haoma_cen ul a {
display: block;
width: 47%;
text-align: center;
border: 1px solid #ccc;
border-radius: 50px;
color: #000;
padding: 8px 0;
margin-top: 14px;
font-family: "arial";
font-size: 16px;

}

.haoma_cen ul a.on {
color: #fff;
background: #1a54fa;
border: 1px solid #1a54fa
}
.haoma_cen ul a i{color: red}

.d_xz{display: flex;justify-content: space-between;width: 85%;margin: 0 auto;border: 1px solid #ccc;border-radius: 30px;background: #f7f7f7;margin-top: 30px}
.d_xz input{width: 65%;display: block;height: 40px;padding: 0 5%;border: 0;border-radius: 30px;background: none}
.d_xz a{display: block;width: 25%;color: #fff;text-align: center;line-height: 40px;font-size: 15px;border-radius: 30px;
background: linear-gradient(225deg, #1a54fa 0%, #1a54fa 54%, #45C2FF 100%);
}
.xzbtn a {
display: block;
text-align: center;
color: #fff;
line-height: 48px;
border-radius: 50px;
width: 85%;
margin: 0 auto;
margin-top: 22px;
background: #1a54fa;
box-shadow: 0px 2px 6px #1a54fa;
margin-bottom: 10px;
font-size: 16.5px
}


.shuax {
text-align: center;
margin: 5px 0 10px
}

.shuax span {
background: url(../images/3.png) no-repeat left center;
background-size: 18px;
padding-left: 22px;
color: #999;
font-size: 13px;
}


.dianpu_cen {
width: 100%;
min-height: 100vh;
overflow-y: auto;
background: url(../images/dianpu_bg.jpg) no-repeat bottom center;
background-size: 100% 100%;
object-fit: cover;
padding-bottom: 20px
}
.dianpu_cen2 {
width: 100%;
min-height: 100vh;
overflow-y: auto;
background-size: 100% 100%;
object-fit: cover;
}
.dianpu_bg {
width: 94%;
margin: 0 auto;
}

.dianpu_text img {
display: block;
width: 90%;
height: auto;
margin:0 auto;
}

.dianpu_name {
background: rgba(255,255,255,0.2);
border-radius: 10px; /*box-shadow: 0px 2px 12px #cfe1fc;*/
margin: 8px 0 12px;
}


.dianpu_ewm {
width: 100%;
overflow: hidden;
position: relative;
padding-top: 10px;
}

.dianpu_ewm dl {
background: rgba(255,255,255,0.3);
border-radius: 10px; /*box-shadow: 0px 2px 6px #9fb5f9;*/
margin: 10px 0 20px;
padding: 18px 5% 18px;
display: flex;
align-items: center;
justify-content: space-between
}

.dianpu_ewm dl dt {
width: 34%;
background: #fff;
padding: 6px
}

.dianpu_ewm dl dt img {
display: block;
width: 100%;
height: auto
}

.dianpu_ewm dl dd {
width: 56%;
font-size: 16px;
color: #142456;
font-weight: bold;
line-height: 25px
}

.dianpu_ewm h1 {
position: absolute;
top: 0;
width: 80%;
border-radius: 50px;
text-align: center;
padding: 12px 0;
background: #1a54fa;
color: #fff;
font-size: 16px;
left: 10%;
box-shadow: 0px 2px 6px #809dfb
}


.dianpu_name .ch_1 dd h1 {
color: #142456
}

.scbtn {
display: flex;
align-items: center;
justify-content: space-between;
width: 80%;
margin: 0 auto; /*position: absolute;bottom: 0px;left: 10%;*/
}

.scbtn a {
display: block;
width: 44%;
line-height: 38px;
text-align: center;
font-size: 15px;
border-radius: 60px;
}

.scbtn a.w1 {
color: #1a54fa;
background: #e9f2f9;
border: 1px solid #1a54fa
}

.scbtn a.w2 {
color: #fff;
background: #1a54fa;
border: 1px solid #1a54fa
}


/*9.30*/

.wjcen {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.5);
position: fixed;
top: 0;
z-index: 888888;
max-width: 640px;
margin: 0 auto;
display: none;
}

.wqq img {
display: block;
width: 100%;
height: auto
}

.wj {
width: 80%;
border-radius: 10px;
background: #1a54fa;
padding: 5% 0;
position: relative
}
.w1 {
text-align: center;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
font-weight: bold
}

.w1 img {
width: 25px;
height: 27px;
margin-left: 5px
}

.w5 {
width: 86%;
margin: 0 auto;
color: #fff;
padding: 20px 0;
line-height: 23px
}

.w5 span {
color: #F3B571
}

.w3 {
width: 86%;
margin: 0 auto;
background: #fff;
border-radius: 100px;
text-align: center;
color: #1a54fa;
font-size: 16px;
line-height: 40px;
margin-bottom: 10px
}
.t2 {
justify-content: space-between
}

.t3 {
}

.t3 img {
display: block;
width: 20px;
height: 20px;
}

.t2 span {
width: 185px !important;
font-size: 15px;
display: flex !important;
align-items: center;
justify-content: space-between
}

.t2 span img {
display: block;
width: 25px;
height: 25px;
}


.zhengjian {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #eee;
padding-top: 10px;
margin-bottom: 10px
}

.zhengjian .z_1 {
width: 45%;
border: 1px solid #ddd;
border-radius: 5px;
height:115px
}

.zhengjian .z_1 img {
display: block;
width: 100%;
height: auto;
border-radius: 5px;
max-height: 115px;
}

.zhengjian .z_2 {
width: 47%
}

.zhengjian .z_2 .uploadbtn a {
display: block;
width: 100px;
line-height: 35px;
border-radius: 50px;
color: #fff;
text-align: center;
background: #1a54fa;
margin: 0 auto;
font-size: 14px
}

input[type="file" i] {
display: none;
}

.zhengjian .z_2 .sctext {
margin-top: 6px;
font-size: 12px;
line-height: 16px;
color: #666
}

.wr {
border: 0;
padding-top: 0
}

.lhlx {
width: 85%;
margin: 0 auto;
margin-top: 15px;
display: flex;
align-items: center;
justify-content: space-between
}

.lhlx dt {
display: flex;
align-items: center
}

.lhlx dd {
border-radius: 8px;
padding: 5px 10px 5px 7px;
background: #f7f7f7
}

.lhlx a {
padding: 5px 12px;
background: #f7f7f7;
color: #1a54fa;
margin-left: 10px;
border-radius: 8px
}

.lhlx label {
padding: 0px 20px 0 0;
background: url(../images/scbtn.png) no-repeat right center;
color: #666;
margin-left: 10px;
background-size: 17px;
}

.lhlx span { /*background: url(../images/x_jt.png) no-repeat right center;padding-right: 25px;background-size: 16px;font-size: 13.5px;display: block;*/
}

.leixing {
display: flex;
flex-wrap: wrap;
margin-top: 11px
}

.leixing .leixing_li {
width: 23.5%;
background: #f2f2f2;
text-align: center;
padding: 5px 0;
font-size: 14px;
border-radius: 100px;
margin-right: 2%;
margin-bottom: 2%
}

.leixing .leixing_li:nth-child(4n+1) {
margin-right: 0
}

.leixing .leixing_li.on {
background: #1a54fa;
color: #fff
}

.lhlx_cen {
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.7);
position: fixed;
bottom: 0;
z-index: 888888;
max-width: 640px;
margin: 0 auto;
display: none;
}

.lhlx_cen .lx {
position: absolute;
bottom: 0;
background: #fff;
padding: 30px 7%;
border-radius: 8px 8px 0 0
}

.lhlx_cen .lx h1 {
font-size: 17px;
font-weight: bold;
text-align: center;
margin-bottom: 35px
}

.haoma_cen ul {
padding: 10px 0 15px
}

.np {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0 auto;
margin-top: 20px
}

.np a {
display: block;
width: 45%;
border-radius: 100px;
text-align: center;
padding: 10px 0;
font-size: 15px
}

.np_b1 {
border: 1px solid #1a54fa
}

.np_b2 {
border: 1px solid #1a54fa;
color: #fff;
background: #1a54fa
}
.simple-footer {
background: #1e293b;
color: #cbd5e1;
padding: 1rem 1rem;
text-align: center;
border-top: 3px solid #4f46e5;
margin-top: auto;
margin-bottom: 60px;
}

.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
}

.footer-links {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
}

.footer-links a {
color: #cbd5e1;
text-decoration: none;
transition: color 0.3s ease;
}

.footer-links a:hover {
color: #4f46e5;
}

/* 返回顶部按钮 */
.back-to-top {position: fixed;bottom: 2rem;right: 0.2rem;width: 50px;height: 50px;background: url(/weapp/Contact/template/skin/images/totop-icon.png) no-repeat center center;color: white;border: none;border-radius: 50%;cursor: pointer;/* opacity: 0; */visibility: hidden;transition: all 0.3s ease;box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);z-index: 1000;display: flex;align-items: center;justify-content: center;font-size: 1.25rem;text-decoration: none;}

.back-to-top.visible {
opacity: 1;
visibility: visible;
}

.back-to-top:hover {
background: url(/weapp/Contact/template/skin/images/totop-icon.png) no-repeat center center;
transform: translateY(-2px);
}

        /* 复制按钮样式 - 增强视觉效果 */
        .copy-btn {
            padding: 12px 24px;
            background-color: #409eff;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
        }

        .copy-btn:hover {
            background-color: #66b1ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
        }

        .copy-btn:active {
            background-color: #337ecc;
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
        }

        /* 弹窗遮罩层 */
        .modal-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            z-index: 9999;
        }

        /* 分享成功弹窗样式 */
        .success-modal {
            width: 280px;
            background-color: white;
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            transform: scale(0.8);
            transition: transform 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
            /* top: 20px; */
            /* right: 20px; */
        }

        .modal-icon {
            width: 60px;
            height: 60px;
            background-color: #f0f9ff;
            border-radius: 50%;
            margin: 0 auto 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .modal-icon svg {
            width: 30px;
            height: 30px;
            fill: #67c23a;
        }

        .modal-title {
            font-size: 18px;
            color: #333;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .modal-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }

        .modal-close {
            padding: 8px 20px;
            background-color: #409eff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

        .modal-close:hover {
            background-color: #66b1ff;
        }

        /* 弹窗显示状态 */
        .modal-show {
            opacity: 1;
            pointer-events: auto;
            z-index: 999;
        }

        .modal-show .success-modal {
            transform: scale(1);
        }

        /* 原有提示框样式（保留，应对复制失败场景） */
        .tip-box {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            border-radius: 4px;
            color: white;
            font-size: 14px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            z-index: 9999;
        }

        .tip-success {
            background-color: #67c23a;
        }

        .tip-error {
            background-color: #f56c6c;
        }

        .tip-show {
            opacity: 1;
        }
        

@media screen and (max-width: 389px) {
.fa .f1 dd .b1 span:nth-child(3) {
display: none
}

.fa .f1 dd .b1 span {
padding: 2px 9px;
margin-right: 7px
}

.ch_3 ul li img {
width: 48px
}
}
@media screen and (max-width: 768px) {
body {
max-width: 100%;
margin: 0 auto;
background: #44444412;
}
.ch_1 {display: flex;align-items: center;/* padding: 10px 3%; */border-radius: 10px;width: 100%;}
.ch_3 {
width: 100%;
height: 60px;
}

.ch_3 ul li img {
width: 30px;
}
.nav-container {
height: 50px;
}
.nav-menu.active {
width:100%;
margin-top: -10px;
}
.nav-menu.active {
width: 100%;

}
.yizhengchaxun {
width: 90%;
}
.fa .f1 .dd {
    margin-top: -10px;
}
.kfimg img {
width: 100%;
}
.article-title {
font-size: 1.3rem;
}

.meta-info {
gap: 15px;
}
.leibiao.img {
    width: 110px;
    height: 90px;
    border-radius: 8px;
    margin-right: clamp(0.5rem, 1vw, 0.2rem);
    flex-shrink: 0;
}
    .leibiao.meta {
    margin-top: 8px;
}
.container {padding: 10px;}

.article-header,
.article-content {
padding: 8px;
}
.section-title {
font-size: 1.1rem;
}
.author-section {

gap: 8px;
font-size: 0.775rem;
}

.grid-item {
height: 80px;
}
.piclist .li {
width: 48.9%;
margin: 1px 2px 5px;
}
.fa .f1 dd .b2 span {
display: -webkit-box;
-webkit-line-clamp: 3; /* 限制行数为3 */
-webkit-box-orient: vertical;
overflow: hidden;;
}
.tag-list .tag-item {
width: 29.2%;
}

.float-nav.show {
transform: translate(-50%, 0);
opacity: 1;
max-width: 100%;
}
.back-to-top {
    position: fixed;
    bottom: 4rem;
}

}



/* 页面内容样式 */

/* 底部悬浮导航核心样式 */
.float-nav {
position: fixed;
bottom: 0px; /* 离底部留出间距，更美观 */
left: 50%;
transform: translate(-50%, 100%); /* 初始居中且隐藏 */
opacity: 0;
width: 100%; /* 非全屏宽度，更精致 */
max-width: 42%;
background-color: #ffffff;
border-radius: 0px; /* 圆角设计 */
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 更丝滑的动画曲线 */
z-index: 50;
}

/* 导航显示的类 */
.float-nav.show {
transform: translate(-50%, 0);
opacity: 1;
}

.nav-wrapper {
padding: 0rem;
}

.nav-list {
display: flex;
justify-content: space-between; /* 两端对齐，实现免费领取在最右侧 */
align-items: center;
padding: 0rem 0;
list-style: none;
gap: 0.5rem; /* 导航项之间的间距 */
}

/* 导航项样式 */
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
color: #6b7280;
text-decoration: none;
padding: 0.5rem 1rem;
/* border-radius: 12px; */
transition: all 0.2s ease;
cursor: pointer;
flex: 1; /* 平分空间（除突出按钮外） */
max-width: 80px;
}

.nav-item:hover {
transform: translateY(-2px);
background-color: #f3f4f6;
color: #4F46E5;
}

.nav-item.active {
color: #4F46E5;
font-weight: 600;
}

/* 图标样式 */
.nav-icon {
font-size: 1.3rem;
margin-bottom: 0.3rem;
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
}

/* 文字样式 */
.nav-text {
font-size: 0.8rem;
font-weight: 500;
}

/* 突出的免费领取按钮（移至最右侧） */
.nav-item.highlight {
background: linear-gradient(120deg, #4F46E5, #4338ca); /* 渐变背景 */
color: #ffffff;
/* border-radius: 12px; */
padding: 0.8rem 1.2rem;
box-shadow: 0 6px 15px rgba(79, 70, 229, 0.3);
flex: none; /* 不参与平分空间 */
max-width: 120px;
}

.nav-item.highlight:hover {
background: linear-gradient(120deg, #4338ca, #3730a3);
transform: translateY(-2px) scale(1.02); /* 轻微放大效果 */
color: #ffffff;
background-color: transparent;
}

/* 小屏幕适配 */
@media (max-width: 375px) {
.nav-text {
font-size: 0.7rem;
}

.nav-icon {
font-size: 1.1rem;
}

.nav-item.highlight {
padding: 0.7rem 1rem;
max-width: 100px;
}
}

/* 低于600px隐藏 */
@media (max-width: 500px) {
    .blog-card__tag {
        display: none;
    }
}