@media (max-width: 767px) {
  body {
    padding-bottom: 4rem;
  }
  .section .container{
    padding:0;
  }
  .family-content {
    padding: 0rem 4% 0 4%;
    flex-direction: column;
  }
  .family-content .family-desc {
    width:100%;
    text-align: center;
    margin-bottom:2rem;
  }
  .family-content .family-pic{
    width:100%;
    margin:0 auto;
  }
  .family-color .section-content .section-body .section-swiper-box .lifeSwiper .img-box{
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .family-color .section-content .section-body .section-swiper-box .lifeSwiper .img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .family-color .section-content .section-body .section-swiper-box .lifeSwiper .img-box span {
      position: absolute;
      bottom: 1.5rem;
      color: #fff;
      font-size: 1.4rem;
      left: 0;
      right: 0;
      text-align: center;
      z-index: 2;
  }
  .family-color .section-content .section-body .section-swiper-box .lifeSwiper .life-detail {
      opacity: 0;
      padding: 1.5rem 0;
      transition: all .2s ease-out;
      margin-top: 2rem;
  }
  .swiper-container-horizontal>.swiper-scrollbar{
    left: 40% !important;
    bottom: 80px !important;
    width: 20% !important;
  }
  .swiper-scrollbar-drag{
    background: #ea5504 !important;
  }
  .physical .Course-build{
    padding: 0rem 4% 0 4%;
    flex-direction: column;
  }
  .physical .Course-build .left{
    width: 100%;
    text-align: center;
    margin-bottom: 0.3rem;
  }
  .physical .Course-build .right{
    width: 100%;
    margin:0 auto;
  }
  .files{
    flex-direction: column;
    padding:0.5rem;
  }
  .files .left{
    width:100%;
  }
  .files .left .desc{
    text-align: center;
    padding:0 3rem;
    margin-bottom: 1rem;
  }
  .files .right{
    width:100%;
  }
}