@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */ 
 
/* 공통 */
.sub-sec {margin-bottom:var(--space-150);} 
.sub-sec:last-child {margin-bottom:0;}

.sub-heading {margin-bottom:var(--space-60); text-align:center;}
.sub-heading .en {margin-bottom:var(--space-12); color:var(--color-primary); font-size:var(--font-size-20); font-weight:700; line-height:1.3em; text-transform:uppercase; letter-spacing:.03em;}
.sub-heading h3 {font-size:var(--font-size-32); font-weight:600; line-height:1.3em;}
.sub-heading .text {margin-top:var(--space-20); font-size:var(--font-size-16); font-weight:500; line-height:1.5em; color:#454545;}
.sub-heading .vline {display:block; margin:14px auto; width:1px; height:32px; background:#ddd;}
.sub-heading .en-sm {margin-bottom:var(--space-12); color:var(--color-primary); font-size:var(--font-size-16); font-weight:700; line-height:1.3em;}
.sub-heading h4 {font-size:var(--font-size-28); font-weight:600; line-height:1.3em;}

.sub-tab {margin-bottom:var(--space-100);}
.sub-tab:before {content:''; display:block; width:1px; height:clamp(35px, calc(70 / var(--inner) * 100vw), 70px); background:#C7C7C7; margin:var(--space-30) auto;}
.sub-tab ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-12); max-width:564px; margin:0 auto;}
.sub-tab ul li {text-align:center; min-height:clamp(40px, calc(50 / var(--inner) * 100vw), 50px);}
.sub-tab ul li a {display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:2px 6px; background:#FAFAFA; border:1px solid #ddd; color:#AFAFAF; font-size:var(--font-size-18); font-weight:500; line-height:1.2em; text-align:center;}
.sub-tab ul li a:hover,
.sub-tab ul li.active a {background:#fff; color:#454545; border-color:#454545; font-weight:600;}

.table-desc {margin-bottom:var(--space-20); font-size:var(--font-size-16); line-height:1.5em; color:#454545;}
 
.table-style table {width:100%; border-collapse:collapse; border-top:1px solid #888;}
.table-style table th,
.table-style table td {padding:var(--space-20) var(--space-20); border:1px solid #ddd; border-top:0; font-size:var(--font-size-16); line-height:1.4em; color:#454545;}
.table-style table th {font-weight:600;}
.table-style table td {text-align:center;}
.table-style table td.left {text-align:left; padding-left:var(--space-40);}
.table-style table thead th {background:#fafafa; font-weight:600; color:#242424;}
.table-style tr th:first-child,
.table-style tr td:first-child {border-left:0;}
.table-style tr th:last-child,
.table-style tr td:last-child {border-right:0;}
.table-style.text-lg table th {font-size:var(--font-size-18);}
.table-style.text-lg table thead th {color:var(--color-primary);}

/* 회사소개 */
.greetings .img {margin-bottom:var(--space-80);}
.greetings .img img {border-radius:clamp(24px, calc(43 / var(--inner) * 100vw), 43px);}
.greetings h2 {margin-bottom:var(--space-60); color:#000; font-size:clamp(24px, calc(52 / var(--inner) * 100vw), 52px); line-height:1.3em;}
.greetings p {margin-bottom:1.625em; color:#454545; font-weight:500; line-height:1.625em;}
.greetings .sign {margin-bottom:0; margin-top:var(--space-40); font-weight:400; line-height:1.4em; text-align:right;}
.greetings .sign strong {color:#242424; font-weight:600;}

.business-area {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.business-area .card {position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:clamp(16px, calc(27 / var(--inner) * 100vw), 27px); background:#F6F6F6;}
.business-area .card .img {overflow:hidden; aspect-ratio:406/248;}
.business-area .card .img img {display:block; width:100%; height:100%; object-fit:cover; transition:.4s;}
.business-area .card .cnt {padding:var(--space-50) var(--space-40); flex:1 1 auto; min-height:0; height:1%; display:flex; flex-direction:column; align-items:flex-start;}
.business-area .card .cnt .tit {color:#000; font-size:var(--font-size-22); line-height:1.5em;}
.business-area .card .cnt .tit strong {font-weight:600;}
.business-area .card .cnt .txt {margin:var(--space-20) 0; flex:1 1 auto; min-height:0; height:1%; color:#454545; line-height:1.68em;}
.business-area .card .cnt .more {display:inline-block; padding:4px 20px; background:#fff; border-radius:40px; color:#242424; font-weight:500; line-height:1.5em;}
.business-area .card:hover {box-shadow:3px 3px 10px 0px rgba(0, 0, 0, 0.10);}
.business-area .card:hover .img img {transform:scale(1.1);}

.member-list {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.member-list .link-item {display:flex; flex-direction:column; border:2px solid var(--color-primary); background:var(--color-primary);}
.member-list .link-item .img {aspect-ratio:402/387; overflow:hidden;}
.member-list .link-item .img img {display:block; width:100%; height:100%; object-fit:cover; object-position: top center;}
.member-list .link-item .cnt {flex:1 1 auto; min-height:0; height:1%; padding:var(--space-45); text-align:center; color:#fff;}
.member-list .link-item .cnt .name {margin-bottom:var(--space-20); font-size:var(--font-size-16); font-weight:500; line-height:1.5em;}
.member-list .link-item .cnt .name strong {font-size:var(--font-size-20); line-height:1.3em;}
.member-list .link-item .cnt .info {font-size:var(--font-size-18); font-weight:500; line-height:1.4em;}
.member-list .link-item:hover {transform:scale(1.02);}

.member-detail {display:flex; gap:var(--space-70); margin-bottom:var(--space-100);}
.member-detail .img {width:45%; max-width:560px;}
.member-detail .img img {display:block; width:100%;}
.member-detail .cnt {flex:1 1 auto; min-width:0; width:1%; padding-top:var(--space-50); display:flex; flex-direction:column; align-items: flex-start; gap:var(--space-50);}
.member-detail .cnt h3 {font-size:var(--font-size-22); font-weight:400; line-height:1.3em;}
.member-detail .cnt h3 strong {font-size:var(--font-size-38); line-height:1.3em;}
.member-detail .cnt .member-profile {flex:1 1 auto; min-height:0; height:1%;}
.member-detail .cnt .member-profile .text {margin-left:40px;}

.member-contact-info {display:flex; flex-wrap:wrap; gap:var(--space-20);}
.member-contact-info dl {min-width:260px; text-align:center; overflow:hidden; border:1px solid var(--color-primary); border-radius:var(--radius-10);}
.member-contact-info dl dt {padding:var(--space-12) var(--space-20); background:var(--color-primary); font-size:var(--font-size-18); font-weight:600; line-height:1.4em;  color:#fff; }
.member-contact-info dl dt svg {vertical-align:middle; margin:-.2em 10px 0 0;}
.member-contact-info dl dd {padding:var(--space-12) var(--space-20); font-size:var(--font-size-16); line-height:1.4em; color:var(--color-primary);}

.member-profile h4 {display:flex; align-items:center; gap:var(--space-15); margin-bottom:var(--space-20); font-size:var(--font-size-22); font-weight:600; line-height:1.3em;} 
.member-profile h4:before {content:''; display:inline-block; width:24px; height:24px; background:url('/images/sub/bullet.svg') 50% 50%/contain no-repeat;}
.member-profile .text {color:#454545;}

.member-content {display:flex; flex-direction:column; gap:var(--space-90);}
.member-content .member-profile h4 {border-bottom:1px solid #ddd; padding-bottom:var(--space-20);}

.btn-list {display:inline-flex; align-items:center; justify-content:center; min-width:160px; height:55px; padding:var(--space-12) var(--space-20); border:1px solid #242424; color:#242424; font-size:var(--font-size-18); font-weight:500; line-height:1.4em; text-align:center;}
.btn-list:hover {background:var(--color-primary); color:#fff; border-color:var(--color-primary);}

.directions-wrap {display:flex; align-items:center; gap:var(--space-100); margin-bottom:var(--space-100);}
.directions-wrap:last-child {margin-bottom:0;}
.directions-wrap .cnt-area {flex:1 1 auto; min-width:0; width:1%;}
.directions-wrap .cnt-area h3 {font-size:var(--font-size-28); line-height:1.3em; margin-bottom:var(--space-40);}
.directions-wrap .cnt-area .info {display:flex; flex-direction:column; gap:var(--space-20); margin-bottom:var(--space-60);}
.directions-wrap .cnt-area .info dl {display:flex;}
.directions-wrap .cnt-area .info dl dt {min-width:150px; font-size:var(--font-size-18); font-weight:600; line-height:1.3em; color:var(--color-primary); }
.directions-wrap .cnt-area .info dl dt img {vertical-align:middle; margin:-.2em 10px 0 0;}
.directions-wrap .cnt-area .info dl dd {flex:1 1 auto; min-width:0; width:1%; font-size:var(--font-size-16); line-height:1.5em; color:#454545;}
.directions-wrap .cnt-area .btn-more {display:inline-flex; align-items:center; justify-content:center; gap:var(--space-30); padding:var(--space-16) var(--space-30); border:1px solid #ddd; color:#999; font-size:var(--font-size-18); font-weight:600; line-height:1.4em; text-align:center;}
.directions-wrap .cnt-area .btn-more:after {content:''; display:inline-block; width:10px; height:10px; background:url('/images/sub/plus.svg') 50% 50%/contain no-repeat;}
.directions-wrap .cnt-area .btn-more:hover {border-color:var(--color-primary); color:var(--color-primary);}
.directions-wrap .map-area {width:50%;}

.directions-wrap .map-area .root_daum_roughmap {width:100% !important;}
.directions-wrap .map-area .root_daum_roughmap .wrap_map {height:clamp(240px, calc(420 / var(--inner) * 100vw), 420px) !important;}
.directions-wrap .map-area .root_daum_roughmap .cont {display:none;}

/* 업무소개 */
.biz-title {position:relative; text-align:center; margin-bottom:var(--space-60);}
.biz-title:before {content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:clamp(80px, calc(102 / var(--inner) * 100vw), 102px); background:url('/images/sub/logo-gray.svg') 50% 50%/contain no-repeat;}
.biz-title h3 {position:relative; font-size:var(--font-size-32); font-weight:600; line-height:1.3em; color:#242424;}
.biz-hero {position:relative; padding:0 30px 30px 0;}
.biz-hero .img {width:100%; _height:clamp(400px, calc(480 / var(--inner) * 100vw), 480px); overflow:hidden;}
.biz-hero .img img {display:block; width:100%; height:100%; object-fit:cover;}
.biz-hero .cnt {position:absolute; bottom:0; right:0; width:590px; background:rgba(0, 38, 122, 0.85); padding:var(--space-40) var(--space-30); color:#fff; font-size:var(--font-size-22); line-height:1.5em; letter-spacing:-.03em;}
.biz-hero .cnt:before {content:''; display:block; width:40px; height:1px; background:#fff; margin-bottom:var(--space-24);}
.biz-hero .cnt span {display:inline-block;}

.biz-procedure {display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-80) var(--space-130); margin-bottom:var(--space-100); text-align:center; overflow:hidden;}
.biz-procedure:last-child {margin-bottom:0;}
.biz-procedure .item {position:relative; width:calc(33.3333333% - calc(var(--space-130) * 2 / 3)); display:flex; flex-direction:column;}
.biz-procedure .item .tit-area {position:relative; aspect-ratio:1/1; padding:clamp(20px, calc(40 / var(--inner) * 100vw), 40px); border:clamp(8px, calc(14 / var(--inner) * 100vw), 14px) solid #F0F5FF; border-radius:50%;}
.biz-procedure .item .tit-area .circle {display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:#fff; border-radius:50%; box-shadow:0 var(--space-24) var(--space-24) rgba(0, 0, 0, 0.42);}
.biz-procedure .item .tit-area .circle .inner {width:100%; padding:10px;}
.biz-procedure .item .tit-area .icon {width:35%; max-width:76px; aspect-ratio:1/1; margin:0 auto;}
.biz-procedure .item .tit-area .icon svg {display:block; width:100%; height:100%; object-fit:contain;}
.biz-procedure .item .tit-area .num {margin-top:var(--space-20); font-size:var(--font-size-18); font-weight:600; line-height:1.3em; color:#00267A;}
.biz-procedure .item .tit-area .tit {margin-top:var(--space-6); font-size:var(--font-size-16); font-weight:500; line-height:1.3em; color:#242424;}
.biz-procedure .item .tit-area:after {content:''; position:absolute; top:50%; left:calc(100% + clamp(8px, calc(14 / var(--inner) * 100vw), 14px)); transform:translateY(-50%); width:var(--space-130); height:clamp(20px, calc(30 / var(--inner) * 100vw), 30px); background:url('/images/sub/process-arrow.svg') 50% 50%/contain no-repeat;}
.biz-procedure .item .deco-line {position:relative; width:1px; height:45px; margin:0 auto; background:#ddd;}
.biz-procedure .item .deco-line:after {content:'';  position:absolute; top:-5px; left:50%; margin-left:-9px;  width:18px; height:18px; background:#fff; border-radius:50%; border:5px solid #0088D1;}
.biz-procedure .item .cnt-area {width:96%; max-width:320px; flex:1 1 auto; min-height:clamp(100px, calc(184 / var(--inner) * 100vw), 184px); height:1%; margin:0 auto; padding:var(--space-30) var(--space-20); border:1px solid #d9d9d9; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#454545; font-size:14px; font-weight:500; line-height:1.7em; }
.biz-procedure .item .cnt-area ul li {position:relative; padding-left:1em; text-align:left;}
.biz-procedure .item .cnt-area ul li:before {content:'▪'; position:absolute; left:0; top:0; color:var(--color-primary);}
.biz-procedure .item.st1 .tit-area {background:#0088D1;}
.biz-procedure .item.st2 .tit-area {background:#0042D1;}
.biz-procedure .item.st3 .tit-area {background:#336BE5;}
.biz-procedure .item.st2 .deco-line:after {border-color:#0042D1;}
.biz-procedure .item.st3 .deco-line:after {border-color:#336BE5;}
.biz-procedure .item:last-child .tit-area:after {display:none;}
.biz-procedure.col-4 {gap:var(--space-80) var(--space-80);}
.biz-procedure.col-4 .item {width:calc(25% - calc(var(--space-80) * 3 / 4));}
.biz-procedure.col-4 .item .tit-area {padding:clamp(20px, calc(30 / var(--inner) * 100vw), 30px);}
.biz-procedure.col-4 .item .tit-area:after {width:var(--space-80);}


.biz-capacity .item .img img {display:block; width:100%; height:100%; object-fit:cover;}
.biz-capacity .item .cnt h4 {margin-bottom:var(--space-16); font-size:var(--font-size-24); line-height:1.3em; letter-spacing:-.03em; color:var(--color-primary);}
.biz-capacity .item .cnt ul {display:flex; flex-direction:column; gap:4px;}
.biz-capacity .item .cnt ul li {position:relative; padding-left:1em; font-weight:500; line-height:1.5em; color:#454545;}
.biz-capacity .item .cnt ul li:before {content:'▪'; position:absolute; left:0; top:0; color:var(--color-primary);}
.biz-capacity .items.st1 {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-40);}
.biz-capacity .items.st1 .img {aspect-ratio:408/460; overflow:hidden; margin-bottom:var(--space-40);}
.biz-capacity .items.st2 {display:grid; align-items:start; grid-template-columns:repeat(2, 1fr); gap:var(--space-80);}
.biz-capacity .items.st2 .img {margin-bottom:var(--space-40);}
.biz-capacity .items.st2 .item:nth-child(2n) {padding-top:clamp(60px, calc(108 / var(--inner) * 100vw), 108px);}
.biz-capacity .items.st3 {display:flex; flex-direction:column; gap:var(--space-90);}
.biz-capacity .items.st3 .item {display:flex; gap:var(--space-100);}
.biz-capacity .items.st3 .item.reverse {flex-direction:row-reverse;}
.biz-capacity .items.st3 .img {width:50%; max-width:610px; aspect-ratio:305/193; overflow:hidden;}
.biz-capacity .items.st3 .cnt {width:50%; max-width:500px; display:flex; flex-direction:column; justify-content:center;}
.biz-capacity .items.st3 .cnt h4 {margin-bottom:var(--space-30); color:#242424;}
.biz-capacity .items.st3 .cnt ul {display:flex; flex-direction:column; gap:1.5em;}
.biz-capacity .items.st4 {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-60) var(--space-40);}
.biz-capacity .items.st4 .img {aspect-ratio:630/360; overflow:hidden; margin-bottom:var(--space-40);}

.biz-works {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-30);}
.biz-works .box {border:1px solid #ddd; padding:var(--space-35) var(--space-20); text-align:center;}
.biz-works .box .icon {width:35%; max-width:66px; aspect-ratio:1/1; margin:0 auto var(--space-20);}
.biz-works .box .icon svg {display:block; width:100%; height:100%; object-fit:contain;}
.biz-works .box .num {margin-bottom:6px; font-size:var(--font-size-18); font-weight:600; line-height:1.3em; color:var(--color-primary);}
.biz-works .box .txt {font-size:var(--font-size-16); font-weight:600; line-height:1.3em; color:#242424;}

.biz-manage {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-40);}
.biz-manage .item {position:relative; aspect-ratio:295/360; overflow:hidden;}
.biz-manage .item img {display:block; width:100%; height:100%; object-fit:cover;}
.biz-manage .item p {position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:var(--space-20); color:#fff; font-size:var(--font-size-20); font-weight:600; line-height:1.3em; text-align:center;}

.biz-products {display:grid; grid-template-columns:repeat(6, 1fr); gap:var(--space-40);}
.biz-products .item {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; aspect-ratio:1/1; padding:10px; border-radius:100%; overflow:hidden; color:#fff; font-size:var(--font-size-22); font-weight:600; line-height:1.5em; transition:.4s;}
.biz-products .item img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.biz-products .item p {position:relative; z-index:1;}
.biz-products .item:hover {transform:scale(1.08);}

.biz-qualification {display:grid; align-items:start; grid-template-columns:repeat(3, 1fr); gap:var(--space-30);}
.biz-qualification .item {position:relative;}
.biz-qualification .item .img {aspect-ratio:413/460; overflow:hidden;}
.biz-qualification .item .img img {display:block; width:100%; height:100%; object-fit:cover;}
.biz-qualification .item .cnt {position:absolute; left:0; bottom:0; width:85%; min-height:clamp(120px, calc(144 / var(--inner) * 100vw), 144px); display:flex; flex-direction:column; justify-content:center; gap:var(--space-10); padding:var(--space-30); background:#001D37; color:#fff; font-size:var(--font-size-16); line-height:1.5em;}
.biz-qualification .item .cnt h4 {font-size:var(--font-size-20); line-height:1.3em;}
.biz-qualification .item.mgt {margin-top:clamp(30px, calc(44 / var(--inner) * 100vw), 44px);}

.FTA-partner {text-align:center; margin-bottom:var(--space-60);}

.biz-meaning {position:relative; padding:0 0 72px 0;}
.biz-meaning .tit {position:absolute; top:45px; left:80px; min-width:435px; text-align:center; font-size:var(--font-size-38); line-height:1.3em; color:#C2C2C2;}
.biz-meaning .img {position:absolute; bottom:0; left:0; width:485px;}
.biz-meaning .cnt {background:var(--color-primary); margin:0 0 0 325px; padding:36px 50px 65px 202px; color:#fff; font-size:var(--font-size-22); line-height:1.9em;}
.biz-meaning .cnt .mark {text-align:right; margin-bottom:19px;}

.biz-compare {display:flex; align-items:center; gap:22px;}
.biz-compare .item {position:relative; flex:1 1 auto; min-width:0; width:1%;}
.biz-compare .item .img {aspect-ratio:600/415; overflow:hidden;}
.biz-compare .item .img img {display:block; width:100%; height:100%; object-fit:cover;}
.biz-compare .item .cnt {position:absolute; left:0; bottom:0; width:75%; max-width:376px; display:flex; flex-direction:column; justify-content:center; gap:var(--space-10); padding:var(--space-30); background:#00267A; color:#fff; font-size:var(--font-size-16); line-height:1.5em;}
.biz-compare .item .cnt h4 {font-size:var(--font-size-20); line-height:1.3em;}
.biz-compare .arrow {display:flex; align-items:center; justify-content:center; width:clamp(40px, calc(50 / var(--inner) * 100vw), 50px); aspect-ratio: 1/1; background:#0C5EAD; border-radius:50%; color:#fff; font-size:var(--font-size-24); line-height:1.3em;}