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

.greetings {margin-bottom:var(--space-200); overflow:hidden;}
.greetings .contain {display:flex; justify-content:space-between; gap:var(--space-60);}
.greetings .img-area {width:50%; text-align:center;}

.greetings .cont-area {width:50%; max-width:640px;}
.greetings .cont-area .tit {margin-bottom:var(--space-50);}
.greetings .cont-area .txt {color:#505050; font-size:var(--font-size-18); line-height:1.67em;}
.greetings .cont-area .txt .tt {margin-bottom:1.67em; color:#121212; font-size:var(--font-size-22); line-height:1.4em; letter-spacing:-.03em;}
.greetings .cont-area .txt .sign {margin-top:1.67em; color:#121212;}

.vision {margin-bottom:var(--space-120); overflow:hidden;}
.vision h2 {margin-bottom:var(--space-90); font-size:var(--font-size-48); line-height:1.3em; letter-spacing:-.03em; text-align:center;}
.vision .img-area {height:500px; background:url('/images/sub/vision.jpg') 50% 100% no-repeat;  color:#ccc; font-size:var(--font-size-56); font-weight:700; line-height:1.4em; letter-spacing:-.03em;}
.vision .cont-area {position:relative; display:flex; align-items: flex-start; gap:0 var(--space-80);}
.vision .cont-area .tit {position:relative; width:33%; max-width:440px; background:var(--color-primary); color:#fff; font-size:var(--font-size-32); font-weight:600; line-height:1.5em; letter-spacing:-.03em; -webkit-transform:translateY(-50%); transform:translateY(-50%); display:flex; justify-content:flex-end; align-items:center;}
.vision .cont-area .tit .inner {width:100%; padding:var(--space-30) var(--space-60) var(--space-30) 0;}
.vision .cont-area .tit .inner p:nth-child(2) {text-align:right;}
.vision .cont-area .tit:before {content:""; position:absolute; top:0; right:100%; width:50vw; height:100%; background:var(--color-primary);}
.vision .cont-area .txt {flex:1 1 auto; min-width:0; width:1%; padding-top:var(--space-50); color:#505050; font-size:var(--font-size-20); line-height:1.7em;} 
.vision .cont-area .txt strong {color:#121212;}

.philosophy {text-align:center;}
.philosophy .txt-area {display:flex; justify-content:space-between; align-items:center; gap:var(--space-20); margin-bottom:var(--space-80); color:#505050; font-size:var(--font-size-32); line-height:1.5em; letter-spacing:-.03em;}
.philosophy .txt-area strong {color:#121212; font-weight:600;}
.philosophy .txt-area:before,
.philosophy .txt-area:after {content:""; width:clamp(80px, calc(200 / var(--inner) * 100vw), 200px); aspect-ratio:200/148; background-size:contain; background-repeat:no-repeat; background-position:center;}
.philosophy .txt-area:before {background-image:url('/images/sub/quotation-start.png');}
.philosophy .txt-area:after {background-image:url('/images/sub/quotation-end.png');}

.philosophy-wrap {display:flex; align-items:center;}
.philosophy-wrap .img {width:50%; padding:0 var(--space-40); text-align:center;}
.philosophy-wrap .cnt {width:50%; position:relative; text-align:left;}
.philosophy-wrap .cnt dl {position:absolute; left:0;}
.philosophy-wrap .cnt dl dt {font-size:var(--font-size-24); font-weight:700; line-height:1.5em; margin-bottom:8px;}
.philosophy-wrap .cnt dl dd {font-size:var(--font-size-18); line-height:1.67em;}
.philosophy-wrap .cnt dl.n1 {top:3%; left:118px;}
.philosophy-wrap .cnt dl.n2 {top:50%; left:218px; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.philosophy-wrap .cnt dl.n3 {bottom:3%; left:118px;}

.ci-intro {display:flex; align-items:center; margin-bottom:var(--space-100);}
.ci-intro .img-area {width:50%; padding:0 var(--space-40); text-align:center;}
.ci-intro .cont-area {width:50%;}
.ci-intro .cont-area  h3 {font-size:var(--font-size-32); line-height:1.3em; letter-spacing:-.03em;}
.ci-intro .cont-area  dl {display:flex; flex-direction:column; gap:var(--space-10); margin-top:var(--space-40);}
.ci-intro .cont-area  dl dt {font-size:var(--font-size-20); font-weight:700; line-height:1.3em;}
.ci-intro .cont-area  dl dd {font-size:var(--font-size-18); line-height:1.67em; color:#505050;}
.ci-intro .cont-area  dl.n1 dt {color:var(--color-secondary);}
.ci-intro .cont-area  dl.n2 dt {color:var(--color-primary);}

.ci-type {display:flex;}
.ci-type .img-area {width:400px;}
.ci-type .cont-area {flex:1; display:flex; flex-direction:column;}
.ci-type .cont-area .type {display:flex; justify-content:center; align-items:center; width:100%; height:100%; padding:var(--space-20);}
.ci-type .cont-area .type.n1 {background:#d2d2d2;}
.ci-type .cont-area .type.n2 {background:#2e2940;}
.ci-type .cont-area .type.n3 {background:#fff; border:1px solid #ddd; border-top:0; border-left:0;}

.history-top {display:flex; align-items:center; height:clamp(240px, calc(400 / var(--inner) * 100vw), 400px); padding:var(--space-80); background:url('/images/sub/history.jpg') no-repeat center center / cover; margin-bottom:var(--space-80); color:#fff;}
.history-top .since {padding:var(--space-30) var(--space-40); background-image:linear-gradient(310deg, rgb(22,121,176) 0%, rgb(33,76,143) 100%); box-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.2);}
.history-top .since .tit {font-size:var(--font-size-40); font-weight:700; line-height:1.4em; margin-bottom:10px;}
.history-top .since .txt {font-size:var(--font-size-24); font-weight:700; line-height:1.4em; margin-left:3em;}  

.history {position:relative;}
.history .group {display:flex; gap:var(--space-60);}
.history .group:first-child .year {border-top:2px solid #121212;}
.history .group:first-child .list {border-top:2px solid #121212;}
.history .group .year {width:24%; max-width:300px; border-bottom:1px solid #ddd; padding:var(--space-40) 0; font-size:var(--font-size-32); font-weight:700; line-height:1em; text-align:center; color:var(--color-primary);}
.history .group .list {flex:1 1 auto; min-width:0; width:1%; border-bottom:1px solid #ddd; padding:var(--space-40) 0; line-height:1.6em; color:#505050; font-size:var(--font-size-18);}
.history .group .list ul {display:flex; flex-direction:column; gap:var(--space-20);}
.history .group .list ul li {display:flex; position:relative; padding-left:.85em;}
.history .group .list ul li:before {content:''; position:absolute; top:.6em; left:0; width:6px; height:6px; background:var(--color-secondary); border-radius:50%;}
.history .group .list ul li .month {width:clamp(50px, calc(80 / var(--inner) * 100vw), 80px); color:#121212; font-weight:700;}
.history .group .list ul li .text {flex:1 1 auto; min-width:0; width:1%;}

.certificate {text-align:center; font-size:var(--font-size-18); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.certificate ul {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-60) var(--space-40);}
.certificate ul li.none {grid-column: 1 / -1; color:#505050; font-weight: 400; padding:70px 0;}
.certificate ul li .img {position:relative; border:1px solid #ddd; margin-bottom:12px; aspect-ratio:1/1.414;}
.certificate ul li .img img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain;}

.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .cont {display:none;}

.directions {display:flex; gap:var(--space-60); margin-top:var(--space-60); color:#505050; font-size:var(--font-size-18); line-height:1.5em;}
.directions .address-info {flex:1;}
.directions .address-info .comp {color:var(--color-primary); font-weight:600; margin-bottom:5px;}
.directions .address-info .addr {color:#121212; font-size:var(--font-size-24); font-weight:700; line-height:1.4em; letter-spacing:-.03em; margin-bottom:12px;}
.directions .address-info .etc span {display:inline-block; margin-right:26px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {flex:1; display:flex; flex-direction:column; gap:var(--space-24);}
.directions .contact-info dl {display:flex;}
.directions .contact-info dt {width:125px; color:#121212; font-weight:700;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:var(--color-secondary);}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:#505050;}

.declaration {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-40);}
.declaration img {box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);}

.item-download {border-top:1px solid #121212;}
.item-download .list {display:flex; align-items:center; gap:var(--space-30); width:100%; padding:var(--space-60) var(--space-20); border-bottom:1px solid #ddd;}
.item-download .list .text {flex:1 1 auto; min-width:0; width:1%; font-size:var(--font-size-24); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.item-download .list .btns {display:flex; gap:var(--space-20);}
.item-download .list .btns .btn {display:inline-flex; align-items:center; justify-content:center; gap:var(--space-40); text-align:center; border:1px solid #ddd; padding:14px var(--space-40); background:#fff; font-weight:600; line-height:1.5em;}
.item-download .list .btns .btn:after {content:''; display:inline-block; width:24px; height:24px; background:url('/images/sub/icon-down.png') 50% 50% no-repeat; background-size:contain;}
.item-download .list .btns .btn:hover {border-color:#121212;}

.procedure:not(:last-child) {margin-bottom:var(--space-150);}
.procedure h2 {padding:var(--space-15) var(--space-40); margin-bottom:var(--space-40); color:#fff; font-size:var(--font-size-24); font-weight:700; line-height:1.3em; letter-spacing:-.03em;}
.procedure ol {display:flex; flex-wrap:wrap; margin:-30px;}
.procedure ol li {position:relative; width:calc(100% / 3); padding:30px;}
.procedure ol li:after {content:''; position:absolute; top:calc(50% - 16px); right:-16px; width:32px; height:32px; background:url('/images/sub/arrow-right.svg') 50% 50%/contain no-repeat;}
.procedure ol li:last-child:after {display:none;}
.procedure ol li:nth-child(1) {order:1;}
.procedure ol li:nth-child(2) {order:2;}
.procedure ol li:nth-child(3) {order:3;}
.procedure ol li:nth-child(4) {order:6;}
.procedure ol li:nth-child(5) {order:5;}
.procedure ol li:nth-child(6) {order:4;}
.procedure ol li:nth-child(3)::after {top:auto; bottom:-16px; right:calc(50% - 16px); -webkit-transform:rotate(90deg); transform:rotate(90deg);}
.procedure ol li:nth-child(n+4)::after {-webkit-transform:scaleX(-1); transform:scaleX(-1); right:auto; left:-16px;}
.procedure .box {display:flex; align-items:center; width:100%; height:100%; gap:10px; border:1px solid #ddd; padding:19px;}
.procedure .box .left {flex:1 1 auto; min-width:0; width:1%; padding-left:var(--space-20);}
.procedure .box .right {width:clamp(65px, calc(130 / var(--inner) * 100vw), 130px);}
.procedure .box .tit {margin-bottom:10px; font-size:var(--font-size-24); line-height:1.3em; letter-spacing:-.03em;}
.procedure .box .tit strong {font-weight:600;}
.procedure .box .txt {line-height:1.67em; color:#505050;}
.procedure.st1 h2 {background:#204b8f;}
.procedure.st1 .box {border-color:#204b8f;}
.procedure.st1 .tit {color:#204b8f;}
.procedure.st2 h2 {background:#1775ad;}
.procedure.st2 .box {border-color:#1775ad;}
.procedure.st2 .tit {color:#1775ad;}
.procedure.st3 h2 {background:#f39420;}
.procedure.st3 .box {border-color:#f39420;}
.procedure.st3 .tit {color:#f39420;}

.inquiry-top {font-size:var(--font-size-32); font-weight:600; line-height:1.38em; letter-spacing:-.03em; margin-bottom:var(--space-40);}