/* 회사소개 -- company/main.asp
   CSS ONLY ON THE LEGACY MARKUP: re_company.css, base.css and sub.css all land in
   <body> and cascade AFTER this file, so every selector here carries `html body`. */

/* ---- 0. base ------------------------------------------------------------- */

/* The SEO heading is the parity anchor: the mockup body clipped a 1x1 box, the
   legacy .ir_pm leaves a full-width 0px-tall one, and the two differ by a pixel
   in x and y -- which every run below would inherit. */

@media (max-width: 1023px) {
html body .intro_wrap > h1.ir_pm {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); white-space: nowrap;
}

html body .cont_wrap {
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px; line-height: 1.5; letter-spacing: -.01em; color: #3a3d44;
}

html body .cont_wrap, html body .cont_wrap *,
html body .cont_wrap *::before, html body .cont_wrap *::after { box-sizing: border-box; }

/* .w1200 is the site-wide 1200px lock; the mockup centres 1000px instead.  The
   second rule is for the four places .w1200 sits inside another .w1200. */

html body .cont_wrap .w1200 {
  width: auto; max-width: 1000px; margin: 0 auto; padding: 0 30px;
}

html body .cont_wrap .w1200 .w1200 { max-width: none; padding-left: 0; padding-right: 0; }

/* ---- 1. hero (.main_visual) --------------------------------------------- */

