@charset "utf-8";

.breadlist .inner {
    max-width: 1728px;
}

.page-content {
  position: relative;
  padding: 60px 0 120px;
}

.section-intro {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  margin-bottom: 80px;
}

.section-intro .text .page-title {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 50px;
}

.section-intro .text .page-title .sec__text-main .main {
  font-size: 52px;
  line-height: 75px;
}

.section-intro .text .page-title .sec__text-sub {
  font-size: 16px;
  line-height: 23px;
  margin-bottom: 15px;
}

.section-intro .text .desc {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 16px;
  line-height: 23px;
  color: #000;
}

.section-intro .img {
  max-width: 601px;
  width: 60%;
}

.section-features {
  margin-bottom: 46px;
}

.section-features .main {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 24px;
  line-height: 35px;
  color: #000;
  padding-left: 41px;
  margin-bottom: 24px;
  position: relative;
}

.section-features .main::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  margin: auto;
  transform: rotate(45deg);
}

.section-features .desc {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: #000;
}

.section-features img {
  margin-top: 40px;
}

.section-gallery .flex {
  display: flex;
  justify-content: center;
  gap: 76px;
}

.section-gallery .item .ttl {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
  color: #000;
  margin-bottom: 14px;
}

.section-gallery .item .img {
    width: 100%;
    height: 312px;
}

.section-gallery .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-gallery .item .list {
  display: grid;
  grid-template-columns: repeat(3, 169px);
  justify-content: space-between;
  margin-bottom: 22px;
}

.section-gallery .item .list .circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 1/1;
  background: url(/system_panel/uploads/images/20250920005402967782.png) no-repeat center / contain;
}

.section-gallery .item .list .circle .img {
  display: flex;
  justify-content: center;
  width: 76px;
  height: 72px;
}

.section-gallery .item .list .circle .img img {
  object-fit: contain;
  width: 100%;
}

.section-gallery .item .list .circle p {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 16px;
  color: #000;
}

.page-mortex,.page-stencil {
  overflow-x: clip;
}

.page-mortex .section-intro::before,.page-stencil .section-intro::before {
  content: "";
  background: url(/system_panel/uploads/images/20250920010802755860.png) no-repeat center / contain;
  width: 686px;
  height: 686px;
  position: absolute;
  top: 155px;
  right: calc(100% - 146px);
  z-index: -1;
}

.page-stencil .section-intro::before {
      background: url(/system_panel/uploads/images/20250920013248817029.png) no-repeat center / contain;
}

.page-mortex .page-content::after,.page-stencil .page-content::after {
  content: "";
  background: url(/system_panel/uploads/images/20250920010802125751.png) no-repeat center / contain;
  width: 919px;
  height: 919px;
  position: absolute;
  bottom: -178px;
  left: calc(100% - 169px);
  z-index: -1;
}

.page-stencil .page-content::after {
      background: url(/system_panel/uploads/images/20250920013248807331.png) no-repeat center / contain;
}


@media screen and (max-width: 1164px) {
  .section-intro {
        flex-direction: column;
        gap: 20px;
    }
    .section-intro .img {
        max-width: 100%;
        width: 100%;
    }
    .section-gallery .item .list {
            grid-template-columns: repeat(3, 31%);
    }
    .section-intro {
        gap: 40px;
    }

    .section-gallery .item .list .circle img {
        max-width: 100%;
        width: 30%;
    }

    .section-gallery .flex {
        gap: 20px;
        justify-content: space-between;
    }
}

@media screen and (max-width: 1023px) {
      .section-gallery .flex {
        flex-direction: column;
        gap: 40px;
    }    
    .section-gallery .item .list {
        grid-template-columns: repeat(3, 25%);
                justify-content: center;
                gap: 20px;
    }
}

@media screen and (max-width: 767px) {
    .page-content {
        max-width: 700px;
        width: 90%;
    }
    
    .section-features .desc {
        max-width: 624px;
        width: 90%;
        margin: auto;
        font-size: 13px;
        line-height: 20px;
    }


    .section-intro .text .page-title {
        flex-direction: column;
        gap: 2px;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 20px;
    }
    .section-intro .text .page-title .sec__text-main .main {
        font-size: 39px;
        line-height: 56px;
    }
    .section-intro .text .page-title .sec__text-sub {
        font-size: 12px;
        line-height: 17px;
        margin-left: 39px;
        margin-bottom: 0;
    }

    .section-intro .text .desc {
                font-size: 13px;
        line-height: 20px;
    }
    .section-features img {
      max-width: 624px;
        width: 90%;
        margin: 40px auto auto;
      height: 164px;
      object-fit: cover;
    }

    .section-features .main {
        font-size: 20px;
        margin-bottom: 16px;
    }

    .section-features {
        margin-bottom: 40px;
    }

    .section-gallery .item .img {
      height: 203px;
    }
    .section-gallery .item .list .circle p {
              font-size: 13px;
    }

    .section-gallery .item .list .circle .img {
      width: 100%;
              height: 35px;
    }
     .section-gallery .item .list {
        grid-template-columns: repeat(3, 33%);
        gap: 10px;
      }

}