.section4_component {
  position: relative;
  width: 100%;
  height: 700px;
  overflow: hidden;
  background-color: #030315;

  @media(max-width: 744px) {
    width: 100%;
    height: 523px;
  }
}

.section4_bg {
  position: absolute;
  width: 1920px;
  height: 700px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url('../images/section4_bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;

  /*@media(max-width: 984px) {*/
  /*  width: 984px;*/
  /*  height: 700px;*/
  /*}*/

  @media(max-width: 744px) {
    background-image: url("../images/section4_bg_m.jpg");
    height: 523px;
    width: 523px;
    /*background-size: cover;*/
  }
}

/*.section4_mask1 {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  width: 200px;*/
/*  height: 100%;*/
/*  background: linear-gradient(90deg, #060214 0%, transparent 100%);*/
/*}*/

/*.section4_mask2 {*/
/*  position: absolute;*/
/*  top: 0;*/
/*  right: 0;*/
/*  width: 200px;*/
/*  height: 100%;*/
/*  background: linear-gradient(90deg, transparent 0%, #060214 100%);*/
/*}*/

.section4_inner {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;

  /*@media(max-width: 1300px) {*/
  /*  gap: 50px;*/
  /*}*/

  @media(max-width: 744px) {
    left:24px;
    right: 24px;
    gap: 24px;
    /*padding: 0 24px;*/
  }
}

.section4_title {
  margin-top: 100px;
  text-align: center;
  /*color: #FFF;*/
  /*font-size: 80px;*/
  /*font-weight: 600;*/
  /*line-height: 100%; !* 80px *!*/

  > br {
    display: none;
  }

  /*@media(max-width: 1300px) {*/
  /*  margin-top: 150px;*/
  /*  font-size: 60px;*/

  /*  > br {*/
  /*    display: none;*/
  /*  }*/
  /*}*/

  @media(max-width: 744px) {
    margin-top: 50px;
    font-size: 32px;
    text-align: center;

    > br {
      display: unset;
    }
  }
}

.section4_contents {
  display: flex;
  flex-direction: row;
  gap: 24px;


  @media(max-width: 744px) {
    width: 100%;
    flex-direction: column;
    gap: 16px;
    /*align-items: center;*/
  }
}

.section4_box {
  display: flex;
  flex-direction: column;
  width: calc(312px - 48px);
  padding: 24px;
  gap: 10px;

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  align-items: center;

  > p {
    &:first-child {
      color: #FFF;
      font-size: 28px;
      font-weight: 600;
      line-height: 40px; /* 133.333% */
      text-align: center;
    }

    &:last-child {
      color: #A5A5A5;

      font-size: 16px;
      font-weight: 400;
      line-height: 25px; /* 166.667% */
      word-break: break-word;
      text-align: center;
    }
  }

  @media(max-width: 984px) {
    width: calc(232px - 48px);

    > p {
      &:first-child {
        font-size: 24px;
        line-height: 40px;
      }

      &:last-child {
        font-size: 16px;
        line-height: 25px; /* 166.667% */
      }
    }
  }

  @media(max-width: 744px) {
    width: calc(100% - 32px);
    padding: 24px 16px;
    gap: 10px;

    > p {
      &:first-child {
        font-size: 20px;
        line-height: 100%;
      }

      &:last-child {
        font-size: 12px;
        line-height: 20px; /* 166.667% */
      }
    }
  }
}