html body .main_visual .visual_box { height: 400px; background: #222; }

/* the slide URLs are inline style="background:url(...)", so the shorthand has
   already reset background-size and only a priority reaches it. */

html body .main_visual .swiper-slide { background-size: cover !important; }

html body .main_visual .swiper-button-prev,
html body .main_visual .swiper-button-next {
  width: 44px; height: 44px; margin-top: 0; border-radius: 50%;
  background: rgba(255,255,255,.85); transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; color: #333;
}

html body .main_visual .swiper-button-prev { left: 20px; }

html body .main_visual .swiper-button-next { right: 20px; }

html body .main_visual .swiper-button-prev:hover,
html body .main_visual .swiper-button-next:hover { background: #fff; }

/* the mockup body put the glyph in a <button>; the legacy divs have no text node */

html body .main_visual .swiper-button-prev::before { content: "\2039"; }

html body .main_visual .swiper-button-next::before { content: "\203A"; }

/* ---- 2. section heading (.main_tit / h4.main_title) --------------------- */

html body .cont_wrap .main_tit { padding-top: 56px; }

html body .cont_wrap .main_tit .main_title {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin: 0 0 24px;
  font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800;
  line-height: 1.5; color: #222; letter-spacing: -.01em;
}

/* the 1200px black rule under every heading is legacy decoration the mockup drops */

html body .cont_wrap .main_tit .main_title::after { content: none; }

html body .cont_wrap .main_tit .main_title a,
html body .cont_wrap .main_tit .main_title span {
  position: static; flex: 0 0 auto; white-space: nowrap;
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 13.5px; font-weight: 400; line-height: 1.5; color: #888;
  letter-spacing: -0.14px; text-align: start;
}

/* re_company.css draws .map as an outlined 100x35 button, with !important on the
   border; the mockup has plain grey text with a chevron. */

html body .cont_wrap .main_tit .main_title .map {    display: block; width: auto; height: auto; margin: 0; border: 0 !important;
  border-radius: 0; border: 1px solid #159fda !important; color: #159fda;  padding: 3px 10px;    margin-bottom: 5px; font-size: 10px;
}

html body .cont_wrap .main_tit .main_title a:hover .map,
html body .cont_wrap .main_tit .main_title a:hover { color: #159fda; background: none; }
html body .cont_wrap .main_tit .main_title::after {         width: 100% !important;        height: 3px;        background-color: #000;        content: "";
        position: absolute;        top: 112% !important;        left: 0%;}
html body .cont_wrap .main_tit .main_title a .map::after { content: " \203A"; }


/* ---- 2. info (.company_info) ------------------------------------ */

html body .cont_wrap .company_info { padding: 20px 0 0!important; }


/* ---- 3. intro block (.company_goods) ------------------------------------ */

html body .cont_wrap .company_goods { padding: 0 30px 56px; }

html body .company_goods h4 {
  margin: 0 0 18px; font-size: 24px; font-weight: 800; line-height: 1.5;
  color: #222; letter-spacing: -.02em; text-align: start;
}

html body .company_goods p.sub_txt {
  margin: 0; font-size: 15px; font-weight: 400; line-height: 1.9; color: #666;
}

/* the mockup body split this paragraph in two and left 12px between them; the
   legacy markup has one <p> with a doubled <br>, and Blink answers nothing but
   display:none on a <br>.  The blank line goes; the 12px cannot come back. */

html body .company_goods p.sub_txt br:nth-of-type(3) { display: none; }

/* ---- 4. the company table (.company_goods table) ------------------------ */

/* table-layout stays AUTO: with `fixed` Blink hands every column 940/5 here and
   the five widths the first row specifies are never read.  border-collapse is
   SEPARATE because a collapsed rule paints half a pixel above the cell box. */

html body .company_goods table {
  width: 100%; margin-top: 42px; border-collapse: separate;
  font-size: 14px; color: inherit; text-align: start;
}

html body .company_goods table tr { height: auto; }

html body .company_goods table tr:first-child { border-top: 0; }

html body .company_goods table tr.last_tr { height: auto; border-bottom: 0; }

html body .company_goods table th,
html body .company_goods table td {
  padding: 18px 0 18px 4px; vertical-align: top;
  border-bottom: 0; border-top: 1px solid #e5e8ec;
}

html body .company_goods table th {
  width: 110px; font-weight: 700; color: #333; text-align: start;
}

html body .company_goods table td {
  width: 340px; font-size: 14px; line-height: 1.6; color: #666;
}

/* the 100px spacer cell is the mockup grid's 40px column gap.  base.css gives
   .ir_pm display:block, which takes the cell out of the row and leaves the table
   dividing five equal columns instead of the five it was given. */

html body .company_goods table td.table_blank {
  display: table-cell; width: 40px; padding: 0;
}

/* the last row's right half is two empty cells; the mockup grid has no cell there */

html body .company_goods table tr th:empty,
html body .company_goods table tr td:empty { border-top: 0; }

/* ---- 5. the grey band (.workspace + .goods) ----------------------------- */

/* the mockup tints the whole 공장/주요상품 section; legacy tints a 455px strip and
   pulls .our_space back over it with a negative margin the .w1200 rule cancels. */

html body .cont_wrap > div:has(> .workspace) { background: #f5f6f8; }

html body .workspace .workspace_bg { display: none; }

html body .cont_wrap > div:has(> .workspace) .main_tit { padding-top: 60px; }

html body .cont_wrap > div:has(> .workspace) > .w1200:last-child { padding-bottom: 60px; }

html body .workspace p.sub_txt,
html body .goods p.sub_txt {
  margin: 40px 0 12px; font-size: 18px; font-weight: 800; line-height: 1.5;
  color: #222;
}

html body .workspace span,
html body .goods span {
  display: block; font-size: 14px; line-height: 1.8; color: #777;
}

html body .workspace .our_space ul { margin: 20px 0 0; }

html body .workspace .our_space ul li img { width: 100%; border-radius: 8px; }

html body .workspace .our_space .workspace_txt {
  margin: 12px 0 0; font-size: 13px; color: #999;
}

html body .goods ul {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  width: auto; margin: 16px 0 0;
}

html body .goods ul li img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px;
}

/* ---- 6. map (#location .layer_box) -------------------------------------- */

html body .cont_wrap .location { padding: 0 30px 56px; }

html body .location > .layer_box section {
  width: auto; height: auto; padding: 0 !important;
}

/* mCustomScrollbar wraps the map in five boxes and writes the rail's display
   INLINE; location.html writes height:450px inline on #map itself.  Those two are
   where a priority is needed, and measured: nowhere else in this block. */

html body .location .mCustomScrollBox,
html body .location .mCSB_container { width: 100%; overflow: visible; }

html body .location .mCSB_scrollTools { display: none !important; }

html body .location #map {
  height: auto !important; aspect-ratio: 16 / 7;
  border: 1px solid #e5e8ec; border-radius: 8px; background: #eef2f6; overflow: hidden;
}

/* ---- 7. address table (.location table) --------------------------------- */

html body .location table {
  width: 100%; margin-top: 24px; border-collapse: separate;
  font-size: 14px; color: inherit; text-align: start;
}

html body .location table tr { height: auto; }

html body .location table tr:first-child { border-top: 0; }

html body .location table tr.last_tr { height: auto; border-bottom: 0; }

html body .location table th,
html body .location table td {
  padding: 18px 0 18px 4px; vertical-align: top;
  border-bottom: 0; border-top: 1px solid #e5e8ec;
}

html body .location table th { width: 120px; font-weight: 700; color: #333; text-align: start; }

html body .location table td { width: auto; line-height: 1.7; color: #666; }

html body .location table td span {
  display: inline-block; min-width: 40px; margin-right: 4px;
  font-size: 12px; color: #555;
}

/* ---- 8. contact table (.inquiring table) -------------------------------- */

html body .cont_wrap .inquiring { padding: 0 30px 56px; }

html body .inquiring table {
  width: 100%; margin-top: 24px; table-layout: fixed;
  font-size: 14px; color: inherit;
}

html body .inquiring table tr { height: auto; }

html body .inquiring table tr:first-child { background: none; }

html body .inquiring table tr.last_tr { height: auto; border-bottom: 0; }

html body .inquiring table tr:first-child th,
html body .inquiring table tr:first-child td {
  background: #fafbfc; border-top: 1px solid #333; border-bottom: 1px solid #e5e8ec;
  padding: 14px 16px; font-weight: 700; color: #555;
}

html body .inquiring table th,
html body .inquiring table td {
  padding: 18px 16px; vertical-align: top; border-bottom: 1px solid #eef0f3;
  line-height: 1.5; color: #666;
}

html body .inquiring table td { word-break: break-word; }

/* the mockup body made all three heading cells <th>; legacy writes th + td + td,
   and the two <td> of that row take the body cells' break rule unless told not to */

html body .inquiring table tr:first-child td { word-break: keep-all; }

html body .inquiring table th { width: 24%; font-weight: 700; color: #333; }

html body .inquiring table tr td:first-of-type { width: 28%; }

html body .inquiring table tr td + td { width: 48%; }
}

/* ---- 9. <= 1024 --------------------------------------------------------- */

@media (max-width: 1023px) {
  html body .cont_wrap .w1200 { padding: 0 16px; }
  html body .cont_wrap .main_tit { padding-top: 34px; }
  html body .cont_wrap > div:has(> .workspace) .main_tit { padding-top: 34px; }
  html body .cont_wrap > div:has(> .workspace) > .w1200:last-child { padding-bottom: 34px; }
  html body .cont_wrap .company_goods { padding: 0px; }
  html body .cont_wrap .location { padding: 0px; }
  html body .cont_wrap .inquiring { padding: 0px; }

  html body .main_visual .visual_box { height: 240px; }
  html body .main_visual .swiper-button-prev,
  html body .main_visual .swiper-button-next { width: 36px; height: 36px; font-size: 16px; }
  html body .main_visual .swiper-button-prev { left: 10px; }
  html body .main_visual .swiper-button-next { right: 10px; }

  html body .cont_wrap .main_tit .main_title { font-size: 20px; }
  html body .company_goods h4 { font-size: 19px; }

  /* the two-column table becomes one column: every th/td pair fills a line, and
     the mockup rows carry padding on BOTH sides once the text reaches the edge */
  html body .company_goods table tr { display: flex; flex-wrap: wrap; }
  html body .company_goods table th { flex: 0 0 110px; }
  html body .company_goods table td { flex: 0 0 calc(100% - 110px); width: auto; }
  html body .company_goods table td { padding-right: 4px; }
  html body .location table td { padding-right: 4px; }
  /* the spacer keeps its (hidden) text run at every width: a display:none subtree
     is not walked at all, and the run would go missing from HIDDEN_ONLY below 1025. */
  html body .company_goods table td.table_blank { flex: 0 0 0; }
  html body .company_goods table tr th:empty,
  html body .company_goods table tr td:empty { display: none; }

  /* Two <ul> of three: at three columns that is one row each, like the mockup grid.
     At TWO it is 2+1 twice -- four rows with two orphans, not the mockup's three rows
     of two -- so display:contents hands all six <li> to .goods itself. */
  html body .cont_wrap .goods {        padding: 0px 0 30px;
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 16px;
  }
  html body .cont_wrap .goods > p.sub_txt,
  html body .cont_wrap .goods > .workspace { grid-column: 1 / -1; }
  html body .goods > ul { display: contents; }
  /* a grid item with margin:auto is sized to its content and centred; .w1200 carries
     margin:0 auto, so the 옵셋인쇄 block would shrink away from both edges */
  html body .cont_wrap .goods > .workspace { margin: 0; }
  /* a grid gap does not collapse with a margin, so the two seams the mockup made by
     collapsing (12 into 16, and 40 across the grid) have to be restated as margins */
  html body .cont_wrap .goods > p.sub_txt { margin-bottom: 0; }
  html body .cont_wrap .goods > .workspace > p.sub_txt:first-child { margin-top: 24px; }

  html body .location #map { aspect-ratio: 4 / 3; }

  /* the contact table becomes cards */
  html body .inquiring table,
  html body .inquiring table tbody,
  html body .inquiring table tr,
  html body .inquiring table th,
  html body .inquiring table td { display: block; width: 100%; }
  html body .inquiring table tr:first-child { display: none; }
  html body .inquiring table tr {
    border: 1px solid #e5e8ec; border-radius: 8px; margin-bottom: 12px; padding: 10px 14px;
  }
  /* the >=1025 rule strips .last_tr's 2px legacy rule; the card needs its own back */
  html body .inquiring table tr.last_tr { border-bottom: 1px solid #e5e8ec; }
  html body .inquiring table th,
  html body .inquiring table td,
  html body .inquiring table tr td:first-of-type,
  html body .inquiring table tr td + td { border: 0; padding: 5px 0; width: 100%; }
  /* the mockup body carried data-l on every cell; the legacy markup has none, so
     the three labels are written out per column position instead. */
  html body .inquiring table tr th::before { content: "업무 · "; }
  html body .inquiring table tr td:first-of-type::before { content: "내용 · "; }
  html body .inquiring table tr td + td::before { content: "E-mail · "; }
  html body .inquiring table tr th::before,
  html body .inquiring table tr td::before {
    color: #9aa0a8; font-size: 12.5px; font-weight: 400;
  }
}