.pagesbanner .pagesbanner-animate{top:50%}
.pagesbanner .pagesbanner-animate .p1{font-size:46px;font-weight:var(--fontbold6)}
.page-title{text-align:center;font-size:var(--fontsize30);font-weight:var(--fontbold6)}
article{padding-bottom:0}
.page-line{display:flex;justify-content:center;align-items:center;margin-top:6px}
.page-line em{margin-right:10px;display:block;width:6px;height:6px;background:var(--color,#000);border-radius:50%}
.page-line em:last-child{margin-right:0}
.mode1 .tit-list{display:flex;justify-content:center;margin:30px 0}
.mode1 .tit-list li{font-size:var(--fontsize18);font-weight:var(--fontbold6);margin-bottom:10px;height:58px;padding:0 30px;display:inline-flex;align-items:center;justify-content:center;background-color:#fff;border:1px solid #eaf3ff;cursor:pointer;margin:5px 1px;transition:all .1s linear}
.mode1 .tit-list li.act{background-color:var(--color);color:#fff}
.mode1 .item-box{display:none}
.mode1 .item-box.act{display:block}
.mode1 .item{margin-bottom:60px}
.mode1 .item .item-title{font-size:var(--fontsize18);font-weight:var(--fontbold6);color:#444}
.mode1 .item .item-flex{margin-top:20px;display:flex;align-items:center}
.mode1 .item .item-flex .img{width:48%}
.mode1 .item .item-flex .img img{height:470px;width:100%;object-fit:cover}
.mode1 .item .item-flex .info{width:60%;background:#f6f7f8;border:1px solid #eaf3ff;padding:60px;position:relative;z-index:1;padding-bottom:80px;min-height:360px}
.mode1 .item .item-flex .info .p1{font-size:var(--fontsize18);font-weight:var(--fontbold6)}
.mode1 .item .item-flex .info .line{display:block;width:60px;height:2px;background-color:var(--color);margin:14px 0}
.mode1 .item .item-flex .info .txt{color:#444}
.mode1 .item .item-flex .info .txt p span{font-weight:var(--fontbold6)}
.mode1 .item .item-flex .info .btn{display:flex;align-items:center;justify-content:center;position:absolute;background-color:#fff;right:0;bottom:0;width:50%;height:70px;padding:0 10px}
.mode1 .item .item-flex .info .btn .swiper-pagination{position:static;width:50px;margin:0 10px;display:flex;align-items:center;justify-content:center}
.mode1 .item .item-flex .info .btn .dangqian{color:var(--color);margin-right:2px}
.mode1 .item .item-flex .info .btn .zongshu{margin-left:2px}
.mode1 .item .item-flex .info .btn .item-next,.mode1 .item .item-flex .info .btn .item-prev{display:flex;align-items:center;flex:1;cursor:pointer}
.mode1 .item:nth-child(odd) .item-flex .info{margin-left:-8%}
.mode1 .item:nth-child(odd) .item-flex .info .btn{left:0}
.mode1 .item:nth-child(even) .item-flex .info{margin-right:-8%}
.mode2{position:relative;z-index:1;padding:50px 0}
.mode2::before{content:"";position:absolute;left:-260px;top:0;width:1920px;height:100%;background-color:#f6f7f8;z-index:-1}
.mode2 .list{display:flex;flex-wrap:wrap}
.mode2 .list li{width:32%;margin:30px 0;margin-right:2%}
.mode2 .list li:nth-child(3n){margin-right:0}
.mode2 .list .title-box{display:flex;flex-direction:column;justify-content:center}
.mode2 .list .title-box .page-title{font-size:48px;text-align:left;line-height:1.2}
.mode2 .list .title-box .page-line{width:100%;justify-content:flex-start}
.mode2 .list .item{position:relative;border-radius:4px;border:1px solid #e8f2ff;background-color:#fff;padding:50px 30px 30px;transition:all .2s linear;z-index:1}
.mode2 .list .item .icon{position:absolute;width:60px;height:60px;background:#e8f2ff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--color);top:-30px;left:30px;transition:all .2s linear}
.mode2 .list .item .icon em{font-size:var(--fontsize30)}
.mode2 .list .item .txt1 p{display:flex;position:relative;padding-left:14px}
.mode2 .list .item .txt1 p span{position:absolute;left:0;top:2px;font-weight:var(--fontbold7);font-size:var(--fontsize24);line-height:1}
.mode2 .list .item .tit{font-size:var(--fontsize20);font-weight:var(--fontbold6);line-height:1.4;margin-bottom:6px}
.mode2 .list .item .bg-num{position:absolute;bottom:10px;right:20px;font-size:90px;color:var(--color);opacity:.1;line-height:1;font-weight:var(--fontbold7);transition:all .2s linear;z-index:-1}
.mode2 .list .item:hover .icon{background-color:var(--color);color:#fff}
.mode3{padding:5% 0}
.mode3 .list{display:flex;justify-content:space-between;flex-wrap:wrap}
.mode3 .list li{width:23%;border:1px solid #eaf3ff;border-radius:4px;background-color:#fff;padding:30px;margin-top:40px;transition:all .2s linear}
.mode3 .list li .icon{color:var(--color);transition:all .2s linear;margin-bottom:6px}
.mode3 .list li .icon em{font-size:40px;line-height:1.2}
.mode3 .list li .tit{font-size:var(--fontsize20);font-weight:var(--fontbold6);transition:all .2s linear;line-height:1.4}
.mode3 .list li .txt{color:#444;margin-top:6px;min-height:180px;transition:all .2s linear}
.mode3 .list li .more{display:block;color:var(--color);font-weight:var(--fontbold6);transition:all .2s linear;margin-top:4px}
.mode3 .list li:hover{background-color:var(--color);color:#fff}
.mode3 .list li:hover em{color:#fff}
.mode3 .list li:hover .txt{color:#fff}
.mode3 .list li:hover .more{color:#fff}
.mode4{padding:5% 0;position:relative;z-index:1}
.mode4::before{content:"";position:absolute;left:-260px;top:0;height:100%;width:1920px;background-image:url(/uploads/43815/page/p20250730090326954d5.webp);background-repeat:no-repeat;background-size:cover;z-index:-1}
.mode4 .page-title{color:#fff}
.mode4 .page-line em{background-color:#fff}
.mode4 .btn{display:flex;justify-content:center;align-items:center;margin-top:20px}
.mode4 .btn .more{display:inline-flex;align-items:center;justify-content:center;height:40px;border:1px solid #fff;border-radius:20px;padding:0 30px;color:#fff;margin:10px}
@media screen and (max-width:1280px){.mode2 .list .title-box .page-title{font-size:var(--fontsize30)}
}
@media screen and (max-width:1024px){.mode1 .item .item-flex .img img{height:430px}
.mode1 .item .item-flex .info{min-height:300px;padding:20px;padding-bottom:60px}
.mode1 .item .item-flex .info .btn{height:50px}
.mode2::before{width:calc(100% + 30px);left:-15px}
.mode2 .list{justify-content:space-between}
.mode2 .list li{width:49%;margin-right:0}
.mode3{padding:50px 0}
.mode3 .list li{width:49%}
.mode4{padding:50px 0}
.mode4::before{width:calc(100% + 30px);left:-15px}
}
@media screen and (max-width:768px){.page-title{font-size:var(--fontsize24)}
.mode2 .list .title-box .page-title{font-size:var(--fontsize24);text-align:center}
.mode2 .list .title-box .page-line{justify-content:center}
.mode1 .tit-list li{font-size:var(--fontsize16);height:42px;padding:0 10px}
.mode1 .item{margin-bottom:30px}
.mode1 .item .item-flex{flex-wrap:wrap}
.mode1 .item .item-flex .info{width:100%;min-height:auto}
.mode1 .item .item-flex .img{height:auto;width:100%}
.mode1 .item:nth-child(odd) .item-flex .info{margin:0}
.mode1 .item:nth-child(even) .item-flex{flex-direction:column-reverse}
.mode1 .item:nth-child(even) .item-flex .info{margin:0}
.mode2 .list .item{width:100%}
.mode2 .list .title-box{margin:0;margin-bottom:30px;width:100%}
}
@media screen and (max-width:500px){.mode1 .tit-list{flex-wrap:wrap}
.mode1 .tit-list li{width:100%}
.mode2 .list .item{padding:50px 20px 20px}
.mode3 .list li{padding:15px;width:100%;margin-top:30px}
.mode4 .btn{flex-wrap:wrap}
.mode4 .btn .more{width:100%}
}