﻿.water1 .water1-box{margin-top:40px;background-color:#f6f6f6;padding:5% 20px}
.water1 .title{text-align:center;color:#111;font-size:var(--fontsize18);font-weight:var(--fontbold6)}
.water1 .water1-list1{display:flex;flex-wrap:wrap;justify-content:space-between}
.water1 .water1-list1 .item{width:24%;background-color:#fff;border-radius:4px;padding:25px 20px;margin-top:25px;text-align:center}
.water1 .water1-list1 .item .tit{transition:all .2s linear;margin:20px 0;font-size:var(--fontsize20);font-weight:var(--fontbold6);height:64px}
.water1 .water1-list1 .item .more{transition:all .2s linear;width:120px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:20px;color:#fff;background-color:var(--color)}
.water1 .water1-list1 .item:hover{box-shadow:0 10px 20px 0 rgba(7,0,2,.1)}
.water1 .water1-list1 .item:hover .title{color:var(--color)}
.water1 .water1-list1 .item:hover .more{background-color:#000}
.water1 .water1-list2{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:20px}
.water1 .water1-list2 li{width:49%;background-color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:space-between;padding:20px;margin-top:20px}
.water1 .water1-list2 li .tit{width:60%;text-align:left;color:#000;font-size:var(--fontsize20);font-weight:var(--fontbold6)}
.water1 .water1-list2 li .more{width:120px;height:40px;border-radius:20px;background-color:var(--color);color:#fff;display:inline-flex;align-items:center;justify-content:center;transition:all .2s linear}
.water1 .water1-list2 li .more:hover{background-color:#000}
.water2{padding:5% 0}
.water2 .top{display:flex;align-items:center;justify-content:space-between}
.water2 .top .pro-line{margin-left:0}
.water2 .top .pro-title{text-align:left}
.water2 .top .desc{color:#111}
.water2 .top .btn-box{display:flex;align-items:center}
.water2 .top .btn-box .water2-button-next,.water2 .top .btn-box .water2-button-prev{width:50px;height:50px;border-radius:50%;border:2px solid var(--color);display:inline-flex;align-items:center;justify-content:center;margin-left:20px;cursor:pointer;transition:all .2s linear}
.water2 .top .btn-box .water2-button-next:hover,.water2 .top .btn-box .water2-button-prev:hover{background-color:var(--color)}
.water2 .top .btn-box .water2-button-next:hover em,.water2 .top .btn-box .water2-button-prev:hover em{color:#fff}
.water2 .top .btn-box .water2-button-next em,.water2 .top .btn-box .water2-button-prev em{transition:all .2s linear;color:var(--color);font-size:var(--fontsize24)}
.water2 .bottom{padding-bottom:40px;position:relative}
.water2 .bottom .swiper{padding:20px}
.water2 .bottom .swiper-slide{background-color:#fff;border-radius:5px;box-shadow:0 10px 20px 0 rgba(7,0,2,.1);padding:40px;color:#111;height:auto}
.water2 .bottom .swiper-slide .num{font-size:120px;line-height:1;font-weight:var(--fontbold9);opacity:.1;transform:translateY(50px);display:inline-block}
.water2 .bottom .swiper-slide .tit{font-size:var(--fontsize20);font-weight:var(--fontbold6);transition:all .2s linear;margin-bottom:10px}
.water2 .bottom .swiper-slide:hover .tit{color:var(--color)}
.water2 .bottom .water2-pagination{position:absolute;left:0;bottom:0;display:flex;justify-content:center}
.water2 .bottom .water2-pagination .swiper-pagination-bullet{background-color:var(--color);opacity:.2}
.water2 .bottom .water2-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{opacity:1}
.water3{padding:5% 0;position:relative}
.water3::before{content:"";position:absolute;left:-180px;top:0;width:1920px;height:100%;background-color:#f6f6f6}
.water3 .desc{text-align:center;position:relative;z-index:2}
.water3 .list{display:flex;justify-content:space-between;flex-wrap:wrap;position:relative;z-index:2}
.water3 .list .item{width:49%;margin-top:40px;background-color:#fff;border-radius:4px;padding:30px 40px;transition:all .2s linear;color:#111}
.water3 .list .item .title{font-size:var(--fontsize20);font-weight:var(--fontbold6);position:relative}
.water3 .list .item .title::before{content:"";position:absolute;left:-15px;bottom:4px;width:30px;height:30px;background-color:var(--color);border-radius:50%;opacity:.2}
.water3 .list .item .txt-list span{font-weight:var(--fontbold6)}
.water3 .list .item:hover{box-shadow:0 10px 20px 0 rgba(7,0,2,.1)}
.water3 .list .item:hover .title{color:var(--color)}
.water4{position:relative;padding:5% 0}
.water4::before{content:"";position:absolute;left:-180px;top:0;width:1920px;height:60%;background-image:url(/uploads/41402/page/p20250225164929bc022.png);background-repeat:no-repeat;background-size:cover}
.water4 .pro-line::before{background-color:#fff}
.water4 .pro-title{color:#fff}
.water4 .desc{text-align:center;color:#fff;opacity:.6;position:relative;z-index:2;margin-top:4px}
.water4 .list{display:flex;justify-content:space-between;flex-wrap:wrap;position:relative;z-index:2}
.water4 .list .item{color:#111;width:32%;background-color:#fff;border-radius:6px;box-shadow:0 10px 20px 0 rgba(7,0,2,.1);text-align:center;padding:30px 40px;margin-top:40px;transition:all .2s linear}
.water4 .list .item .icon em{color:var(--color);font-size:60px}
.water4 .list .item .title{text-align:center;font-size:var(--fontsize20);font-weight:var(--fontbold6);transition:all .2s linear;margin-bottom:6px}
.water4 .list .item:hover{transform:translateY(-10px)}
.water4 .list .item:hover .title{color:var(--color)}
@media screen and (max-width:1024px){.water1 .water1-box{padding:30px 10px}
.water2{padding:30px 0}
.water3{padding:30px 0}
.water3::before{width:calc(100% + 30px);left:-15px}
.water4{padding:30px 0}
.water4::before{width:calc(100% + 30px);left:-15px}
}
@media screen and (max-width:768px){.water1 .water1-list1 .item{margin-top:25px;width:48%}
.water1 .water1-list2 li{width:100%}
.water2 .top{flex-wrap:wrap}
.water2 .top .title-box{width:100%}
.water2 .top .btn-box{width:100%;margin-top:20px}
.water3 .list .item{margin-top:25px;width:100%;padding:20px}
.water4 .list .item{margin-top:25px;width:100%}
.water4 .list .item .icon em{font-size:40px}
}
@media screen and (max-width:500px){.water1 .water1-list1 .item{width:100%}
.water1 .water1-list1 .item .tit{height:auto}
.water1 .water1-list2 li .tit{font-size:var(--fontsize16);width:auto;flex:1;padding-right:10px}
.water2 .bottom .swiper{padding:20px 10px}
.water2 .bottom .swiper-slide{padding:10px}
.water2 .bottom .swiper-slide .num{transform:translateY(0);font-size:60px}
}