@charset "utf-8";
/* 서브공통 */
.sub-section {margin-bottom: var(--space-80);}
.sub-section:last-child {margin-bottom: 0;}
.sub-section .sub-tit {display: flex; flex-direction: column; gap: var(--space-12); margin-bottom: var(--space-45);}
.sub-section .sub-tit::before {content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary);}
.sub-section .sub-tit h3 {font-size: var(--font-size-28); font-weight: 600; color: var(--color-sub); letter-spacing: -0.03em; line-height: 1.5em;}

/********************* 회사소개 *********************/
/* 인사말 */
.greeting {display: flex; flex-direction: column; gap: var(--space-70);}
.greeting .head {display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-48);}
.greeting .intro {font-size: var(--font-size-40); font-weight: 700; color: var(--color-sub); letter-spacing: -0.03em; line-height: 1.4em;}
.greeting .intro .primary {color: var(--color-primary);}
.greeting .logo {flex-shrink: 0;}
.greeting .body {display: flex; flex-direction: column; gap: var(--space-48);}
.greeting .img {border-radius: var(--radius-24); overflow: hidden;}
.greeting .txt {display: flex; flex-direction: column; gap: var(--space-35);}
.greeting .cont {font-size: var(--font-size-18); color: #484848; letter-spacing: -0.03em; line-height: 1.77em;}
.greeting .cont p {margin-bottom: var(--space-33);}
.greeting .cont p:last-child {margin-bottom: 0;}
.greeting .sign {font-size: var(--font-size-18); font-weight: 600; color: #484848; letter-spacing: -0.03em; line-height: 1.77em;}

/* 회사개요 */
/* 사업분야 */
.overview .list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24);}
.overview .list li {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-30); background: #F4FAFD; border-radius: var(--radius-24); padding: var(--space-56) var(--space-20);}
.overview .list .icon {width: 64px; height: 64px;}
.overview .list .icon img {width: 100%; height: 100%; object-fit: contain;}
.overview .list .tit {font-size: var(--font-size-20); font-weight: 600; color: var(--color-sub); letter-spacing: -0.03em; line-height: 1.7em; text-align: center;}

/* 조직도 */
.organization .img {padding: var(--space-100) var(--space-20); border-radius: var(--radius-24); border: 1px solid #DDD;}

/* 취급 메이커 */
.maker .item-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24);}
.maker .item-list .list {border-radius:8px; overflow: hidden;}
.maker .item-list .list > a > div {display: block; position:relative; padding-bottom:19.5%;  overflow:hidden; width: 100%;}
.maker .item-list .list > a >div img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.3s;}

/* 찾아오시는길 */
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 500px !important;}

