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

.vision-wrap {position:relative; padding-bottom:var(--space-90); overflow:hidden;}
.vision-wrap .contain {position:relative; width:100%; z-index:1; display:flex; align-items:flex-end; gap:var(--space-90);}
.vision-wrap .image {width:40%; display:flex; justify-content:flex-end;}
.vision-wrap .image img {max-width:unset;}
.vision-wrap .content {flex:1 1 auto; min-width:0; width:1%; position:relative;}
.vision-wrap .content .title {font-size:var(--font-size-44); line-height:1.25em; margin-bottom:var(--space-100);}
.vision-wrap .content .subtitle {font-size:var(--font-size-20); line-height:1.4em; margin-bottom:var(--space-30);}
.vision-wrap .content .text {font-size:var(--font-size-20); line-height:1.5em; color:#454545;}
.vision-wrap .circle {position:absolute; top:37%; left:76%; aspect-ratio:1/1; width:clamp(100px, calc(127 / var(--inner) * 100vw), 127px); border-radius:50%; background:rgba(230, 168, 73, 0.80);}

.vision-bg {position:absolute; bottom:0; left:0; width:100%; height:calc(100% - 170px); background:rgba(230, 168, 73, 0.04);}

.value-header {margin-bottom:var(--space-60); text-align:center;}
.value-header p {font-size:var(--font-size-16); line-height:1.3em; color:var(--color-primary); letter-spacing:.4em; margin-bottom:var(--space-20); margin-left:.4em;}
.value-header h2 {font-size:var(--font-size-40); line-height:1.3em;}

.philosophy {margin-bottom:var(--space-130); display:flex; align-items:center; justify-content:center; height:clamp(240px, calc(400 / var(--inner) * 100vw), 400px); padding:20px; background:url('/images/sub/philosophy.jpg') no-repeat center center / cover; text-align:center; color:#fff; font-size:var(--font-size-28); font-weight:600; line-height:1.25em;}
.philosophy .inner {display:flex; align-items:center; justify-content:center;}
.philosophy .inner:before,
.philosophy .inner:after {content:''; display:block; width:58px; aspect-ratio:58/93; background:url('/images/sub/leaf.svg') no-repeat center center / contain;}
.philosophy .inner:after {-webkit-transform:scaleX(-1); transform:scaleX(-1);}

.core-values {display:flex; flex-direction: column; gap:var(--space-60); max-width:1000px; margin:0 auto;}
.core-values .group {display:flex; align-items:center; gap:var(--space-100);}
.core-values .group .image {width:50%;}
.core-values .group .image img {border-radius:300px;}
.core-values .group .content {width:50%;}
.core-values .group .content h4 {margin-top:13px; font-size:var(--font-size-28); line-height:1.3em; margin-bottom:var(--space-30);}
.core-values .group .content p {font-size:var(--font-size-20); line-height:1.5em;}

.competency .image {margin-bottom:var(--space-80);}
.competency .content {display:flex;  justify-content:center; gap:clamp(40px, calc(183 / var(--inner) * 100vw), 183px);}
.competency .content .right {max-width:563px;}
.competency .content h4 {position:relative; font-size:var(--font-size-32); line-height:1.3em;}
.competency .content h4:before {content:''; position:absolute; top:-20px; left:0; width:20px; height:12px; background:url('/images/sub/bullet.svg') no-repeat center center / contain;}
.competency .content p {font-size:var(--font-size-20); line-height:1.5em; color:#454545;}

.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .wrap_map {height:clamp(240px, calc(440 / 1200 * 100vw), 440px) !important;}
.root_daum_roughmap .cont {display:none !important;}

.directions-wrap {position:relative; z-index:10; display:flex; align-items:center; gap:45px;}
.directions-wrap .left {position:relative; top:-60px; width:340px; background:var(--color-primary); padding:var(--space-40) var(--space-24); color:#fff;}
.directions-wrap .left .comp {font-size:var(--font-size-17); line-height:1.5em; margin-bottom:var(--space-70);}
.directions-wrap .left .addr {font-size:var(--font-size-24); font-weight:600; line-height:1.33em;}
.directions-wrap .right {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-wrap:wrap; gap:15px 30px; line-height:1.5em;}
.directions-wrap .right dl {display:flex; align-items:flex-start; gap:14px;}
.directions-wrap .right dl dt {display:flex; align-items:center; gap:12px; font-size:var(--font-size-18); color:var(--color-primary); font-weight:600;}
.directions-wrap .right dl dt:before {content:''; display:inline-block; vertical-align:middle; width:6px; height:6px; background:var(--color-primary);}
.directions-wrap .right dl dd {color:#454545;}

.biz-header {margin-bottom:var(--space-60); text-align:center;}
.biz-header h3 {margin-bottom:var(--space-30); font-size:var(--font-size-24); line-height:1.3em; background:linear-gradient(180deg, #E6A849 0%, #F09912 100%);  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.biz-header p {font-size:var(--font-size-18); line-height:1.55em; color:#454545;}

.biz-type-1 {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40); text-align:center;}
.biz-type-1 .item .img {aspect-ratio:1/1; margin-bottom:var(--space-40);}
.biz-type-1 .item .img img {width:100% !important; height:100% !important; object-fit:cover;}
.biz-type-1 .item .cnt h4 {margin-bottom:var(--space-16); font-size:var(--font-size-20); line-height:1.3em;}
.biz-type-1 .item .cnt h4 .text-primary {font-size:var(--font-size-28);}
.biz-type-1 .item .cnt p {font-size:var(--font-size-18); line-height:1.55em; color:#454545;}

.biz-type-2 {display:flex; flex-direction: column; gap:var(--space-70);}
.biz-type-2 .item {display:flex; align-items:center; gap:var(--space-70);}
.biz-type-2 .item .img {width:40%; max-width:480px;}
.biz-type-2 .item .cnt {flex:1 1 auto; min-width:0; width:1%;}
.biz-type-2 .item .cnt h4 {margin-bottom:var(--space-30); font-size:var(--font-size-28); line-height:1.3em;}
.biz-type-2 .item .cnt p {font-size:var(--font-size-18); line-height:1.55em; color:#454545;}

.talent {text-align:center; padding:50px 160px 80px;}
.talent .inner {max-width:901px; margin:0 auto; position:relative;}
.talent .center {position:absolute; top:47%; left:calc(50% - 150px); width:300px;}
.talent .center .logo-img {width:87px; margin:0 auto 12px;}
.talent .center p {font-size:var(--font-size-16); line-height:1.8em; color:#454545;}
.talent .text {position:absolute; font-size:var(--font-size-20); font-weight:500; line-height:1.6em; color:#454545;}
.talent .text.n1 {top:-50px; left:50%; transform:translateX(-50%); text-align:center;}
.talent .text.n2 {top:calc(100% + 15px); right:0; width:37%; text-align:center;}
.talent .text.n3 {top:calc(100% + 15px); left:0; width:37%; text-align:center;}