@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
 
/* 공통 */

/* CEO인사말 */
.greeting-image {position:relative; height:clamp(250px, calc(450 / var(--inner) * 100vw), 450px); border-radius:var(--radius-36); overflow:hidden;}
.greeting-image .image {position:absolute; inset:0; width:100%; height:100%;}
.greeting-image .image img {display:block; width:100%; height:100%; object-fit:cover;}
.greeting-image .text {position:absolute; left:0; bottom:var(--space-60); width:100%; padding:0 20px; font-size:var(--font-size-24); font-weight:800; line-height:1.5em; color:rgba(255,255,255,0.5); letter-spacing:.25em; text-align:center;}
.greeting-content {display:flex; justify-content:space-between; gap:var(--space-60); margin-top:var(--space-60); padding:0 0 0 var(--space-50);}
.greeting-slogan p {font-size:var(--font-size-42); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.greeting-slogan img {height:clamp(28px, calc(43 / var(--inner) * 100vw), 43px); vertical-align:middle; margin:-.2em 2px 0 0;}
.greeting-text {flex:1 1 auto; min-width:0; width:1%; max-width:844px; font-size:var(--font-size-20); line-height:1.55em; letter-spacing:-.03em; color:#454545;}
.greeting-text .semibold {font-weight:600; color:#242424;}
.greeting-text .sign {margin-top:var(--space-20);}

/* 회사연혁 */
.history-hero {position:relative; height:clamp(220px, calc(430 / var(--inner) * 100vw), 430px); overflow:hidden;}
.history-hero .image {position:absolute; inset:0; width:100%; height:100%;}
.history-hero .image img {display:block; width:100%; height:100%; object-fit:cover;}
.history-hero .inner {position:relative; z-index:1; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 var(--space-40); gap:var(--space-20); text-align:center;}
.history-hero .desc {font-size:var(--font-size-18); font-weight:500; line-height:1.3em; color:rgba(255,255,255,0.9); letter-spacing:-.01em;;}
.history-hero .tit {font-size:var(--font-size-36); font-weight:600; line-height:1.3em; color:#fff; letter-spacing:-0.03em;}

.history-content {position:relative;}
.history-content:before {content:''; position:absolute; top:0; left:50%; width:1px; height:100%; background:#ddd;}
.history-content .circle {position:relative; z-index:2; margin:0 auto; height:clamp(110px, calc(215 / var(--inner) * 100vw), 215px);}
.history-content .circle:after {content:''; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); width:15px; height:15px; background:var(--color-primary); border:3px solid rgba(203,246,225,1); border-radius:50%;}
.history-content .circle.last {height:clamp(55px, calc(110 / var(--inner) * 100vw), 110px);}
.history-content .circle.last:after {top:100%;}
.history-content .group {display:flex; align-items:flex-start;}
.history-content .group .image {width:50%;}
.history-content .group .content {width:50%; }
.history-content .group .content .title {padding:0 clamp(20px, calc(85 / var(--inner) * 100vw), 85px); overflow:hidden; border-bottom:1px solid #ddd; font-size:clamp(24px, calc(75 / var(--inner) * 100vw), 75px); font-weight:600; line-height:1em; color:#EAEAEA; letter-spacing:-0.03em;}
.history-content .group .content .title p {margin-bottom:-.15em;}
.history-content .group .content .list {display:flex; flex-direction:column; gap:clamp(20px, calc(34 / var(--inner) * 100vw), 34px); padding:var(--space-50);}
.history-content .group .content .list .entry {display:flex;}
.history-content .group .content .list .entry .year {width:90px; font-size:var(--font-size-20); font-weight:600; line-height:1.2em; color:var(--color-primary);}
.history-content .group .content .list .entry .details {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; gap:var(--space-16);}
.history-content .group .content .list .entry .details .item {display:flex; line-height:1.5em;}
.history-content .group .content .list .entry .details .item .month {min-width:40px; font-weight:600; color:#242424;}
.history-content .group .content .list .entry .details .item .text {flex:1; color:#454545;}

@media (min-width: 901px) {
    .history-content .group.reverse {flex-direction:row-reverse; text-align:right;}
    .history-content .group.reverse .content .list .entry {flex-direction:row-reverse;}
    .history-content .group.reverse .content .list .entry .details .item {flex-direction:row-reverse;}
}

.direction-map .root_daum_roughmap {width:100% !important;}
.direction-map .root_daum_roughmap .wrap_map {height:clamp(240px, calc(440 / var(--inner) * 100vw), 440px) !important;}
.direction-map .root_daum_roughmap .map_border {display:none;}
.direction-map .root_daum_roughmap .wrap_controllers,
.direction-map .root_daum_roughmap .cont {display:none !important;}
.direction-info {position:relative; z-index:10; display:flex; align-items:flex-start; gap:var(--space-40); margin:0 var(--space-20);}
.direction-info .box {display:flex; flex-direction:column; justify-content:space-between; width:340px; height:240px; margin-top:-60px; background:var(--color-primary); padding:var(--space-40); color:#fff;}
.direction-info .box p {font-size:var(--font-size-17); line-height:1.5em;}
.direction-info .box .address {font-size:var(--font-size-20); font-weight:600; line-height:1.6em;}
.direction-info .info {margin-top:var(--space-50); display:flex; flex-wrap:wrap; gap:20px 30px; max-width:800px;}
.direction-info .info dl {display:flex; gap:var(--space-10);}
.direction-info .info dl dt {font-size:var(--font-size-18); font-weight:600; line-height:1.3em; color:var(--color-primary);}
.direction-info .info dl dt:before {content:""; display:inline-block; vertical-align:middle; width:6px; height:6px; background:var(--color-primary); margin:-.2em 8px 0 0;}
.direction-info .info dl dd {font-size:var(--font-size-16); line-height:1.44 em; color:#454545;}
