@charset "utf-8";

.s-heading {margin-bottom:var(--space-60);}

.s-label {font-size:var(--font-size-16); font-weight:500; color:var(--color-secondary); line-height:1.5em; margin-bottom:var(--space-10);}

.s-tit {font-size:var(--font-size-32); font-weight:700; line-height:1.25em;}

.doc-bar {height:1px; background:#ddd; margin:0 auto; max-width:1400px;}

.service {display:flex; align-items:center; gap:var(--space-100);}
.service .image {width:41.43%}
.service .content {flex:1;}
.service .content h3 {font-size:var(--font-size-28); font-weight:600; line-height:1.4em; margin-bottom:var(--space-20);}
.service .content h3 span {color:var(--color-primary); font-weight:700;}
.service .content .sub {font-family:var(--font-urban); font-size:var(--font-size-16); color:#868686; line-height:1.em5em; letter-spacing:-.01em; margin-bottom:var(--space-55);}
.service .content .sub strong {color:#686868;}
.service .content .sub sup {font-size:0.5em;}
.service .content .txt {font-size:var(--font-size-16); color:#454545; line-height:1.8em7em; letter-spacing:-.01em;}

.about-intro {border-radius:clamp(24px, calc(48 / var(--inner) * 100vw), 48px); padding-bottom:var(--space-100); background:url("/images/sub/about-intro.jpg") center/cover no-repeat; color:#fff; overflow:hidden;}
.about-intro .contain {display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end;  height:clamp(370px, calc(950 / var(--inner) * 100vw), 950px);}
.about-intro p {font-size:var(--font-size-32); line-height:1.375em;}

.about-story {padding:var(--space-100) 0;}
.about-story .text {font-size:var(--font-size-16); color:#454545; line-height:1.8em; letter-spacing:-.01em;}
.about-story .text strong {display:block; font-size:var(--font-size-20); line-height:1.3em; font-family:var(--font-urban); color:#242424; margin-top:var(--space-30);}

.about-brand {padding-top:var(--space-100);}
.about-brand h3 {display:flex; align-items:center; gap:var(--space-10); font-size:var(--font-size-24); line-height:1.33em; margin-bottom:var(--space-40);}
.about-brand h3::before {content:''; width:16px; height:16px; background:url("/images/sub/about-check.png") no-repeat center/contain;}
.about-brand .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.about-brand .item .image {margin-bottom:var(--space-40);}
.about-brand .item .num {font-size:var(--font-size-28); font-weight:700; color:var(--color-secondary); line-height:1.29em; margin-bottom:var(--space-8);}
.about-brand .item h4 {font-size:var(--font-size-20); font-weight:600; line-height:1.4em; margin-bottom:var(--space-5);}
.about-brand .item .txt {font-size:var(--font-size-16); font-weight:700; color:#ddd; line-height:1.5em;}
.about-brand .item .desc {font-size:var(--font-size-16); color:#686868; line-height:1.75em; letter-spacing:-.01em; margin-top:var(--space-30);}

.insight-hero {border-radius:clamp(24px, calc(48 / var(--inner) * 100vw), 48px); overflow:hidden; background:url("/images/sub/insight-hero.jpg") center/cover no-repeat;}
.insight-hero .contain {display:flex; align-items:center; height:clamp(370px, calc(600 / var(--inner) * 100vw), 600px);}
.insight-hero .title {width:51%; font-size:var(--font-size-32); font-weight:700; color:#fff; line-height:1.375em; letter-spacing:-.03em;}
.insight-hero .text {display:flex; flex-direction:column; gap:var(--space-20);}
.insight-hero .txt {font-size:var(--font-size-18); font-weight:500; color:#fff; line-height:1.67em; letter-spacing:-.01em;}
.insight-hero .en {font-size:var(--font-size-16); color:rgba(255,255,255,0.6); line-height:1.875em; letter-spacing:-.01em;}

.insight-story {padding:var(--space-100) 0;}

.history {padding:var(--space-100) 0; background:url("/images/sub/history-bg.jpg") center/cover no-repeat;}
.history .s-heading {margin-bottom:var(--space-80);}
.history .s-tit {color:#fff;}
.history .items {position:relative;}
.history .items:before {content:''; position:absolute; left:clamp(130px, calc(260 / var(--inner) * 100vw), 260px); width:1px; top:.5em; bottom:3em; border:1px dashed rgba(255, 255, 255, 0.40);}
.history .item {margin-bottom:var(--space-100); display:flex; align-items:flex-start;}
.history .item:last-child {margin-bottom:0;}
.history .item h4 {display:flex; align-items:center; justify-content:space-between; width:clamp(130px, calc(260 / var(--inner) * 100vw), 260px);  font-family:var(--font-urban); font-size:var(--font-size-36); font-weight:600; color:#fff; line-height:1em;}
.history .item h4:after {z-index:10; margin-right:-15px; content:''; width:29px; height:29px; background:url("/images/sub/history-dot.png") no-repeat center/contain;}
.history .item .desc {padding-top:var(--space-5); padding-left:clamp(85px, calc(170 / var(--inner) * 100vw), 170px); flex:1;}
.history .item .desc ul {display:flex; flex-direction:column; gap:var(--space-10);}
.history .item .desc ul li {padding-left:var(--space-15); position:relative; font-size:var(--font-size-16); color:#fff; line-height:1.875em; letter-spacing:-.01em;}
.history .item .desc ul li:before {content:''; position:absolute; left:0; top:.8em; width:3px; height:3px; background:#fff; border-radius:100%;}

.our-value {padding-top:var(--space-100);}
.our-value .quote {margin-bottom:var(--space-80); text-align:center;}
.our-value .quote .icon svg {width:clamp(24px, calc(40 / var(--inner) * 100vw), 40px); height:clamp(24px, calc(40 / var(--inner) * 100vw), 40px);}
.our-value .quote p {margin:var(--space-18) 0 var(--space-25); font-size:var(--font-size-24); line-height:1.33em; letter-spacing:-.03em;}
.our-value .quote p strong {color:var(--color-primary); font-weight:600;}
.our-value .items {display:flex; justify-content:center;}
.our-value .item {display:flex; flex-direction:column; align-items:center; justify-content:center; width:clamp(200px, calc(300 / var(--inner) * 100vw), 300px); height:clamp(200px, calc(300 / var(--inner) * 100vw), 300px); border-radius:150px; flex-shrink:0; margin-right:calc(var(--space-30) * -1); padding:var(--space-30); text-align:center;}
.our-value .item:nth-child(1) {background:#74b570; z-index:1;}
.our-value .item:nth-child(2) {background:#52915a; z-index:2;}
.our-value .item:nth-child(3) {background:#2e6a41; z-index:3;}
.our-value .item:nth-child(4) {background:var(--color-primary); z-index:4; margin-right:0;}
.our-value .item .icon img {width:clamp(36px, calc(72 / var(--inner) * 100vw), 72px); height:clamp(36px, calc(72 / var(--inner) * 100vw), 72px); object-fit:contain;}
.our-value .item .tit {margin:var(--space-20) 0 var(--space-10); font-family:var(--font-urban); font-size:var(--font-size-22); font-weight:700; color:#fff; line-height:1.36em; letter-spacing:-.03em;}
.our-value .item .txt {font-size:var(--font-size-16); color:#fff; line-height:1.5em; letter-spacing:-.01em;}

.research-intro {border-radius:clamp(24px, calc(48 / var(--inner) * 100vw), 48px); overflow:hidden; position:relative; background:url("/images/sub/research-intro.png") center/cover no-repeat;}
.research-intro::before {content:''; position:absolute; inset:0; background:rgba(0,0,0,0.6);}
.research-intro .contain {position:relative; display:flex; align-items:center; justify-content:center; height:clamp(280px, calc(600 / var(--inner) * 100vw), 600px);}
.research-intro p {font-size:var(--font-size-32); font-weight:700; color:#fff; line-height:1.375em; letter-spacing:-.03em; text-align:center;}

.technology {padding:var(--space-100) 0;}
.technology .items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.technology .item {border:1px solid #ddd; border-radius:24px; overflow:hidden;}
.technology .item .image {position:relative; height:clamp(150px, calc(300 / var(--inner) * 100vw), 300px);}
.technology .item .image img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.technology .item .image .text {position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10px;}
.technology .item .image .num {font-size:var(--font-size-28); font-weight:700; color:var(--color-secondary); line-height:1.29em;}
.technology .item .image h4 {margin:var(--space-30) 0 var(--space-10); font-size:var(--font-size-20); font-weight:700; color:#fff; line-height:1.5em; letter-spacing:-.03em;}
.technology .item .image .en {font-size:var(--font-size-16); color:rgba(255,255,255,0.4); line-height:1.5em; letter-spacing:-.01em;}
.technology .item .desc {padding:var(--space-30); text-align:center;}
.technology .item .desc p {font-size:var(--font-size-16); color:#454545; line-height:1.75em; letter-spacing:-.01em;}

.rnd {background:#f8f8f8; padding:var(--space-100) 0;}
.rnd .items {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40);}
.rnd .item {background-color:#fff; background-position:right var(--space-40) top var(--space-40); background-repeat:no-repeat; border-radius:24px; padding:var(--space-40); background-size:clamp(30px, calc(72 / var(--inner) * 100vw), 72px) auto;}
.rnd .item1 {background-image:url("/images/sub/rnd-bg.png");}
.rnd .item2 {background-image:url("/images/sub/rnd-bg2.png");}
.rnd .item .tit {font-size:var(--font-size-20); font-weight:600; color:#242424; line-height:1.4em; margin-bottom:var(--space-5);}
.rnd .item .sub {font-size:var(--font-size-16); font-weight:700; color:#ddd; line-height:1.5em; margin-bottom:var(--space-30);}
.rnd .item .tags {display:flex; flex-wrap:wrap; gap:var(--space-20) var(--space-10);}
.rnd .item .tags span {padding:var(--space-10) var(--space-20); border-radius:50px; font-size:var(--font-size-16); font-weight:500; color:#fff; line-height:1.5em; white-space:nowrap;}
.rnd .item1 .tags span {background:#74b570;}
.rnd .item2 .tags span {background:var(--color-primary);}

.patents {padding:var(--space-100) 0;}
.patents .items {text-align:center; display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--space-40);}
.patents .item {min-width:0;}
.patents .item .img {margin-bottom:var(--space-25);}
.patents .item .txt {text-align:center;}
.patents .item .txt strong {margin-bottom:var(--space-5); font-size:var(--font-size-16); font-weight:600; color:#454545; line-height:1.5em; letter-spacing:-.03em;}
.patents .item .txt p {font-size:var(--font-size-14); font-weight:500; color:#686868; line-height:1.57em; letter-spacing:-.03em;}

.msds {background:#f8f8f8; padding:var(--space-100) 0 var(--space-150);}
.msds .wrap {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40);}
.msds .image {min-width:0;}
.msds .items {display:flex; flex-direction:column; justify-content:space-between; min-width:0;}
.msds .item {height:calc(50% - var(--space-20)); display:flex; flex-direction:column; align-items:flex-end; background:#fff; border-radius:24px; padding:var(--space-40);}
.msds .item .title {width:100%;}
.msds .item .tit {font-size:var(--font-size-20); font-weight:600; color:#242424; line-height:1.4em; letter-spacing:-.02em; margin-bottom:var(--space-10);}
.msds .item .sub {font-size:var(--font-size-16); font-weight:500; color:#454545; line-height:1.5em; letter-spacing:-.01em;}
.msds .item .btn {display:flex; align-items:center; justify-content:center; width:clamp(130px, calc(200 / var(--inner) * 100vw), 200px); height:clamp(40px, calc(60 / var(--inner) * 100vw), 60px); border-radius:8px; font-size:var(--font-size-18); font-weight:600; color:#fff; letter-spacing:-.01em; gap:var(--space-10);}
.msds .item .btn svg {width:clamp(12px, calc(16 / var(--inner) * 100vw), 16px); height:clamp(12px, calc(16 / var(--inner) * 100vw), 16px);}
.msds .item:nth-child(1) .btn {background:#74b570;}
.msds .item:nth-child(2) .btn {background:var(--color-primary);}

.root_daum_roughmap_landing {width:100% !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc(500 / var(--inner) * 100vw), 500px) !important;}
.root_daum_roughmap .cont {display:none;}
.root_daum_roughmap .border1,
.root_daum_roughmap_landing .border3, 
.root_daum_roughmap_landing .border4 {display:none;}
.root_daum_roughmap .wrap_controllers {border:none !important;}

.directions .addr {text-align:center; margin-bottom:var(--space-40);}
.directions .addr .ico {margin-bottom:var(--space-20);}
.directions .addr .ico img {width:32px; height:32px; object-fit:contain;}
.directions .addr p {font-size:var(--font-size-20); font-weight:700; color:#242424; line-height:1.33em; letter-spacing:-.03em;}
.directions .map-area {margin-bottom:var(--space-40); border-radius:24px; overflow:hidden;}
[lang="en"] .directions .map-area {height:clamp(250px, calc(500 / var(--inner) * 100vw), 500px);}
[lang="en"] .directions .map-area iframe {width:100%; height:100%;}
.directions .info-area {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40); margin-top:var(--space-40);}
.directions .info-area .item {display:flex; align-items:center; justify-content:center; gap:var(--space-10); border:1px solid #ddd; border-radius:24px; padding:var(--space-40);}
.directions .info-area .item .tit {display:flex; align-items:center; gap:var(--space-10); font-size:var(--font-size-16); font-weight:500; color:var(--color-primary); line-height:1.5em;}
.directions .info-area .item .tit img {width:24px; height:24px; object-fit:contain;}
.directions .info-area .item .tit::after {content:''; display:block; width:1px; height:10px; background:#ddd;}
.directions .info-area .item .txt {font-size:var(--font-size-16); color:#454545; line-height:1.5em; letter-spacing:-.02em;}