@charset "utf-8";

.wide-gray-bg {position:relative;}
.wide-gray-bg:before {content:''; position:absolute; left:50%; transform:translateX(-50%); top:0; z-index:-1;height:100%; width:100vw; background:#f6f7f7;}

.doc-cnt {padding:100px 0;}
.doc-cnt:last-child {padding-bottom:0;}

.doc-tt {margin-bottom:23px; font-weight:400; font-family:var(--font-play); letter-spacing:.2em; line-height:1.4em; color:#898989;}
.doc-tt2 {font-weight:400; letter-spacing:-.03em; color:#898989;}

.doc-tit {font-size:40px; font-weight:700; letter-spacing:-.03em; line-height:1.3em; color:#242424;}
.doc-tit2 {position:relative;display:inline-block; font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.3em; color:#242424;}
.doc-tit2:before {content:''; position:absolute; left:0; bottom:2px; width:100%; height:10px; background:#edeef0; z-index:-1;}
.doc-tit3 {font-size:24px; font-weight:600; line-height:1.4em; color:var(--color-primary);}
.doc-tit4 {font-size:28px; font-weight:500; letter-spacing:-.03em; line-height:1.3em; color:#242424;}

.check-tit {position:relative; padding-left:31px; font-size:24px; font-weight:600; letter-spacing:-.03em; line-height:1.4em;color:#242424;}
.check-tit:before {content:''; position:absolute; left:0; top:6px; content:''; width:23px; height:24px; background:url('../images/sub/check.png') no-repeat 50% 50% / contain;}

.doc-txt {position:relative;font-size:20px; font-weight:400; line-height:1.75em;display:inline;}
.doc-txt strong {font-weight:600; color:#242424;}
.doc-txt:before {content:''; position:absolute; left:-22px; top:-15px; width:40px; height:40px; z-index:-1; border-radius:100%; background:#edeef0;}

.doc-btn {height:100px; min-width:530px; display:inline-flex; align-items:center; justify-content:center; text-align:center; background:var(--color-primary); color:#fff; border-radius:50px; font-size:28px; font-weight:600; letter-spacing:-.03em; line-height:1.4em;}
.doc-btn:after {margin-left:45px;content:''; width:20px;height:29px; background:url('../images/sub/btn-arr.png') no-repeat 50% 50% / contain;}
 
.dashed-bar {height:1px; background-repeat:repeat-X; background-image:url('../images/sub/dashed.jpg');}

.solid-bar {border-bottom:1px solid #ddd;}

.doc-bar {position:relative; display:block; width:1px; height:100px; background:#ddd; margin:0 auto; overflow:hidden;}
.doc-bar:after {content:""; width:1px; height:39px; background:var(--color-primary); position:absolute; top:0; margin-left:-.5px; left:50%; animation:1.3s Down linear infinite;}

@keyframes Down {
	0% {top:0;}
	100% {top:100%; opacity:0;}
}

.service-group {display:flex; justify-content:space-between; align-items:center; margin-bottom:60px;}
.service-group:last-chlid {margin-bottom:0;}
.service-group .img {max-width:560px; width:46.66%;}
.service-group .cnt {max-width:560px; width:46.66%;}
.service-group h3 {position:relative; margin-bottom:23px; font-size:28px; font-weight:500; letter-spacing:-.03em; line-height:1.43em; color:#242424;}
.service-group h3:before {content:''; position: absolute; left:-20px; top:-10px; z-index: -1;width:40px; height:40px; background:#edeef0; border-radius:100%;}
.service-group:last-child {margin-bottom:0;}
.service-group:nth-child(even) {flex-direction:row-reverse;}
.service-group:nth-child(even) .cnt {text-align:right;}
.service-group:nth-child(even) h3:before {left:auto; right:-20px;}
.service-group:nth-child(1) {position:relative;}
.service-group:nth-child(1):before {content:''; position:absolute; right:-100px; top:-100px; width:301px; height:328px; background:url('../images/sub/acc-img1.png') no-repeat 50% 50% / contain;}
.service-group:nth-child(2) {position:relative;}
.service-group:nth-child(2):before {content:''; position:absolute; left:-100px; bottom:-35px; width:601px; height:106px; background:url('../images/sub/acc-img2.png') no-repeat 50% 50% / contain;}

.step-list ol {display:flex; margin:-30px;}
.step-list ol li {width:33.333%; padding:30px; position:relative;}
.step-list ol li:after {width:30px; height:30px; content:''; position:absolute; right:0; top:50%; margin:-15px -15px 0 0; background:url('../images/sub/step-arrow.png');}
.step-list ol li:last-child:after {display:none;}
.step-list .box {position:relative; display:flex; flex-direction:column; justify-content:center; padding:20px 30px; min-height:188px; border-radius:20px; background:#fff;}
.step-list .box:before {content:''; position:absolute; right:30px; top:30px; width:65px; height:61px; background-size:contain; background-repeat:no-repeat; background-position:50% 50%;}
.step-list .box.ico1:before {background-image:url('../images/sub/ico-step1.png');}
.step-list .box.ico2:before {background-image:url('../images/sub/ico-step2.png');}
.step-list .box.ico3:before {background-image:url('../images/sub/ico-step3.png');}
.step-list .order {font-size:15px; font-weight:700; line-height:1.4em;font-family:var(--font-play);color:var(--color-primary);}
.step-list .tit {margin:11px 0 20px; font-size:18px; font-weight:700; letter-spacing:-.03em; line-height:1.4em; color:#333;}
.step-list .txt {font-size:15px; font-weight:400; letter-spacing:-.03em; line-height:1.6em; color:#454545;}

.flex-layout {border-top:1px solid #000;}
.flex-layout .group {display:flex; padding:60px 0 60px 40px;}
.flex-layout .head {width:200px;}
.flex-layout .body {flex:1 1 auto; min-width:0; width:1%;}

.table-top {margin-bottom:85px; position:relative;}
.table-top:after {position:absolute; bottom:-40px; left:50%; margin-left:-15px; content:''; width:30px; height:30px; background:url('../images/sub/plus.png') no-repeat 50% 50% / contain;}
.table-top .row {display:flex; border:1px solid #ddd; border-radius:20px; overflow:hidden; text-align:center; height:70px;}
.table-top .row > div {display:flex; align-items:center; justify-content:center; color:#242424;}
.table-top .row > div:nth-child(1) {width:39.79%; font-size:18px; font-weight:600; background:var(--color-primary); color:#fff;} 
.table-top .row > div:nth-child(2) {width:39.58%; background:#f6f7f7; border-right:1px solid #ddd; font-weight:500;} 
.table-top .row > div:nth-child(3) {width:20.93%;} 

.table01 {margin-bottom:45px;}
.table01 .inner {border-radius:20px; border:1px solid #ddd; overflow:hidden;}
.table01 table {width:100%; border-collapse:collapse; border-spacing:0; text-align:center;}
.table01 table tbody th {padding:11px 10px; font-size:18px; font-weight:600; color:#fff; background:var(--color-primary); }
.table01 table tbody td {padding:11px 10px;color:#242424; border-bottom:1px solid #ddd; border-right:1px solid #ddd;}
.table01 table tbody td.bg1 {background:#f6f7f7; font-weight:500;}
.table01 table tbody td:last-child {border-right:0;}
.table01 table tbody tr:last-child td {border-bottom:0;}

.cost-box {display:flex; border-radius:20px; border:1px solid #ddd; padding:35px 66px;}
.cost-box .check-tit {width:270px;}
.cost-box .cnt {position:relative;flex:1 1 auto; min-width:0; width:1%;}
.cost-box .price {position:absolute; right:0; bottom:0; font-size:20px; font-weight:700; line-height:1.33em; color:var(--color-primary);}
.cost-box .price span {border-bottom:2px solid var(--color-primary); line-height:1.33em;}

.dot-list li {margin-bottom:5px; position:relative;line-height:1.4em; font-size:18px; padding-left:15px;}
.dot-list li:last-child {margin-bottom:0;}
.dot-list li:before {content:'·'; font-size:24px; font-weight:700; position:absolute; left:0; top:-1px;}

.dot-list.ty2 li {font-size:16px;}

.add-box {background:#f6f7f7; border-radius:20px; padding:40px 20px;}
.add-box ul {display:flex; justify-content:space-between; max-width:814px; margin:0 auto;}
.add-box ul li {text-align:center; padding:0 15px;}
.add-box .txt {margin-top:15px;font-weight:500; color:#242424; line-height:1.5em;}
.add-box .txt small {display:block; font-size:14px; font-weight:400;}

.greeting {display:flex;}
.greeting .img {width:560px; margin-right:70px;}
.greeting .cnt {margin-top:-5px;flex:1 1 auto; min-width:0; width:1%;}
.greeting .doc-tit4 {margin-bottom:35px;}
.greeting .cnt p {margin-bottom:22px;}

.directions {display:flex; align-items:center;}
.directions .cnt {width:400px;}
.directions .cnt .doc-tit4 {margin-bottom:50px;}
.directions .map-wrap {flex:1 1 auto; min-width:0; width:1%; border-radius:0 30px 0 30px; overflow:hidden;}
.root_daum_roughmap {width:100% !important;}
.root_daum_roughmap .border1,
.root_daum_roughmap .wrap_controllers {border:0 !important;}
.root_daum_roughmap .border3,
.root_daum_roughmap .border4 {width:0 !important;}

.contact-info .row {display:flex; margin-bottom:22px;}
.contact-info .row:last-child {margin-bottom:0;}
.contact-info .ico {margin-right:10px;}
.contact-info dl dt {font-size:14px; font-weight:500; line-height:1.3em; margin-bottom:2px; color:#989898;}
.contact-info dl dd {line-height:1.56em; color:#242424;}

.coalition-group {border-bottom:1px solid #ddd; padding-bottom: 47px; margin-bottom: 50px;}
.coalition-group:last-child {margin-bottom: 0;}
.coalition-group .img {text-align:center;}
.coalition-group .txt {margin-top: 22px; font-size: 15px; line-height: 1.65em; color: #686868;}

/* 설치기사,대리점 css */
.flxWrap {display:flex;flex-wrap:wrap;}
.sub-title {margin-bottom:clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); text-align:center;}
.sub-title h1 { font-size:clamp(22px, calc( 40 / var(--inner) * 100vw ), 40px); line-height:1.2; } 
.viewtitbx { margin-bottom: clamp(30px, calc( 56 / var(--inner) * 100vw ), 56px);}
.viewtitbx .title {padding-bottom: clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px);  font-size: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold;line-height: 1.1;  border-bottom: 1px solid #242424;}
.conwrap + .conwrap { padding-top: clamp(30px, calc( 58 / var(--inner) * 100vw ), 58px);}
.conwrap .contitle { margin-bottom: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px);  font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.conwrap .smalltit {   display: inline-block; padding-left: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); color: var(--color-1);}
.tblbx table {  border-top: 1px solid #242424;  width: 100%;  border-collapse: collapse;  border-spacing: 0px;}
.tblbx th, 
.tblbx td {  padding: clamp(12px, calc( 18 / var(--inner) * 100vw ), 16px) clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); border-bottom: 1px solid #ddd; border-right: 1px solid #ddd;}
.tblbx th { background: #fafafa;  font-weight: 500;  color: #242424;  text-align: center;}
.tblbx td { color: #454545; text-align: left;}
.tblbx td:last-child {  border-right: 0;}
.buttonwrap {  margin-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.buttonwrap .flxWrap {  justify-content: center;}
.buttonwrap .btn-pack { margin: 0 clamp(2px, calc( 5 / var(--inner) * 100vw ), 5px);    border-radius: 30px; height: clamp(44px, calc( 60 / var(--inner) * 100vw ), 60px) !important;  line-height: clamp(42px, calc( 58 / var(--inner) * 100vw ), 58px) !important;   min-width: clamp(95px, calc( 120 / var(--inner) * 100vw ), 120px);  color: #fff;  border: 0 !important; font-size: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px) !important;  font-weight: 500 !important;}
.buttonwrap .btn-pack.large { min-width: clamp(100px, calc( 196 / var(--inner) * 100vw ), 196px);}
.buttonwrap .btn-pack.color1 {  background: var(--color-1);}
.buttonwrap .btn-pack.color2 { background: var(--color-2);}
.files-upload2 {   display: flex; align-items: center;  flex-wrap: wrap;  margin: -5px;}
.files-upload2 .files-upload-group2 { flex: 1 0 clamp(130px, calc( 170 / var(--inner) * 100vw ), 170px);  max-width: clamp(130px, calc( 170 / var(--inner) * 100vw ), 170px);  padding: 5px;}
.inputinner {   position: relative;  width: 100%;  background: #f6f7f7;  border: 1px solid #ddd;  border-radius: 20px; overflow: hidden;}
.files-upload-input2 {   position: absolute; left: 0;  top: 0; width: 100%;   height: 100%;  border-radius: 15px;}
.files-upload-input2 input { width: 100%; height: 100%; opacity: 0;  cursor: pointer;}
.files-upload2 .btn-plus {  display: block; position: absolute;   top: 50%;  left: 0;  transform: translateY(-50%);  width: 100%;  height: auto;  max-width: 100%;  min-height: 100%;   text-indent: -999em; background: url('../images/sub/plus.png')no-repeat center center;  background-size: clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px) auto;}
.files-upload-preview {  position: relative; padding-bottom: 100%;   overflow: hidden;}
.files-upload-preview img { position: absolute;   top: 50%;  left: 0; transform: translateY(-50%); width: 100%;  height: auto;   max-width: 100%; min-height: 100%;   object-fit: cover;}
.files-upload-preview p {  text-indent: -999em;}
.files-upload-del .btn-del {   position: absolute;  right: 10pxtop: 10px;   width: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);    height: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);  z-index: 2;   background: url('../images/sub/close.png') no-repeat; background-size: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) auto;    text-indent: -999em;}