@media screen and (min-width: 960px) and (max-width: 1199px) {
    html{
        font-size:54px !important;
    }
    .join ul+ul {
        margin-left: 2.1rem !important;
    }
    .about p+p{
        margin-left:2.6rem !important;
    }
    .resolve-list li{
        width:48% !important;
    }
    
}
@media screen and (min-width: 768px) and (max-width: 959px) {
    html{
        font-size:43.2px !important;
    }
    .join ul+ul {
        margin-left: 1.8rem !important;
    }
    .about p+p{
        margin-left:2.3rem !important;
    }
    .resolve-list li{
        width:48% !important;
    }
  
}
@media screen and (min-width: 480px) and (max-width: 767px) {
    html{
        font-size:36px !important;
    }
    .introduce-item{
        width:48% !important;
        margin-top:0.5rem !important;
    }
   
}   
@media screen and (min-width:400px) and (max-width:479px){
    html{
        font-size:27px !important;
    }
    .introduce-item{
        width:48% !important;
        margin-top:0.5rem;
    }
}
@media screen and (max-width:399px){
    html{
        font-size:23px !important;
    }
    .join ul+ul {
        margin-left: 0.6rem !important;
    }
    .about p+p{
        margin-left:0.9rem !important;
    }
    .introduce-item{
        width:48% !important;
        margin-top:0.5rem;
    }
    .team li {
        width: 60% !important;
        margin-top:0.5rem;
    }
    .list-bottom-show-l>div {
        width: 48% !important;
        margin-top: 0.5rem !important;
    }
    .drainage-list li {
        width: 100% !important;
    }
}
.my-h3{
    font-size:0.74rem;
    line-height:0.9rem;
    margin-bottom:0.5rem;
}
.my-p{
    font-size:0.44rem;
    line-height:0.74rem;
}
.my-h6{
    font-size:0.5rem;
    line-height:0.8rem;
    }
