/* =========================================================
   NEOFUNS
   GLOBAL MARKET REACH
   ABOUT US PAGE
   ========================================================= */

.neofuns-global-reach {

  width: 100%;

  padding: 75px 20px 90px;

  box-sizing: border-box;

  background: #F7F7F7;
}


/* =========================================================
   HEADER
   ========================================================= */

.nf-global-reach-header {

  width: 100%;

  max-width: 1000px;

  margin: 0 auto 55px;

  text-align: center;
}


/* =========================================================
   SMALL LABEL
   ========================================================= */

.nf-global-reach-label {

  display: block;

  margin-bottom: 3px;

  font-size: 12px;

  line-height: 1.3;

  font-weight: 400;

  letter-spacing: 0.8px;

  color: #555;
}


/* =========================================================
   H2
   PC: 42px
   ========================================================= */

.nf-global-reach-header h2 {

  margin: 0;

  font-size: 42px;

  line-height: 1.08;

  font-weight: 600;

  letter-spacing: 0.2px;

  color: #004297;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.nf-global-reach-subtitle {

  margin: 15px 0 0;

  font-size: 15px;

  line-height: 1.4;

  font-weight: 500;

  letter-spacing: 1px;

  color: #111;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.nf-global-reach-container {

  width: 100%;

  max-width: 1000px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(300px, 0.85fr);

  align-items: center;

  column-gap: 55px;

  box-sizing: border-box;
}


/* =========================================================
   IMAGE GALLERY
   2 COLUMNS × 4 ROWS
   ========================================================= */

.nf-global-reach-gallery {

  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 5px;

  box-sizing: border-box;
}


/* =========================================================
   IMAGE ITEM
   ========================================================= */

.nf-global-reach-image {

  width: 100%;

  overflow: hidden;

  background: #EDEDED;

  line-height: 0;

  aspect-ratio: 1.45 / 1;
}


/* =========================================================
   IMAGE
   ========================================================= */

.nf-global-reach-image img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.35s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.nf-global-reach-image:hover img {

  transform: scale(1.02);
}


/* =========================================================
   RIGHT CONTENT
   ========================================================= */

.nf-global-reach-values {

  width: 100%;
}


/* =========================================================
   VALUE ITEM
   ========================================================= */

.nf-global-reach-value {

  margin: 0 0 27px;

  padding: 0;
}


.nf-global-reach-value:last-child {

  margin-bottom: 0;
}


/* =========================================================
   H3
   PC
   ========================================================= */

.nf-global-reach-value h3 {

  margin: 0 0 7px;

  font-size: 22px;

  line-height: 1.25;

  font-weight: 600;

  color: #003F82;
}


/* =========================================================
   BODY TEXT
   PC
   ========================================================= */

.nf-global-reach-value p {

  margin: 0;

  max-width: 430px;

  font-size: 13px;

  line-height: 1.55;

  font-weight: 400;

  color: #555;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .neofuns-global-reach {

    padding: 60px 24px 70px;
  }


  .nf-global-reach-header {

    margin-bottom: 45px;
  }


  .nf-global-reach-header h2 {

    font-size: 36px;
  }


  .nf-global-reach-container {

    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 0.8fr);

    column-gap: 35px;
  }


  .nf-global-reach-value {

    margin-bottom: 22px;
  }


  .nf-global-reach-value h3 {

    font-size: 20px;
  }


  .nf-global-reach-value p {

    font-size: 13px;
  }

}


/* =========================================================
   MOBILE
   <= 767px
   ========================================================= */

@media (max-width: 767px) {

  .neofuns-global-reach {

    padding: 45px 18px 55px;
  }


  /* HEADER */

  .nf-global-reach-header {

    margin-bottom: 30px;
  }


  .nf-global-reach-label {

    font-size: 10px;
  }


  .nf-global-reach-header h2 {

    font-size: 28px;

    line-height: 1.1;
  }


  .nf-global-reach-subtitle {

    margin-top: 10px;

    font-size: 12px;

    line-height: 1.4;

    letter-spacing: 0.7px;
  }


  /* MAIN */

  .nf-global-reach-container {

    display: flex;

    flex-direction: column;

    gap: 35px;
  }


  /* IMAGE GALLERY */

  .nf-global-reach-gallery {

    width: 100%;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 4px;
  }


  .nf-global-reach-image {

    aspect-ratio: 1.35 / 1;
  }


  /* VALUES */

  .nf-global-reach-values {

    width: 100%;
  }


  .nf-global-reach-value {

    margin-bottom: 25px;
  }


  /* H3
     Mobile: 20px
  */

  .nf-global-reach-value h3 {

    margin-bottom: 7px;

    font-size: 20px;

    line-height: 1.3;
  }


  /* BODY
     Mobile: 14px
  */

  .nf-global-reach-value p {

    max-width: none;

    font-size: 14px;

    line-height: 1.65;
  }

}


/* =========================================================
   SMALL MOBILE
   <= 480px
   ========================================================= */

@media (max-width: 480px) {

  .neofuns-global-reach {

    padding: 35px 14px 45px;
  }


  .nf-global-reach-header {

    margin-bottom: 25px;
  }


  .nf-global-reach-header h2 {

    font-size: 26px;
  }


  .nf-global-reach-subtitle {

    font-size: 11px;
  }


  .nf-global-reach-container {

    gap: 30px;
  }


  .nf-global-reach-gallery {

    gap: 3px;
  }


  .nf-global-reach-value {

    margin-bottom: 22px;
  }


  .nf-global-reach-value h3 {

    font-size: 20px;

    line-height: 1.35;
  }


  .nf-global-reach-value p {

    font-size: 14px;

    line-height: 1.65;
  }

}