/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties;
#index {
  .box_header {
    margin-bottom: calc(var(--spacing, 0.25rem) * 5);
    display: inline-flex;
    flex-direction: column;
    @media (width >= 40rem) {
      margin-bottom: calc(var(--spacing, 0.25rem) * 6);
    }
    @media (width >= 48rem) {
      margin-bottom: calc(var(--spacing, 0.25rem) * 8);
    }
    @media (width >= 64rem) {
      margin-bottom: calc(var(--spacing, 0.25rem) * 10);
    }
    @media (width >= 80rem) {
      margin-bottom: calc(var(--spacing, 0.25rem) * 12);
    }
    @media (width >= 96rem) {
      margin-bottom: calc(var(--spacing, 0.25rem) * 14);
    }
    .title_box {
      position: relative;
      margin-bottom: calc(var(--spacing, 0.25rem) * 1);
      display: inline;
      font-size: var(--text-3xl, 1.875rem);
      line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
      --tw-font-weight: var(--font-weight-bold, 700);
      font-weight: var(--font-weight-bold, 700);
      @media (width >= 64rem) {
        font-size: var(--text-4xl, 2.25rem);
        line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));
      }
      @media (width >= 96rem) {
        font-size: 42px;
      }
      a {
        position: relative;
        z-index: 1;
        &:hover {
          @media (hover: hover) {
            color: var(--color-secondary, #d9251b);
          }
        }
      }
      &::after {
        position: absolute;
        top: calc(var(--spacing, 0.25rem) * 0);
        right: calc(var(--spacing, 0.25rem) * 0);
        z-index: 0;
        display: block;
        height: calc(var(--spacing, 0.25rem) * 4.5);
        width: calc(var(--spacing, 0.25rem) * 4.5);
        border-radius: calc(infinity * 1px);
        border-style: var(--tw-border-style);
        border-width: 4px;
        border-color: var(--color-primary-500, #0e66cc);
        --tw-content: '';
        content: var(--tw-content);
      }
    }
    .desc_box {
      text-align: center;
      font-size: var(--text-sm, 0.875rem);
      line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
      color: var(--color-primary-500, #0e66cc);
    }
  }
}
#in_box_01 {
  background-image: url('../images/index/in_box_01_bg.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  text-align: center;
  @media (width >= 96rem) {
    padding-top: calc(var(--spacing, 0.25rem) * 8);
  }
  @media (width >= 96rem) {
    padding-bottom: calc(var(--spacing, 0.25rem) * 11);
  }
  @media (width >= 64rem) {
    text-align: left;
  }
  .box_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    @media (width >= 64rem) {
      flex-direction: row;
    }
    .box_left {
      margin-bottom: calc(var(--spacing, 0.25rem) * 5);
      height: 100%;
      width: 100%;
      @media (width >= 64rem) {
        margin-bottom: calc(var(--spacing, 0.25rem) * 0);
      }
      @media (width >= 64rem) {
        width: calc(1/2 * 100%);
      }
      @media (width >= 96rem) {
        padding-right: calc(var(--spacing, 0.25rem) * 5);
      }
      .item_box {
        padding-right: calc(var(--spacing, 0.25rem) * 8);
        @media (width >= 96rem) {
          padding-right: calc(var(--spacing, 0.25rem) * 0);
        }
        .company_title {
          margin-bottom: calc(var(--spacing, 0.25rem) * 1);
          font-size: var(--text-2xl, 1.5rem);
          line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
          --tw-font-weight: var(--font-weight-semibold, 600);
          font-weight: var(--font-weight-semibold, 600);
          color: color-mix(in srgb, #000 80%, transparent);
          @supports (color: color-mix(in lab, red, red)) {
            color: color-mix(in oklab, var(--color-black, #000) 80%, transparent);
          }
          @media (width >= 40rem) {
            font-size: var(--text-2xl, 1.5rem);
            line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
          }
          @media (width >= 48rem) {
            font-size: var(--text-2xl, 1.5rem);
            line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
          }
          @media (width >= 64rem) {
            font-size: var(--text-3xl, 1.875rem);
            line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
          }
          @media (width >= 80rem) {
            font-size: var(--text-3xl, 1.875rem);
            line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
          }
          @media (width >= 96rem) {
            font-size: var(--text-4xl, 2.25rem);
            line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));
          }
          @media (width >= 64rem) {
            margin-bottom: calc(var(--spacing, 0.25rem) * 2);
          }
        }
        .company_tags {
          margin-bottom: calc(var(--spacing, 0.25rem) * 6);
          font-size: var(--text-lg, 1.125rem);
          line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
          --tw-leading: var(--leading-relaxed, 1.625);
          line-height: var(--leading-relaxed, 1.625);
          color: #666666;
          @media (width >= 96rem) {
            margin-bottom: calc(var(--spacing, 0.25rem) * 12);
          }
        }
        .company_content {
          --tw-leading: 2;
          line-height: 2;
          color: #666666;
        }
        .number_list {
          margin-top: calc(var(--spacing, 0.25rem) * 7);
          margin-bottom: calc(var(--spacing, 0.25rem) * 4);
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          row-gap: calc(var(--spacing, 0.25rem) * 5);
          border-top-style: var(--tw-border-style);
          border-top-width: 1px;
          border-bottom-style: var(--tw-border-style);
          border-bottom-width: 1px;
          border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
          padding-block: calc(var(--spacing, 0.25rem) * 2);
          @media (width >= 64rem) {
            margin-top: calc(var(--spacing, 0.25rem) * 14);
          }
          @media (width >= 64rem) {
            margin-bottom: calc(var(--spacing, 0.25rem) * 8);
          }
          @media (width >= 64rem) {
            grid-template-columns: repeat(4, minmax(0, 1fr));
          }
          @media (width >= 64rem) {
            row-gap: calc(var(--spacing, 0.25rem) * 15);
          }
          @media (width >= 64rem) {
            padding-block: calc(var(--spacing, 0.25rem) * 7);
          }
          p:first-child {
            margin-bottom: calc(var(--spacing, 0.25rem) * 3);
            .num {
              display: inline-block;
              font-family: 'dincond';
              font-size: var(--text-4xl, 2.25rem);
              line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));
              --tw-font-weight: var(--font-weight-bold, 700);
              font-weight: var(--font-weight-bold, 700);
              color: var(--color-primary-500, #0e66cc);
              @media (width >= 96rem) {
                font-size: var(--text-5xl, 3rem);
                line-height: var(--tw-leading, var(--text-5xl--line-height, 1));
              }
            }
            .sub {
              margin-left: calc(var(--spacing, 0.25rem) * 2);
              display: inline-block;
              font-size: var(--text-sm, 0.875rem);
              line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
              color: var(--color-primary-500, #0e66cc);
            }
          }
          p:last-child {
            font-size: var(--text-sm, 0.875rem);
            line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
          }
        }
        .more {
          text-align: center;
          @media (width >= 64rem) {
            text-align: left;
          }
          .btn {
            display: inline-flex;
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
            gap: calc(var(--spacing, 0.25rem) * 2);
            border-radius: 30px 36px 12px 30px;
            background-color: var(--color-primary-500, #0e66cc);
            font-size: var(--text-sm, 0.875rem);
            line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
            color: var(--color-white, #fff);
            --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
            box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
            transition-property: all;
            transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
            transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
            --tw-duration: 300ms;
            transition-duration: 300ms;
            height: calc(var(--spacing, 0.25rem) * 10);
            padding-inline: calc(var(--spacing, 0.25rem) * 6);
            &:hover {
              @media (hover: hover) {
                background-color: var(--color-secondary, #d9251b);
              }
            }
            i {
              height: calc(var(--spacing, 0.25rem) * 3);
              width: calc(var(--spacing, 0.25rem) * 3);
              border-radius: calc(infinity * 1px);
              background-color: var(--color-white, #fff);
              transition-property: all;
              transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
              transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
              --tw-duration: 300ms;
              transition-duration: 300ms;
            }
            &:hover {
              i {
                height: calc(var(--spacing, 0.25rem) * 4);
                width: calc(var(--spacing, 0.25rem) * 4);
              }
            }
          }
        }
      }
    }
    .box_right {
      position: relative;
      height: 100%;
      width: 100%;
      @media (width >= 96rem) {
        height: 554px;
      }
      @media (width >= 64rem) {
        width: calc(1/2 * 100%);
      }
      @media (width >= 96rem) {
        display: flex;
      }
      @media (width >= 96rem) {
        justify-content: flex-end;
      }
      .item_box {
        position: relative;
        height: 100%;
        width: 100%;
        @media (width >= 96rem) {
          position: absolute;
        }
        @media (width >= 96rem) {
          top: calc(var(--spacing, 0.25rem) * 0);
        }
        @media (width >= 96rem) {
          left: calc(var(--spacing, 0.25rem) * 4);
        }
        @media (width >= 96rem) {
          width: 945px;
        }
      }
    }
  }
}
#in_box_02 {
  background-image: url('../images/index/in_box_02_bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  @media (width >= 96rem) {
    padding-top: calc(var(--spacing, 0.25rem) * 12);
  }
  @media (width >= 96rem) {
    padding-bottom: calc(var(--spacing, 0.25rem) * 14);
  }
  .goods_type {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--spacing, 0.25rem) * 4);
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .item {
      position: relative;
      display: flex;
      height: 100%;
      min-height: 15rem;
      width: 100%;
      align-items: flex-end;
      justify-content: space-between;
      overflow: hidden;
      border-radius: var(--radius-xl, 0.75rem);
      background-color: var(--color-white, #fff);
      background-image: url('../images/index/goods_type_slider_bg.jpg');
      background-size: cover;
      background-position: top-right;
      background-repeat: no-repeat;
      padding-inline: calc(var(--spacing, 0.25rem) * 4);
      padding-block: calc(var(--spacing, 0.25rem) * 13);
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
      transition-property: all;
      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
      transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
      --tw-duration: 300ms;
      transition-duration: 300ms;
      &:hover {
        @media (hover: hover) {
          --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
          box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
        }
      }
      @media (width >= 64rem) {
        flex-direction: row;
      }
      &.pos-left-top {
        @media (width >= 80rem) {
          grid-column-start: 1;
        }
        @media (width >= 80rem) {
          grid-row-start: 1;
        }
        img {
          width: calc(var(--spacing, 0.25rem) * 60);
        }
      }
      &.pos-left-bottom {
        grid-column-start: 1;
        @media (width >= 80rem) {
          grid-row-start: 2;
        }
        img {
          width: calc(var(--spacing, 0.25rem) * 60);
        }
      }
      &.pos-center {
        @media (width >= 80rem) {
          grid-column-start: 2;
        }
        @media (width >= 80rem) {
          grid-row: span 2 / span 2;
        }
        @media (width >= 80rem) {
          grid-row-start: 1;
        }
        @media (width >= 80rem) {
          flex-direction: column;
        }
        @media (width >= 80rem) {
          align-items: center;
        }
        @media (width >= 80rem) {
          justify-content: center;
        }
        .item_box {
          margin-bottom: calc(var(--spacing, 0.25rem) * 3);
          @media (width >= 80rem) {
            margin-bottom: calc(var(--spacing, 0.25rem) * 5);
          }
          @media (width >= 80rem) {
            padding-left: calc(var(--spacing, 0.25rem) * 0);
          }
          @media (width >= 80rem) {
            text-align: center;
          }
          .item_title {
            margin-bottom: calc(var(--spacing, 0.25rem) * 2);
            .p2 {
              margin-bottom: calc(var(--spacing, 0.25rem) * 5);
            }
          }
        }
        img {
          width: calc(var(--spacing, 0.25rem) * 90);
        }
      }
      &.pos-right-top {
        @media (width >= 80rem) {
          grid-column-start: 3;
        }
        @media (width >= 80rem) {
          grid-row-start: 1;
        }
        img {
          width: calc(var(--spacing, 0.25rem) * 60);
        }
      }
      &.pos-right-bottom {
        @media (width >= 80rem) {
          grid-column-start: 3;
        }
        @media (width >= 80rem) {
          grid-row-start: 2;
        }
        img {
          width: calc(var(--spacing, 0.25rem) * 60);
        }
      }
      .item_company {
        position: absolute;
        top: calc(var(--spacing, 0.25rem) * 0);
        left: calc(var(--spacing, 0.25rem) * 0);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-bottom-right-radius: var(--radius-3xl, 1.5rem);
        background-color: var(--color-primary-500, #0e66cc);
        padding-inline: calc(var(--spacing, 0.25rem) * 8);
        padding-block: calc(var(--spacing, 0.25rem) * 1.5);
        font-size: var(--text-2xl, 1.5rem);
        line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
        --tw-font-weight: var(--font-weight-bold, 700);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-white, #fff);
        @media (width >= 64rem) {
          font-size: var(--text-lg, 1.125rem);
          line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
        }
      }
      .item_img {
        display: flex;
        max-width: calc(1/3 * 100%);
        align-items: center;
        justify-content: center;
        @media (width >= 80rem) {
          max-width: none;
        }
        img {
          max-height: 100%;
          max-width: 100%;
          object-fit: contain;
        }
      }
      .item_box {
        @media (width >= 80rem) {
          padding-left: calc(var(--spacing, 0.25rem) * 5);
        }
        .item_title {
          margin-bottom: calc(var(--spacing, 0.25rem) * 2);
          .p1 {
            margin-bottom: calc(var(--spacing, 0.25rem) * 2);
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            font-size: var(--text-sm, 0.875rem);
            line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
            --tw-font-weight: var(--font-weight-bold, 700);
            font-weight: var(--font-weight-bold, 700);
            color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
            text-transform: uppercase;
            @media (width >= 64rem) {
              margin-bottom: calc(var(--spacing, 0.25rem) * 4);
            }
          }
          .p2 {
            margin-bottom: calc(var(--spacing, 0.25rem) * 4);
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            font-size: var(--text-3xl, 1.875rem);
            line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
            --tw-font-weight: var(--font-weight-bold, 700);
            font-weight: var(--font-weight-bold, 700);
            color: color-mix(in srgb, #000 80%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              color: color-mix(in oklab, var(--color-black, #000) 80%, transparent);
            }
            @media (width >= 64rem) {
              margin-bottom: calc(var(--spacing, 0.25rem) * 8);
            }
          }
          .p3 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            font-size: var(--text-sm, 0.875rem);
            line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
            --tw-font-weight: var(--font-weight-bold, 700);
            font-weight: var(--font-weight-bold, 700);
            color: var(--color-red-700, oklch(50.5% 0.213 27.518));
          }
        }
        .btn {
          margin-top: calc(var(--spacing, 0.25rem) * 2);
          font-size: var(--text-sm, 0.875rem);
          line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
          --tw-font-weight: var(--font-weight-bold, 700);
          font-weight: var(--font-weight-bold, 700);
          color: #e62129;
        }
      }
      .cover_title {
        position: absolute;
        bottom: calc(var(--spacing, 0.25rem) * 0);
        left: calc(var(--spacing, 0.25rem) * 0);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        width: 100%;
        --tw-gradient-position: to right;
        @supports (background-image: linear-gradient(in lab, red, red)) {
          --tw-gradient-position: to right in oklab;
        }
        background-image: linear-gradient(var(--tw-gradient-stops));
        --tw-gradient-from: color-mix(in oklab, var(--color-black, #000) 0%, transparent);
        --tw-gradient-via: color-mix(in oklab, var(--color-black, #000) 50%, transparent);
        --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
        --tw-gradient-stops: var(--tw-gradient-via-stops);
        --tw-gradient-to: color-mix(in oklab, var(--color-black, #000) 0%, transparent);
        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
        padding-block: calc(var(--spacing, 0.25rem) * 2);
        text-align: center;
        font-size: var(--text-lg, 1.125rem);
        line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
        --tw-font-weight: var(--font-weight-bold, 700);
        font-weight: var(--font-weight-bold, 700);
        color: var(--color-white, #fff);
        @media (width >= 64rem) {
          font-size: var(--text-sm, 0.875rem);
          line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
        }
      }
    }
  }
}
#in_box_03 {
  position: relative;
  padding-block: calc(var(--spacing, 0.25rem) * 0);
  .banner_s {
    position: relative;
    left: calc(1/2 * 100%);
    width: 100%;
    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
    @media (width >= 96rem) {
      width: 1920px;
    }
    .application_swiper {
      .swiper-slide {
        img {
          height: auto;
          min-height: 100%;
          width: 100%;
          --tw-scale-x: 110%;
          --tw-scale-y: 110%;
          --tw-scale-z: 110%;
          scale: var(--tw-scale-x) var(--tw-scale-y);
          transition-property: all;
          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
          transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
          transition-delay: 2000ms;
          --tw-duration: 1000ms;
          transition-duration: 1000ms;
          --tw-ease: linear;
          transition-timing-function: linear;
        }
      }
      .swiper-slide-active,.swiper-slide-duplicate-active {
        img {
          --tw-scale-x: 100%;
          --tw-scale-y: 100%;
          --tw-scale-z: 100%;
          scale: var(--tw-scale-x) var(--tw-scale-y);
          --tw-duration: 6000ms;
          transition-duration: 6000ms;
          --tw-ease: linear;
          transition-timing-function: linear;
        }
      }
    }
    .mask-cover {
      pointer-events: none;
      position: absolute;
      top: calc(var(--spacing, 0.25rem) * 0);
      left: calc(var(--spacing, 0.25rem) * 0);
      z-index: 2;
      height: 100%;
      width: 100%;
      .container {
        display: flex;
        height: 100%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding-block: calc(var(--spacing, 0.25rem) * 6);
        @media (width >= 64rem) {
          padding-top: calc(var(--spacing, 0.25rem) * 22);
        }
        @media (width >= 64rem) {
          padding-bottom: calc(var(--spacing, 0.25rem) * 10);
        }
        @media (width >= 80rem) {
          padding-top: calc(var(--spacing, 0.25rem) * 16);
        }
        @media (width >= 80rem) {
          padding-bottom: calc(var(--spacing, 0.25rem) * 11);
        }
        @media (width >= 96rem) {
          padding-top: calc(var(--spacing, 0.25rem) * 44);
        }
        @media (width >= 96rem) {
          padding-bottom: calc(var(--spacing, 0.25rem) * 22);
        }
        .header {
          @media (width >= 80rem) {
            margin-bottom: calc(var(--spacing, 0.25rem) * 20);
          }
          @media (width >= 96rem) {
            margin-bottom: calc(var(--spacing, 0.25rem) * 30);
          }
          .title {
            position: relative;
            font-size: var(--text-2xl, 1.5rem);
            line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
            --tw-font-weight: var(--font-weight-bold, 700);
            font-weight: var(--font-weight-bold, 700);
            color: var(--color-white, #fff);
            @media (width >= 64rem) {
              font-size: var(--text-3xl, 1.875rem);
              line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
            }
            @media (width >= 80rem) {
              font-size: var(--text-4xl, 2.25rem);
              line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));
            }
            @media (width >= 96rem) {
              font-size: var(--text-5xl, 3rem);
              line-height: var(--tw-leading, var(--text-5xl--line-height, 1));
            }
            &::after {
              margin-top: calc(var(--spacing, 0.25rem) * 6);
              margin-bottom: calc(var(--spacing, 0.25rem) * 5);
              display: block;
              height: calc(var(--spacing, 0.25rem) * 2);
              width: calc(var(--spacing, 0.25rem) * 16.5);
              background-color: var(--color-white, #fff);
              --tw-content: '';
              content: var(--tw-content);
              @media (width >= 80rem) {
                margin-top: calc(var(--spacing, 0.25rem) * 12);
              }
              @media (width >= 80rem) {
                margin-bottom: calc(var(--spacing, 0.25rem) * 10);
              }
            }
          }
          ul {
            display: none;
            @media (width >= 48rem) {
              display: block;
            }
            li {
              --tw-leading: 2.4;
              line-height: 2.4;
              color: var(--color-white, #fff);
            }
          }
        }
        .application_thumbs {
          pointer-events: auto;
          width: 100%;
          .thumb_item {
            position: relative;
            display: flex;
            height: calc(var(--spacing, 0.25rem) * 16);
            align-items: center;
            padding-block: calc(var(--spacing, 0.25rem) * 3);
            padding-left: calc(var(--spacing, 0.25rem) * 5);
            font-size: var(--text-lg, 1.125rem);
            line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
            @media (width >= 64rem) {
              height: calc(var(--spacing, 0.25rem) * 22);
            }
            @media (width >= 64rem) {
              padding-left: calc(var(--spacing, 0.25rem) * 10);
            }
          }
          .swiper-slide {
            cursor: pointer;
            transition-property: all;
            transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
            transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
            --tw-duration: 300ms;
            transition-duration: 300ms;
            .thumb_item {
              position: relative;
              overflow: hidden;
              background-color: color-mix(in srgb, #fff 80%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                background-color: color-mix(in oklab, var(--color-white, #fff) 80%, transparent);
              }
              color: color-mix(in srgb, #000 80%, transparent);
              @supports (color: color-mix(in lab, red, red)) {
                color: color-mix(in oklab, var(--color-black, #000) 80%, transparent);
              }
              .thumb_title {
                z-index: 10;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                transition-property: all;
                transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
                transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
                --tw-duration: 300ms;
                transition-duration: 300ms;
              }
              img {
                position: absolute;
                right: calc(var(--spacing, 0.25rem) * 0);
                bottom: calc(var(--spacing, 0.25rem) * 0);
                margin-right: calc(var(--spacing, 0.25rem) * 1.5);
                margin-bottom: calc(var(--spacing, 0.25rem) * 1);
                height: calc(var(--spacing, 0.25rem) * 10);
                width: calc(var(--spacing, 0.25rem) * 10);
                @media (width >= 64rem) {
                  margin-right: calc(var(--spacing, 0.25rem) * 3);
                }
                @media (width >= 64rem) {
                  margin-bottom: calc(var(--spacing, 0.25rem) * 2);
                }
              }
              &::after {
                position: absolute;
                right: calc(var(--spacing, 0.25rem) * -15);
                bottom: calc(var(--spacing, 0.25rem) * -15);
                z-index: 1;
                display: block;
                height: calc(var(--spacing, 0.25rem) * 30);
                width: calc(var(--spacing, 0.25rem) * 30);
                overflow: hidden;
                border-radius: calc(infinity * 1px);
                transition-property: all;
                transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
                transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
                --tw-duration: 500ms;
                transition-duration: 500ms;
                --tw-content: '';
                content: var(--tw-content);
                background: rgba(30, 128, 215, 0.4);
                @media (width >= 64rem) {
                  right: calc(var(--spacing, 0.25rem) * -20);
                }
                @media (width >= 64rem) {
                  bottom: calc(var(--spacing, 0.25rem) * -20);
                }
                @media (width >= 64rem) {
                  height: calc(var(--spacing, 0.25rem) * 40);
                }
                @media (width >= 64rem) {
                  width: calc(var(--spacing, 0.25rem) * 40);
                }
              }
            }
          }
          .swiper-slide-thumb-active, .swiper-slide:hover {
            .thumb_item {
              color: var(--color-white, #fff);
              img {
                z-index: 10;
                --tw-brightness: brightness(0%);
                --tw-grayscale: grayscale(100%);
                --tw-invert: invert(100%);
                filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
              }
              .thumb_title {
                --tw-translate-x: calc(var(--spacing, 0.25rem) * 5);
                translate: var(--tw-translate-x) var(--tw-translate-y);
                font-size: var(--text-xl, 1.25rem);
                line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
                --tw-font-weight: var(--font-weight-bold, 700);
                font-weight: var(--font-weight-bold, 700);
              }
              &::after {
                right: calc(var(--spacing, 0.25rem) * -15);
                bottom: calc(var(--spacing, 0.25rem) * -15);
                height: 200%;
                width: 200%;
                border-radius: 0;
                --tw-gradient-position: to bottom right;
                @supports (background-image: linear-gradient(in lab, red, red)) {
                  --tw-gradient-position: to bottom right in oklab;
                }
                background-image: linear-gradient(var(--tw-gradient-stops));
                --tw-gradient-from: #309ae8;
                --tw-gradient-to: #0066c5;
                --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
              }
            }
          }
        }
      }
    }
  }
}
#in_box_04 {
  text-align: center;
  @media (width >= 96rem) {
    padding-top: 52px;
  }
  @media (width >= 96rem) {
    padding-bottom: 62px;
  }
  .box_header {
    @media (width >= 96rem) {
      margin-bottom: calc(var(--spacing, 0.25rem) * 12);
    }
  }
  .box_content {
    --tw-gradient-position: to right;
    @supports (background-image: linear-gradient(in lab, red, red)) {
      --tw-gradient-position: to right in oklab;
    }
    background-image: linear-gradient(var(--tw-gradient-stops));
    --tw-gradient-from: #f5f5f5;
    --tw-gradient-to: #1c88d2;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    text-align: left;
    .features_swiper_2 {
      background-color: var(--color-white, #fff);
      padding-inline: calc(var(--spacing, 0.25rem) * 4);
      text-align: left;
      .feature2_card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        overflow: hidden;
      }
      .feature2_overlay {
        &::before {
          position: absolute;
          top: calc(var(--spacing, 0.25rem) * 0);
          left: calc(var(--spacing, 0.25rem) * 0);
          z-index: 1;
          display: block;
          height: calc(var(--spacing, 0.25rem) * 0);
          width: 100%;
          transition-property: all;
          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
          transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
          --tw-duration: 500ms;
          transition-duration: 500ms;
          --tw-content: '';
          content: var(--tw-content);
        }
        height: calc(var(--spacing, 0.25rem) * 45);
        width: 100%;
        background-color: #f5f5f5;
        padding-inline: calc(var(--spacing, 0.25rem) * 5);
        padding-block: calc(var(--spacing, 0.25rem) * 8);
        color: color-mix(in srgb, #000 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-black, #000) 80%, transparent);
        }
        @media (width >= 64rem) {
          height: calc(var(--spacing, 0.25rem) * 55);
        }
        @media (width >= 64rem) {
          padding-inline: calc(var(--spacing, 0.25rem) * 10);
        }
        @media (width >= 64rem) {
          padding-block: calc(var(--spacing, 0.25rem) * 8);
        }
        .feature2_title {
          position: relative;
          z-index: 1;
          margin-bottom: calc(var(--spacing, 0.25rem) * 5);
          font-size: var(--text-2xl, 1.5rem);
          line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
          --tw-font-weight: var(--font-weight-bold, 700);
          font-weight: var(--font-weight-bold, 700);
          transition-property: all;
          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
          transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
          --tw-duration: 500ms;
          transition-duration: 500ms;
          @media (width >= 64rem) {
            margin-bottom: calc(var(--spacing, 0.25rem) * 10);
          }
          @media (width >= 64rem) {
            font-size: var(--text-3xl, 1.875rem);
            line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
          }
          &::before {
            position: relative;
            z-index: 1;
            margin-bottom: calc(var(--spacing, 0.25rem) * 5);
            display: block;
            height: calc(var(--spacing, 0.25rem) * 1);
            width: calc(var(--spacing, 0.25rem) * 5);
            background-color: var(--color-primary-500, #0e66cc);
            transition-property: all;
            transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
            transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
            --tw-duration: 500ms;
            transition-duration: 500ms;
            --tw-content: '';
            content: var(--tw-content);
          }
        }
        .feature2_sub {
          position: relative;
          z-index: 1;
          font-size: var(--text-sm, 0.875rem);
          line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
          color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
          transition-property: all;
          transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
          transition-duration: var(--tw-duration, var(--default-transition-duration, 150ms));
          --tw-duration: 500ms;
          transition-duration: 500ms;
        }
      }
      .feature2_img {
        z-index: 10;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      .swiper-slide-active, .feature2_card:hover {
        .feature2_overlay {
          &::before {
            height: 100%;
            background-color: color-mix(in srgb, #0e66cc 90%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              background-color: color-mix(in oklab, var(--color-primary-500, #0e66cc) 90%, transparent);
            }
          }
          .feature2_title {
            color: var(--color-white, #fff);
            &::before {
              width: calc(var(--spacing, 0.25rem) * 10);
              background-color: var(--color-white, #fff);
            }
          }
          .feature2_sub {
            color: color-mix(in srgb, #fff 80%, transparent);
            @supports (color: color-mix(in lab, red, red)) {
              color: color-mix(in oklab, var(--color-white, #fff) 80%, transparent);
            }
          }
        }
      }
    }
  }
}
#in_box_05 {
  padding-top: calc(var(--spacing, 0.25rem) * 0);
  text-align: center;
  @media (width >= 96rem) {
    padding-bottom: 30px;
  }
  .box_content {
    text-align: left;
    .news_card {
      display: block;
      overflow: hidden;
      .news_meta {
        margin-bottom: calc(var(--spacing, 0.25rem) * 6);
        border-top-style: var(--tw-border-style);
        border-top-width: 1px;
        border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
        padding-top: calc(var(--spacing, 0.25rem) * 3);
        font-size: var(--text-lg, 1.125rem);
        line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
        color: var(--color-gray-500, oklch(55.1% 0.027 264.364));
        @media (width >= 64rem) {
          margin-bottom: calc(var(--spacing, 0.25rem) * 12);
        }
        @media (width >= 64rem) {
          font-size: var(--text-sm, 0.875rem);
          line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
        }
      }
      .news_title {
        margin-bottom: calc(var(--spacing, 0.25rem) * 8);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        font-size: var(--text-2xl, 1.5rem);
        line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
        color: color-mix(in srgb, #000 80%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          color: color-mix(in oklab, var(--color-black, #000) 80%, transparent);
        }
        @media (width >= 80rem) {
          font-size: var(--text-2xl, 1.5rem);
          line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
        }
        @media (width >= 96rem) {
          font-size: 1.75rem;
        }
      }
      .news_img {
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-font-weight: initial;
      --tw-border-style: solid;
      --tw-content: "";
      --tw-leading: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-duration: initial;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-ease: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}