.location-section .map {margin-bottom: var(--space-40); border-radius: var(--radius-24); overflow: hidden;}
.location-section .lct-info {display: flex; gap: var(--space-120); padding: var(--space-40); border: 1px solid #ddd; border-radius: var(--radius-20);}
.location-section .lct-info dl {display: flex; align-items: center; gap: var(--space-10);}
.location-section .lct-info dt {display: flex; align-items: center; gap: var(--space-10);}
.location-section .lct-info .icon {width: 24px; height: 24px;}
.location-section .lct-info .icon img {width: 100%; height: 100%; object-fit: contain;}
.location-section .lct-info .lct-tit {font-size: var(--font-size-16); font-weight: 600; color: var(--color-primary); letter-spacing: -0.03em; line-height: 1.87em; white-space: nowrap;}
.location-section .lct-info dd {display: flex; align-items: center; font-size: var(--font-size-16); color: #484848; letter-spacing: -0.03em; line-height: 1.87em;}
.location-section .lct-info dd::before {content: ""; width: 1px; height: 10px; background: #ddd; margin-right: var(--space-10); flex-shrink: 0;}


/********************* 제품소개 *********************/
.product-wrap {display: flex; gap: var(--space-60); position: relative;}
.product-nav {flex-shrink: 0; width: 320px; display: flex; flex-direction: column; gap: var(--space-60); background: #fff;}
.product-nav .category-list {display: flex; flex-direction: column; gap: 0;}
.product-nav .cat-item {margin-bottom: 8px;}
.product-nav .cat-item:last-child {margin-bottom: 0;}
.product-nav .cat-head {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 64px; padding: 10px 20px; border: 1px solid #eee; border-radius: var(--radius-8); font-size: var(--font-size-18); font-weight: 600; color: #787878; letter-spacing: -0.03em; line-height: 1.66em;}
.product-nav .cat-item.open .cat-head, 
.product-nav .cat-item:hover .cat-head {border-color: var(--color-primary); background: var(--color-primary); color: #fff;}
.product-nav .cat-head::after {content: ""; width: 16px; height: 16px; background: url(../images/sub/product-arrow.png) no-repeat center / contain;}
.product-nav .cat-item.open .cat-head::after, 
.product-nav .cat-item:hover .cat-head::after {background-image: url(../images/sub/product-arrow-active.png);}
.product-nav .cat-item .cat-body {display: none; margin-top: 8px; padding: var(--space-16) var(--space-20); background: #fafafa; border-radius: var(--radius-8);}
.product-nav .cat-item.open .cat-body {display: block;}
.product-nav .cat-body .sub-list {display: flex; flex-direction: column; gap: var(--space-16);}
.product-nav .cat-body .sub-list a {display: block; font-size: var(--font-size-18); font-weight: 600; color: #676767; letter-spacing: -0.03em; line-height: 1.777em;}
.product-nav .cat-body .sub-list li.active a, 
.product-nav .cat-body .sub-list li a:hover {font-weight: 600; color: var(--color-primary);}

.prod-list-wrap { flex: 1 1 auto; min-width: 0; width: 1%;}
.prod-list ul {display:flex; flex-wrap:wrap; margin:0 -16px;}
.prod-list ul li {width:33.333%; padding:0 16px; margin-bottom:40px; text-align:center;}
.prod-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.prod-list ul li a {display:block;}
.prod-list ul li .thumb {position:relative; padding-bottom:100%; margin-bottom:20px; overflow:hidden;}
.prod-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain;}
.prod-list ul li .tit {color:#222; font-weight: 600; font-size:20px; line-height:1.2em;}
.prod-list ul li .date {color:#484848; font-size:16px; line-height:1.3em; margin-top:12px;}

.prod-list-top {margin-bottom: var(--space-40);}
.prod-search-wrap {padding-bottom: var(--space-24); border-bottom: 1px solid #686868; margin-bottom: var(--space-24);}
.prod-search-wrap .tit {font-size: var(--font-size-40); font-weight: 700; color: var(--color-sub); letter-spacing: -0.03em; line-height: 1.4em;}
.prod-search-wrap .search {display: flex; align-items: center; gap: 8px; width: 320px; height: 50px; padding: 10px 16px; background: #fff; border: 1px solid #ddd; border-radius: 8px;}
.prod-search-wrap .search .input {flex: 1; min-width: 0; height: 100%; padding: 0; border: none; background: transparent; font-size: var(--font-size-16); font-weight: 500; color: var(--color-sub); letter-spacing: -0.03em;}
.prod-search-wrap .search .input::placeholder {color: #999;}
.prod-search-wrap .search .input:focus {outline: none;}
.prod-search-wrap .search .icon {flex-shrink: 0; width: 16px; height: 16px; background: url(../images/sub/search.svg) no-repeat center / contain; border: none;}
.prod-top-menu {display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;}
.prod-top-menu li a {display: flex; align-items: center; justify-content: center; height: 46px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 8px; font-size: var(--font-size-16); font-weight: 600; color: #999; letter-spacing: -0.03em; line-height: 1.25em; text-align: center;}
.prod-top-menu li.active a, 
.prod-top-menu li a:hover {color: #fff; background: var(--color-primary); border-color: var(--color-primary);}

/* 상세페이지 */
.product-view .head {display: flex; gap: var(--space-80); margin-bottom: var(--space-80);}
.slide-wrap { flex: 1; max-width: 520px;}
.pd-board-swiper .thumb { position: relative; padding-bottom: 77%; display: block; background: #fff; overflow: hidden;}
.pd-board-swiper .thumb:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd;}
.pd-board-swiper .thumb img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain ; transform: translate(-50%, -50% );}
.pd-board-swiper { width: 100%; margin-bottom: 14px; }
.pd-thumb-swiper { width: 100%; }
.pd-thumb-swiper .swiper-slide { cursor: pointer;}
.pd-thumb-swiper .thumb {position: relative; padding-bottom: 77%; display: block; overflow: hidden; }
.pd-thumb-swiper .thumb img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: contain ; max-width: 100%; max-height: 100%; transform: translate(-50%, -50% );}
.pd-thumb-swiper .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd;}
.pd-thumb-swiper .swiper-slide.swiper-slide-thumb-active .thumb::after { border: 2px solid var(--color-primary);}
/* 슬라이드버튼 */
.pd-btn-wrap {display: flex; align-items: center; justify-content: flex-end; gap: 8px; position: absolute; bottom: 0; width: 100%; padding: 16px;}
.pd-btn.swiper-button-next, .pd-btn.swiper-button-prev {position: static; width: 40px; height: 40px; background: no-repeat center / contain;}
.pd-btn.swiper-button-next {background-image: url(../images/sub/prod-next.svg);}
.pd-btn.swiper-button-prev {background-image: url(../images/sub/prod-prev.svg);}
.pd-btn.swiper-button-next:after, .pd-btn.swiper-button-prev:after {display: none;}

.product-view .head .info {flex: 1;display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-width: 0;}
.product-view .head .tit {font-size: var(--font-size-36); font-weight: 700; color: var(--color-sub); letter-spacing: -0.03em; line-height: 1.17em; margin-bottom: var(--space-40); padding:0 0 var(--space-40) 0; border-bottom: 1px solid #ddd;}
.product-view .head .desc {font-size: var(--font-size-20); color: #484848; letter-spacing: -0.03em; line-height: 1.7em;}
.product-view .head .desc p {margin-bottom: 0;}
.product-view .detail-sec .tit {font-size: var(--font-size-22); font-weight: 700; color: var(--color-sub); letter-spacing: -0.03em; line-height: 1.18em; margin-bottom: var(--space-40); padding-bottom: var(--space-20); border-bottom: 1px solid #ddd;}
.product-view .detail-sec {padding-bottom: var(--space-140); border-bottom: 1px solid #ddd;}
.product-view .detail-sec .cont {width: 100%; font-size: var(--font-size-16); color: #484848; letter-spacing: -0.03em; line-height: 1.87em;}
.product-view .detail-sec .cont p {margin-bottom: 0;}
.product-view .btn-wrap {text-align: center; margin-top: var(--space-60);}
.product-view .btn-pack {display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-8);}
.info-btn-wrap {display: flex; gap: 8px;}
.info-btn-wrap .pd-down {gap: 16px; padding: 0 24px !important; border-color: var(--color-primary); background: #fff; color: var(--color-primary);}
.info-btn-wrap .pd-down span {display: block; width: 24px; height: 24px; background: url(../images/sub/download-icon.svg) no-repeat center / contain;}

.prd-view-top {font-size: var(--font-size-20); font-weight: 500; letter-spacing: -0.03em; line-height: 1.77em; margin-bottom: var(--space-12);}
.prd-view-top .cat-name {color: #999;}
.prd-view-top .cat-name:after {content: ""; width: 1px; height: 14px; background: #ddd; display: inline-block; margin: 0 10px;}
.prd-view-top .sub-cat-name {color: var(--color-primary);}


/********************* 견적 · A/S 문의 *********************/
.board-form .input {border-radius: 8px; height: 48px;}
.required-text {font-size: var(--font-size-16); line-height: 1.187em; margin-bottom: var(--space-20);}
.required {color: #F70;}
.form-agree .checkbox label:before {border-radius: 4px;}
.submit-btn { background: #f8f8f8; border-radius: 8px; border: none; width: 160px; height: 60px; display: flex; align-items: center; justify-content: center; line-height: 1.5em; color: #999; margin: auto; pointer-events: none; font-weight: 700;}
.submit-btn.active { background: var(--color-primary); color: #fff; pointer-events: auto;}

/********************* 공지사항 *********************/


/********************* 자료실 *********************/