.commRulBanner{
    width: 100%;
    height: calc(100vw / 2.67);  /* banner比例为1440*540  */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    justify-content: center;
    position: relative;
}
.commRulBanner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
    background-size: cover;
    background-position: center;
    z-index: 1;
  }
.bannWrapper{
    width: 83%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.63vw;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 1);
    position: relative;
    z-index: 2;
}
.bannWrapper h2 {
  font-weight: 600;
  font-size: 2.1rem;
}

.bannWrapper h3{
  font-size: 1.1rem;
}

.ourMission{
    width: 100%;
    background: #fff;
    padding: 4.18vw 0;
}
.missContainer {
    width: 83%;
    margin: 0 auto;
    position: relative;
}

/* 动画初始状态：隐藏、向下偏移 */
.fade-in-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.9s ease-out;
}

/* 动画触发状态：显示、回到原位 */
.fade-in-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* =====移动端：直接永久显示，移除淡入动画===== */
@media screen and (max-width: 767px) {
    .fade-in-up,
    .fade-in-up.active {
        opacity: 1 !important;
        transform: translateY(0) !important;
        transition: none !important;
    }
}

/* ===== 顶部大标题：居中显示 ===== */
.mission-title {
    text-align: center;
    margin-bottom: 2.79vw;
    padding-bottom: 1.25vw;
}
.mission-title h2 {
    font-size: 1.5rem;
    line-height: 100%;
    letter-spacing: 0;
    font-weight: 600;
    color: #333;
    position: relative;
    margin-bottom: 0.7vw;
}
/* 标题蓝色下划线（居中） */
.mission-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background-color: #086fff;
}
.mission-title p {
    font-size: 0.88rem;
    line-height: 100%;
    font-weight: 400;
    letter-spacing: 0;
    color: rgba(51,51,51,0.28);
    text-transform: uppercase;
}

/* 核心flex布局：图片 + 文字 左右排列 */
.mission-wrapper {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* 图片区域 */
.mission-image {
    flex: 1;
    width: 45%;
}
.mission-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 文字内容区域 */
.mission-content {
    flex: 1;
    width: 55%;
    padding: 1.4vw 0 0 3.33%;
}

/* 描述文本 */
.mission-desc {
  margin-bottom: 2.09vw;
}
.mission-desc p{
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6rem;
  font-weight: 500;
  letter-spacing: -0.33px;
}

/* 列表样式 */
.mission-list {
    list-style: none;
    border-top: 1px solid #e6e6e6;
    padding: 2.09vw 0 0;
}
.mission-list li {
    color: #808080;
    margin-bottom: 2.09vw;
    padding-left: 20px;
    position: relative;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.33px;
}
.mission-list li:last-child{margin-bottom: 0;}
/* 列表蓝色圆点 */
.mission-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: url(/images/blueCircleIcon.svg) no-repeat center;
}
.mission-list li strong {
    color: #333;
    font-weight: 500;
}

.spaceUsage,.facility,.community{
    background: linear-gradient(90deg, #FFFFFF 0%, #F0F0F0 50%, #FFFFFF 100%);
} 

.text-content{
    padding: 0 3.33% 0 0;
}
.text-item {
    padding-bottom: 1.11vw;
    margin-bottom: 1.11vw;
    border-bottom: 1px solid #e6e6e6;
}
.text-item:last-child{border-bottom: none;margin-bottom: 0;}

.text-item h3 {
    font-size: 1.1rem;
    color: #333;
    line-height: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.33px;
    margin-bottom: 0.98vw;
}

.text-item p {
    color: #808080;
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: -0.33px;
}
.content-panel {
    display: none;
}
.content-panel.active {
    display: block;
    animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 按钮样式 */
.btn-container {
    margin-top: 2.79vw;
    display: flex;
    gap: 3.5vw;
    justify-content: center;
}
.nav-btn{
    cursor: pointer;
    width: 3.06vw;
    height: 3.06vw;
    background: #086fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-btn:first-child{
    background: none;
    border: 1px solid #c5c5c5;
}
.nav-btn span{
    display: inline-block;
    width: 0.63vw;
    height: 1.11vw;
    background-image: url(../images/m2abt_c2btn.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    transform: rotate(180deg);
}
.nav-btn span.prev,.nav-btn span.next{
    background-image: url(../images/leftGrayArrow.svg);
    transform: rotate(0);
}
.nav-btn span.next{transform: rotate(180deg);}

/* 分页按钮状态样式 */
.nav-btn.disabled {
    pointer-events: unset;
    cursor: not-allowed;
    background: none;
    border: 1px solid #c5c5c5;
}
/* 激活高亮：蓝色背景样式（右按钮默认底色） */
.nav-btn.active {
    background-color: #086fff !important;
}
.nav-btn.active span {
    filter: brightness(0) invert(1);
}
/* 左按钮默认边框，激活后底色变蓝色 */
.nav-btn:first-child.active {
    border-color: #086fff;
}


@media screen and (max-width: 1024px) {
  .mission-wrapper{flex-direction: column;}
  .mission-image{width: 100%;}
  .mission-content{width: 100%;padding: 1.39vw 0;}
  .nav-btn{
        width: 6.06vw;
        height: 6.06vw;
    }
    .nav-btn span{
        width: 1.63vw;
        height: 2.11vw;
    }
}
@media screen and (max-width: 767px) {
  .commRulBanner{
    height: 48vh;
    background-size: 300%;
    background-position: 25% 100%;
  }
  .bannWrapper{
    width: 89.3%;
    gap: 1.8vh;
  }
  .bannWrapper h2 {
    font-size: 2rem;
  }  
  .ourMission{
    padding: 6vh 0 9vh;
  }
  .missContainer{width: 89.3%;}
  .mission-title{
    padding-bottom: 3vh;
    margin-bottom: 6vh;
  }
  .mission-title h2 {
    font-size: 1.54rem;
    margin-bottom: 2vh;
  }
  .mission-title p {
    font-size: 0.93rem;
  }
  .mission-content{
    padding: 4.5vh 0 0;
  }
  .mission-desc{
    margin-bottom: 4.5vh;
  }
  .mission-desc p{line-height: 2rem;}
  .mission-list{
    padding: 4.5vh 0 0;
  }
  .mission-list li{
    font-size: 1.1rem;
    line-height: 1.85rem;
    margin-bottom: 4.5vh;
  }
  .spaceUsage .mission-wrapper,.facility .mission-wrapper,.community .mission-wrapper{
    flex-direction: column-reverse;
  }
  .text-item {
    padding-bottom: 3vh;
    margin-bottom: 3vh;
  }
  .text-item:last-child{
    padding-bottom: 0;
  }
  .text-item h3{
    font-size: 1.24rem;
    line-height:2rem;
    margin-bottom: 2.1vh;
  }
  .text-item p{
    font-size: 1.1rem;
    line-height: 1.85rem;
  }
}