@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
.doc-tit { padding-bottom:var(--space-50); } 
.doc-tit h2 { font-size: var(--font-size-40); color: var(--color-dark); line-height:1em; } 
.doc-tit p { padding-top:var(--space-20); font-size: var(--font-size-18); font-weight:500; line-height: 1.555em; } 

.doc-sub-tit { margin-bottom:var(--space-20); font-size: var(--font-size-30); line-height:1.666em; color: #222; } 

.doc-cnt { padding:var(--space-120) 0; } 
.doc-cnt:first-child { padding-top:0; } 
.doc-cnt:last-child { padding-bottom:0; } 

.doc-sub-cnt { margin-bottom:var(--space-60); } 
.doc-sub-cnt:last-child { margin-bottom:0; } 

.pt0 { padding-top:0 !important; } 
.pb0 { padding-bottom:0 !important; } 
.pb30 { padding-bottom:var(--space-30) !important; } 
.pb40 { padding-bottom:var(--space-40) !important; } 
.p50-0 { padding:var(--space-50) 0; } 
.pt50 { padding-top:var(--space-50) !important; } 

.mt40 { margin-top:var(--space-40) !important; } 
.mt50 { margin-top:var(--space-50) !important; } 

.h150 { height:var(--space-150); } 

.txt-primary { color: var(--color-primary) !important; } 
.txt-second { color: var(--color-secondary) !important; } 
.txt-grey { color: #888888 !important; } 
.txt-red { color: #f20022; } 

.bg-grey { background-color: #f8f8f8; } 
.bg-sky { background-color: #f2fafe; } 

.flex-wrap { display:flex; } 

.fs18 { font-size: var(--font-size-18) !important; } 

.medium { font-weight:500 !important; } 

.radius-12 { border-radius: var(--border-radius-12); } 

.sub-head { text-align:center; padding-bottom:var(--space-60); } 
.sub-head p { padding-bottom:10px; font-weight:600; font-size: var(--font-size-24); color: var(--color-primary); line-height:1.166em; } 
.sub-head h2 { font-size: var(--font-size-40); line-height: 1.25em; color: var(--color-dark); } 

.sub-head.type2 p { padding-bottom:var(--space-16); font-size: var(--font-size-18); line-height: 1.555em; color: #999999; } 
.sub-head.type2 h3 { font-size: var(--font-size-30); line-height:1em; } 

.sub-head2 { padding-bottom:var(--space-70); font-size: var(--font-size-50); line-height:1em; color: #222; } 

.dot-list > li { position:relative; padding-left:13px; } 
.dot-list > li:before { content:"·"; position:absolute; top:-1px; left:0; font-weight:700; font-size:var(--font-size-20); color:#505050; font-size: var(--font-size-18); } 
/* 16/30 */
.dot-list.type2 > li { position:relative; padding-left:14px; line-height:1.875em; } 
.dot-list.type2 > li:before { top:-1px; font-weight:900; color:#00a5eb; } 

.table-style table { width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #222; line-height:1.5em; color: #333333; } 
.table-style table th { padding:clamp(8px, calc( 17 / var(--inner) * 100vw ), 17px );; border:1px solid #ddd; border-top:0; font-weight:700; background:#f8f8f8; } 
.table-style table td { padding:clamp(8px, calc( 17 / var(--inner) * 100vw ), 17px );; text-align:center; border:1px solid #ddd; border-top:0; line-height:1.875em; } 
.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 span { display:inline-block; } 
.table-style .normal { font-weight:400; } 

.table-style.type2 table { border-color: #ddd; } 
.table-style.type2 table th { font-weight:600; text-align: left; } 
.table-style.type2 table thead th { padding:0; } 
.table-style.type2 table tbody td { padding: clamp(8px, calc(17 / var(--inner)* 100vw), 17px) 5px; } 
.table-style.type2 table tr.first td { font-weight:600; } 

/* 회사소개 */
.greetings p { margin-top:var(--body-line-height); line-height:1.75em; } 
.greetings .lg-txt { margin-top:10px; font-weight:700; font-size:var(--font-size-40); line-height:1.25em; color: var(--color-dark); } 

.field { position:relative; padding-top:var(--space-100); background: url(/images/sub/bg-field.jpg) no-repeat center/cover; } 
.field .sub-head { position: absolute; bottom:var(--space-120); left:50%; transform: translateX(-50%); } 

.box-list>ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } 
.box-list .box { min-height: 320px; background:#f8f8f8; border-radius: var(--border-radius-12); overflow:hidden; padding:var(--space-40); } 
.box-list .tit { color:#222222; font-weight:600; font-size: var(--font-size-24); line-height: 1.166em; padding-bottom:var(--space-16); border-bottom: 1px solid #ddd; margin-bottom:var(--space-20); } 
.box-list .cnt { padding: var(--padding-30-16) var(--padding-40-20); } 

.history { display:flex; } 
.history .img { width:32.5%; margin-right:var(--container-space); } 
.history-info { flex:1 1 auto; min-width:0; width:1%; } 
.history-info dl { display:flex; border-top:2px solid #ddd; border-bottom: 1px solid #ddd; padding:var(--space-30) 0; } 
.history-info dl dt { width:200px; font-weight:700; font-size: var(--font-size-40); line-height:1em; color: #222222; letter-spacing: 0; } 
.history-info dl dd { display:block; flex:1 1 auto; min-width:0; width:1%; } 
.history-info dl dd p { margin-bottom:var(--space-20); font-weight:500; line-height:1em; letter-spacing: -0.04em; } 
.history-info dl dd p:last-child { margin-bottom:0; } 

.partner-wrap { display:flex; margin-bottom:var(--space-20); border-radius: var(--border-radius-12); border: 1px solid #ddd; min-height: 200px; } 
.partner-wrap:last-child { margin-bottom:0; } 
.partner-wrap .logo { width:28.333%; background-color: #f8f8f8; border-top-left-radius: var(--border-radius-12); border-bottom-left-radius: var(--border-radius-12); display:flex; justify-content: center; align-items: center; } 
.partner-wrap .item-list { flex:1 1 auto; min-width:0; width:1%; display:flex; align-items: center; padding: var(--space-30) 0; } 
.partner-wrap .item-list li { padding:0 var(--space-40); text-align:center; } 

/* Network */
.tag-list { display:grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-25); } 
.tag-list dl { font-weight:500; } 
.tag-list dt { margin-bottom:10px; color: #fff; font-size: var(--font-size-22); line-height: clamp(40px, calc( 70 / var(--inner) * 100vw ), 70px ); text-align:center; background-color: var(--color-primary); border-radius: var(--border-radius-12); } 
.tag-list dd { display:flex; justify-content: center; align-items: center;  height:150px; padding:0 10px; line-height: 1.555em; font-size: var(--font-size-18);text-align:center; border: 1px solid #ddd; border-radius: var(--border-radius-12); } 

.tag-list.type2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-40); } 
.tag-list.type2 .img { text-align:center; margin-bottom:var(--space-30); } 
.tag-list.type2 dd { min-height:654px; flex-direction: column; padding:var(--space-50); } 
.tag-list.h420 dd { min-height:420px; } 
.tag-list.col3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-30); } 
.tag-list.col3 .ico { margin-bottom:var(--space-20); } 
.tag-list.col3 dd { justify-content: start; flex-direction: column; min-height: 300px; padding:var(--space-50); } 

.cnt { position:relative; padding:var(--space-50); border-radius: var(--border-radius-12); } 
.cnt h3 { margin-bottom:var(--space-20); font-size: var(--font-size-30); color: #222; line-height:1.666em; } 
.cnt .guide { position: absolute; right:var(--space-30); bottom:var(--space-30); font-weight:500; color: #999999; line-height:1.625em; } 

.img-list { display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-100); } 
.img-list.flex { display:flex; } 
.img-list.col3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-20); } 
.img-list .img { text-align:center; } 
.img-list p { padding-top:var(--space-20); font-weight:500; line-height:1.625em; text-align:center; } 
.img-list strong { display:block; padding-top:var(--space-20); text-align:center; font-weight:600; font-size: var(--font-size-18); line-height:1.444em; color: #222; } 

.product-list2 ul { display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-30); } 
.product-list2 ul li { height:326px; display:flex; justify-content: center; align-items: center; flex-direction: column; text-align:center; border:1px solid #ddd; border-radius: var(--border-radius-12); padding:10px var(--space-20) var(--space-30); text-align:center; padding: 10px var(--space-20) var(--space-30); } 
.product-list2 ul li .img { margin-bottom:var(--space-20); text-align:center; } 
.product-list2 ul li .tit { color:#222; font-size:var(--font-size-18); font-weight:600; line-height:1em; } 
.product-list2 ul li .tx { font-weight:500; line-height:1.625em; margin-top:10px; } 

/* Solution */
.sub-tab { margin:0 auto var(--space-100); max-width:1200px; } 
.sub-tab ul { display:flex; justify-content: center; } 
.sub-tab ul li { position:relative; flex: 1; text-align:center; height: var(--lnb-height); } 
.sub-tab ul li::after { content: ""; position: absolute; left:50%; bottom:0; transform: translateX(-50%); width:100%; height:1px; background-color: #ddd; } 
.sub-tab ul li a { display:block; line-height: var(--lnb-height); text-align:center; font-weight:500; font-size: var(--font-size-18); color: #999999; } 
.sub-tab ul li.on a { color:var(--color-primary); } 
.sub-tab ul li.on::after { height:2px; background-color: var(--color-primary); } 

.merit-list { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); } 
.merit-list li { min-height:204px; display:flex; justify-content: center; align-items: center; flex-direction: column; text-align:center; border:1px solid #ddd; border-radius: var(--border-radius-12); padding:0 var(--space-40); text-align:center; padding: 0 10px; } 
.merit-list .merit { margin-bottom:var(--space-20); padding: 4px 14px; border-radius: 50vh; border: 1px solid #a01d10; color: #a01d10; font-weight:600; } 
.merit-list li p { color:#222; font-size:var(--font-size-18); font-weight:600; line-height:1.555em; } 

/* BQN 플랫폼 */
.line-box { position:relative; display:flex; justify-content: space-between; } 
.line-box.only-mobile{ display:none;}
.line-box .info-list { padding:var(--space-20) 0; } 
.line-box .info-list:nth-child(1) { width: 19.416%; } 
.line-box .info-list.center { position: absolute; top:-10px; left:19.416%; width:41.666%; background-color: var(--color-primary); color: #fff !important; border-radius: var(--border-radius-12); padding:var(--space-30) var(--space-50); box-shadow: -0.262px 4.993px 16px 4px rgba(0, 0, 0, 0.25); } 
.line-box .info-list:nth-child(3) { width:38.916%; } 
.line-box .info-list li { line-height: var(--lnb-height); border-bottom: 1px solid #ddd; text-align:center; font-size: var(--font-size-18); } 
.line-box .info-list li:last-child { border:0; } 
.line-box .info-list p { text-align:center; line-height: var(--lnb-height); font-weight:700; font-size: var(--font-size-24); color: #222; } 
.line-box .info-list.center p { color: #fff; } 
.line-box .info-list:nth-child(1) li { font-weight:700; color: #222; border: 0; } 
.line-box .info-list:nth-child(3) { padding-right:var(--space-50); } 

.h60 { height:var(--lnb-height); } 

.customer { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); } 
.customer .img { padding: clamp(5px, calc( 20 / var(--inner) * 100vw ), 20px ) 0; border: 1px solid #ddd; border-radius: var(--border-radius-12); text-align:center; }