.sub-banner-wrap {
  background-repeat: no-repeat; background-size: cover; background-position: center; height:225px; width:100%; position: relative;
  .sub-banner {
    background:rgba(3,17,18,0.7); width:100%; height:100%;
    .sub-banner-tit {
      text-align: center; font-weight:600; color:#fff; padding-top:60px;
      .h1 {
        font-size:3.2rem; padding-top:10px; font-weight: 600;
      }
      span.banner-sub-tit {
        display: inline-block; font-size:1.6rem; opacity:.9; font-weight:300; position: relative; padding-bottom: 5px;
        &:not(:first-child) {
          padding-left: 20px;
          &:after {
            content: '>'; position: absolute; top: 0; left: 4px;
          }
        }
      }
    }
  }
  &.depth01 {
    height:160px
  }
}

@media(max-width:768px) {
    .sub-banner-wrap {
      .sub-banner {
        .sub-banner-tit {
          padding-top:61px;
          .h1 {
            font-size:2.5rem
          }
          span.banner-sub-tit {
            font-size:1.3rem;
          }
        }
      }
    }
}

@media(max-width:500px) {
  .sub-banner-wrap {
    height:185px;
    .sub-banner {
      .sub-banner-tit {
        padding-top:41px;
        .h1 {font-size:2.2rem;}
      }
    }
    &.depth01 {
      height:115px
    }
  }
}