@charset "utf-8";

/* 공통 */
.sub-sec {margin-bottom:var(--space-150);}

/* WXP 주요기능 */
.feature-list {padding:var(--space-100) 0; background:#EBF1FC;}
.feature-list .items {display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--space-20);}
.feature-list .items .item {width:100%; height:100%; padding:var(--space-40); border:1px solid transparent; border-radius:var(--radius-24); background:#fff; display:flex; flex-direction:column; align-items:center; text-align:center;}
.feature-list .items .item .icon {width:clamp(48px, calc(64 / var(--inner) * 100vw), 64px); aspect-ratio:1/1; margin-bottom:var(--space-24);}
.feature-list .items .item .icon img {max-width:100%; max-height:100%; object-fit:contain;}
.feature-list .items .item .tit {margin-bottom:var(--space-12); font-size:var(--font-size-24); font-weight:600; line-height:1.3em; letter-spacing:-0.03em; color:#121212;}
.feature-list .items .item .txt {font-size:var(--font-size-16); line-height:1.5em; letter-spacing:-0.03em; color:#505050;}
.feature-list .items .item:hover {border:1px solid var(--color-primary);}
.feature-list .items .item:hover .tit {color:var(--color-primary);}

.feature-content {display:flex; justify-content:space-between; gap:var(--space-80);}
.feature-content .image {position:relative; flex-shrink:0; width:clamp(280px, calc(602 / var(--inner) * 100vw), 602px); padding-bottom:var(--space-20);}
.feature-content .image img {display:block; width:100%; height:auto; aspect-ratio:602/500; border-radius:16px; box-shadow:var(--space-20) var(--space-20) 0 rgba(0,0,0,0.05);}
.feature-content .content {flex:1; min-width:0; max-width:733px; display:flex; flex-direction:column; justify-content:center; gap:var(--space-50);}
.feature-content .content .list {display:flex; flex-direction:column; gap:var(--space-16);}
.feature-content .content .list li {display:flex; align-items:flex-start; gap:var(--space-8); font-size:var(--font-size-20); font-weight:500; line-height:1.5em; letter-spacing:-0.03em; color:#121212; word-break:keep-all;}
.feature-content .content .list li::before {content:''; flex-shrink:0; width:clamp(20px, calc(24 / var(--inner) * 100vw), 24px); height:clamp(20px, calc(24 / var(--inner) * 100vw), 24px); margin-top:0.05em; background:url("/images/sub/check.svg") 50% 50% / contain no-repeat;}
.feature-content .content .desc {font-size:var(--font-size-14); font-weight:400; line-height:1.857em; letter-spacing:-0.03em; color:#878787; word-break:keep-all;}
.feature-system {display:flex; flex-direction:column; gap:var(--space-20);}
.feature-system-tit {font-size:var(--font-size-16); font-weight:600; line-height:1.2em; letter-spacing:-0.03em; color:#121212;}
.feature-system-tags {display:flex; flex-wrap:wrap; gap:10px;}
.feature-system-tags li {padding:8px 10px; border-radius:8px; background:rgba(2,74,216,0.05); font-size:var(--font-size-14); font-weight:600; line-height:1.2em; letter-spacing:-0.03em; color:var(--color-primary); white-space:nowrap;}

.operation-flow {display:flex; align-items:center; text-align:center; gap:var(--space-40);}
.operation-flow .item {display:flex; flex-direction:column; align-items:center; flex:1;}
.operation-flow .item .num {color:var(--color-primary); font-size:var(--font-size-16); font-weight:700; line-height:1em; letter-spacing:0;}
.operation-flow .item .icon {display:flex; align-items:center; justify-content:center; width:clamp(120px, calc(180 / var(--inner) * 100vw), 180px); margin:var(--space-20) auto; aspect-ratio:1/1; border-radius:50%; background:#EBF1FC;}
.operation-flow .item .icon img {width:clamp(64px, calc(80 / var(--inner) * 100vw), 80px);}
.operation-flow .item .tit {margin-bottom:var(--space-10); font-size:var(--font-size-18); font-weight:600; line-height:1.2em; letter-spacing:-0.03em; color:#121212;}
.operation-flow .item .txt { font-size:var(--font-size-16); font-weight:400; line-height:1.6em; letter-spacing:-0.03em; color:#878787;}
.operation-flow .arrow {flex-shrink:0; width:clamp(20px, calc(24 / var(--inner) * 100vw), 24px); padding-bottom:2em;}

.plan-guide {max-width:1200px; margin:0 auto;}
.plan-guide-inner {position:relative; padding:var(--space-40) var(--space-60) var(--space-60); border:1px solid #ddd; border-radius:var(--radius-24); background:#fff; overflow-x:auto;}
.plan-guide-table {position:relative; z-index:1; width:100%; border-collapse:collapse;}
.plan-guide-table thead th {padding:var(--space-16) 5px clamp(20px, calc(40 / var(--inner) * 100vw), 40px); vertical-align:top; text-align:center;}
.plan-guide-table thead th:nth-child(3) {border-radius:16px 16px 0 0; background:rgba(2,74,216,0.06);}
.plan-guide-table .plan-head .plan-name {display:block; margin-bottom:var(--space-20); font-size:var(--font-size-20); font-weight:600; line-height:1.2em; letter-spacing:-0.03em; color:#121212;}
.plan-guide-table .plan-head.is-pro .plan-name {font-weight:700; color:var(--color-primary);}
.plan-guide-table .plan-head .plan-desc {display:block; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-0.03em; color:#505050;}
.plan-guide-table .col-td-width {width:clamp(100px, calc(190 / var(--inner) * 100vw), 190px);}
.plan-guide-table tbody tr {border-top:1px dashed #ddd;}
.plan-guide-table tbody th, 
.plan-guide-table tbody td {padding:var(--space-24) 5px; vertical-align:middle;}
.plan-guide-table tbody th {padding-left:0; font-size:var(--font-size-18); font-weight:400; line-height:1.3em; letter-spacing:-0.03em; color:#121212; text-align:left;}
.plan-guide-table tbody td {text-align:center;}

.plan-guide-table thead th:nth-child(3), 
.plan-guide-table tbody td:nth-child(3) {background:rgba(2,74,216,0.06);}

.plan-guide-table tbody tr:last-child td:nth-child(3) {border-radius:0 0 16px 16px;}
.plan-check {display:inline-block; width:24px; height:24px; vertical-align:middle; background:url("/images/sub/check-o-gray.svg") 50% 50% / contain no-repeat;}
.plan-check.is-pro {background-image:url("/images/sub/check-o-primary.svg");}
.plan-limited {display:inline-flex; align-items:center; justify-content:center; min-width:64px; height:24px; padding:0 10px; border-radius:100px; background:#EBF1FC; font-size:var(--font-size-16); font-weight:500; line-height:1em; letter-spacing:-0.03em; color:var(--color-primary); white-space:nowrap;}
.plan-val {font-size:var(--font-size-16); font-weight:500; line-height:1.5em; letter-spacing:-0.03em; color:#505050;}
.plan-none {font-size:var(--font-size-16); font-weight:700; line-height:1.5em; letter-spacing:-0.03em; color:#505050;}
.plan-ai-dot {display:inline-block; width:4px; height:4px; margin-left:2px; border-radius:50%; background:var(--color-primary); vertical-align:super;}
.plan-guide-note {display:flex; flex-wrap:wrap; gap:var(--space-20); margin-top:var(--space-24); font-size:var(--font-size-16); font-weight:400; line-height:1em; letter-spacing:-0.03em; color:#878787;}
.plan-guide-note p {display:flex; align-items:center; gap:6px;}

/* 기술 인사이트 */
.insight-tabs {margin-bottom:var(--space-80);}
.insight-tabs li {flex:1; width:auto; padding: 0 10px;}
.insight-tabs li a {width:100%; height:62px; display:flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:#f4f4f4; color:#888; font-size:var(--font-size-18); font-weight:600; line-height:1em; letter-spacing:-0.03em; cursor:pointer; white-space:nowrap;}
.insight-tabs li.active a {background:var(--color-primary); color:#fff; font-weight:700;}
.insight-board-head {display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:30px;}
.insight-total {font-size:var(--font-size-16); font-weight:600; line-height:1.75em; color:#121212;}
.insight-total em {font-style:normal; color:var(--color-primary);}

/* 도입문의 */
.inquiry-process {padding:var(--space-80) 0; background:#EBF1FC;}
.inquiry-process .operation-flow .item .icon {background:#fff;}

.inquiry-form-wrap {padding:var(--space-80) 0 var(--space-150);}

.inquiry-form {border-top:1px solid #ddd;}
.inquiry-form .required {color:var(--color-primary); }
.inquiry-form .form-group {display:flex; align-items:flex-start; gap:var(--space-60); padding:var(--space-40) var(--space-60); border-bottom:1px solid #ddd;}
.inquiry-form .left {width:clamp(180px, calc(240 / var(--inner) * 100vw), 240px); flex-shrink:0; padding:var(--space-15) 0;}
.inquiry-form .left h3 {font-size:var(--font-size-28); font-weight:700; line-height:1.2em; letter-spacing:-0.03em; color:#121212;}
.inquiry-form .right {flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-20);}
.inquiry-form .form-row {display:flex; align-items:flex-start; gap:var(--space-10);}
.inquiry-form .th-cell {width:clamp(110px, calc(130 / var(--inner) * 100vw), 130px); flex-shrink:0; padding:var(--space-18) 0; font-size:var(--font-size-18); font-weight:600; line-height:1.3em; letter-spacing:-0.03em; color:#121212;}
.inquiry-form .td-cell {flex:1; min-width:0; color:#505050; line-height:1.5em;}
.inquiry-form .check-group {display:flex; flex-wrap:wrap; gap:var(--space-20) var(--space-40); padding:var(--space-20) 0;}
.inquiry-form .input {display:block; width:100%; height:clamp(48px, calc(60 / var(--inner) * 100vw), 60px); padding:var(--space-10) var(--space-18); border:1px solid #ddd; border-radius:8px; font-size:var(--font-size-16); font-weight:400; line-height:1.5em; letter-spacing:-0.03em; color:#505050; transition:.4s;}
.inquiry-form .input:focus {outline:none; border-color:var(--color-primary); color:#121212;}
.inquiry-form textarea.input {height:clamp(180px, calc(260 / var(--inner) * 100vw), 260px);}

.fancybox-skin:has(.pop-complete) {border-radius: 24px;}
.pop-complete {width:clamp(300px, calc(480 / var(--inner) * 100vw), 480px); padding:var(--space-60); text-align:center;}
.pop-complete .icon { margin-bottom:var(--space-40);}
.pop-complete .icon img {display:block; width:100px; margin:0 auto;}
.pop-complete .title {margin-bottom:var(--space-20); font-size:var(--font-size-32); font-weight:700; line-height:1.2em; letter-spacing:-0.03em; color:#121212;}
.pop-complete .desc {font-size:var(--font-size-20); font-weight:400; line-height:1.5em; letter-spacing:-0.03em; color:#505050;}
.pop-complete .btn-primary {width:100%; display:block; margin-top:var(--space-60); font-size:var(--font-size-18);}