@charset "utf-8";

.gray-bg {background:#FBFBFB;}

.doc-cnt {padding:var(--space-80) 0;}
.doc-cnt:first-child {padding-top:0;}
.doc-cnt:last-child {padding-bottom:0;}

.s-heading {margin-bottom:var(--space-60); text-align:center;}

.s-tit {font-size:var(--font-size-32); font-weight:700; color:#222;}
.s-tit span {color:var(--color-primary);}

.bell-text {margin:0 auto var(--space-80); width:fit-content; border-radius:48px; font-size:var(--font-size-22); font-weight:600; letter-spacing:-.03em; line-height:1.33em; text-align:center; padding:var(--space-20) var(--space-30); background:var(--color-primary); color:#fff;}
.bell-text img {vertical-align:middle; margin-right:var(--space-15);}

.contract-label {margin-top:var(--space-40); display:inline-block; border:1px solid var(--color-primary); border-radius:40px; font-size:var(--font-size-18); font-weight:600; color:var(--color-primary); line-height:45px; padding:0 var(--space-20);}

.soho-price {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
.soho-price .item {border:1px solid #ddd; border-radius:24px; background:#fff; padding:var(--space-60) var(--space-45); display:flex; flex-direction:column; gap:var(--space-30);}
.soho-price .item h3 {font-size:var(--font-size-32); font-weight:700; color:#3d3b40; line-height:1.2em;}
.soho-price .item .text {position:relative; font-size:var(--font-size-18); font-weight:500; color:#282828; line-height:1.5em;}
.soho-price .item .text span {font-size:var(--font-size-16); color:#686868;}
.soho-price .item .desc ul li {padding-left:15px; position:relative; margin-bottom:var(--space-5); font-size:var(--font-size-18); font-weight:500; color:#282828; line-height:1.5em;}
.soho-price .item .desc ul li:before {position:absolute; left:0; top:.7em; content:""; width:4px; height:4px; background:var(--color-primary); border-radius:100%;}
.soho-price .item .desc ul li:last-child {margin-bottom:0;}
.soho-price .item .info {min-height:196px; background:#f5fafd; border-radius:16px; padding:var(--space-20);}
.soho-price .item .info .row {display:flex; align-items:center; font-weight:500; color:#282828;}
.soho-price .item .price {display:flex; flex-direction:column; gap:var(--space-20);}
.soho-price .item .price .row {display:flex; align-items:baseline; justify-content:space-between;}
.soho-price .item .price .note {font-weight:500; color:#686868;}
.soho-price .item .price .amount {display:flex; align-items:center; font-size:var(--font-size-20); font-weight:500;}
.soho-price .item .price .amount span {margin:0 var(--space-8); font-size:var(--font-size-32); font-weight:700; color:var(--color-primary);}

/* 혜택 섹션 */
.erysipelas {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
.erysipelas .item {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-60); text-align:center;}
.erysipelas .item .img img {height:clamp(50px, calc(100 / var(--inner) * 100vw), 100px);}
.erysipelas .item p {text-align:center; margin-top:var(--space-40); font-size:var(--font-size-18); font-weight:500; line-height:1.78em;}

.service-group {padding-bottom:var(--space-80); margin-bottom:var(--space-80); border-bottom:1px dashed #ddd;}
.service-group:last-child {padding-bottom:0; margin-bottom:0; border-bottom:none;}
.service-group h3 {display:inline-block; border-radius:8px; background:var(--color-primary); color:#fff; font-size:var(--font-size-18); font-weight:600; text-align:center; margin-bottom:var(--space-40); padding:var(--space-10) var(--space-30);}

.logo-items {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
.logo-items .item {padding:var(--space-45); background:#fff; border:1px solid #ddd; border-radius:24px; text-align:center;}
.logo-items .item p {margin-top:var(--space-40); font-size:var(--font-size-20); font-weight:600; line-height:1.7em;}

.step-items {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-24);}
.step-items .item {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-45) var(--space-20); display:flex; flex-direction:column; gap:var(--space-40); align-items:center; text-align:center;}
.step-items .item .step {background:#f5fafd; border-radius:24px; padding:0 var(--space-15); font-weight:600; color:var(--color-primary); line-height:39px;}
.step-items .item .ico img {height:clamp(40px, calc(80 / var(--inner) * 100vw), 80px);}
.step-items .item p {font-weight:400; color:#282828; line-height:1.88em;}

.office-info {display:flex; align-items:center; gap:0 var(--space-40);}
.office-info .image {flex:1;}
.office-info .list {width:41.66%; display:flex; flex-direction:column; gap:var(--space-15) 0;}
.office-info .list .item {border-radius:16px; padding:var(--space-30) var(--space-40); border:1px solid #ddd;}
.office-info .list .item p {padding-left:40px; position:relative; font-size:var(--font-size-20); font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.office-info .list .item p:before {position:absolute; left:0; top:.1em; content:''; width:24px; height:24px; background:url('/images/sub/check.png') no-repeat center center / contain;}

.price-wrap {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-55) var(--space-120);}
.price-table .vat {font-weight:600; color:var(--color-primary); text-align:right;}
.price-table table {width:100%; border-collapse:collapse; border-spacing:0; border-top:2px solid #686868;}
.price-table thead th {background:#f5fafd; padding:var(--space-15) var(--space-10);; font-weight:600; color:var(--color-primary); text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;;}
.price-table tbody td {padding:var(--space-15) var(--space-10); font-weight:400; color:#282828; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.price-table tbody td.highlight {font-weight:600; color:var(--color-primary);}
.price-table thead th:last-child,
.price-table tbody td:last-child {border-right:none;}

.ai-call {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
.ai-call .item {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-60) var(--space-20); display:flex; flex-direction:column; align-items:center;}
.ai-call .item .label {display:inline-block; margin:var(--space-40) 0 var(--space-30); background:#f5fafd; border-radius:8px; padding:var(--space-10) var(--space-15); font-size:var(--font-size-20); font-weight:600; color:var(--color-primary); line-height:1.33em; text-align:center;}
.ai-call .item .img img {width:clamp(80px, calc(212 / var(--inner) * 100vw), 212px);}
.ai-call .item .txt {font-weight:400; color:#282828; text-align:center;}
.ai-call .item .desc ul li {margin-bottom:var(--space-5); text-align:left; padding-left:15px; position:relative; font-weight:400; color:#282828; line-height:1.5em;}
.ai-call .item .desc ul li:last-child {margin-bottom:0;}
.ai-call .item .desc ul li:before {content:''; width:4px; height:4px; background:var(--color-primary); border-radius:100%; display:inline-block; position:absolute; left:0; top:.7em;}

.qna {display:flex; flex-direction:column; gap:var(--space-24);}
.qna .item {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-45) var(--space-65);}
.qna .item .badge {font-size:var(--font-size-16); min-width:32px; height:32px; background:var(--color-primary); border-radius:100%; display:flex; align-items:center; justify-content:center; gap:var(--space-20); font-weight:600; color:#fff;}
.qna .item .title {padding-bottom:var(--space-30); margin-bottom:var(--space-30); border-bottom:1px dashed #ddd; display:flex; align-items:center; gap:var(--space-20); font-size:var(--font-size-18); font-weight:600;}
.qna .item .content {display:flex; gap:var(--space-20);}
.qna .item .content .badge {background:#F5FAFD; color:var(--color-primary);}
.qna .item .content .text {font-size:var(--font-size-16); font-weight:400; color:#282828; line-height:30px;}

.iptv-feature {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-24);}
.iptv-feature .item {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-60) var(--space-45); display:flex; align-items:center; gap:var(--space-45);}
.iptv-feature .item .content {flex:1;}
.iptv-feature .item .content .label {margin-bottom:var(--space-20); background:#f5fafd; border-radius:32px; padding:var(--space-10) var(--space-15); font-size:var(--font-size-16); font-weight:600; color:var(--color-primary); line-height:1.33em; text-align:center; width:fit-content;}
.iptv-feature .item .content .text h3 {font-size:var(--font-size-20); font-weight:600; line-height:1.4em;}
.iptv-feature .item .content .text p {font-size:var(--font-size-16); font-weight:400; color:#282828; line-height:1.88em;}
.iptv-feature .item .icon img {width:clamp(70px, calc(100 / var(--inner) * 100vw), 100px);}
.iptv-feature .item .list ul li {margin-bottom:var(--space-5); padding-left:15px; position:relative; font-size:var(--font-size-16); font-weight:400; color:#282828; line-height:1.56em;}
.iptv-feature .item .list ul li:last-child {margin-bottom:0;}
.iptv-feature .item .list ul li:before {content:''; position:absolute; left:0; top:.6em; width:4px; height:4px; border-radius:100%; background:var(--color-primary);}

.construction-list {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
.construction-list .item .img {margin-bottom:var(--space-15);}
.construction-list .item .text {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-30);}
.construction-list .item .text .tit {margin-bottom:var(--space-15); font-size:var(--font-size-24); font-weight:600; color:var(--color-primary); line-height:1.5em;}
.construction-list .item .text .txt {font-weight:400; color:#282828; line-height:30px;}

.construction-slider .items {margin:0 calc(var(--space-12) * -1);}
.construction-slider .items .item {padding:0 var(--space-12);}
.construction-slider .items .box {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-40);}
.construction-slider .items .box .label {margin-bottom:var(--space-25); background:#f5fafd; border-radius:8px; padding:var(--space-10) var(--space-15); font-size:var(--font-size-16); font-weight:600; color:var(--color-primary); line-height:1.33em; text-align:center; width:fit-content;}
.construction-slider .items .box .tit {padding-left:15px; margin-bottom:var(--space-10); font-size:var(--font-size-24); font-weight:600; color:var(--color-primary); line-height:1.5em;}
.construction-slider .items .box .desc {padding-left:15px; margin-bottom:var(--space-40); font-weight:400; color:#282828; line-height:1.5em;}
.construction-slider .items .box .img {overflow:hidden; border-radius:16px;}
.construction-slider .slick-arrow {z-index:10; position:absolute; top:50%; transform:translateY(-50%); box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.08); border-radius:100%; width:clamp(34px, calc(64 / var(--inner) * 100vw), 64px); height:clamp(34px, calc(64 / var(--inner) * 100vw), 64px); background-repeat:no-repeat; background-position:50% 50%; background-size:contain; border:0; font-size:0; background-color:transparent;}
.construction-slider .slick-prev {left:-100px;  background-image:url('/images/sub/construction-prev.png');}
.construction-slider .slick-next {right:-100px; background-image:url('/images/sub/construction-next.png');}

.price-info {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-40); display:flex; align-items:center; gap:var(--space-80);}
.price-info .label-box {background:#f5fafd; border-radius:16px; padding:var(--space-20) var(--space-24); flex-shrink:0;}
.price-info .label-box p {font-size:var(--font-size-18); font-weight:600; color:var(--color-primary); line-height:28px; text-align:center;}
.price-info .list {flex:1;}
.price-info .list ul {display:flex; flex-wrap:wrap; gap:var(--space-5) 0;}
.price-info .list ul li {padding-left:15px; position:relative; width:33.333%; font-size:var(--font-size-16); font-weight:400; color:#282828; line-height:1.56em;}
.price-info .list ul li:before {content:''; position:absolute; left:0; top:.6em; width:4px; height:4px; border-radius:100%; background:var(--color-primary);}

.process {display:flex; align-items:center; justify-content:center; gap:var(--space-36);}
.process .item {flex:1; position:relative;}
.process .item .badge {width:46px; text-align:center; font-size:var(--font-size-20); font-weight:700; position:relative; margin:0 auto -23px; line-height:46px; border-radius:100%; background:var(--color-primary); text-align:center; color:#fff; box-shadow:2px 2px 10px 0 rgba(255, 255, 255, 0.56) inset, -4px -4px 8px 0 rgba(30, 95, 132, 0.24) inset;}
.process .item .box {height:clamp(150px, calc(270 / var(--inner) * 100vw), 270px); background:#fff; border-radius:24px; box-shadow:0 0 16px 0 rgba(170, 170, 170, 0.2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-25); display:flex; flex-direction:column; justify-content:center; align-items:center;}
.process .item .box .icon img {height:clamp(50px, calc(96 / var(--inner) * 100vw), 96px);}
.process .item .box p {font-size:var(--font-size-20); font-weight:600; color:#282828; text-align:center; line-height:34px;}

.as-table table {width:100%; border-collapse:collapse; border-spacing:0; border-top:2px solid #686868;}
.as-table tbody th {background:#f5fafd; line-height:1.4em; padding:var(--space-18) var(--space-10); font-weight:600; color:var(--color-primary); text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.as-table tbody td {background:#fff; padding:var(--space-18) var(--space-25); font-weight:400; color:#282828; text-align:center; border-right:1px solid #ddd; border-bottom:1px solid #ddd; line-height:1.4em;}
.as-table .list ul li {margin-bottom:var(--space-5); text-align:left; padding-left:15px; position:relative; font-size:var(--font-size-16); font-weight:400; color:#282828; line-height:1.56em;}
.as-table .list ul li:last-child {margin-bottom:0;}
.as-table .list ul li:before {content:''; position:absolute; left:0; top:.6em; width:4px; height:4px; border-radius:100%; background:var(--color-primary);}
.as-table .list strong {font-weight:600; color:var(--color-primary);}
.as-table tbody th:last-child,
.as-table tbody td:last-child {border-right:none;}

.sub-cases {position:relative;}
.sub-cases .more-btn {position:absolute; right:0; top:calc(var(--space-10) * -1);}

.agency-process {display:flex; align-items:center; gap:var(--space-24);}
.agency-process .item {flex:1; text-align:center; position:relative; aspect-ratio:1/1; background:#fff; border-radius:100%; box-shadow:0 0 16px 0 rgba(170, 170, 170, 0.08); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-24); box-shadow:4px 4px 16px 0 rgba(153, 153, 153, 0.08);}
.agency-process .item .icon img {height:clamp(50px, calc(96 / var(--inner) * 100vw), 96px);}
.agency-process .item .txt .step {font-weight:600; color:var(--color-primary); line-height:1.5em;}
.agency-process .item .txt .tit {font-size:var(--font-size-20); font-weight:600; color:#282828; line-height:1.5em;}

.agency-benefit {display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-24);}
.agency-benefit .item {background:#fff; border:1px solid #ddd; border-radius:24px; padding:var(--space-48);}
.agency-benefit .item .num {margin-bottom:var(--space-30); background:var(--color-primary); border-radius:8px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:var(--font-size-16); font-weight:600; color:#fff; line-height:1.3em;}
.agency-benefit .item .txt {font-size:var(--font-size-20); font-weight:600; color:#3d3b40; line-height:1.7em;}

.recommend {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-24);}
.recommend .item {display:flex; align-items:flex-end; height:clamp(170px, calc(320 / var(--inner) * 100vw), 320px); border-radius:24px; color:#fff; background-size:cover; background-repeat:no-repeat; background-position:50% 50%;}
.recommend .item p {font-size:var(--font-size-24); font-weight:600; color:#fff; line-height:1.5em; padding:var(--space-30);}

.personnel-board .wrap {display: flex; flex-wrap:wrap; margin:calc(var(--space-20) * -1);} 
.personnel-board .wrap .col {width: 50%; padding:var(--space-20);}
.personnel-board .image {width: 100%; height: 100%; border-radius:24px; overflow:hidden;}
.personnel-board .image img {width:100%; height:100%; object-fit:cover;}
.personnel-board .item {border-radius:24px; border:1px solid #ddd; padding:var(--space-55);}
.personnel-board .item h2 {position: relative; padding-left:var(--space-18); font-size:var(--font-size-28); font-weight:600; color:#222; line-height:1.5em; margin-bottom:var(--space-30);}
.personnel-board .item h2:before {content:''; position: absolute; left:0; top:.6em; width: clamp(6px, calc(8 / var(--inner) * 100vw), 8px); height: clamp(6px, calc(8 / var(--inner) * 100vw), 8px); border-radius:100%; background:var(--color-primary);}
.personnel-board .item .list ul {border-top:2px solid #686868;}
.personnel-board .item .list ul li {display:flex; align-items:center; position:relative; overflow:hidden; border-bottom:1px solid #ddd; padding:var(--space-30) 90px var(--space-30) 0; }
.personnel-board .item .list ul li:last-child {padding-bottom: 0; border-bottom: none;}
.personnel-board .item .list ul li a {flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--font-size-20); font-weight:600; color:#222; line-height:1.5em; word-break:break-all;}
.personnel-board .item .list ul li span {margin-left:var(--space-20); color:#999; font-size:var(--font-size-16); font-weight:400; white-space:nowrap; position: absolute; right:0;}


