/*头部样式*/
.top-container{
    width: 100%;
    height: auto !important;
    position: relative;
}
.banner-title{
    position: absolute;
    top: 42%;
    /*left: 45%;*/
    text-align: center;
    width: 100%;
}
.container{
    padding: 1rem 0 0.5rem 0;
}

.services-menu{
    display: flex;
    justify-content: center;
    padding: 0.3rem 0;
}
.services-menu-list{
    font-family: BigCaslon, sans-serif;
    color: #2a2623;
    font-size: 0.2rem;
    display: flex;
    list-style: none;      /* 去掉默认的圆点 */
    gap: 1.5rem;             /* 项目之间的间距 */
    height: 0.5rem;
}
.services-menu-list a:hover{color:#a9543f;}
.selected{
    color: #a9543f;
    border-bottom: 2px solid #a9543f;
}
.services-title{
    font-family: SukhumvitSet-Light, sans-serif !important;
    color: #999999 !important;
    font-size: 0.16rem;
    padding: 0.5rem 2rem;
    text-align: center;
}

.services-img-list{
    display: flex;
    flex-wrap: wrap;
}

.services-item {
    /*flex: 1 0 24%; !* 每行3个元素，每个元素占30%的宽度 *!*/
    box-sizing: border-box; /* 确保padding和border不影响宽度 */
    margin-bottom:0.5rem;
    width: calc(25% - .15rem);
    margin-right: .2rem;
    border-bottom: 1px solid #e3e3e3;
    position: relative;
    padding-bottom: 0.4rem;
}
.services-item:nth-child(4n){margin-right: 0;}

.services-item:hover{
    border-bottom: 1px solid #999999;
}

.services-item-img{
    /*height: 4.75rem;*/
    position: relative;
    display: inline-block;
    overflow: hidden;       /* 关键！超出部分隐藏 -> 放大的图片被裁剪在框内 */
}
.services-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* 缓慢放大效果 */
}
.services-item-img:hover .services-img {
    transform: scale(1.08);

}

.services-text-b{
    color: #999999;
    font-size: 0.14rem;
    letter-spacing: 1px;
}
.services-text-c{
    font-family: BigCaslon, sans-serif;
    color: #2a2623;
    font-size: 0.2rem;
    height: .6rem;
}
/*.services-item-title{*/
/*    border-bottom: 1px solid #e3e3e3;*/
/*}*/
.community-text-btn{
    font-size: 0.16rem;
    color: #999999;
    font-family: SukhumvitSet-Light, sans-serif !important;
    /*display: flex;*/
    /*border-bottom: 1px solid #999999;*/
    height: 0.4rem;
    /*justify-content: space-between;*/
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 2px;
}

/*!* 伪元素：负责渐变颜色的滑动下划线，实现"从左往右渐变颜色"动画效果 *!*/
/*.community-text-btn::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    left: 0;*/
/*    bottom: -1px;          !* 和border-bottom高度对齐，覆盖在border-bottom之上 *!*/
/*    width: 0%;               !* 初始宽度0，不可见 *!*/
/*    height: 1px;           !* 与border-bottom高度一致 *!*/
/*    background: linear-gradient(90deg,*/
/*    #a9543f,*/
/*    #a9543f,*/
/*    #a9543f,*/
/*    #a9543f*/
/*    );*/
/*    background-size: 200% 100%;  !* 让渐变更丰富，可产生流动感但主要满足从左往右颜色变化 *!*/
/*    border-radius: 4px;          !* 柔和端点 *!*/
/*    transition: width 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1);*/
/*    !* 增加阴影提升质感 *!*/
/*    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
/*    !* 保证伪元素覆盖在border-bottom上方，凸显渐变效果 *!*/
/*    z-index: 2;*/
/*}*/
/*.community-text-btn:hover::after {*/
/*    width: 100%;*/
/*}*/

*{margin:0;padding:0;}
.community-a{overflow: hidden;display: flex;align-items: center;}
.community-a>p:nth-of-type(1){position: relative;line-height: 20px;}
/*.community-a>p:nth-of-type(1)::after{content:attr(data-name);position: absolute;top:0;left: 0;transition: .5s;transform: translateY(100%);}*/
/*.community-a>p:nth-of-type(1)>span{display: block;transition: .5s;}*/
.community-a>p:nth-of-type(2){background: url(/static/home/images/arrow.png) no-repeat center center/100%;width: 0.15rem;height: 0.15rem;}

/*.community-a:hover>p:nth-of-type(1)::after{transform:translateY(0)}*/
/*.community-a:hover>p:nth-of-type(1)>span{transform:translateY(-100%)}*/
/*.community-a:hover>p:nth-of-type(2){animation:arrow .8s forwards}*/
/*.community-a:hover>p:nth-of-type(2){background-image: url(/static/home/images/arrow-red.png)}*/


@keyframes arrow{
    30%{transform:translateX(100%) scaleY(0)}
    50%{transform:translateX(-150%) scaleY(0)}
    100%{transform:translateX(0) scaleY(1)}
}


.load{
    background-color: #f8f8f8;
    position: absolute;
    left: 50%;
    padding: 0.1rem;
}
.services-text-c:hover{color: #666;}
@media (max-width: 750px) {
    .services-title{padding-left:0;padding-right: 0; font-size: 0.26rem;}

    .services-item{width: 48%;margin-bottom: 0.5rem;margin-right: 4%;}
    .services-item:nth-child(2n){margin-right: 0;}
    .services-item-img{height: auto;}
    .services-text-b{font-size: 0.24rem;}
    .services-text-c{font-size: 0.3rem;height: auto;}
    .services-item-title-a{font-size: 0.24rem;height: 0.5rem;}
    .services-text{padding: 0.2rem 0 0.4rem 0 !important;}
    .community-text-btn{font-size: 0.26rem;height: 0.5rem;}
    .community-a>p:nth-of-type(2){width: 0.24rem;height: 0.24rem;}

    .services-menu-list{gap:0.2rem;font-size: 0.24rem;height:auto;}
    .services-menu-list .menu-btn{width: 25%;text-align: center;padding-bottom: 0.1rem;}
    .services-item{width: 48%;margin-right:4%;}
    .services-item:nth-child(2n){margin-right: 0;}
    .services-item-title-a{font-size: 0.24rem;height: 0.5rem;}
    .services-item-title .services-text{padding: 0.2rem 0 0.4rem 0 !important;}
    .banner-title{top: 50%;transform: translateY(-50%);}
}