#app {
  overflow: inherit;
  height: auto; }

.mb-50 {
  margin-bottom: 50px; }

.banner {
  height: 275px;
  background: url(../image/volume-license-for-business/banner-pc.png) no-repeat 0 0;
  background-size: cover; }
  .banner .banner-h1 {
    font-size: 34px; }
  .banner .banner-p-yes {
    margin-top: 10px; }
  @media screen and (min-width: 768px) and (max-width: 990px) {
    .banner {
      padding-bottom: 98px;
      background: url(../image/volume-license-for-business/banner-ipad.png) no-repeat center center;
      background-size: cover;
      height: auto;
      min-height: 310px; }
      .banner#banner-box {
        padding-bottom: 0;
        min-height: 531px; }
      .banner .banner-h1 {
        padding: 0 160px; } }
  @media screen and (min-width: 320px) and (max-width: 767px) {
    .banner {
      background: url(../image/volume-license-for-business/banner-ios.png) no-repeat 0 0;
      background-size: cover;
      height: auto;
      min-height: 330px;
      padding-bottom: 1.46rem; }
      .banner .banner-h1 {
        font-size: 0.74rem;
        text-align: center; }
      .banner .banner-p-yes {
        text-align: center; } }

.w-index {
  padding: 50px 0; }
  .w-index-h1 {
    font-size: 24px;
    line-height: 1.2;
    text-align: left;
    margin-bottom: 25px; }
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      .w-index-h1 {
        padding: 0 .4rem; } }
    @media screen and (min-width: 320px) and (max-width: 767px) {
      .w-index-h1 {
        font-size: 0.5rem;
        padding: 0 0.7rem; } }
  .w-index-p {
    font-size: 14px;
    text-align: left; }
    .w-index-p a {
      color: #3EA6F9; }
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      .w-index-p {
        padding: 0 .4rem; } }
    @media screen and (min-width: 320px) and (max-width: 767px) {
      .w-index-p {
        padding: 0 0.7rem; } }
  .w-index-popular {
    margin: 50px 0;
    margin-top: 30px; }
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      .w-index-popular {
        padding: 0 .4rem; } }
    @media screen and (min-width: 320px) and (max-width: 767px) {
      .w-index-popular {
        padding: 0 0.7rem;
        margin: 40px 0 80px; } }
    .w-index-popular-item {
      display: inline-block;
      width: calc(98% / 2);
      border: 1px solid #ECECEC;
      border-radius: 10px;
      padding: 40px;
      margin-top: 20px;
      text-align: center; }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        .w-index-popular-item {
          width: calc(97% / 2); } }
      @media screen and (min-width: 320px) and (max-width: 767px) {
        .w-index-popular-item {
          width: 100%;
          padding: 20px; } }
      .w-index-popular-item img {
        display: inline-block;
        width: 80px;
        height: 80px; }
      .w-index-popular-item-money {
        margin-top: 40px;
        font-size: 16px; }
        .w-index-popular-item-money-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px; }
          .w-index-popular-item-money-item:last-child {
            margin-bottom: 0px; }
          .w-index-popular-item-money-item p:nth-child(2n-0) {
            color: #FA594B; }
      .w-index-popular-item-content {
        margin: 20px 0; }
        .w-index-popular-item-content-h4 {
          font-weight: 600;
          font-size: 20px; }
        .w-index-popular-item-content-p {
          min-height: 70px;
          font-size: 14px;
          margin-top: 10px; }
      .w-index-popular-item:nth-child(2n-1) {
        margin-right: 20px; }