@charset "utf-8";
/* 서브공통 */
.doc-sub-tit {margin-bottom: var(--space-24); font-size: var(--font-size-18); font-weight: 500; color: #a8a8a8; line-height: 1.555em; letter-spacing: -0.02em;}
.doc-tit {font-size: var(--font-size-42); font-weight: 600; color: #121212; line-height: 1.476em; letter-spacing:-.02em;}
.doc-tit strong {color: #EB2325;}
.sub-com-btn {padding: var(--space-16) var(--space-24); background: #121212; color: #fff; font-size: var(--font-size-18); font-weight: 600; line-height: 1.55em; letter-spacing: -0.02em; border: none;}

/********************* 회사소개 *********************/
/* 공통 */
.color-box {position: relative; --size: clamp(40px, calc(80 / var(--inner) * 100vw), 80px)}
.color-box::before {content: ''; position: absolute; width: var(--size); height: var(--size); background: #EB2325;}
.color-box::after {content: ''; position: absolute; width: var(--size); height: var(--size); background: #121212;}

/* 인사말 */
.greetin-section {padding-bottom: var(--space-120);}
.greeting-left {flex: 1; display: flex; flex-direction: column; justify-content: flex-end;}
.greeting-img {flex: 1; max-width: 700px; min-width: 0; margin: 0 auto;}
.greeting-logo-wrap {padding-bottom: var(--space-60); border-bottom: 1px solid #eee;}
.greeting-logo-wrap .logo {width: 106px; margin-bottom: var(--space-46);}
.greeting-desc {margin-top: var(--space-40); padding-right: var(--space-20); font-size: var(--font-size-22); font-weight: 500; line-height: 1.7em; letter-spacing:-.02em;}
.greeting-desc::before {content: ''; display: block; width: 6px; height: 6px; background: #EB2325; margin-bottom: var(--space-16);}
.greeting-img.color-box::before {top: 0; right: 0;}
.greeting-img.color-box::after {top: var(--size); right: 0;}

.greeting-section2 {padding: var(--space-80) 0 var(--space-140); background: #F6F6F6;}
.greeting-stack {display: flex; flex-direction: column; gap: var(--space-50);}
.greeting-lead {padding-left: var(--space-40); border-left: 4px solid #dfdfdf; font-size: var(--font-size-28); font-weight: 600; color: #2c2c2c; line-height: 1.57em; letter-spacing: -0.02em;}
.greeting-lead .point {color: #EB2325; font-weight: 600;}
.greeting-body {display: flex; flex-direction: column; gap: var(--space-24); font-size: var(--font-size-20); font-weight: 400; color: #505050; line-height: 1.7em; letter-spacing: -0.02em;}
.greeting-sign {font-size: var(--font-size-20); font-weight: 600; color: #2c2c2c; line-height: 1.7em; letter-spacing: -0.02em;}

/* 회사개요 */
.overview-section {padding-bottom: var(--space-120); border-bottom: 1px solid #eee;}
.overview-stack {gap: var(--space-100);}
.overview-head {gap: var(--space-24);}
.overview-row {align-items: stretch; gap: var(--space-40);}
.overview-txt {flex: 0 1 680px; max-width: 680px; min-width: 0; gap: var(--space-40);}
.overview-intro {gap: var(--space-20);}
.overview-icon {display: block; flex-shrink: 0; width: 32px; height: 32px;}
.overview-icon img {display: block; width: 100%; height: 100%; object-fit: contain;}
.overview-desc {font-size: var(--font-size-22); font-weight: 500; color: #505050; line-height: 1.727em; letter-spacing: -0.02em;}
.overview-watermark {max-width: 360px; opacity: 0.08;}
.overview-visual .img::before {bottom: 0; right: 0;}
.overview-visual .img::after {bottom: var(--size); right: 0;}

.overview-section2 {padding-top: var(--space-100);}
.overview-desc2 {font-size: var(--font-size-20); line-height: 1.727em; letter-spacing: -0.02em;}
.overview-visual2 .img::before {top: 0; left: 0;}
.overview-visual2 .img::after {top: var(--size); left: 0;}

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

.location-section .map {margin-bottom: var(--space-60); border-radius: var(--radius-24); overflow: hidden;}
.lct-info-wrap .lct-cont {flex: 1;}
.lct-info-wrap .lct-cont h3 {font-size: var(--font-size-36); font-weight: 600; line-height: 1.388em; color: var(--color-sub); margin-bottom: var(--space-20);}
.lct-info-wrap .lct-cont .addr {font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; color: var(--color-sub);}
.lct-info-wrap .lct-info {flex: 1;}
.lct-info-wrap .lct-info dl {display: flex; align-items: center; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em;  padding: var(--space-30) 0; border-bottom: 1px solid #DFDFDF;}
.lct-info-wrap .lct-info dl:first-child {border-top: 1px solid #DFDFDF;}
.lct-info-wrap .lct-info dt {display: flex; align-items: center; color: #A8A8A8;}
.lct-info-wrap .lct-info dt .icon {width: 40px;}
.lct-info-wrap .lct-info dt .lct-tit {width: 100px; padding: 0 20px; text-align: center;}
.lct-info-wrap .lct-info dd {font-weight: 500;}

/********************* 제품소개 *********************/
/* 탭메뉴 */
.product-tab-wrap { margin-bottom: var(--space-120); }
.product-tab {display: flex; gap: 3px; flex-wrap: wrap;}
.product-tab li { width: calc(100%/3 - 2px);}
.product-tab li a:before {width: 40px; height: 40px; top: 0; right: 40px; z-index: 1; opacity: 0; transition: .3s;}
.product-tab li a {display: block; position: relative; height: 277px; background: #F6F6F6; overflow: hidden;}
.product-tab li a .thumb {position: absolute; top: var(--space-80); left: 45%; width: max-content;}

.product-tab li a:hover:before,
.product-tab li.active a:before {opacity: 1;}
.product-tab li a:after {width: 40px; height: 40px; top: 0; right: 0; z-index: 1; opacity: 0; transition: .3s;}
.product-tab li a:hover:after,
.product-tab li.active a:after {opacity: 1;}

.product-tab li a .txt-wrap {position: absolute; bottom: 0; left: 0; padding: var(--space-24);}
.product-tab li a .en {display: block; font-size: var(--font-size-16); font-weight: 500; line-height: 1.5em; color: #878787; letter-spacing: -0.02em; transition: .3s;}
.product-tab li a:hover .en,
.product-tab li.active a .en {color: var(--color-primary);}
.product-tab li a .name {display: block; margin-top: var(--space-10); font-size: var(--font-size-26); font-weight: 600; line-height: 1.53em; color: var(--color-sub); letter-spacing: -0.02em; transition: .3s;}
.product-tab li a:hover .name,
.product-tab li.active a .name {color: var(--color-primary);}
.product-list {padding-top: var(--space-40);}

.product-tab.st2 { gap: 4px; }
.product-tab.st2 li { width: calc(100%/2 - 2px);}
.product-tab.st2 li a .thumb { top: 50px; }

.product-tab.st3 { gap: 4px; }
.product-tab.st3 li { width: 100% ;}
.product-tab.st3 li a .thumb { top:30px; left: 60%; }

/* 상세페이지 */
.view-top {display: flex; align-items: center; gap: var(--space-80);}
.img-wrap {width:clamp(480px, calc(743 / var(--inner) * 100vw), 743px);}
.img-wrap .img {position:relative; padding-bottom:73%; overflow:hidden;}
.img-wrap .img:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #eee; }
.img-wrap .img img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.view-info {flex: 1;}
.view-info .info-top {padding-bottom: var(--space-40); border-bottom: 1px solid #eee;}
.view-info .info-top .cate {display: block; font-size: var(--font-size-18); font-weight: 500; line-height: 1.55em; color: #a8a8a8; letter-spacing: -0.02em;}
.view-info .info-top .tit {margin-top: var(--space-16); font-size: var(--font-size-42); font-weight: 600; line-height: 1.476em; color: #121212; letter-spacing:-.02em;}
.view-info .info-list li {position: relative; padding-left: var(--space-22); margin-bottom: var(--space-16); font-size: var(--font-size-18); line-height: 1.55em; color: #505050; letter-spacing: -0.02em;}
.view-info .info-list li:before {content: ''; position: absolute; top: 11px; left: 0; width: 6px; height: 6px; background: #EB2325;}
.view-info .info-list li:last-child {margin-bottom: 0;}
.pdf-btn {display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--space-16) var(--space-24); background: #fff; color: #2c2c2c; font-size: var(--font-size-18); font-weight: 500; line-height: 1.55em; letter-spacing: -0.02em; border: 1px solid #dfdfdf;}
.pdf-btn:before {content: ''; width: 24px; height: 24px; background: url(../images/sub/pdf-icon.svg) no-repeat center / contain;}
.view-content {margin-top: var(--space-120); width: 100%;}
.view-content .tit {margin-bottom: var(--space-40); font-size: var(--font-size-32); font-weight: 600; line-height: 1.437em; color: #121212; letter-spacing:-.02em;}
.view-editor {width: 100%; height: 720px; overflow: auto;}
.view-editor .img {margin-top: var(--space-30);}
.view-btn-wrap {margin-top: var(--space-80);}


/********************* 기술정보 *********************/
.pdf-list ul li .thumb:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(6px); opacity: 0; transition: .3s;}
.pdf-list ul li a:hover .thumb:after {opacity: 1;}
.pdf-list .hover-txt {display: flex; align-items: center; justify-content: center; gap: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; color: #fff; opacity: 0; transition: .3s; z-index: 1;}
.pdf-list ul li a:hover .hover-txt {opacity: 1;}
.pdf-list .hover-txt:before {content: ''; display: block; width: 24px; height: 24px; background: url(../images/sub/pdf-icon-w.svg) no-repeat center / contain; }

/********************* 고객지원 *********************/
/* 카탈로그 */
.product-list.catalogue-list ul li {width: 25%;}
.product-list.catalogue-list ul li .thumb {padding-bottom: 141.5%;}

/* 게시판 공통 */
.board-search.type2 {margin-bottom: 0;}
.board-search.type2 .search{display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfdfdf;}
.board-search.type2:after {display: none;}
.board-search.type2 .input {height: 68px; border-color: transparent; font-size: 18px; line-height: 1.33em; color: #505050; }
.board-search.type2 .input.search-input {height: 100%; width: 276px; padding: 0; border: none; border-radius: 0;}
.board-search.type2 select.input {padding-right: 22px; padding-left: 0; background-position: right center; border-bottom: 2px solid #121212;}
.board-search.type2 .search {display: flex; align-items: center; gap: 10px; float: unset;}
.board-search.type2 .cate {float: unset; margin-left: 0;}
.input-wrap {gap: 20px; height: 68px; padding: 0; background: #fff; border-bottom: 2px solid #121212;}
.submit-btn {width: 24px; height: 24px; background: url(../images/common/search-icon.svg) no-repeat center / contain; border: none;}