/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
@layer properties;
.categoriese_box {
  overflow: hidden;
  background-color: var(--color-white, #fff);
  .cateList {
    dl {
      dt {
        a {
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          background-color: var(--color-primary-100, #d9e6f7);
          padding: 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)));
          --tw-leading: var(--leading-relaxed, 1.625);
          line-height: var(--leading-relaxed, 1.625);
          --tw-font-weight: var(--font-weight-bold, 700);
          font-weight: var(--font-weight-bold, 700);
          color: var(--color-primary-700, #04396f);
          &.active {
            color: var(--color-secondary, #d9251b);
          }
        }
      }
      dd {
        height: calc(var(--spacing, 0.25rem) * 0);
        overflow: hidden;
        background-color: var(--color-primary-50, #eff6fe);
        opacity: 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: 800ms;
        transition-duration: 800ms;
        a {
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          padding-inline: calc(var(--spacing, 0.25rem) * 3);
          padding-block: calc(var(--spacing, 0.25rem) * 2);
          padding-left: calc(var(--spacing, 0.25rem) * 5);
          font-size: var(--text-sm, 0.875rem);
          line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
          --tw-leading: var(--leading-relaxed, 1.625);
          line-height: var(--leading-relaxed, 1.625);
          color: var(--color-gray-600, oklch(44.6% 0.03 256.802));
          &:hover {
            @media (hover: hover) {
              color: var(--color-secondary, #d9251b);
            }
          }
        }
      }
      &:hover dd {
        opacity: 100%;
        @media (width >= 64rem) {
          height: auto;
        }
      }
    }
  }
}
.product_grid {
  .item {
    height: auto;
    .products_info {
      display: block;
      height: 100%;
      overflow: hidden;
      border-radius: 0.25rem;
      border-style: var(--tw-border-style);
      border-width: 1px;
      border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
      background-color: var(--color-white, #fff);
      &:hover {
        @media (hover: hover) {
          --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);
        }
      }
      .img_box {
        margin-bottom: calc(var(--spacing, 0.25rem) * 2);
      }
      .cont_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        border-radius: 0.25rem;
        background-color: var(--color-primary-50, #eff6fe);
        padding: calc(var(--spacing, 0.25rem) * 3);
        @media (width >= 64rem) {
          padding: calc(var(--spacing, 0.25rem) * 5);
        }
        .box {
          .title {
            margin-bottom: calc(var(--spacing, 0.25rem) * 1);
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            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);
            @media (width >= 64rem) {
              font-size: var(--text-xl, 1.25rem);
              line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
            }
          }
          .desc {
            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)));
            color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
          }
        }
        i {
          margin-left: calc(var(--spacing, 0.25rem) * 1);
          display: none;
          font-size: var(--text-4xl, 2.25rem);
          line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));
          color: var(--color-primary-500, #0e66cc);
          @media (width >= 48rem) {
            display: block;
          }
        }
      }
    }
  }
}
#page_products {
  main {
    position: relative;
    #box_1 {
      .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        @media (width >= 64rem) {
          flex-direction: row;
        }
      }
      .product_grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: calc(var(--spacing, 0.25rem) * 3);
        @media (width >= 64rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        @media (width >= 64rem) {
          gap: calc(var(--spacing, 0.25rem) * 4);
        }
        @media (width >= 80rem) {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        @media (width >= 80rem) {
          gap: calc(var(--spacing, 0.25rem) * 5);
        }
      }
    }
  }
}
#page_productinfo {
  background-color: var(--color-gray-50, oklch(98.5% 0.002 247.839));
  main {
    .title_h1 {
      margin-bottom: calc(var(--spacing, 0.25rem) * 6);
      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);
      text-transform: uppercase;
      @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)));
      }
    }
    #box_1 {
      padding-bottom: calc(var(--spacing, 0.25rem) * 0);
      .main_box {
        overflow: hidden;
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
        padding: calc(var(--spacing, 0.25rem) * 3);
        .layout_row {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          background-color: var(--color-white, #fff);
          @media (width >= 64rem) {
            flex-direction: row;
          }
          #proinfo_show {
            margin-bottom: calc(var(--spacing, 0.25rem) * 5);
            width: 100%;
            @media (width >= 64rem) {
              margin-bottom: calc(var(--spacing, 0.25rem) * 0);
            }
            @media (width >= 64rem) {
              width: 50%;
            }
            @media (width >= 64rem) {
              padding-right: 5%;
            }
            .gallery-top {
              .search_mask {
                pointer-events: none;
                position: absolute;
                right: calc(var(--spacing, 0.25rem) * 1);
                bottom: calc(var(--spacing, 0.25rem) * 1);
                z-index: 9;
                display: flex;
                height: 50px;
                width: 50px;
                align-items: center;
                justify-content: center;
                background-color: color-mix(in srgb, #000 30%, transparent);
                @supports (color: color-mix(in lab, red, red)) {
                  background-color: color-mix(in oklab, var(--color-black, #000) 30%, transparent);
                }
                color: var(--color-white, #fff);
                i {
                  font-size: var(--text-2xl, 1.5rem);
                  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
                }
              }
              .imgbox {
                display: block;
                background-color: var(--color-white, #fff);
                img {
                  height: 100%;
                  width: 100%;
                  max-width: 600px;
                  object-fit: contain;
                }
              }
            }
          }
          #proinfo_cont {
            width: 100%;
            padding: calc(var(--spacing, 0.25rem) * 3);
            @media (width >= 64rem) {
              width: 50%;
            }
            @media (width >= 64rem) {
              padding: calc(var(--spacing, 0.25rem) * 10);
            }
            .title_box {
              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);
              text-transform: uppercase;
              @media (width >= 64rem) {
                margin-bottom: calc(var(--spacing, 0.25rem) * 8);
              }
              @media (width >= 64rem) {
                font-size: var(--text-2xl, 1.5rem);
                line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
              }
            }
            .desc_box {
              margin-bottom: calc(var(--spacing, 0.25rem) * 8);
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 5;
              --tw-leading: 2;
              line-height: 2;
              color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
            }
            .btns_box {
              .btns_up {
                margin-bottom: calc(var(--spacing, 0.25rem) * 6);
                .btn_0 {
                  display: flex;
                  width: calc(1/2 * 100%);
                  max-width: 100%;
                  align-items: center;
                  justify-content: center;
                  border-radius: 0.25rem;
                  background-color: var(--color-primary-500, #0e66cc);
                  padding-inline: calc(var(--spacing, 0.25rem) * 2);
                  padding-block: calc(var(--spacing, 0.25rem) * 4);
                  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-white, #fff);
                  text-transform: uppercase;
                  &:hover {
                    @media (hover: hover) {
                      background-color: var(--color-secondary, #d9251b);
                    }
                  }
                }
              }
              .btns_down {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                gap: calc(var(--spacing, 0.25rem) * 2);
                @media (width >= 48rem) {
                  flex-direction: row;
                }
                @media (width >= 64rem) {
                  flex-direction: column;
                }
                @media (width >= 64rem) {
                  gap: calc(var(--spacing, 0.25rem) * 5);
                }
                @media (width >= 96rem) {
                  flex-direction: row;
                }
                .btn_1, .btn_2 {
                  display: flex;
                  align-items: center;
                  color: var(--color-primary-500, #0e66cc);
                  &:hover {
                    @media (hover: hover) {
                      color: var(--color-secondary, #d9251b);
                    }
                  }
                  i {
                    margin-right: calc(var(--spacing, 0.25rem) * 1);
                    font-size: var(--text-3xl, 1.875rem);
                    line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
                  }
                  span {
                    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);
                    @media (width >= 64rem) {
                      font-size: var(--text-2xl, 1.5rem);
                      line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    #box_2 {
      padding-bottom: calc(var(--spacing, 0.25rem) * 0);
      .container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        @media (width >= 64rem) {
          flex-direction: row;
        }
        .categoriese_box {
          padding: calc(var(--spacing, 0.25rem) * 3);
          @media (width >= 64rem) {
            padding: calc(var(--spacing, 0.25rem) * 5);
          }
          @media (width >= 96rem) {
            padding: calc(var(--spacing, 0.25rem) * 5);
          }
        }
        .main_box {
          overflow: hidden;
          border-style: var(--tw-border-style);
          border-width: 1px;
          border-color: var(--color-gray-200, oklch(92.8% 0.006 264.531));
          background-color: var(--color-white, #fff);
          padding: calc(var(--spacing, 0.25rem) * 3);
          @media (width >= 64rem) {
            padding: calc(var(--spacing, 0.25rem) * 10);
          }
          .mainInfo {
            p img {
              max-width: 100%;
            }
            dir {
              strong {
                margin-block: calc(var(--spacing, 0.25rem) * 5);
                display: block;
                font-size: var(--text-2xl, 1.5rem);
                line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
                --tw-leading: 1;
                line-height: 1;
                --tw-font-weight: var(--font-weight-bold, 700);
                font-weight: var(--font-weight-bold, 700);
                color: var(--color-primary-700, #04396f);
              }
              p, .g_info {
                .txt {
                  p {
                    font-size: var(--text-base, 1rem);
                    line-height: var(--tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
                    --tw-leading: 2;
                    line-height: 2;
                    color: var(--color-gray-700, oklch(37.3% 0.034 259.733));
                  }
                }
              }
              hr {
                margin-top: calc(var(--spacing, 0.25rem) * 5);
                height: calc(var(--spacing, 0.25rem) * 1);
                width: 100%;
                border-style: var(--tw-border-style);
                border-width: 1px;
                border-color: var(--color-gray-400, oklch(70.7% 0.022 261.325));
              }
            }
          }
        }
      }
    }
    #message_box {
      --tw-gradient-position: to bottom;
      @supports (background-image: linear-gradient(in lab, red, red)) {
        --tw-gradient-position: to bottom in oklab;
      }
      background-image: linear-gradient(var(--tw-gradient-stops));
      --tw-gradient-from: var(--color-gray-50, oklch(98.5% 0.002 247.839));
      --tw-gradient-to: var(--color-primary-50, #eff6fe);
      --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));
    }
    #box_3 {
      text-align: center;
      .main_box {
        text-align: left;
      }
    }
  }
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@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-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%;
}
@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-leading: initial;
      --tw-font-weight: initial;
      --tw-duration: initial;
      --tw-border-style: solid;
      --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-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%;
    }
  }
}