.parcel-nav{
  width:100%;
  text-align: start;
  padding:0.8rem;
  background:url(../../images/xcx/activity-apps/activity-banner.png) no-repeat;
  background-size:100% 100%;
  color:#fff;
}
.parcel-resolve{
    width:100%;
    text-align: center;
    padding:0.8rem 0;
    
}
.resolve-list{
    display:flex;
    justify-content: space-between;
    padding:0 0.3rem;
    flex-wrap: wrap;
}
.resolve-list li{
    width:48%;
    margin-top:0.5rem;
    box-shadow: 0px 0px 0.5rem 0px rgba(15, 78, 164, 0.16);
    border-radius: 6px;
    padding:0.3rem 0;
}
.resolve-list li .my-h6{
    margin-bottom:0.3rem;
}
.resolve-list li img{
    width:50%;
    margin-bottom:0.5rem;
}
.procedure{
    width:100%;
    padding:0.8rem 0 0.6rem;
    text-align:center;
    background:url("../../images/xcx/activity-apps/procedure-banner.png") no-repeat;
    background-size: 100% 100%;
    color:#fff;
}
.procedure-list-right img{
    width:25%;
    margin-top:0.8rem;
}
.procedure-list-right-center{
    width: 35% !important;
    margin-top:0.5rem !important;
    margin:0 2%;
}
.introduce{
    width:100%;
    text-align: center;
    padding:0.8rem 0;
}
.introduce-top{
    width:100%;
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
}
.introduce-item{
    width:25%;
}
.introduce-item img{
    width:40%;
    margin-bottom:0.5rem;
}
.introduce-item .my-h6{
    margin-bottom:0.3rem;
}
.introduce-section{
    width:100%;
    margin-top:0.7rem;
}
.list-middle-right .my-h6{
    margin-bottom:0.5rem;
}
.list-middle-right .my-p{
    text-align: start;
    width:60%;
    margin-left:35%;
}
.list-middle-left-big{
    width:50%;
    margin-right:5%;
}
.list-middle-left-small{
    width:40%;
}
.team{
    width:100%;
    text-align:center;
    padding:0.8rem 0;
    background: #f4f4f4;
}
.team ul{
    width:100%;
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
}
.team .my-h6{
    font-weight:bolder; 
    margin-bottom:0.3rem;
}
.team li{
    width:33%;
}
.team  img{
    width:85%;
    margin-top:0.8rem;
}
.list-bottom-show{
    width:100%;
    text-align: center;
    padding:0.8rem 0;
}
.list-bottom-show-l{
    width:100%;
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    margin-top:0.5rem;
}
.my-h6{
 font-weight: bolder;
 margin-bottom:0.5rem;
}
.list-bottom-show-l>div{
   width:25%;
}
.list-bottom-image{
    width:100%;
    text-align: center;
}
.list-bottom-image img{
    width:90%;
}
.store{
    width:100%;
    text-align: center;
    padding:0.7rem 0;
    background:url("../../images/xcx/activity-apps/procedure-banner.png") no-repeat;
    background-size: 100% 100%;
    color:#fff;
}
.store-list{
    width:100%;
    display:flex;
    justify-content: space-around;
}
.store-list li{
    width:24%;
    box-shadow: 0px 0px 0.51rem 0px rgba(15, 78, 164, 0.16);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    padding:0.3rem 0;
}
.store-list li img{
    width:50%;
    margin-bottom:0.5rem;
}
.three{
    width:100%;
    text-align: center;
    padding:0.6rem 0.3rem;
}
.three-header .my-h6{
    text-align: start;
}
.three img{
    width:100%;
    margin-top:0.5rem;
}
.drainage{
    width:100%;
    text-align: center;
    padding:0.8rem 0;
    background:url("../../images/xcx/activity-apps/drainage-banner.png") no-repeat;
    background-size:100% 100%;
    color:#fff;
}
.drainage-list{
    width:100%;
    display:flex;
    justify-content: space-between;
    padding:0 0.3rem;
    flex-wrap:wrap;
}
.drainage-list li{
    width:48%;
    display:flex;
    justify-content: start;
    padding:0.3rem;
    background: #fff;
    border-radius: 4px;
    margin-top:0.5rem;
    color:#000;
}
.drainage-list li .my-h6{
    margin-bottom:0.3rem;
}
.drainage-list li div{
    width:60%;
}
.drainage-list li img{
    width:18%;
    margin-right:8%;
}
.merit-show{
    width:100%;
    padding:0.6rem 0;
    text-align: center;
    margin-bottom:0.8rem;
}
.swiper-container{
    width:100%;
    overflow: hidden;
    text-align: center;
}
.swiper-container img{
    width:80%;
    margin-top:0.6rem;
}
.swiper-container .swiper-wrapper{
    width:100%;
    padding-bottom:1.2rem;
}
.swiper-pagination-bullet{
    width:15px !important;
    height:15px !important;
}
.merit-middle{
    width:100%;
    margin-top:0.6rem;
    text-align: center;
    padding:0.5rem 0;
}
.merit-middle .my-p{
    width:100%;
    padding:0 0.5rem;
    text-align: start;
}
.swiper-container2{
    width:100%;
    text-align: center;
    padding:0.8rem 0; 
   overflow: hidden;
   background: #f4f4f4;
}
.swiper-container2 img{
    width:80%;
    margin-top:0.6rem;
}
.flow{
    width:100%;
    text-align:center;
    padding:0.6rem 0;
    background:url("../../images/xcx/activity-apps/flow-banner.png") no-repeat;
    background-size:100% 100%;
    color:#fff;
}
.flow-content{
    width:100%;
    display:flex;
    justify-content: space-around;
    font-size:0.4rem;
}
.flow-content li{
    position: relative;
}
.flow-content li::after{
    content:">";
    width: 18px;
    height: 26px;
    position: absolute;
    left: 1.9rem;
    top: 0;
    font-size:0.5rem;
}
.flow-content li:last-child::after {
    content: '';
  }
  .flow-list{
      display:flex;
      width:100%;
      margin-top:0.7rem;
  }
  .flow-list li{
      width:25%;
      font-size:0.4rem;
  }
 .merchants{
     width:100%;
     text-align: center;
     padding:0.8rem 0;
 }
 .merchants-list{
     width:100%;
     display:flex;
     justify-content: space-between;
     flex-wrap:wrap;
     padding:0 0.3rem;
 }
 .merchants-list li{
     width:33%;
     margin-top:0.5rem;
 }
 .merchants-list li img{
     width:80%;
     margin-bottom:0.5rem;
 }