@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */ 

/* 공통 */

/* CEO 인사말 */
.greetings .head {margin-bottom:var(--space-100);}
.greetings .head .tit {font-size:var(--font-size-48); font-weight: 600; line-height:1.29; color:#2c2c2c;}
.greetings .cont {display:flex; justify-content: space-between; gap:var(--space-40);}
.greetings .cont .txt-wrap .lead {font-size:var(--font-size-24); font-weight: 500; line-height:1.5em; margin-bottom:var(--space-24);}
.greetings .cont .txt-wrap p {font-size:var(--font-size-20); line-height:1.6em; margin-bottom:var(--space-16);}
.greetings .cont .txt-wrap p:last-child {margin-bottom:0;}
.greetings .cont .txt-wrap p.sign {font-weight: 600; line-height:1.5em; margin-top: var(--space-40);}
.greetings .cont .img {margin-top: auto; flex-shrink:0; border-radius: var(--space-150) var(--radius-16) var(--radius-16) var(--radius-16); overflow: hidden; width: 38.572%;}
.greetings .cont .img img {width:100%; height:100%; object-fit: cover;}

/* 회사 연혁 */
.history .img {border-radius: var(--radius-16); overflow: hidden; width: 100%; position: relative; z-index: 3;}
.history .img img {width:100%; height:100%; object-fit: cover;}

.history-wrap {position:relative;}
.history-track {position:absolute; top:0; left:50%; width:1px; height:100%; transform:translateX(-50%); z-index:2; pointer-events:none;}
.history-track .line {position:absolute; inset:0; width:1px; background:#eee;}
.history-track .dot {position:absolute; top:0; left:0; width:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); height:clamp(20px, calc(32 / var(--inner) * 100vw), 32px); transform:translateX(-50%); background:url('/images/sub/history-dot.svg') no-repeat center / contain; animation:ani .5s forwards ease; animation-delay:.05s;}

.history-year-wrap {display:flex; justify-content: space-between; position: relative;}

.history-years {margin-top: var(--space-100);}
.history-years ul {display: flex; flex-direction: column; gap: var(--space-24);}
.history-years li {position: relative;}
.history-years li button {background: transparent; border: 0; color: #dfdfdf; font-size: var(--font-size-42); font-weight: 600; line-height: 1.38; position: relative;}
.history-years li button::after {content: ''; position: absolute; bottom: 10px; right: calc((clamp(4px, calc(8 / var(--inner) * 100vw), 8px) + var(--space-14)) * -1); width: clamp(4px, calc(8 / var(--inner) * 100vw), 8px); height: clamp(4px, calc(8 / var(--inner) * 100vw), 8px); background: var(--color-primary); z-index: 1; opacity: 0;}
.history-years li.active button {color: #2c2c2c;}
.history-years li.active button::after {opacity: 1;}

.history-year-list {width: 50%; position: relative;}
.history-item {padding-bottom: var(--space-60);}
.history-item:first-child {padding-top: var(--space-100);}
.history-item:last-child {padding-bottom:0;}

.history-item .history-year {position:relative; font-size: var(--font-size-32); line-height:1.43em; letter-spacing:-.03em; padding-left: var(--space-80); margin-bottom: 12px;}
.history-item .history-year strong {line-height:1em; display:inline-block; transition:color 0.3s ease; font-weight:600; flex:1; color:#2c2c2c;}
.history-month-box {padding-left: var(--space-80); flex:1;}
.history-detail {display:flex; font-size: var(--font-size-18); line-height:2.22; letter-spacing:-.03em;}
.history-detail .month {width:45px; color:#999; display:block; font-weight: 600;}
.history-detail p {flex:1;}

.history-item.active .history-year strong {color: var(--color-primary);}

@keyframes ani {
    0% {transform:translateX(-50%) scale(0);}
    100% {transform:translateX(-50%) scale(1);}
}

/* 주요 고객사 */
.clients ul {display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-40) 0;}
.clients ul li {display: flex; align-items: center; justify-content: center; height: clamp(50px, calc(80 / var(--inner) * 100vw), 80px);}
.clients ul li img {object-fit: contain;}

/* 조직도 */
.organization .img {border-radius: var(--radius-24); background: #f8f8f8; padding: var(--space-80);}

/* 찾아오시는 길 */
.root_daum_roughmap_landing {border-radius: var(--radius-16); width: 100% !important; height: clamp(300px, calc(520 / var(--inner) * 100vw), 520px);}
.root_daum_roughmap .wrap_map {height: 100% !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}
.root_daum_roughmap .cont {display: none !important;}
.root_daum_roughmap .map_border {display: none !important;}

.directions .txt-wrap {margin-top: var(--space-40);}
.directions .txt-wrap .sub-tit {display: block; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7; color: var(--color-primary); margin-bottom: var(--space-16);}
.directions .txt-wrap .lead {color: #2c2c2c; font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; margin-bottom: var(--space-8);}
.directions .txt-wrap .address {font-size: var(--font-size-18); line-height: 1.77; display: flex; gap: 20px;}
.directions .info {margin-top: var(--space-40); padding: var(--space-24) 0; border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf;}
.directions .info ul {display: flex; gap: var(--space-60); font-size: var(--font-size-20); line-height: 1.7;}
.directions .info li {display: flex; align-items: center; gap: 16px;}
.directions .info .icon {width: 24px; height: 24px; display: block; display: flex; align-items: center; justify-content: center;}
.directions .info .icon img {width: 100%; height: 100%; object-fit: contain;}
.directions .info .label {color: #2c2c2c; font-size: var(--font-size-18); font-weight: 600; display: flex; align-items: center; gap: 16px;}

/* 사업분야 */
.business .head {margin-bottom: var(--space-24);}
.business .head .tit {color: #2c2c2c; font-size: var(--font-size-28); font-weight: 600; line-height: 1.42; position: relative; padding-left: 30px;}
.business .head .tit::before {content: ''; position: absolute; top: 0.4em; left: 0; width: 14px; height: 18px; background: url('/images/sub/business-tit.svg') no-repeat center / contain;}
.business .info {text-align: center; margin-bottom: var(--space-40);}
.business .table {overflow-x: auto;}
.business .table table {width: 100%; min-width: 700px; border-collapse:collapse; border-spacing:0px; border-top: 1px solid var(--color-primary); font-size: var(--font-size-18); line-height: 1.77;}
.business .table thead th {font-weight: 600; padding: var(--space-20) var(--space-15); background: #f7fdf5; text-align: center; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.business .table thead th:last-child {border-right: 0;}
.business .table tbody th {font-weight: 600; padding: var(--space-20) var(--space-15); background: #f7fdf5; text-align: center; border-bottom: 1px solid #ddd; border-right: 0;}
.business .table tbody td {padding: var(--space-20); border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; text-align: center;}
.business .table tbody td span {display: block; font-size: var(--font-size-16); line-height: 1.5; color: #878787;}
.business .table tbody td:last-child {border-right: 0;}

/* 기능성 정밀화학 */
.finechemical .spec {margin-bottom: var(--space-80);}
.finechemical .spec .cont {display: flex; justify-content: space-between; gap: var(--space-40);}
.finechemical .spec .table {width: 57.143%; overflow: hidden;}
.finechemical .spec .table table {min-width: auto;}
.finechemical .spec .table tbody td {text-align: left;}
.finechemical .spec .img {width: 34.286%; border-radius: var(--radius-16); overflow: hidden;}
.finechemical .spec .img img {width: 100%; height: 100%; object-fit: cover;}
.finechemical .process .top {display: flex; align-items: center; justify-content: space-between; gap: 4px;}
.finechemical .process .top .item {width: clamp(200px, calc(260 / var(--inner) * 100vw), 260px); border-radius: var(--radius-16); padding: var(--space-30); display: flex; flex-direction: column; align-items: center; gap: var(--space-40); align-self: stretch; position: relative; background: #fff;}
.finechemical .process .top .img {margin-top: auto; width: 100%; text-align: center;}
.finechemical .process .top .img img {max-width: 80%;}
.finechemical .process .top .txt-wrap {text-align: center;}
.finechemical .process .top .txt-wrap .tit {color: #2c2c2c; font-size: var(--font-size-24); font-weight: 500; line-height: 1.5; margin-bottom: var(--space-8);}
.finechemical .process .top .txt-wrap .desc {font-size: var(--font-size-18); line-height: 1.66;}
.finechemical .process .top .item1 {border: 2px solid rgba(130, 194, 110, 0.2);}
.finechemical .process .top .item2 {border: 2px solid rgba(130, 194, 110, 0.4);}
.finechemical .process .top .item3 {border: 2px solid transparent; background-clip: padding-box;}
.finechemical .process .top .item3::before {content: ''; position: absolute; inset: 0; background-image: linear-gradient(to left, rgba(4, 117, 182, 0.4), rgba(130, 194, 110, 0.4)); z-index: -1; margin: -2px; border-radius: inherit;}
.finechemical .process .top .item4 {border: 2px solid rgba(0, 114, 188, 0.4);}
.finechemical .process .top .item5 {border: 2px solid rgba(0, 114, 188, 0.6);}
.finechemical .process .arrow {width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;}
.finechemical .process .arrow svg {max-width: 100%; max-height: 100%; object-fit: contain; display: block;}
.finechemical .process .arrow1 {color: #dfdfdf;}
.finechemical .process .arrow2 {color: #ccc;}
.finechemical .process .arrow3 {color: #a8a8a8;}
.finechemical .process .arrow4 {color: #878787;}
.finechemical .process .arrow5 {color: #0072bc; width: clamp(128px, calc(260 / var(--inner) * 100vw), 260px); margin: 8px 0; margin-left: auto;}
.finechemical .process .bottom {display: flex; align-items: center; justify-content: center; flex-direction: row-reverse; gap: 8px; background: #f9f9f9; padding: var(--space-40); border-radius: var(--radius-16);}
.finechemical .process .bottom .tit {text-align: center; color: #2c2c2c; font-size: var(--font-size-24); font-weight: 600; line-height: 1.5;}
.finechemical .process .item6 .tit {margin-bottom: var(--space-60);}
.finechemical .process .item6 ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40) var(--space-60);}
.finechemical .process .item6 li .img {width: 100%; margin-bottom: var(--space-8); text-align: center;}
.finechemical .process .item6 li .img img {width: 100%; height: 100%; object-fit: contain;}
.finechemical .process .item6 li p {text-align: center; font-size: var(--font-size-18); line-height: 1.66; font-weight: 500;}
.finechemical .process .bottom .arrow {margin: 0 var(--space-140); width: 32px; color: #0072bc;}
.finechemical .process .item7 ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20) var(--space-40);}
.finechemical .process .item7 li {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.finechemical .process .item7 li .img {width: 100%; margin-top: auto; margin-bottom: var(--space-8); text-align: center;}
.finechemical .process .item7 li .img img {object-fit: contain;}
.finechemical .process .item7 li p {text-align: center; font-size: var(--font-size-18); line-height: 1.66; font-weight: 500;}

/* 친환경 주방세제 */
.ecodetergent .images {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: var(--space-25);}

/* 차량용 요소수 */
.vehicleurea section {margin-bottom: var(--space-80);}
.vehicleurea section:last-child {margin-bottom: 0;}
.vehicleurea .box {background: #f9f9f9; padding: var(--space-30); border-radius: var(--radius-16); font-size: var(--font-size-20); line-height: 1.7; display: flex; justify-content: space-between; gap: var(--space-40);}
.vehicleurea .dot-list {display: flex; flex-direction: column; gap: var(--space-16);}
.vehicleurea .dot-list li {position: relative; padding-left: 16px; font-size: var(--font-size-20); line-height: 1.7;}
.vehicleurea .dot-list li::before {content: ''; position: absolute; top: 0.7em; left: 0; width: 4px; height: 4px; background: #d9d9d9; border-radius: 50%;}
.vehicleurea .num-list {display: flex; flex-direction: column; gap: var(--space-16);}
.vehicleurea .num-list li {display: flex; gap: var(--space-16); font-size: var(--font-size-20); line-height: 1.7;}
.vehicleurea .num-list li .num {width: clamp(22px, calc(28 / var(--inner) * 100vw), 28px); height: clamp(22px, calc(28 / var(--inner) * 100vw), 28px); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-8); border: 1px solid #ddd; color: #778c80; font-size: var(--font-size-14); font-weight: 700; text-align: center; margin-top: 0.2em; flex-shrink: 0;}
.vehicleurea .intro .img-wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-40);}
.vehicleurea .intro .img {border-radius: var(--radius-16); overflow: hidden; display: flex; align-items: center; justify-content: center;}
.vehicleurea .intro .img:first-child img {width: 100%; height: 100%; object-fit: cover;}
.vehicleurea .warning {color: #999; font-size: var(--font-size-18); line-height: 1.66; margin-top: var(--space-24);}
.vehicleurea .contact .box {display: flex; align-items: center; justify-content: space-between; gap: var(--space-40);}
.vehicleurea .contact .txt-wrap .lead {color: #2c2c2c; font-size: var(--font-size-24); font-weight: 600; line-height: 1.66; margin-bottom: 4px;}
.vehicleurea .contact .manager {display: flex; align-items: center; gap: var(--space-16);}
.vehicleurea .contact .manager .tit {color: #878787; font-size: var(--font-size-16); font-weight: 500; line-height: 1.5; display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-20); border-radius: var(--radius-6); background: #fff; border: 1px solid #eee;}
.vehicleurea .contact .manager .tel {color: #2c2c2c; font-size: var(--font-size-18); font-weight: 500; line-height: 1.33;}

/* 미생물 영양제 */
.microbial .spec {margin-bottom: var(--space-80);}
.microbial .spec .cont {display: flex; justify-content: space-between; gap: var(--space-40);}
.microbial .spec .txt-wrap {width: 64.43%;}
.microbial .spec .desc {font-size: var(--font-size-20); line-height: 1.8; margin-bottom: var(--space-24);}
.microbial .spec .table {overflow: hidden;}
.microbial .spec .table table {min-width: auto;}
.microbial .spec .table tbody td {text-align: left;}
.microbial .spec .img {width: 28.572%; border-radius: var(--radius-16); overflow: hidden; border: 1px solid #dfdfdf;}
.microbial .spec .img img {width: 100%; height: 100%; object-fit: cover;}
.microbial .tank .img-wrap {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40);}

/* 자원순환 */
.circulation .cont {display: flex; justify-content: space-between; gap: var(--space-40);}
.circulation .box {padding: var(--space-40); border-radius: var(--radius-16); background: #f9f9f9; font-size: var(--font-size-20); line-height: 1.6; width: 42.86%;}
.circulation .box .area:first-child {padding-bottom: var(--space-30); margin-bottom: var(--space-30); border-bottom: 1px dashed #dfdfdf;}
.circulation .box .tit {color: #2c2c2c; font-size: var(--font-size-24); font-weight: 600; line-height: 1.5; margin-bottom: var(--space-16);}
.circulation .box ul {display: flex; flex-direction: column; gap: var(--space-8); font-size: var(--font-size-20); line-height: 1.6;}
.circulation .box li {text-indent: -0.7em; padding-left: 0.7em;}
.circulation .img {margin-top: auto; width: 52%;}
.circulation .img img {width: 100%; height: 100%; object-fit: contain;}

/* 비전 & 미션 */
.vision {border-top: 1px solid #ddd; display: flex;}
.vision .head {padding: var(--space-100) 0; padding-right: var(--space-50); position: sticky; top: var(--header-height); align-self: flex-start; width: 42.14%;}
.vision .head .tit {color: #2c2c2c; font-size: var(--font-size-42); font-weight: 600; line-height: 1.38;}
.vision .cont {width: 57.86%; border-left: 1px solid #ddd; padding: var(--space-100); padding-right: 0; padding-bottom: 0;}
.vision .item {margin-bottom: var(--space-100);}
.vision .item:last-child {margin-bottom: 0;}
.vision .item-head {margin-bottom: var(--space-40);}
.vision .item-head .num {display: block; color: #999; font-size: var(--font-size-20); font-weight: 600; line-height: 1.6; margin-bottom: var(--space-24);}
.vision .item-head .tit {color: #2c2c2c; font-size: var(--font-size-40); font-weight: 600; line-height: 1.4; margin-bottom: var(--space-16);}
.vision .item-head .en {color: var(--color-primary); font-size: var(--font-size-20); font-weight: 600; line-height: 1.6; text-align: right;}
.vision .item .desc {color: #484848; font-size: var(--font-size-24); line-height: 1.5; margin-bottom: var(--space-40);}
.vision .item .img {border-radius: var(--radius-8); overflow: hidden;}
.vision .item .img img {width: 100%; object-fit: cover;}
.vision .item .tags {margin-top: var(--space-24); display: flex; flex-wrap: wrap; gap: 6px;}
.vision .item .tags li {color: #4f9aef; font-size: var(--font-size-16); font-weight: 500; line-height: 1.5; padding: var(--space-6) var(--space-18); border-radius: 30px; background: #f4f4f4;}

/* 인증/자격 */
.certification ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-80) var(--space-40);}
.certification li .img {width: 100%; position: relative; overflow: hidden; border-radius: var(--radius-16); height: 0; padding-bottom: 141.875%;}
.certification li .img::after {content: ''; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-16); border: 1px solid #ddd;}
.certification li .img img {width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;}
.certification li p {text-align: center; color: #2c2c2c; font-size: var(--font-size-18); line-height: 1.77; font-weight: 600; margin-top: var(--space-25);}