.home-what-sangni {position:relative;padding-top:100px;}
/*.home-what-sangni::after {content:'';position:absolute;right:0;top:0;width:400px;height:133px;background:#163785} */
.home-what-sangni .title h2{font-size:36px;color:#212121;font-weight:700;line-height:1;}


.home-what-sangni ul{display:flex;flex-wrap:wrap;margin:30px -15px 0;}
.home-what-sangni ul li {position:relative;width:20%;padding:20px 15px;}
.home-what-sangni ul li .home-goodscon {position:relative;width:100%}
.home-what-sangni ul li .goods-border {background:#fff;border-radius:50%;overflow:hidden}
.home-what-sangni ul li .goods-border {position:absolute;width:100%;height:100%;top:-2px;left:0;z-index:-1;background:#e6e6e6}
.home-what-sangni ul li .goods-border::after {content:'';position:absolute;left:0;top:-2px;width:100%;height:100%;transform:translateY(0);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 .home-goodscon:hover .goods-border::after {animation:ad_width .6s linear forwards;background:var(--color-icon-primary)}
.home-what-sangni ul li h3 {text-align:center;color:#212121;font-size:18px;font-weight:700;}


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

@media screen and (max-width:1680px) {
.home-what-sangni{padding-top:90px;}
.home-what-sangni::after {width:310px;height:90px}
}

@media screen and (max-width:1550px) {
.home-what-sangni{padding-top:80px;}
}

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

@media screen and (max-width:1367px) {
.home-what-sangni{padding-top:70px;}
.home-what-sangni .title h2{font-size:32px;}
}

@media screen and (max-width:1280px) {
.home-what-sangni{padding-top:60px;}
.home-what-sangni::after {width:180px;height:40px;}
.home-what-sangni .title h2{font-size:30px;}
.home-what-sangni ul li h3{font-size:17px;}
}

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

}

@media screen and (max-width:992px) {
.home-what-sangni{padding-top:40px;}
.home-what-sangni ul{margin:20px -15px 0;}
.home-what-sangni ul li {width:33.333333%;padding:20px 15px;}

}

@media screen and (max-width:768px) {
.home-what-sangni{padding-top:30px;}
.home-what-sangni::after {display:none;}
.home-what-sangni .title{text-align:center;}
.home-what-sangni .title h2{font-size:28px;}
.home-what-sangni ul li {width:50%;padding:15px 15px;}
.home-what-sangni ul li h3{font-size:16px;}
}

@media screen and (max-width:576px) {
.home-what-sangni .title h2{font-size:26px;}
.home-what-sangni ul{margin:20px -10px 0;}
.home-what-sangni ul li {width:50%;padding:10px;}
}

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

.home-what-sangni .title h2{font-size:24px;}
.home-what-sangni ul li h3{font-size:15px;}

}