@charset "utf-8";

.sec-tit .tag {margin-bottom: var(--space-15); font-size: var(--font-siuze-22); font-weight: 700; line-height: 1em; color: var(--primary-color)}
.sec-tit h3 {font-size: var(--font-size-40); font-weight: 700; line-height: 1.1em; color: var(--dark-color);}

.page-greeting {display: flex; flex-direction: column; gap: clamp(25px, calc(80 / var(--inner) * 100vw), 80px); box-sizing: border-box;}
.history-hero {padding: var(--space-120) var(--container-space); margin-bottom: var(--space-100); background: url('/images/sub/bg-history-hero.jpg') no-repeat center center / cover; text-align: center; color: #fff;}
.history-timeline {position: relative; display: flex; flex-direction: column; gap: clamp(40px, calc(150 / var(--inner) * 100vw), 150px); width: 100%; max-width: 1200px; margin: 0 auto; line-height: 1.5; }
.history-timeline:before {position: absolute; content: ''; top: 0; bottom: 0; left: 50%; width: 1px; background: #ddd;}
.history-timeline .era {display: grid; grid-template-columns: repeat(2, 1fr); gap:25px 40px;}
.history-timeline .row:not(:last-child) {margin-bottom: clamp(20px, calc(50 / var(--inner) * 100vw), 50px);}
.history-timeline .item { display: flex; flex: 1 1 auto; min-width: 0; }
.history-timeline .year {margin-bottom: var(--space-15); font-size: var(--font-size-64); font-weight: 600; color: var(--primary-color); letter-spacing: -0.05em; line-height: 1; }
.history-timeline .yr {position: relative; width: 74px; margin-right: 40px; font-size: var(--font-size-30); font-weight: 600; color: var(--dark-color); letter-spacing: -0.05em; line-height: 1; }
.history-timeline .yr:before {content: ''; position: absolute; top: 50%; left: calc(-8px - 20px); transform: translateY(-50%); width: 16px; height: 16px; background: #fff; border: 4px solid var(--primary-color); border-radius: 50%;}
.history-timeline .num {display: inline-block; width: 26px; margin-right: 8px; font-size: var(--font-size-20); font-weight: 600; color: var(--dark-color); letter-spacing: -0.05em;}
.history-timeline .txt { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-18); letter-spacing: -0.05em;}
.history-timeline .split-cont { display: flex; flex-wrap: wrap; align-items: flex-start; }
.history-timeline .split-list { display: flex; flex-direction: column; gap: var(--space-10);}
.history-timeline .split-item {display: flex;}

.page-about-vision .sec-tit {margin-bottom: var(--space-40);}
.page-about-vision section {padding: var(--space-100) 0;}
.page-about-vision .sec-slogan {padding-top: 0;}
.slogan-box {border-radius: 200px; border: var(--space-15) solid #F4F4F4;}
.slogan-box .wrap {padding: var(--space-50); border-radius: 200px; border: var(--space-15) solid rgba(0, 78, 162, .2);}
.vision-cnt {gap: 25px var(--space-60);}
.vision-img {width: 50%;}
.sec-value {background: #F5F8FB;}
.page-about-vision .value-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-40); align-items: stretch;}
.page-about-vision .value-cards .card {display: flex; flex-direction: column; gap: var(--space-40); align-items: flex-end; box-sizing: border-box; padding: var(--space-50); background: #fff; box-shadow: 6px 6px 30px rgba(0, 0, 0, 0.16);}
.page-about-vision .value-cards .top {flex: 1; display: flex; flex-direction: column; gap: var(--space-40); align-items: flex-start; width: 100%;}
.page-about-vision .value-cards .num {display: inline-flex; align-items: center; justify-content: center; padding: 1px 16px; font-size: var(--font-size-16); font-weight: 600; line-height: 1.5; letter-spacing: -0.03em; color: #fff; background: var(--primary-color);}
.page-about-vision .value-cards .txt {display: flex; flex-direction: column; gap: var(--space-20); width: 100%;}
.page-about-vision .value-cards .tit {display: flex; flex-direction: column; gap: var(--space-10); line-height: 1;}
.page-about-vision .value-cards .tit h4 {margin: 0; font-size: var(--font-size-24); font-weight: 600; letter-spacing: -0.03em; color: var(--dark-color);}
.page-about-vision .value-cards .tit .sub {margin: 0; font-size: var(--font-size-18); font-weight: 600; letter-spacing: -0.03em; color: var(--dark-color);}
.page-about-vision .value-cards .desc {margin: 0; font-size: var(--font-size-18); font-weight: 400; line-height: 28px; letter-spacing: -0.03em; color: #505050;}

.table-wrap {overflow-x: auto; width: 100%;}
.table-wrap .tbl-equip {width: 100%; max-width: 1400px; margin: 0 auto; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--dark-color);}
.table-wrap .tbl-equip .col-num {width: 7.15%;}
.table-wrap .tbl-equip .col-name {width: 46.5%;}
.table-wrap .tbl-equip .col-spec {width: 35.6%;}
.table-wrap .tbl-equip .col-qty {width: 10.8%;}
.table-wrap .tbl-equip thead th {padding: var(--space-15) 8px; font-size: var(--font-size-18); font-weight: 600; line-height: 1.6667; letter-spacing: -0.03em; color: var(--dark-color); text-align: center; vertical-align: middle; background: #f4f4f4; border-bottom: 1px solid #ddd;}
.table-wrap .tbl-equip tbody td {padding: var(--space-15) 8px; font-size: var(--font-size-16); font-weight: 400; line-height: 1.875; letter-spacing: -0.03em; color: #505050; text-align: center; vertical-align: middle; border-bottom: 1px solid #ddd;}
.table-wrap .tbl-equip thead th + th,
.table-wrap .tbl-equip tbody td + td {border-left: 1px solid #ddd;}
.table-wrap .tbl-own {width: 100%; max-width: 1400px; margin: 0 auto; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--dark-color);}
.table-wrap .tbl-own .col-num {width: 7.14%;}
.table-wrap .tbl-own .col-use {width: 10.79%;}
.table-wrap .tbl-own .col-shop {width: 35.71%;}
.table-wrap .tbl-own .col-pname {width: 35.57%;}
.table-wrap .tbl-own .col-qty {width: 10.79%;}
.table-wrap .tbl-own thead th {padding: var(--space-15) 8px; font-size: var(--font-size-18); font-weight: 600; line-height: 1.6667; letter-spacing: -0.03em; color: var(--dark-color); text-align: center; vertical-align: middle; background: #f4f4f4; border-bottom: 1px solid #ddd;}
.table-wrap .tbl-own tbody td {padding: var(--space-15) 8px; font-size: var(--font-size-16); font-weight: 400; line-height: 1.875; letter-spacing: -0.03em; color: #505050; text-align: center; vertical-align: middle; border-bottom: 1px solid #ddd;}
.table-wrap .tbl-own thead th + th,
.table-wrap .tbl-own tbody td + td {border-left: 1px solid #ddd;}
.table-wrap .tbl-own tbody tr.row-sec td {height: 60px; font-size: var(--font-size-18); font-weight: 600; letter-spacing: -0.03em; color: var(--primary-color); background: #f2f6fa; border-bottom: 1px solid #ddd;}
.table-wrap .tbl-own tbody tr.row-sec td:first-child {text-align: center;}

.cert-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-60);}
.cert-item .img {margin-bottom: var(--space-25);}

.direction-contact strong {font-size: var(--font-size-20); color: var(--dark-color); font-weight: 500;}
.direction-contact .direction-contact-head {padding: var(--space-20) var(--space-40); background: #F4F4F4; font-weight: 600; font-size: var(--font-size-18);}
.direction-contact-cnt {padding: var(--space-15) var(--space-50); border: 1px solid #ddd;}
.direction-contact-cnt ul {flex-wrap: wrap; gap: 8px clamp(30px, calc(80 / var(--inner) * 100vw), 80px);}
.direction-contact-cnt li {display: flex; align-items: center; gap: 15px;}
.direction-contact-cnt span {margin-left: var(--space-15);}
.sec-direction {margin-top: var(--space-120);}
.direction-map {position: relative; width: 100%; height: clamp(250px, calc(500 / var(--inner) * 100vw), 500px);}
.root_daum_roughmap .wrap_map, .root_daum_roughmap {width: 100% !important; height: 100% !important;}
.direction-tit {display: flex; align-items: flex-end; gap: var(--space-30);}
.direction-tit .addr {gap: 10px;}

.page-sustain {display: flex; flex-direction: column; gap: var(--space-120); box-sizing: border-box;}
.page-sustain .block {display: flex; align-items: flex-start; gap: 25px clamp(30px, calc(80 / var(--inner) * 100vw), 80px);}
.page-sustain .block:nth-child(even){flex-direction: row-reverse;}
.page-sustain .block .img {width: 50%;}
.page-sustain .block .txt {display: flex; flex-direction: column; gap: var(--space-30); flex: 1 1 auto; min-width: 0; box-sizing: border-box;}
.page-sustain .block.rev .txt {align-items: flex-end;}
.page-sustain .block.rev .tit {align-items: flex-end; text-align: right;}
.page-sustain .block.rev .lead {text-align: right;}
.page-sustain .block.rev .list {width: 100%;}
.page-sustain .block .tit {display: flex; flex-direction: column; gap: var(--space-15); line-height: 1;}
.page-sustain .block .tit .tag {margin: 0; font-size: var(--font-size-16); font-weight: 600; letter-spacing: -0.03em; color: var(--primary-color);}
.page-sustain .block .tit h3 {margin: 0; font-size: var(--font-size-40); font-weight: 700; letter-spacing: -0.03em; color: var(--dark-color);}
.page-sustain .block .lead {margin: 0; font-size: var(--font-size-20); line-height: 32px; letter-spacing: -0.03em; color: var(--dark-color);}
.page-sustain .block .list {display: flex; flex-direction: column; gap: var(--space-20);}
.page-sustain .block .list .item {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-20);}
.page-sustain .block .list .item .num {display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; font-weight: 600; line-height: 30px; letter-spacing: -0.03em; color: #fff; background: var(--primary-color); border-radius: 100%;}
.page-sustain .block .list .item .desc {margin: 0; flex: 1 1 200px; min-width: 0; font-size: var(--font-size-18); line-height: 1.5; letter-spacing: -0.03em; color: #505050;}

.prod-layout {position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(25px, calc(50 / var(--inner) * 100vw), 80px); width: 100%; box-sizing: border-box;}
.prod-nav {position: sticky; top: var(--header-height); flex: 0 0 auto; width: 270px; max-width: 100%;box-sizing: border-box;}
.prod-nav .head {display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--space-30); font-size: var(--font-size-32); line-height: 1.875em; font-weight: 700; color: #fff; letter-spacing: -0.03em; background: var(--primary-color);}
.prod-nav .cont {max-height: 80vh; overflow-y: auto; padding: 0 var(--space-25); border: 1px solid #ddd; border-top: none;}
.prod-nav .menu {margin: 0; padding: 0; list-style: none;}
.prod-nav .menu .item {margin-bottom: 0;}
.prod-nav .menu .item .row {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 23px 0; text-decoration: none; border-bottom: 1px solid #ddd;}
.prod-nav .menu .item:last-child .row {border-bottom: none;}
.prod-nav .menu .item.open .row {padding-bottom: 21px; border-bottom: none;}
.prod-nav .menu .item .row .tit {font-size: var(--font-size-18); font-weight: 400; letter-spacing: -0.03em; color: var(--dark-color);}
.prod-nav .menu .item.open .row .tit {font-weight: 600;}
.prod-nav .menu .item .row .arr {flex-shrink: 0; width: 20px; height: 20px; background: url('/images/sub/prod-nav-arr.svg') no-repeat center center / contain;}
.prod-nav .sub {display: none; padding-top: 0; border-top: 1px solid var(--dark-color); border-bottom:1px solid var(--dark-color);}
.prod-nav .sub .list {margin: 0; padding: 0; list-style: none;}
.prod-nav .sub .list li {border-bottom: 1px dashed #ddd;}
.prod-nav .sub .list li:last-child {border-bottom: none;}
.prod-nav .sub .list li a {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px; text-decoration: none; font-size: var(--font-size-16); letter-spacing: -0.03em; color: #878787;}
.prod-nav .sub .list li.on a {font-weight: 600; color: var(--dark-color);}
.prod-nav .sub .list li a .arr {flex-shrink: 0; width: 5px; height: 8px;}
.prod-nav .sub .list li a .arr img {display: block; width: 100%; height: 100%;}
.prod-main {flex: 1 1 auto; min-width: 0; box-sizing: border-box;}
.prod-main .tit-wrap {padding-top: 10px; margin-bottom: clamp(40px, calc(80 / var(--inner) * 100vw), 80px);}
.prod-main .tit-wrap .tit {margin: 0 0 var(--space-30); font-size: var(--font-size-32); font-weight: 700; letter-spacing: -0.03em; color: var(--dark-color);}
.prod-main .prod-list {display: flex; flex-direction: column; gap: clamp(40px, calc(60 / var(--inner) * 100vw), 60px);}
.prod-main .card {padding-bottom: clamp(40px, calc(60 / var(--inner) * 100vw), 60px); border-bottom: 1px solid #eee;}
.prod-main .card:last-child {padding-bottom: 0; border-bottom: none;}
.prod-main .card .top {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: var(--space-20);}
.prod-main .card .name {margin: 0; font-size: var(--font-size-28); font-weight: 700; letter-spacing: -0.03em; color: var(--dark-color);}
.prod-main .card .body {display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px clamp(30px, calc(60 / var(--inner) * 100vw), 60px);}
.prod-main .card .img {position: relative; flex: 0 1 auto; width: 43%; max-width: 450px; margin: 0; border: 1px solid #ddd; box-sizing: border-box;}
.prod-main .card .img a {display: block; overflow: hidden;}
.prod-main .card .img img {display: block; width: 100%; aspect-ratio: 450 / 338; object-fit: contain;}
.prod-main .card .detail {flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-20); max-width: 540px;}
.prod-main .card .spec {padding: var(--space-30); background: #f4f4f4; box-sizing: border-box;}
.prod-main .card .spec .list {margin: 0; padding: 0; list-style: none;}
.prod-main .card .spec .list li {display: flex; gap: 8px; margin-bottom: var(--space-20);}
.prod-main .card .spec .list li:before {content: ''; display: inline-block; width: 13px; height: 1.45em; background: url('/images/sub/prod-spec-chk.svg') no-repeat center center / contain;}
.prod-main .card .spec .list li:last-child {margin-bottom: 0;}
.prod-main .card .spec .list li.note {align-items: flex-start;}
.prod-main .card .spec .list li .txt {font-size: var(--font-size-18); line-height: 1.45; letter-spacing: -0.03em; color: #505050;}
.prod-main .card .spec .list li.note .txt {flex: 1; min-width: 0;white-space: normal;}
.prod-main .card .down {display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;}
.prod-main .btn-download {border-radius: 100px; gap: var(--space-30); padding: 10px 20px;}
.prod-main .btn-download:hover {background: var(--primary-color); border-color: var(--primary-color); color: #fff;}
.prod-main .btn-download:hover:after {filter: brightness(0) invert(1);}