@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
 .root_daum_roughmap { width:100% !important; height:440px !important; } 
 .root_daum_roughmap .wrap_map { width:100% !important; height:440px !important; } 
 .roughmap_lebel_text { line-height:0 !important; font-size:0 !important; } 
 /* .roughmap_maker_label { display: none !important; } */
 .roughmap_lebel_text:after { content:"㈜CH Labs"; font-size:12px; line-height:15px; } 

.doc-tit { padding-bottom:var(--space-30); } 
.doc-tit h2 { padding-bottom:var(--space-10); font-size: var(--font-size-28); color: var(--color-dark); line-height:1.14em; letter-spacing: -0.02em; } 

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

.doc-sub-cnt { padding-top:var(--space-80); } 
.doc-sub-cnt:first-child { padding-top:0; } 

.table-style table { width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #1f1f1f; line-height:1.5em; } 
.table-style table th { padding:13px; border:1px solid #ddd; border-top:0; font-weight:600; background:#fafafa; } 
.table-style table td { padding:13px; text-align:center; border:1px solid #ddd; border-top:0; color: #454545; } 
.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; } 

.flex-wrap { display:flex; } 
.flex-wrap.ai-center { align-items:center; } 
.flex-wrap .flex { flex: 1 1 auto; width:1%; min-width:0; } 

.dot-list > li { position:relative; padding-left:10px; } 
.dot-list > li:before { content:"·"; position:absolute; top:-2px; left:0; font-weight:700; font-size:20px; color:#242424; } 
.dot-list > li strong { font-weight:600; } 

.dash-list > li { position:relative; padding-left:10px; } 
.dash-list > li:before { content:"-"; position:absolute; top:-2px; left:0; font-weight:700; font-size:20px; color:#242424; } 
.dash-list > li strong { font-weight:600; } 
.dash-list.none > li { padding-left:0; } 
.dash-list.none > li::before { display: none; } 

.pt0 { padding-top:0 !important; } 
.pt30 { padding-top:var(--space-30) !important; } 
.pb0 { padding-bottom:0 !important; } 

.mt30 { margin-top:var(--space-30) !important; } 

.txt-primary { color: var(--color-primary) !important; } 
.txt-second { color: var(--color-secondary) !important; } 
.txt-grey { color: #888888 !important; } 
.txt-wht { color: #fff !important; } 
.txt-dark { color: #242424 !important; } 

.highlight { display: inline; box-shadow: inset 0 -14px 0 #f7f5fa; border-radius: 3px; } 

.tag { padding:7px 16px; font-weight:500; font-size: var(--font-size-18); letter-spacing: 0; line-height:1em; background-color: var(--color-second); border-radius: 50vh; color: #fff; width:fit-content; } 

.bg-grey { background-color: #f9f9f9; } 

/* CEO인사말 */
.greetings p { padding-top:var(--space-30); font-weight:600; font-size: var(--font-size-24); color: #242424; line-height:1.33em; } 

.diagram { position:relative; margin-top:var(--space-100); padding:var(--space-130) 0 0!important; } 
.diagram::before { content: ""; position: absolute; left: 0; right: 0; width: 100%; height: 88%; background-color: #f9f9f9; z-index: -2; bottom: 0; } 
.diagram .sub-head { position: absolute; top:0; } 

.sub-head { margin-bottom:var(--space-80); color: #242424; letter-spacing: -0.03em; } 
.sub-head span { display:block; font-size: var(--font-size-18); line-height:1.78em; } 
.sub-head h2 { position:relative; font-size: var(--font-size-60); line-height:1.13em; text-transform: uppercase; } 
.sub-head h2::after { content: ""; position: absolute; right: -11%; bottom: -18%; width:clamp(32px, calc( 72 / var(--inner) * 100vw ), 72px );; height:clamp(32px, calc( 72 / var(--inner) * 100vw ), 72px ); background: url(/images/sub/dot.png) no-repeat bottom right/contain; z-index: -1; } 

.diagram-list { padding:var(--space-200) 0 var(--space-100); } 
.diagram-list ul { position:relative; height:640px; } 
.diagram-list ul li { display:flex; align-items: center; position: absolute; top:0; left:0; } 
.diagram-list ul li:nth-child(2) { top:200px; left:80px; } 
.diagram-list ul li:nth-child(3) { top:400px; left:160px; } 
.diagram-list ul li .one { position:relative; display:flex; flex-direction: column; justify-content: center; align-items: center; width: 240px; height: 240px; border-radius: 100%; border: 1px solid var(--color-primary); letter-spacing: -0.03em; line-height:1em; } 
.diagram-list .one strong { display: inline-block; font-size: var(--font-size-60); color: #242424; padding: 0 var(--space-30) var(--space-15); margin-bottom: var(--space-20); border-bottom: 1px solid #ddd; line-height: 1em; } 
.diagram-list .one p { text-transform: uppercase; } 
.diagram-list ul li > p { position:relative; padding-left:var(--space-120); line-height:2em; } 
.diagram-list ul li > p::before { content: ""; position: absolute; top:50%; left:-7px; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 100%; background-color: var(--color-primary); } 
.diagram-list ul li > p::after { content: ""; position: absolute; top:50%; left:0; transform: translateY(-50%); width: var(--space-80); height: 1px; background-color: var(--color-primary); } 

.system-list { border-radius: var(--border-radius-24); border: 1px solid #ddd; } 
.system-list ul { display:grid; grid-template-columns: repeat(5, 1fr); } 
.system-list ul li { display:flex; justify-content: center; flex-direction: column; align-items: center; position:relative; text-align:center; padding:var(--space-40) 0; border-right: 1px solid #ddd; } 
.system-list ul li:last-child { border-right: 0; } 
.system-list ul li::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -15px; width:28px; height:28px; background: url(../images/sub/btn-arrow.png) no-repeat center/contain; } 
.system-list ul li:last-child::after { display:none; } 
.system-list ul li .ico { text-align:center; } 
.system-list .txt { margin-top:var(--space-10); font-weight:700; line-height:2em; } 

.banner { background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,110,192,1) 100%); } 
.banner p { margin-bottom:var(--space-30); text-align:center; line-height:1.63em; } 
.banner p:last-child { margin-bottom:0; } 
.banner p.t2 { color: #fff; font-size: var(--font-size-40); line-height:1.2em; } 
.banner p.t3 { color: #fff; font-weight:500; } 

/* business */
.gallery-slide { position: relative; } 
.gallery-slide .arrows { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; z-index: 50; width: 100%; } 
.gallery-slide .swiper-button-prev,
.gallery-slide .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border:1px solid #ddd; background-color: #fff; border-radius: 100%; z-index: 50; color: #747474; margin:0; } 
.gallery-slide .swiper-button-prev { right: auto; left: -100px; } 
.gallery-slide .swiper-button-next { right: -100px; left: auto; } 
.gallery-slide .swiper-button-prev:after,
.gallery-slide .swiper-button-next:after { font-size: var(--font-size-19); } 
.gallery-slide .swiper-button-next:hover, 
.gallery-slide .swiper-button-prev:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; } 

/* GLASS 강화도어 */
.product-head { margin-bottom:var(--space-80); } 
.product-head .txt-wrap { display:flex; margin-top:var(--space-40); color: #242424; } 
.product-head .txt-wrap h2 { position:relative; padding-right:var(--space-40); margin-right:var(--space-40); font-size: var(--font-size-40); color: #242424; line-height:normal; } 
.product-head .txt-wrap h2::after { content: ""; display:inline-block; position: absolute; top:6px; right:0; width:1px; height:var(--font-size-40); background-color: #ddd; } 

.reverse-list .cnt { display:flex; flex-direction: row; margin-bottom:var(--space-40); } 
.reverse-list .cnt:last-child { margin-bottom:0; } 
.reverse-list .img { width:48.3333%; } 
.reverse-list .txt { flex: 1 1 auto; width:1%; min-width:0; padding-top:var(--space-30); padding-left:var(--space-30); } 
.reverse-list .txt h3 { margin-bottom:10px; font-size: var(--font-size-24); line-height:normal; color: #242424; letter-spacing: -0.02em; } 
.reverse-list .txt p { letter-spacing: -0.03em; } 
.reverse-list .cnt:nth-child(odd) { flex-direction: row-reverse; } 
.reverse-list .cnt:nth-child(odd) .txt { display: flex; text-align: right; flex-direction: column; align-items: end; padding-left:0; padding-right:var(--space-40); } 


.img-list { display:flex; gap: 0 var(--space-40); } 
.img-list li { width:33.3333%; } 
.img-list .img { margin-bottom:var(--space-15); } 
.img-list .tit { font-weight:700; font-size: var(--font-size-20); line-height:1.3em; } 
.img-list .desc { margin-top:var(--space-10); } 
.img-list.col4 li { width:25%; } 
.img-list .bin {min-height: var(--space-60);}

/* 견적문의 */
.progress-list ul { display:grid; grid-template-columns: repeat(6, 1fr); gap: 0 48px; } 
.progress-list ul li { display:flex; flex-direction: column; align-items: center; position:relative; text-align:center; } 
.progress-list ul li::after { content: ""; position: absolute; top: 50%; right: -36px; transform: translateY(-50%); width:20px; height:23px; margin-top: -14px; background: url(../images/sub/arrow.png) no-repeat center/contain; } 
.progress-list ul li:last-child::after { display:none; } 
.progress-list .txt { margin-top:var(--space-30); font-weight:700; line-height:1em; color: #242424; } 

.board-form .item { display: inline-block; margin: 4px 19px 4px 0; } 
.board-form.inquiry table { border-top:2px solid #868686; border-bottom:1px solid #242424; } 
.board-form.inquiry table td { color: #454545; } 
.board-form.inquiry table td.type2 { padding: 19px 21px; } 
.board-form.inquiry table th { font-weight: 700; } 

.filebox .upload-name { width:470px; } 
.filebox input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } 
.filebox .btn-pack.medium { padding:0 25px; font-size: var(--font-size-14); }