/*头部样式*/
.top-container{
    width: 100%;
    height: auto !important;
    position: relative;
}
.banner-title{
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top:42%;
   text-align: center;
    width: 100%;
}
.container{
    padding: 1rem 0 .6rem;
}
.container-title{
    font-family: BigCaslon, sans-serif;
    text-align: center;
}
.container-title-a{
    font-size: 0.18rem;
    color: #999999;
}
.container-title-b{
    font-size: 0.48rem;
    color: #2a2623;
}
.container-title-c{
    font-size: 0.16rem;
    color: #999999;
    font-family: SukhumvitSet-Light, sans-serif !important;
    text-align: center;
    padding: 0.3rem 2rem;
}
.item-img{
    height: 3.75rem;
    position: relative;
    display: inline-block;
    overflow: hidden;       /* 关键！超出部分隐藏 -> 放大的图片被裁剪在框内 */
}
.container-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* 缓慢放大效果 */
}

.item-img:hover .container-img {
    transform: scale(1.08);

}

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

.container-item {
    /*flex: 1 0 30%; !* 每行3个元素，每个元素占30%的宽度 *!*/
    box-sizing: border-box; /* 确保padding和border不影响宽度 */
    margin-bottom:0.6rem;
    width: calc(100% / 3 - .14rem);
    margin-right: .21rem;
    border-bottom: 1px solid #e3e3e3;
}
.container-item:nth-child(3n){margin-right: 0;}
.container-item:hover{
    border-bottom: 1px solid #999999;
}

.item-text-a{
    padding: 0.2rem 0 .15rem;
    font-family: BigCaslon, sans-serif;
    font-size: 0.2rem;
    color: #2a2623;
}
.item-text-b{
    /*display: flex;*/
    /*justify-content: space-between;*/
    font-size: 0.14rem;
    color: #999999;
    font-family: SukhumvitSet-Light, sans-serif !important;
    height: 0.5rem;
    position: relative;
}

/* 伪元素：负责渐变颜色的滑动下划线，实现"从左往右渐变颜色"动画效果 */
/*.item-text-b::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;*/
/*}*/
/*.item-text-b:hover::after {*/
/*    width: 100%;*/
/*}*/

.community{
    padding: 1rem 0;
}
.community-title{
    font-family: BigCaslon, sans-serif;
    text-align: center;
}
.community-title-a{
    font-size: 0.18rem;
    color: #999999;
}
.community-title-b{
    font-size: 0.48rem;
    color: #2a2623;
}
.community-item-img{
    width: 49%;
    max-height: 6.4rem;
    position: relative;
    display: inline-block;
    overflow: hidden;       /* 关键！超出部分隐藏 -> 放大的图片被裁剪在框内 */
}
.community-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease; /* 缓慢放大效果 */
}

.community-item-img:hover .community-img {
    transform: scale(1.08);

}
.community-item{
    display: flex;
}
.community-item-text{
    width: 50%;
    padding: 0 6% 0 .65rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.community-item:nth-child(2n) .community-item-text{padding: 0 10% 0 0;}
.community-text-title{
    font-family: BigCaslon, sans-serif;
    color: #2a2623;
    font-size: 0.36rem;
    line-height: 0.48rem;
}
.community-text-a{
    font-size: 0.14rem;
    color: #999999;
    font-family: SukhumvitSet-Light, sans-serif !important;
    padding-top: 0.3rem;
}
.community-text-b{
    font-size: 0.16rem;
    color: #999999;
    font-family: SukhumvitSet-Light, sans-serif !important;
    padding: 0.7rem 0 .6rem 0;
}
.community-list{
    padding-top: 0.5rem;
}
.community-text-btn{
    font-size: 0.16rem;
    color: #999999;
    font-family: SukhumvitSet-Light, sans-serif !important;
    /*display: flex;*/
    border-bottom: 1px solid #e3e3e3;
    width: 3rem;
    height: 0.4rem;
    position: relative;
}

.community-text-btn::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;          /* 和border-bottom高度对齐，覆盖在border-bottom之上 */
    width: 0%;               /* 初始宽度0，不可见 */
    height: 2.5px;           /* 与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/jiantou.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%);color: #a9543f}
.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)}

.c-a{
    font-size: 0.16rem;
    color: #999999
}


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

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

/*.item-a:hover>p:nth-of-type(1)::after{transform:translateY(0)}*/
/*.item-a:hover>p:nth-of-type(1)>span{transform:translateY(-100%)}*/
/*.item-a:hover>p:nth-of-type(2){animation:arrow .8s forwards}*/
/*.item-a:hover>p:nth-of-type(2){background-image: url(/static/home/images/arrow-red.png)}*/
.banner-gallery{height: 5rem !important;}
@media (max-width: 750px) {
    .container{padding: 0.7rem 0;}
    .container-title-a,.community-title-a{font-size: 0.28rem;}
    /* .container-title-b,.community-title-b{font-size: 0.58rem;} */
    .community-text-a{font-size: 0.24rem;}
    .container-title-c{font-size: 0.26rem;padding-left:0;padding-right:0;}
    .community{padding: 0.7rem 0;}
    .community-item{display: block;}
    .community-item-img,.community-item-text{width: 100%;}
    .community-item-text{padding: 0.4rem 0;}
    .community-item:nth-child(2n){flex-direction: column-reverse;display: flex;}
    .community-text-b{font-size: 0.26rem;padding-top: 0.2rem;}
    .community-item:nth-child(2n) .community-item-text{padding:0.4rem 0;}
    .community-item:last-child .community-item-text{padding-bottom: 0;}
    .container-item{width: 48%;margin-right: 4%;}
    .container-item:nth-child(3n){margin-right: 4%;}
    .container-item:nth-child(2n){margin-right: 0;}
    .item-img{display: block;height: 2.23rem !important;}
    .banner-title{
        transform: translate(-50%,-50%);
        top:50%;
    }
    .banner-gallery{background-attachment:scroll !important;}
 
}
@media (max-width: 1024px) {
    .community-item-text{
        padding: 0.5rem 6% 0 .65rem;
    }
    .community-item:nth-child(2n) .community-item-text{
        padding: 0.5rem 6% 0 .65rem;
    }
}