:root {
  --base-color: #18191B;
  --background: #ffffff;
}
body {
  background-color: var(--background);
}

.head__section {
  width: 100%;
  height: 400px;
  background-color: var(--base-color);
}
  .head__section__inner {
    position: relative;

    width: 100%;
    height: 100%;
  }
    .hear__section__inner__title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);

      width: auto;
      height: auto;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      z-index: 3;
    }
      .hear__section__inner__title .head__title {
        color: #fff !important;
        font-weight: 900;
      }
      .hear__section__inner__title .head__subtitle {
        color: #fff !important;
      }
    .head__section__inner__background {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);

      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }
      .head__section__inner__background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }





.section__title {

}
  .section__title__inner {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
    .section__title__text {
      font-weight: 900;
    }
    .section__title__subtitle {
    }

.title__section{
  width: 100%;
  height: auto;
  background-color: #E4E5E7;
}
  .title__section__inner{
    padding: 7.5rem 2.5rem;
  }
    .title__section__inner__box{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2.5rem;
    }
      .title__section__inner__box .title{
        padding: 0.5rem 1rem;
        background-color: var(--base-color);
        width: fit-content;
      }
        .title__section__inner__box .title h3{
          color: #fff !important;
          font-weight: 900;
        }
        .title__section__inner__box .sub-title{
          font-size: 2rem;
          line-height: 4rem;
        }

.solution__section {
  width: 100%;
  height: auto;
  margin-top: calc(200/16*1rem);
}
  .solution__section__inner {
    width: 100%;
    height: auto;
    padding: 0 2.5rem;
  }
    .solution__content {
      margin-top: 3.5rem;
    }
      .solution__content__list {
        padding: 2rem 0;
        display: flex;
        column-gap: 2%;
      }
        .solution__content__list__item {
          min-width: 32%;
          width: 32%;
          height: auto;
        }
          .solution__content__list__item__inner {
            width: 100%;
            height: auto;
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: 0.75rem;
          }
            .solution__content__list__item__inner .thumbnail {
              width: 100%;
              aspect-ratio: 16 / 9;
              height: auto;
            }
              .solution__content__list__item__inner .thumbnail img {
                width: 100%;
                aspect-ratio: 16 / 9;
                height: auto;
                object-fit: cover;
              }
            .solution__content__list__item__inner .texts {
              width: 100%;
              height: auto;
              display: flex;
              flex-direction: column;
              align-items: start;
              gap: 1rem;
            }
              .solution__content__list__item__inner .texts .title {
                font-weight: 500;
              }
              .solution__content__list__item__inner .texts .desc {
              }
.works__section {
  width: 100%;
  height: auto;
  margin-top: calc(200/16*1rem);
  margin-bottom: 7.5rem;
}
  .works__section__inner {
    width: 100%;
    height: auto;
    padding: 0 2.5rem
  }
    .works__content {
      margin-top: 3.5rem;
    }
      .works__content__inner {

      }
        .works__content__select{
          display: flex;
          flex-wrap: wrap;
          column-gap: 2rem;
          row-gap: 1rem;
          margin-bottom: 0rem;
        }
          .works__content__select li a{
            padding: 2px 10px;
            border-radius: 20px;
            border: solid 1px var(--base-color);
            background-color: var(--background);
            text-wrap: nowrap;
          }
          .works__content__select li.active a{
            background-color: var(--base-color);
            color: var(--background);
          }
        .works__content__list {
          padding: 2rem 0;
          display: flex;
          flex-wrap: wrap;
          column-gap: 2%;
          row-gap: 5rem;
        }
          .works__content__list__item {
            min-width: 32%;
            width: 32%;
            height: auto;
          }
          .works__content__list__item.is-hidden {
            display: none !important;
          }
            .works__content__list__item__inner {
              width: 100%;
              height: auto;
              display: flex;
              flex-direction: column;
              align-items: start;
              gap: 0.75rem;
            }
              .works__content__list__item__inner .thumbnail {
                width: 100%;
                aspect-ratio: 16 / 9;
                height: auto;
              }
                .works__content__list__item__inner .thumbnail img {
                  width: 100%;
                  aspect-ratio: 16 / 9;
                  height: auto;
                  object-fit: cover;
                }
              .works__content__list__item__inner .texts {
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: start;
                gap: 1rem;
              }
                .works__content__list__item__inner .texts .title {
                  font-weight: 500;
                }
                .works__content__list__item__inner .texts .desc {
                }
#service{
  background-color: #E4E5E7;
  margin-top: 0;
  padding: 7.5rem 0 15rem;
}
footer{
  margin-top: 0 !important;
}

.side-line{
  position: fixed;
  height: 100%;
  width: calc(100% - 5rem);
  top: 0;
  left: 2.5rem;

  border-left: solid 0.5px var(--base-color);
  border-right: solid 0.5px var(--base-color);
  pointer-events: none;
}



/* @media (min-width: 768px) {


} */
@media screen and (max-width: 768px){
  .title__section__inner{
    padding: 7.5rem 0.75rem;
  }
      .title__section__inner__box .title{
        padding: 0.5rem 1rem;
        background-color: var(--base-color);
        width: fit-content;
      }
        .title__section__inner__box .sub-title{
          font-size: 1.4rem;
          line-height: 2.5rem;
        }
  .solution__section__inner {
    padding: 0 0.75rem;
  }
      .solution__content__list {
        column-gap: 0;
        row-gap: 5rem;
        flex-wrap: wrap;
      }
        .solution__content__list__item {
          min-width: none;
          width: 100%;
        }
  .works__section__inner{
    padding: 0 0.75rem
  }
      .works__content__list {
        column-gap: 0;
      }
        .works__content__list__item {
          min-width: none;
          width: 100%;
        }

  .side-line{
    width: calc(100% - 1.5rem);
    left: 0.75rem;
  }
}