@charset "utf-8";

/*========================================================================================================================================= */
/*================================================================ banner ================================================================= */
/*========================================================================================================================================= */

/* 서브페이지(개인정보처리방침, 이용약관 등) 상단 배너 공통 스타일 */
.banner-bg {
    padding: 220px 0;
}
.banner-bg h1,
.banner-bg h2 {
    color: #fff;
    text-align: center;
}
.banner-bg p {
    color: #fff;
    text-align: center;
    font-size: 13px;
    letter-spacing: 2px;
}

/* about-bg: 개인정보처리방침 / 이용약관 / 로그인·회원가입 등 서브페이지 상단 배너 공통 */
.about-bg.banner-bg {
    background: url(../img/sub/about-bg.jpg) center/cover no-repeat;
}

/*================================================================ 1400px 이하 ================================================================= */
@media screen and (max-width: 1400px) {
    .banner-bg {
        padding: 150px 0;
    }
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width: 769px) {
    .banner-bg {
        padding: 100px 0;
    }
}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width: 425px) {
    .banner-bg {
        padding: 60px 0;
    }
}

/*========================================================================================================================================= */
/*================================================================ banner ================================================================= */
/*========================================================================================================================================= */

/* ===== 제목 태그 계층 정리 (서브페이지) : 기존 태그 기준 스타일을 상위 클래스 종속으로 동일하게 유지 ===== */
.title h2 {
  font-size: 45px;
  font-weight: 700;
}
@media screen and (max-width: 1200px) {
  .title h2 {
    font-size: 35px;
  }
}
@media screen and (max-width: 769px) {
  .title h2 {
    font-size: 32px;
  }
}
@media screen and (max-width: 480px) {
  .title h2 {
    font-size: 26px;
  }
}
@media screen and (max-width: 350px) {
  .title h2 {
    font-size: 24px;
  }
}
.banner-bg.terms-bg h1 {
  font-size: 45px;
  font-weight: 800;
}
@media screen and (max-width: 1200px) {
  .banner-bg.terms-bg h1 {
    font-size: 40px;
  }
}
@media screen and (max-width: 769px) {
  .banner-bg.terms-bg h1 {
    font-size: 35px;
  }
}
@media screen and (max-width: 480px) {
  .banner-bg.terms-bg h1 {
    font-size: 24px;
  }
}
@media screen and (max-width: 350px) {
  .banner-bg.terms-bg h1 {
    font-size: 28px;
  }
}
.title.point-color-w h2::after {
  background: #fff;
}
.title h2 {
  font-family: "Noto Sans SC", sans-serif;
  font-weight: 700;
  position: relative;
  line-height: 1.3;
}
@media screen and (max-width: 769px) {
  .title.bdb h2::after {
    max-width: 100px;
    margin: 20px 0;
  }
}
@media screen and (max-width: 480px) {
  .title.bdb h2::after {
    max-width: 80px;
  }
}