@charset "UTF-8";
/* ^scss에서 수정해주세요!  Don't edit .css file, Only work on the scss*/
.p_custom .main_container .com_pg_tit {
  padding-bottom: 30px;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .com_pg_tit {
    padding-bottom: 20px;
  }
}
.p_custom .main_container .notice {
  font-size: 20px;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .notice {
    font-size: 13px;
  }
}
.p_custom .main_container .step_sec {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  gap: 20px;
  padding-block: 36px 100px;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .step_sec {
    gap: 40px;
    padding-block: 25px;
  }
}
.p_custom .main_container .step_sec .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  gap: 10px;
  position: relative;
  font-size: 20px;
  color: #383838;
  font-weight: 500;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .step_sec .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    gap: 5px;
    font-size: 13px;
  }
}
.p_custom .main_container .step_sec .item:not(:last-child):after {
  content: "";
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/icon_step.png");
  width: 12px;
  height: 12px;
  margin-left: 10px;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .step_sec .item:not(:last-child):after {
    margin-left: 0;
    position: absolute;
    right: -27px;
    top: 50%;
    transform: translateY(-50%);
  }
}
.p_custom .main_container .step_sec .item .num {
  color: #FFF;
  font-size: 20px;
  font-weight: 500;
  width: 27.778px;
  height: 27.778px;
  background-color: #B7B7B7;
  border-radius: 100%;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .step_sec .item .num {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}
.p_custom .main_container .product_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 26px 26px;
  width: 100%;
}
.p_custom .main_container .product_list > * {
  width: calc((100% - 26px * 3) / 4);
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .product_list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px 12px;
    width: 100%;
  }
  .p_custom .main_container .product_list > * {
    width: calc((100% - 12px * 2) / 3);
  }
}
.p_custom .main_container .product_list .item {
  background-color: #F8F8F8;
  aspect-ratio: 1/1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  align-items: center;
  padding: 70px 24px 24px;
  gap: 50px;
  position: relative;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .product_list .item {
    gap: 17px;
    aspect-ratio: auto;
    padding: 13px 5px;
  }
}
.p_custom .main_container .product_list .item img {
  width: 230px;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .product_list .item img {
    width: 100px;
  }
}
.p_custom .main_container .product_list .item:hover:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.p_custom .main_container .product_list .item .name {
  color: #676767;
  font-size: 18px;
  font-weight: 500;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .product_list .item .name {
    font-size: 13px;
  }
}
.p_custom .main_container .product_list .item .name:after {
  content: "";
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("../img/icon_go.png");
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 1023.9px) {
  .p_custom .main_container .product_list .item .name:after {
    display: none;
  }
}

/* ------------------------------------------------------------------
   게시판 본문(에디터로 쓴 글) 표시 보정 — 2026-09-08 추가
   대상 : 뉴스 / 레퍼런스 / 브로슈어 / 시공사례 / FAQ 상세 · 이용약관 · 개인정보처리방침

   1) 동영상 : 유튜브를 넣으면 가로 640px 로 고정돼 휴대폰(375px)에서 290px 넘쳐
               화면이 옆으로 밀렸다(시공사례 "메탈 매립박스 설치 영상"에서 확인).
               폭을 맞추고 16:9 비율을 지킨다.
   2) 표     : 편집기가 만드는 표(table-bordered)에 테두리를 그린다.
               지금 이 표를 쓴 글은 없고, 앞으로 표를 넣었을 때 관리자 화면과 같게 보이게 하는 것.

   * 이미지와 표의 폭은 styles.css 의 `body img { max-width:100% }` ( :131 )
     `body table { width:100%; border-collapse:collapse }` ( :244 ) 가 이미 처리하므로 건드리지 않는다.
   ------------------------------------------------------------------ */
.view_contents .block iframe,
.p_policy_field iframe {
  max-width: 100%;
}
.view_contents .block iframe.note-video-clip,
.p_policy_field iframe.note-video-clip {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.view_contents .block table.table-bordered td,
.view_contents .block table.table-bordered th,
.p_policy_field table.table-bordered td,
.p_policy_field table.table-bordered th {
  border: 1px solid #ddd;
  padding: 6px;
}