@charset "utf-8";

/* 회사소개 */
.intro { padding: 0 0 80px; }
.intro-title { font-size: var(--font-size40); font-weight: 700; line-height: 1.2em; color: #242424; text-align: center; margin-bottom: 80px; }
.intro-greet { display: flex; align-items: stretch; }
.intro-greet-img { flex: 0 0 690px; width: 690px; max-width: 48%; border-radius: 32px; overflow: hidden; }
.intro-greet-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-greet-cont { flex: 1 1 auto; min-width: 0; width: 1%; display: flex; flex-direction: column; gap: 32px; padding: 60px 0 60px 60px; box-sizing: border-box; }
.intro-greet-tit { font-size: var(--font-size40); font-weight: 700; line-height: 1.3em; color: #242424; }
.intro-greet-tit em { font-style: normal; color: var(--color-primary); }
.intro-greet-txt { display: flex; flex-direction: column; gap: 16px; }
.intro-greet-txt p { font-size: var(--font-size18); font-weight: 400; line-height: 1.778em; color: #454545; }
.intro-greet-txt p strong { font-weight: 400; color: #242424; }
.intro-process { padding: 100px 0; background: #f8f8f8; }
.intro-sec-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 60px; }
.intro-sec-head .label { font-weight: 600; line-height: 1.5em; color: #999; }
.intro-sec-head .tit { font-size: var(--font-size32); font-weight: 700; line-height: 1.312em; color: #242424; }
.intro-process-list { display: flex; align-items: center; justify-content: space-between; max-width: 1196px; margin-left: auto; margin-right: auto; }
.intro-process-list > li { flex: 1 1 auto; min-width: 0; width: 1%; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.intro-process-list > li.arrow { flex: 0 0 66px; width: 66px; display: flex; align-items: center; justify-content: center; }
.intro-process-list > li.arrow.multi { flex-direction: column; gap: 4px; }
.intro-process-list .ico { display: flex; align-items: center; justify-content: center; }
.intro-process-list .name { font-size: var(--font-size20); font-weight: 600; line-height: 1.4em; color: #242424; }
.intro-process-list .en { font-weight: 500; line-height: 1.5em; color: #868686; text-transform: uppercase; }
.intro-network { padding: 100px 0 120px; }
.intro-map { text-align: center; }

/* 제품안내 */
.prd { display: flex; flex-direction: column; align-items: center; gap: 80px; }
.prd-title { font-size: var(--font-size40); font-weight: 700; line-height: 1.2em; color: #242424; text-align: center; }
.prd-search { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; max-width: 728px; }
.prd-search-form { display: flex; align-items: center; gap: 16px; width: 100%; }
.prd-search-input { flex: 1 1 auto; min-width: 0; width: 1%; height: 72px; padding: 10px 32px; border: 2px solid var(--color-secondary); border-radius: 500px; background: #fff; font-size: var(--font-size18); line-height: 1.333em; color: #242424; box-sizing: border-box; }
.prd-search-input::placeholder { color: #999; }
.prd-search-input:focus { outline: none; }
.prd-search-btn { flex: 0 0 72px; width: 72px; height: 72px; border: none; border-radius: 500px; background: var(--color-secondary) url("../images/sub/sub2-sch.png") center no-repeat; background-size: contain; text-indent: -9999em; cursor: pointer; }
.prd-keyword { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.prd-keyword strong { font-size: var(--font-size18); font-weight: 700; line-height: 1.444em; color: #242424; }
.prd-keyword ul { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.prd-keyword ul li a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 8px; background: rgba(0,0,0,0.05); font-weight: 500; line-height: 1.5em; color: #454545; transition: .25s; }
.prd-keyword ul li a:hover { background: var(--color-primary); color: #fff; }
.prd-body { display: flex; flex-direction: column; width: 100%; }
.prd-cate-swiper { width: 100%; overflow: hidden; margin-bottom: 100px; }
.prd-cate-swiper .sec1-card.active { background: var(--color-primary); }
.prd-cate-swiper .sec1-card.active .thumb { background: var(--color-primary); }
.prd-cate-swiper .sec1-card.active .tit { color: #fff; align-self: flex-start; padding: 0 30px; }
.prd-cate-swiper .sec1-card.active .arrow { opacity: 1; }
.prd-panels { width: 100%; }
.prd-list { display: flex; flex-wrap: wrap; gap: 64px 24px; width: 100%; padding-bottom: 50px; }
.prd-panels .prd-list { display: none; }
.prd-panels .prd-list.active { display: flex; }
.prd-list > li { width: calc((100% - 96px) / 5); }
.product-lnb-wrap {position:relative; margin-bottom: 40px; }
.lnb ul {display:flex;}
.lnb ul li {flex:1; text-align:center; }
.lnb ul li a {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:52px; padding:0 15px; color:#454545; font-size:var(--font-size20); font-weight:600; line-height:1.33em; letter-spacing:-.03em; position: relative; border-bottom: 2px solid #ddd;}
.lnb ul li.active a {color:var(--color-primary); border-color: var(--color-primary);}
.lnb ul li a:hover { color: var(--color-primary);}

/* 결과 없음 안내 — 5칸 그리드 한 칸에 끼지 않도록 한 줄 전체를 쓰고 가운데 정렬 (board.css 의 li.none 과 동일 관례) */
.prd-list > li.none { width: 100%; padding: 70px 0; text-align: center; color: #767676; }
.prd-list > li > a { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.prd-list .thumb { width: 100%; aspect-ratio: 268 / 296; border: 1px solid #ddd; border-radius: 20px; overflow: hidden; background: #eee; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.prd-list .thumb img { display: block; max-width: 70%; max-height: 70%; width: auto; height: auto; object-fit: contain; }
.prd-list .tit { font-size: var(--font-size20); font-weight: 600; line-height: 1.4em; color: #242424; text-align: center; }

/* 제품안내 상세 */
.prd-view { display: flex; flex-direction: column; gap: 80px; }
.prd-summary { display: flex; align-items: flex-start; gap: 60px; }
.prd-summary .image { flex: 0 0 540px; width: 540px; max-width: 40%; }
.prd-summary .thumb { width: 100%; aspect-ratio: 540 / 597; border: 1px solid #ddd; border-radius: 20px; overflow: hidden; background: #eee; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.prd-summary .thumb img { display: block; max-width: 85%; max-height: 85%; width: auto; height: auto; object-fit: contain; }
.prd-summary .cont { flex: 1 1 auto; min-width: 0; width: 1%; display: flex; flex-direction: column; gap: 40px; }
.prd-summary .head { display: flex; flex-direction: column; gap: 24px; }
.prd-summary .tit { font-size: var(--font-size40); font-weight: 700; line-height: 1.2em; color: #242424; }
.prd-summary .desc { font-size: var(--font-size20); font-weight: 500; line-height: 1.4em; color: #454545; }
.prd-summary .tags { display: flex; flex-wrap: wrap; gap: 8px; }
.prd-summary .tags li { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border: 1px solid rgba(197,0,4,0.3); border-radius: 50px; background: rgba(197,0,4,0.03); font-size: 14px; font-weight: 500; line-height: 1.571em; color: var(--color-primary); }
.prd-summary .info { display: flex; flex-direction: column; gap: 32px; }
.prd-summary .block { display: flex; flex-direction: column; gap: 12px; }
.prd-summary .label { display: flex; align-items: center; gap: 8px; font-size: var(--font-size18); font-weight: 600; line-height: 1.444em; color: #242424; }
.prd-summary .label::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: url("../images/sub/sub2-chk.png") center no-repeat; background-size: contain; }
.prd-summary .block p { line-height: 1.875em; color: #454545; }
.prd-summary .block ul li { position: relative; padding-left: 12px; line-height: 1.875em; color: #454545; }
.prd-summary .block ul li::before { content: "•"; position: absolute; left: 0; top: 0; }
.prd-summary .btn-box { display: flex; gap: 16px; width: 100%; }
.prd-summary .btn-box .btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 24px; border-radius: 8px; font-size: var(--font-size18); font-weight: 600; line-height: 1.333em; box-sizing: border-box; transition: .25s; }
.prd-summary .btn-box .btn.catalog { background: var(--color-primary); color: #fff; }
.prd-summary .btn-box .btn.inquire { background: var(--color-secondary); color: #fff; }
.prd-summary .btn-box .btn.list { background: #ddd; color: #454545; }
.prd-spec,
.prd-detail { display: flex; flex-direction: column; }
.prd-view .sec-tit { display: flex; align-items: center; gap: 10px; padding-bottom: 24px; font-size: var(--font-size24); font-weight: 600; line-height: 1.333em; color: #242424; }
.prd-view .sec-tit::before { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: url("../images/sub/sub2-bf.png") center no-repeat; background-size: contain; }
.prd-detail .sec-tit { border-bottom: 1px solid #ddd; margin-bottom: 16px; }
.prd-spec .table-wrap { border: 1px solid #ddd; overflow: hidden; }
.prd-spec table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.prd-spec thead th { height: 60px; background: #f8f8f8; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: var(--font-size18); font-weight: 600; line-height: 1.444em; color: #454545; text-align: center; }
.prd-spec tbody th,
.prd-spec tbody td { height: 60px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; font-weight: 400; line-height: 1.5em; color: #454545; text-align: center; }
.prd-spec th:last-child,
.prd-spec td:last-child { border-right: 0; }
.prd-spec tr:last-child th,
.prd-spec tr:last-child td { border-bottom: 0; }
.prd-detail ul { padding: 0 26px; }
.prd-detail ul li { position: relative; padding-left: 14px; font-size: var(--font-size18); line-height: 2em; color: #454545; }
.prd-detail ul li::before { content: "•"; position: absolute; left: 0; top: 0; }
.prd-edit p { font-size: var(--font-size28); font-weight: 600; line-height: 1.429em; color: #686868; }

/* 오시는 길 */
.location { display: flex; flex-direction: column; gap: 60px; }
.loc-map { border-radius: 24px; overflow: hidden; }
.loc-info { display: flex; flex-direction: column; gap: 40px; width: 100%; }
.loc-head { display: flex; flex-direction: column; gap: 16px; }
.loc-name { display: flex; align-items: center; gap: 8px; font-size: var(--font-size18); font-weight: 600; line-height: 1.444em; color: var(--color-secondary); }
.loc-name::before { content: ""; flex: 0 0 24px; width: 24px; height: 24px; background: url("../images/sub/add.png") center no-repeat; background-size: contain; }
.loc-addr { font-size: var(--font-size28); font-weight: 600; line-height: 1.429em; color: #242424; }
.loc-list { width: 100%; border-top: 1px solid #000; }
.loc-list > li { display: flex; align-items: center; gap: 24px; padding: 32px; border-bottom: 1px solid #ddd; box-sizing: border-box; }
.loc-list > li strong { flex: 0 0 43px; width: 43px; font-size: var(--font-size18); font-weight: 600; line-height: 1.556em; color: var(--color-primary); }
.loc-list > li span { font-size: var(--font-size20); font-weight: 500; line-height: 1.4em; color: #242424; }
.loc-list > li span a { color: inherit; }

/* 문의하기 */
.inq-form { width: 100%; }
.inq-box { background: #f8f8f8; border-radius: 32px; padding: 48px; box-sizing: border-box; }
.inq-inner { display: flex; flex-direction: column; gap: 80px; background: #fff; border-radius: 16px; padding: 56px; box-sizing: border-box; }
.inq-sections { display: flex; flex-direction: column; gap: 56px; width: 100%; }
.inq-sec { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.inq-sec-tit { font-size: var(--font-size24); font-weight: 700; line-height: 1.333em; color: #242424; }
.inq-row { display: flex; gap: 24px; width: 100%; }
.inq-field { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0; min-width: 0; width: 100%; }
.inq-label { font-size: var(--font-size18); font-weight: 600; line-height: 1.444em; color: #242424; }
.inq-label em { font-style: normal; color: var(--color-primary); }
.inq-label .inq-note { font-weight: 400; color: #242424; }
.inq-input { width: 100%; height: 56px; padding: 16px 20px; border: 1px solid #ddd; border-radius: 8px; background: #fff; line-height: 1.75em; color: #242424; box-sizing: border-box; }
.inq-input::placeholder { color: #bebebe; }
.inq-input:focus { outline: none; border-color: var(--color-secondary); }
.inq-textarea { height: 184px; resize: none; }
.inq-type { display: flex; gap: 24px; width: 100%; }
.inq-type-btn { flex: 1 1 0; min-width: 0; cursor: pointer; }
.inq-type-btn input { position: absolute; width: 0; height: 0; opacity: 0; }
.inq-type-btn span { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 8px; background: #eee; font-size: var(--font-size18); font-weight: 600; line-height: 1.444em; color: #bebebe; box-sizing: border-box; transition: .2s; }
.inq-type-btn input:checked + span { background: var(--color-primary); color: #fff; }
.inq-file,
.inq-captcha { display: flex; align-items: center; gap: 12px; width: 100%; }
.inq-search-wrap { position: relative; width: 100%; }
.inq-file .inq-input { flex: 1 1 auto; min-width: 0; width: 1%; }
.inq-search-wrap .inq-input { width: 100%; }
.inq-captcha .inq-input { flex: 1 1 auto; min-width: 0; width: 1%; }
.inq-btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; border: 0; border-radius: 8px; font-size: var(--font-size18); font-weight: 500; line-height: 1.444em; color: #fff; cursor: pointer; box-sizing: border-box; }
.inq-btn.dark { flex: 0 0 160px; width: 160px; background: var(--color-secondary); }
.inq-btn.gray { flex: 0 0 112px; width: 112px; background: #454545; }
.inq-btn.submit { width: 200px; height: 60px; background: var(--color-secondary); }
.inq-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 30; margin: 0; padding: 14px 20px; list-style: none; border: 1px solid #ddd; border-radius: 8px; background: #fff; box-sizing: border-box; }
.inq-suggest[hidden] { display: none !important; }
.inq-suggest-empty { padding: 8px 0; color: #868686; line-height: 1.5em; }
.inq-suggest-item + .inq-suggest-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; }
.inq-box,
.inq-inner,
.inq-sections,
.inq-sec,
.inq-prd,
.inq-search-wrap { overflow: visible; width: 100%; }
.inq-suggest-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; box-sizing: border-box; }
.inq-suggest-btn:disabled { cursor: default; opacity: 0.45; }
.inq-suggest-add { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50px; background: var(--color-primary); }
.inq-suggest-path { display: flex; align-items: center; flex-wrap: wrap; gap: 0; min-width: 0; font-weight: 400; line-height: 1.75em; color: #242424; }
.inq-suggest-txt { color: #242424; }
.inq-suggest-txt em { font-style: normal; color: #bebebe; }
.inq-suggest-sep { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; width: 16px; height: 16px; margin: 0 2px; }
.inq-chips { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; margin: 0; padding: 0; list-style: none; }
.inq-chips[hidden] { display: none !important; }
.inq-chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px 10px 16px; border-radius: 50px; background: #eee; box-sizing: border-box; }
.inq-chip-txt { font-weight: 600; line-height: 1.625em; color: #242424; }
.inq-chip-del { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50px; background: #ccc; cursor: pointer; box-sizing: border-box; }
.inq-captcha-img { height: 56px; border-radius: 8px; background: #e8e8e8; display: flex; align-items: center; justify-content: center; font-size: var(--font-size20); font-weight: 700; letter-spacing: 0.08em; color: #454545; cursor: pointer;}
.inq-agree-wrap { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.inq-form .form-agree { width: 100%; margin: 0; }
.inq-form .form-agree h3 { font-size: var(--font-size18); font-weight: 500; line-height: 1.556em; color: #242424; margin-bottom: 12px; }
.inq-form .form-agree .scroll-box { max-height: 160px; overflow: auto; padding: 16px; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; font-size: 14px; line-height: 1.571em; color: #686868; box-sizing: border-box; }
.inq-form .form-agree .check { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; color: #868686; }

/* 통합검색 */
.search-result { display: flex; flex-direction: column; align-items: center; gap: 80px; }
.search-head { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.search-tit { font-size: var(--font-size40); font-weight: 700; line-height: 1.2em; color: #242424; }
.search-count { font-size: var(--font-size20); font-weight: 400; line-height: 1.5em; color: #454545; }
.search-count strong { font-weight: 700; color: var(--color-primary); }
.search-result .prd { width: 100%; }
.search-result .paginate { margin-top: 0; padding-top: 22px; }