.home-what-sangni{padding:100px 0;position:relative}
.home-what-sangni .title h3{font-size:50px;font-weight:700;line-height:1;color:#212121;}
.home-what-sangni .title p {margin-top:30px;font-size:18px;line-height:30px;}

.home-what-sangni ul {display:flex;flex-wrap:wrap;justify-content:space-between;}
.home-what-sangni ul li{position:relative;width:23%;margin-top:50px;}
.home-what-sangni ul li .home-goodscon{position:relative;width:100%;}
.home-what-sangni ul li .goods-border{border-radius:50%;overflow:hidden;position:absolute;width:100%;height:100%;top:-2px;left:0;z-index:-1;box-sizing:border-box;background:#e6e6e6}
.home-what-sangni ul li .goods-border::after{content:'';position:absolute;left:0;top:-2px;width:100%;height:100%;transform:translateY(0);-ms-transition:.3s all;transition:.3s all;}
.home-what-sangni ul li span {display:block;width:100%;padding:0 1px}
.home-what-sangni ul li span img {width:100%;border-radius:50%;overflow:hidden}

.home-what-sangni ul li h5{font-size:18px;font-weight:600;color:#212121;margin:15px 0 0;text-align:center}

.home-what-sangni ul li:hover .home-goodscon .goods-border::after{animation:ad_width .6s linear forwards;background:var(--color-icon-primary)}


@keyframes ad_width {from {height:0}
to {height:100%}
}


@media screen and (max-width:1680px) {
.home-what-sangni {padding:90px 0;}
.home-what-sangni .title h3{font-size:48px;}
}

@media screen and (max-width:1550px) {
.home-what-sangni {padding:80px 0;}
.home-what-sangni .title h3{font-size:46px;}

}

@media screen and (max-width:1441px) {
.home-what-sangni {padding:75px 0;}
.home-what-sangni .title h3{font-size:44px;}

}

@media screen and (max-width:1367px) {
.home-what-sangni {padding:70px 0;}
.home-what-sangni .title h3{font-size:40px;}
.home-what-sangni .title p {margin-top:25px;line-height:28px;}
}


@media screen and (max-width:1280px) {
.home-what-sangni {padding:60px 0;}
.home-what-sangni .title h3{font-size:36px;}
.home-what-sangni .title p {margin-top:20px;font-size:17px;line-height:26px;}

}

@media screen and (max-width:992px) {

.home-what-sangni {padding:50px 0;}
.home-what-sangni .title{text-align:center;}
.home-what-sangni ul li{width:48%;margin-top:40px;}

}

@media screen and (max-width:768px) {
.home-what-sangni {padding:30px 0;}
.home-what-sangni .title h3{font-size:28px;}
.home-what-sangni .title p {margin-top:15px;font-size:16px;line-height:24px;}
.home-what-sangni ul li h5{font-size:17px;}
  
}

@media screen and (max-width:576px) {
.home-what-sangni .title h3{font-size:26px;}
}

@media screen and (max-width:480px) {
.home-what-sangni .title h3{font-size:26px;}
 .home-what-sangni ul li h5{font-size:16px;}
}

@media screen and (max-width:420px) {
.home-what-sangni .title h3{font-size:24px;}
}