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

/* 공통 */
.sub-sec {margin-bottom:var(--space-120);}
.sub-sec:last-child {margin-bottom:0;}

.doc-title {position:relative; padding-left:20px; margin-bottom:var(--space-30); font-size:var(--font-size-32); font-weight:600; line-height:1.3em; color:#222; letter-spacing:-.03em;}
.doc-title:before {content:''; position:absolute; top:.23em; left:0; width:8px; height:8px; background:#222;}

.doc-text {margin-bottom:var(--space-24); font-size:var(--font-size-18); line-height:1.44em; color:#454545; letter-spacing:-.03em;}

.table-style table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #222; font-size:var(--font-size-18); line-height:1.5em; letter-spacing:-.03em;}
.table-style table th {height:clamp(40px, calc(64 / var(--inner) * 100vw), 64px); padding:var(--space-8); border:1px solid #ddd; color:#222; font-weight:600;}
.table-style table th small {color:#898989; font-size:var(--font-size-16); line-height:1.5em; font-weight:400;}
.table-style table td {height:clamp(40px, calc(64 / var(--inner) * 100vw), 64px); padding:var(--space-8); border:1px solid #ddd; color:#454545; text-align:center;}
.table-style table thead th {background:#fafafa; border-top:0;}
.table-style table tr th:first-child,
.table-style table tr td:first-child {border-left:0;}
.table-style table tr th:last-child,
.table-style table tr td:last-child {border-right:0;}

.table-desc {margin-top:var(--space-24); padding:var(--space-30); border-radius:var(--radius-8); background:#FAFAFA; font-size:var(--font-size-18); line-height:1.44em; color:#454545; letter-spacing:-.03em;}

/* 회사소개 */
.vision-top {display:flex; justify-content:center; align-items:center; gap:var(--space-30); margin-bottom:var(--space-60); text-align:center; font-size:var(--font-size-24); font-weight:500; line-height:1.3em;}
.vision-top::before,
.vision-top::after {content:''; width:clamp(60px, calc(100 / var(--inner) * 100vw), 100px); aspect-ratio:100/66; background:url('/images/sub/quote.svg') no-repeat 50% 50%; background-size:contain;}
.vision-top::after {-webkit-transform:rotate(180deg) scaleY(-1); transform:rotate(180deg) scaleY(-1);}
.vision-statement {margin-bottom:var(--space-40); text-align:center; font-size:var(--font-size-18); line-height:1.5em; color:#454545;}

.vision-values {margin-bottom:var(--space-60); overflow:hidden;}
.vision-values .line-vertical {width:1px; height:clamp(50px, calc(100 / var(--inner) * 100vw), 100px); background:#222; margin:0 auto var(--space-40);}
.vision-values .circles {display:flex; justify-content:center;}
.vision-values .circle {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; width:clamp(150px, calc(300 / var(--inner) * 100vw), 300px); aspect-ratio:1/1; gap:var(--space-16); border:1px solid #222; border-radius:50%; background:#fff;}
.vision-values .circle:nth-child(2) {z-index:2; border-color:#ddd; margin:0 -40px;}
.vision-values .label {display:flex; flex-direction:column; gap:4px;}
.vision-values .label strong {font-size:var(--font-size-24); line-height:1.4em;}
.vision-values .label span {font-size:var(--font-size-16); font-weight:500; line-height:1.4em; color:#454545;}

.vision-detail {display:flex; flex-direction:column; gap:var(--space-60);}
.vision-detail .title {position:relative; border-bottom:1px solid #d9d9d9; padding:0 0 16px 16px;}
.vision-detail .title:before {content:''; position:absolute; top:.25em; left:0; width:4px; height:var(--font-size-24); background:#222;}
.vision-detail .title h3 {font-size:var(--font-size-24); font-weight:600; line-height:1.3em;}
.vision-detail .description {padding:16px 0 0 16px; font-size:var(--font-size-18); font-weight:400; line-height:1.44em; color:#454545;}
.vision-detail .description p {margin-bottom:0;}

.about-hero {display:flex; gap:var(--space-60); margin-bottom:var(--space-80); align-items:center; overflow:hidden;}
.about-hero .image {width:calc(50% - 20px);}
.about-hero .image img {display:block; width:100%;}
.about-hero .content {flex:1 1 auto; min-width:0; width:1%;}
.about-hero .content h3 {font-size:var(--font-size-46); font-weight:400; line-height:1.43em;}

.about-content {position:relative;}
.about-content h4 {margin-bottom:var(--space-30); font-size:var(--font-size-32); font-weight:600; line-height:1.3em;}
.about-content .row {display:flex; gap:40px;}
.about-content .col {width:50%; display:flex; flex-direction:column; gap:1.55em; font-size:var(--font-size-18); line-height:1.55em; color:#454545; letter-spacing:-.03em;}
.about-content .badge {position:absolute; right:0; top:calc(var(--space-100) * -1); width:clamp(80px, calc(140 / 1024 * 100vw), 140px); aspect-ratio:1/1;}
.about-content .badge img {display:block; width:100%; height:100%; object-fit:contain; animation:rotate 10s linear infinite;}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.contact-type {display:flex; position:relative; border-bottom:1px solid #ddd; margin-bottom:-2px;}
.contact-type .item {flex:1; position:relative;}
.contact-type .item input {position:absolute; top:0; left:0; width:0; height:0; border:0; opacity:0; z-index:-1;}
.contact-type .item label {position:relative; display:block; padding:19px; text-align:center; background:#fff; font-size:var(--font-size-18); font-weight:600; line-height:1.2em; color:#888; cursor:pointer; transition:all 0.3s ease;}
.contact-type .item input:checked + label {background:#222; color:#fff;}
.contact-title {margin-bottom:var(--space-40); font-size:var(--font-size-32); line-height:1.3em; text-align:center;}
.contact-info {margin-top:var(--space-120);}
.contact-cards {display:flex; gap:var(--space-30); margin-bottom:var(--space-30);}
.contact-card {flex:1; padding:var(--space-40); border:1px solid #222; border-radius:var(--radius-8); background:#fff; font-size:var(--font-size-18); line-height:1.66em; color:#454545;}
.contact-card.full {border:1px solid #ddd; background:#fafafa;}
.contact-card .head {display:flex; align-items:center; gap:clamp(10px, calc(12 / var(--inner) * 100vw), 12px); margin-bottom:var(--space-24);}
.contact-card .head .tit {flex:1 1 auto; min-width:0; width:1%; font-size:var(--font-size-24); font-weight:600; line-height:1.4em; color:#222;}

/* 사업분야 */
.services {display:flex; flex-direction:column; gap:var(--space-20);}
.services .item {display:flex; align-items:center; gap:var(--space-50); padding:var(--space-40) var(--space-50); border-radius:var(--radius-8); background:#fafafa;}
.services .item .icon {width:64px;}
.services .item .text {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; gap:var(--space-20);}
.services .item .text h4 {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; color:#222;}
.services .item .text p {font-size:var(--font-size-18); line-height:1.6em; color:#454545;}

.premium-care {display:flex; flex-direction:column; gap:var(--space-20);}
.premium-care .item {display:flex; flex-direction:column; gap:var(--space-20); padding:var(--space-40) var(--space-30); border-radius:var(--radius-8); border:1px solid #DDD;}
.premium-care .item h3 {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; color:#222;}
.premium-care .item p {font-size:var(--font-size-18); line-height:1.6em; color:#454545;}

.differ {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; overflow:hidden; height:clamp(240px, calc(340 / var(--inner) * 100vw), 340px); padding:var(--space-40); border-radius:var(--radius-16); background-position:50% 50%; background-size:cover; background-repeat:no-repeat; color:#fff; font-size:var(--font-size-24); line-height:1.5em;}
.differ:before {content:''; position:absolute; inset:0; background:rgba(0,0,0,0.45);}
.differ .inner {position:relative;}
.differ.bg-1 {background-image:url('/images/sub/differ-1.jpg');}
.differ.bg-2 {background-image:url('/images/sub/differ-2.jpg');}
.differ.bg-3 {background-image:url('/images/sub/differ-3.jpg');}
.differ.bg-4 {background-image:url('/images/sub/differ-4.jpg');}

.trust-criteria {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-50);}
.trust-criteria .item {padding:var(--space-50); border-radius:var(--radius-8); border:1px solid #ddd;}
.trust-criteria .item .title {display:flex; flex-direction:column; gap:var(--space-16); padding-bottom:var(--space-24); margin-bottom:var(--space-24); border-bottom:1px solid #ddd;}
.trust-criteria .item .title .icon {text-align:right;}
.trust-criteria .item .title h4 {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; color:#222;}
.trust-criteria .item .text {font-size:var(--font-size-18); line-height:1.5em; color:#454545;}

.biz-process {display:flex; flex-direction:column; gap:var(--space-20);}
.biz-process .item {display:flex; align-items:center; gap:var(--space-50); padding:var(--space-50); border-radius:var(--radius-8); border:1px solid #ddd;}
.biz-process .item .num {width:64px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:var(--font-size-22); font-weight:600; line-height:1.3em; color:#fff; background:#222; border-radius:50%;}
.biz-process .item .text {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; gap:var(--space-10);}
.biz-process .item .text h4 {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; color:#222;}
.biz-process .item .text p {font-size:var(--font-size-18); line-height:1.6em; color:#454545;}

.level-info {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-16); margin-bottom:var(--space-24);}
.level-info .item {display:flex; flex-direction:column; gap:var(--space-16); text-align:center;}
.level-info .item img {display:block;width:100%;}
.level-info .item span {font-size:var(--font-size-18); font-weight:600; line-height:1.3em; color:#222;}

.biz-features {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-30); text-align:center;}
.biz-features .item {display:flex; flex-direction:column; gap:var(--space-24); text-align:center;}
.biz-features .item .image {width:100%; aspect-ratio:380/240; overflow:hidden; border-radius:var(--radius-16);}
.biz-features .item .image img {display:block; width:100%; height:100%; object-fit:cover;}
.biz-features .item .text {display:flex; flex-direction:column; gap:4px;}
.biz-features .item .text h4 {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; color:#222;}
.biz-features .item .text p {font-size:var(--font-size-18); line-height:1.44em; color:#454545;}

.gift-items {display:flex; flex-direction:column; gap:var(--space-40); padding:var(--space-50); margin-bottom:var(--space-50); background:#FAFAFA;}
.gift-items .item {display:flex; align-items:center; gap:var(--space-30);}
.gift-items .item .cnt {flex:1 1 auto; min-width:0; width:1%; display:flex;}
.gift-items .item .num {width:64px; font-size:var(--font-size-26); font-weight:600; line-height:1.3em; color:#222;}
.gift-items .item .text {flex:1 1 auto; min-width:0; width:1%; display:flex; flex-direction:column; gap:var(--space-10);}
.gift-items .item .text h4 {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; color:#222;}
.gift-items .item .text p {font-size:var(--font-size-18); line-height:1.6em; color:#454545;}
.gift-items .item .img {width:205px;}
.gift-items .item .img img {border:1px solid #ddd; border-radius:8px;}
.gift-items .divider {width:100%; height:1px; background:#ddd;}

.before-after {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-80) var(--space-50);}
.before-after .item .box {display:flex; flex-direction:column; height:100%;}
.before-after .item .imgs {display:flex; border-radius:var(--radius-8) var(--radius-8) 0 0; overflow:hidden;}
.before-after .item .img {flex:1; position:relative; overflow:hidden; aspect-ratio:1/1;}
.before-after .item .img img {display:block; width:100%; height:100%; object-fit:cover;}
.before-after .item .img .label {position:absolute; top:var(--space-20); left:var(--space-20); padding:5px 10px; border-radius:30px; background:#eee; color:#454545; font-size:var(--font-size-14); font-weight:600; line-height:1.5em; box-shadow: 4px 4px 16px 0 rgba(0, 0, 0, 0.25);}
.before-after .item .img:nth-child(2) .label {background:#222; color:#fff;}
.before-after .item .content {flex:1 1 auto; min-height:0; height:1%; padding:var(--space-45) var(--space-30); border:1px solid rgba(221, 221, 221, 0.87); border-top:0; border-radius:0 0 var(--radius-8) var(--radius-8);}
.before-after .item .title {display:flex; flex-direction:column; gap:var(--space-10); margin-bottom:var(--space-20);}
.before-after .item .title .num {font-size:var(--font-size-16); font-weight:500; line-height:1.3em; color:#888;}
.before-after .item .title .tit {font-size:var(--font-size-24); font-weight:600; line-height:1.3em; color:#222;}
.before-after .item .desc {font-size:var(--font-size-18); line-height:1.44em; color:#454545;}