.sub-banner{
  width: 100%;
  height: 250px;
  margin-top: 8rem;
  position: relative;
  
  .sub-banner-title {
    text-align: center;
    line-height: 250px;
    color: var(--color-white);
    text-shadow: 0 0 6px var(alpha-black-20);
    font-size: 54px;
    font-weight: var(--font-weight-extra-bold);
  }
}

body[data-subpage="remarry"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_remarry.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

body[data-subpage="membership"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_membership.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

body[data-subpage="guide"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_guide.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

body[data-subpage="services"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_service.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

body[data-subpage="search"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_search.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

body[data-subpage="party"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_party.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

body[data-subpage="test"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_test.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

body[data-subpage="center"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_center.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

body[data-subpage="cs"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_cs.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

body[data-subpage="login"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_login.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}


body[data-subpage="join"]{
  .sub-banner{
    background-image: url('/assets/images/sub/common/top_banner_join.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}

@media screen and (max-width: 1024px)  {
  .sub-banner{
    height: 220px;
    
    .sub-banner-title {
      line-height: 220px;
      font-weight: var(--font-weight-bold);
      font-size: 48px;
    }
  }
}

@media screen and (max-width: 780px)  {
  .sub-banner{
    height: 200px;
    margin-top: 60px;
    .sub-banner-title {
      line-height: 200px;
      font-weight: var(--font-weight-medium);
    }
  }
}

@media screen and (max-width: 480px)  {
  .sub-banner{
    height: 100px;
    
    .sub-banner-title {
      line-height: 100px;
      font-size: 24px;
    }
  }
}