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

/* 공통 */
.doc-pg .content{margin-bottom:120px;}
.doc-pg .content:last-child{margin-bottom:0;}
.doc-pg .content.bg {padding:100px 0; background:#f3f7fb;}

.doc-tit{position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:.1em .6em; margin-bottom:50px; padding-left:17px; font-size:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); color:#242424; line-height:1.3em; font-weight:700; letter-spacing:-.03em;}
.doc-tit:before{content:''; position: absolute;left:0; top:.1em; width:5px; height:1em; background-color:var(--pri);}
.doc-tit small{display:inline-block; margin-top:.3em; color:#878787; font-weight:700; font-size:clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); line-height:1.3em;}

.circle-tit {display:flex; align-items:flex-start; gap:10px; margin-bottom:30px; font-size:var(--fz20); font-weight:700; color:var(--pri); line-height:1.3em;}
.circle-tit:before {content:''; margin-top:.45em; min-width:7px; min-height:7px; background:var(--pri); border-radius:100%;}

.s-tit {margin-bottom:1em; font-size:var(--fz20); line-height:1.5em;}

.lg-txt {font-size:var(--fz18); line-height:1.67em;}

.dot-list > li {position:relative; padding-left:1rem;}
.dot-list > li:before {content:''; position:absolute; top:.75em; left:0; width:5px; height:5px; background:#878787; border-radius:100%;}

.square-list > li {position:relative; padding-left:1rem;}
.square-list > li:before {content:''; position:absolute; top:.65em; left:0; width:7px; height:7px; background:#c6c6c6;}
.square-list.gap-4 {display:grid; gap:4px;}
.square-list.gap-10 {display:grid; gap:10px;}

.hypen-list > li {padding-left:.6em; text-indent:-.6em;}

.img-center-box {padding:50px; border:1px solid #ddd; border-radius:var(--radius-20); text-align:center;}

.table table {width:100%; border-collapse:collapse; border-spacing:0px; font-size:16px; line-height:1.75em; letter-spacing:-.03em;}
.table table thead th {padding:20px 20px; background:#437eeb; border:1px solid #ddd; border-top:0; border-bottom:0; color:#fff; font-size:18px; font-weight:500;}
.table table tbody th {padding:18px 20px; border:1px solid #ddd; font-weight:500;}
.table table tbody td {padding:18px 30px; border:1px solid #ddd;}
.table table tbody td.center {text-align:center;}
.table tr th:first-child,
.table tr td:first-child {border-left:0 !important;}
.table tr th:last-child,
.table tr td:last-child {border-right:0 !important;}
.table.st2 table tbody th,
.table.st2 table tbody td {padding-top:10px; padding-bottom:10px;}
.table.st3 table thead th {border-left:20px solid #fff; border-right:20px solid #fff; border-bottom:0; background:#f4f4f4; color:#242424;}
.table.st3 table tbody th,
.table.st3 table tbody td {border-left:20px solid #fff; border-right:20px solid #fff; border-top:0;}
.table.st3.h50 tbody th,
.table.st3.h50 tbody td {padding-top:10px; padding-bottom:10px; border-left:0; border-right:0;}


/* Service */
.svc-process {margin-bottom:40px;}

.svc-methodology {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
.svc-methodology .box {padding:37px 40px; background:#f8f8f8; border-radius:5px;}
.svc-methodology .box dl {position:relative; padding-left:16px;}
.svc-methodology .box dt {margin-bottom:10px; font-size:var(--fz20); font-weight:700; color:var(--pri); line-height:1.3em;}
.svc-methodology .box dt:before {content:''; position:absolute; top:.45em; left:0; width:7px; height:7px; background:var(--pri); border-radius:100%;}
.svc-methodology .box dd {max-width:520px;}

.svc-need .tit {padding:20px 30px; margin-bottom:27px; background:#f3f7fb; border-radius:10px; color:#242424; font-size:var(--fz24); line-height:1.3em; letter-spacing:-.03em;}
.svc-need .cnt {padding:0 30px;}
.svc-need .cnt ul {display:grid; gap:4px;}
.svc-need .cnt ul.col-2 {grid-template-columns:repeat(2, 300px);}
.svc-need .cnt p:not(:last-child) {margin-bottom:1rem;}
.svc-need.mgt {margin-top:55px;}

.timegate {display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; text-align:center;}
.timegate .item {padding:39px 29px; border:1px solid #ddd; border-radius:10px;}
.timegate .item .ico {display:flex; justify-content:center; align-items:center; width:120px; height:120px; margin:0 auto 25px; border-radius:100%; background-color:#f3f7fb;}
.timegate .item .line {margin:25px 0; border-bottom:1px solid #ddd;}
.timegate .item h3 {color:#242424; font-size:var(--fz20); line-height:1.3em; letter-spacing:-.03em;}
.timegate .item p {font-weight:500;}
.timegate .item .list {display:grid; gap:6px; text-align:left;}
.timegate .item .list > li {position:relative; padding-left:1em;}
.timegate .item .list > li:before {content:''; position:absolute; top:.55em; left:0; width:9px; height:9px; background:url('../images/sub/li-bullet.png') 0 50%/contain no-repeat;}
.timegate.col-3 {grid-template-columns:repeat(3, 1fr); gap:42px;}
.timegate.short .item {padding:44px 29px;}

.svc-dl {display:grid; gap:30px;}
.svc-dl dl {display:grid; gap:15px 0;}
.svc-dl dt {display:flex; align-items:flex-start; gap:10px; padding:17px 25px; background:#f3f7fb; border-radius:10px; font-size:var(--fz20); font-weight:700; color:var(--pri); line-height:1.3em;}
.svc-dl dt:before {content:''; margin-top:.45em; min-width:7px; min-height:7px; background:var(--pri); border-radius:100%;}
.svc-dl dd {padding:0 25px;} 

.svc-between-img {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; text-align:center;}
.svc-between-img .box {padding:50px; background:#2f3744; border-radius:10px;}

.round-cnt-box {padding:34px 38px; border:2px solid #ddd; border-radius:10px;}
.round-cnt-box ul {display:grid; gap:7px;}

.svc-scope {display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; text-align:center;}
.svc-scope .tit-area {display:flex; justify-content:center; align-items:center; height:120px; margin-bottom:25px; padding:10px 20px; background:#f3f7fb; border-radius:120px; font-size:var(--fz18); line-height:1.67em; color:#242424;}
.svc-scope .cnt-area {padding:0 30px; text-align:left;}
.svc-scope .cnt-area ul li {padding-left:1.6em; text-indent:-.6em;}

.svc-track {display:flex; justify-content:space-between; margin:0 -30px; text-align:center;}
.svc-track .item {width:30%;}
.svc-track .tit-area {position:relative; width:80%; max-width:300px; margin:0 auto; border-radius:100%; margin-bottom:60px;}
.svc-track .tit-area:before {content:''; display:block; padding-bottom:100%;}
.svc-track .tit-area.st1 {background:#fff; border:2px solid #ddd;}
.svc-track .tit-area.st1:after {content:''; position:absolute; top:calc(100% - 3px); left:50%; width:48px; height:48px; margin-left:-24px; background:url('../images/sub/circle-arrow-1.png') 50% 0/contain no-repeat;}
.svc-track .tit-area.st2 {background:#fff; border:2px solid #a1bef5;}
.svc-track .tit-area.st2:after {content:''; position:absolute; top:calc(100% - 3px); left:50%; width:48px; height:48px; margin-left:-24px; background:url('../images/sub/circle-arrow-2.png') 50% 0/contain no-repeat;}
.svc-track .tit-area.st3 {background:#d9e5fb;}
.svc-track .tit-area .inner { display:flex; flex-direction: column; justify-content:center; align-items:center; position:absolute; top:0; left:0; width:100%; height:100%;}
.svc-track .tit-area .num {margin-bottom:18px; font-size:var(--fz18); font-weight:900; color:var(--pri); line-height:1.3em;}
.svc-track .tit-area .tit {font-size:var(--fz22); color:#242424; line-height:1.3em;}
.svc-track .cnt-area ul {display:grid; gap:12px;}

/* Product */
.pro-summary {display:flex; gap:80px;}
.pro-summary .cnt-area {flex:1 1 auto; min-width:0; width:1%;}
.pro-summary .img-area {width:50%; max-width:630px; margin-top:50px;}
.pro-summary .img-area iframe {border:0;}
.pro-summary .img-area img,
.pro-summary .img-area .video-container {border-radius:20px; overflow:hidden;}
.pro-summary .tit {margin-bottom:32px;}
.pro-summary .tit p {margin-bottom:.5em; color:#878787; font-size:var(--fz24); font-weight:700; line-height:1.35em; letter-spacing:-.03em;}
.pro-summary .tit h2 {color:#242424; font-size:var(--fz40); line-height:1.35em; letter-spacing:-.03em;}
.pro-summary .cnt {font-size:var(--fz18); line-height:1.67em;}
.pro-summary .cnt p:not(:last-child) {margin-bottom:1em;}
.pro-summary .cnt dl {margin-bottom:35px;}
.pro-summary .cnt dt {margin-bottom:15px; color:#242424; font-size:var(--fz22); font-weight:800; line-height:1.35em; letter-spacing:-.03em;}
.pro-summary.st2 {justify-content:space-between; align-items:flex-end;}
.pro-summary.st2 .cnt-area {max-width:630px;}
.pro-summary.st2 .img-area {width:auto;}
.pro-summary.st2 .tit {margin-bottom:94px;}

.pro-summary-info {margin-top:38px; padding:38px; background:#f8f8f8; border-radius:10px; text-align:center; color:#242424;}
.pro-summary-info .inner {display:inline-block; text-align:left;}
.pro-summary-info ul {display:grid; gap:10px;}
.pro-summary-info ul > li {position:relative; padding-left:1em;}
.pro-summary-info ul > li:before {content:''; position:absolute; top:.55em; left:0; width:9px; height:9px; background:url('../images/sub/li-bullet.png') 0 50%/contain no-repeat;}{}

.pro-model {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.pro-model .item {display:flex; flex-direction:column; padding:40px 30px 50px; background:#fff; border-radius:10px;}
.pro-model .item h3 {display:flex; align-items:center; justify-content:center; min-height:3em; color:#242424; font-size:var(--fz24); font-weight:800; line-height:1.5em; text-align:center;}
.pro-model .item .line {margin:30px 0 25px; border-bottom:1px solid #ddd;}
.pro-model .item .list.gap-10 {gap:10px;}
.pro-model .item .list {display:grid; gap:1.2em; text-align:left;}
.pro-model .item .list > li {position:relative; padding-left:1em;}
.pro-model .item .list > li:before {content:''; position:absolute; top:.55em; left:0; width:9px; height:9px; background:url('../images/sub/li-bullet.png') 0 50%/contain no-repeat;}
.pro-model .item .list > li > ul {display:grid; gap:.5em; margin-top:1.9em;}
.pro-model .item .list > li > ul > li {position:relative; padding-left:.85em;}
.pro-model .item .list > li > ul > li:before {content:''; position:absolute; top:.75em; left:0; width:5px; height:5px; background:var(--pri);}
.pro-model .item .img {display:flex; align-items:flex-end; justify-content:center; height:100%; margin-top:40px; text-align:center;}
.pro-model .slide-btn {position:absolute; top:50%; z-index:30; margin-top:-25px; width:50px; height:50px; background-color:#437eeb; background-position:50% 50%; background-repeat:no-repeat; background-size:8px auto; border:0; border-radius:100%;}
.pro-model .slide-btn.prev {left:-100px; background-image:url('../images/sub/slide-prev.png');}
.pro-model .slide-btn.next {right:-100px; background-image:url('../images/sub/slide-next.png');}
.pro-model .swiper-slide {height:auto !important;}
.pro-model .swiper-slide .item {height:100%;}
.pro-model.slider {position:relative; display:block;}

.pro-tab {margin-bottom:50px; text-align:center;}
.pro-tab ul {display:flex;background:#f4f4f4; border-radius:10px;}
.pro-tab ul li {flex:1; position:relative;}
.pro-tab ul li:before {content:''; position:absolute; top:50%; left:0; margin-top:-8px; width:1px; height:16px; background:#ddd;}
.pro-tab ul li:first-child::before {display:none;}
.pro-tab ul li a {position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:70px; padding:5px 15px; color:#686868; font-size:var(--fz18); font-weight:700; line-height:1.2em;}
.pro-tab ul li.active a {background:#437eeb; border-radius:10px; color:#fff;}
.pro-tab ul li.active + li:before {display:none;}

.pro-content:not(:last-child) {margin-bottom:60px;}
.pro-content .square-list > li > ul {margin:.4em 0 .5em;}
.pro-content .square-list > li:last-child > ul {margin-bottom:0;}
.pro-content .image-space {text-align:center;}
.pro-content .image-space:not(:last-child) {margin-bottom:30px;}

.pro-tit {position:relative; padding-bottom:14px; margin-bottom:25px; border-bottom:1px solid #ddd; font-size:24px; line-height:1.3em; color:#242424;}
.pro-tit:after {content:''; position:absolute; bottom:-1px; left:0; width:80px; height:2px; background:#437eeb;}

.pro-monitoring {display:grid; grid-template-columns:repeat(4, 1fr); gap:40px; text-align:center;}
.pro-monitoring .img {margin-bottom:10px; border-radius:10px; overflow:hidden;}
.pro-monitoring .txt {padding:15px; background:#f3f7fb; border-radius:10px; color:#242424; font-weight:500; line-height:1.3em;}

.live-migration {display:flex; padding:50px 0; border:1px solid #ddd; border-radius:var(--radius-20); text-align:center;}
.live-migration .item {width:33.33333333%; padding:0 25px;}
.live-migration .item dt {margin:1.25em 0; font-size:var(--fz22); font-weight:600; line-height:1.5em; letter-spacing:-.03em;}

.pro-feature .row{display:flex;align-items:center;margin-bottom:30px;}
.pro-feature .row:last-child{margin-bottom:0;}
.pro-feature .row .ic{margin-right:40px;}
.pro-feature .row .wrap{min-width:0;width:1%;flex:1 1 auto;}
.pro-feature .row .wrap .tit{margin-bottom:10px;font-size:var(--fz24);color: #242424;font-weight:700;line-height:1.3em;}

.pro-feature-2 {display:grid; grid-template-columns:repeat(2, 1fr); gap:40px;}
.pro-feature-2 .item {display:flex; gap:40px; padding:40px; background:#fff; border-radius:10px;}
.pro-feature-2 .item .ico {width:130px;}
.pro-feature-2 .item .cnt {flex:1 1 auto; min-width:0; width:1%;}
.pro-feature-2 .item .cnt h3 {margin-bottom:23px; padding-bottom:15px; border-bottom:1px solid #ddd; font-size:var(--fz24); color:#242424; font-weight:800; line-height:1.3em;}
.pro-feature-2 .item .cnt ul {display:grid; gap:1em;}
.pro-feature-2 .item .cnt ul > li {position:relative; padding-left:1em;}
.pro-feature-2 .item .cnt ul > li:before {content:''; position:absolute; top:.55em; left:0; width:9px; height:9px; background:url('../images/sub/li-bullet.png') 0 50%/contain no-repeat;}

.pro-feature-3 {display:grid; grid-template-columns:repeat(2, 1fr); gap:40px 60px;}

.pro-functions .row {display:flex;}
.pro-functions .row:not(:last-child) {margin-bottom:40px;}
.pro-functions .col.st1 {width:40%;}
.pro-functions .col.st2 {width:60%;}
.pro-functions .tit {display:inline-block; padding:8px 30px; border-radius:30px; text-align:center; font-size:var(--fz18); line-height:1.3em; color:#fff;}
.pro-functions .st1 .tit {background:#454545;}
.pro-functions .st2 .tit {background:#437eeb;}
.pro-functions .arr {display:flex; align-items:center; justify-content:center; width:100px;}
.pro-functions .box {display:flex; flex-direction:column; justify-content:center; padding:35px 40px; border-radius:10px;}
.pro-functions .box strong {font-weight:600;}
.pro-functions .box.st1 {background:#f4f4f4;}
.pro-functions .box.st2 {background:#fff; box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);}
.pro-functions .box.st2 strong {color:#437eeb;}

.bd-table table{width:100%;border-spacing:0;border:1px solid #ddd;border-radius:10px;overflow:hidden;}
.bd-table table th,
.bd-table table td{padding:10px 20px;height:60px;border-bottom:1px solid #ddd;}
.bd-table table th{font-weight:600;line-height:1.5em;text-align:left;}
.bd-table table th strong{font-weight:700;color: #242424;}
.bd-table table th small{font-size: clamp(0.75rem, 0.7171rem + 0.1316vw, 0.875rem);}
.bd-table .br1{border-right:1px solid #ddd;}
.bd-table .bb0{border-bottom:none;}
.bd-table table td{background-color: #f7f9fd;}
.bd-table table tr:last-child th,
.bd-table table tr:last-child td{border-bottom:none;}
.bd-table table tr.on th{background-color: #f5f8fe;}
.bd-table table tr.on td{background-color: #eef3fc;}

.btn-go-site {display:inline-flex; align-items:center; justify-content:center; padding:16px 38px; border:2px solid #005da4; border-radius:50px; color:#005da4; font-size:var(--fz16); font-weight:600; line-height:1.3em; text-align:center;}
.btn-go-site svg {margin-left:10px; margin-right:-6px;}
.btn-go-site:hover {background:#005da4; color:#fff;}