@charset "utf-8";

/* 공통 */
.text-indent {text-indent: -9999px;}

/*************************** 회사소개 ***************************/
/* 인사말 */
.greeting-visual {border-radius:0 500px 500px 0; overflow:hidden;}
.greeting-cont {margin-top:var(--space-60);}
.greeting-slogan {color:var(--color-sub); font-size:var(--font-size-32); font-weight:600; line-height:1.3em; letter-spacing:-.03em;}
.greeting-slogan strong {font-weight:700;}
.greeting-slogan em {font-style:normal; font-weight:700; color:var(--color-primary);}
.greeting-body {margin-top:var(--space-40);}
.greeting-body .lead {margin-bottom:var(--space-20); color:var(--color-sub); font-size:var(--font-size-24); font-weight:500; line-height:1.3em; letter-spacing:-.03em;}
.greeting-body > p {color:#505050; font-size:var(--font-size-18); font-weight:400; line-height:1.67em; letter-spacing:-.03em;}
.greeting-sign {margin-top:var(--space-40); color:var(--color-sub); font-size:var(--font-size-18); font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
.greeting-line {position:relative; margin-top:var(--space-60); height:2px; background:#ddd;}
.greeting-line:before {content:""; position:absolute; left:0; top:0; width:20px; height:2px; background:var(--color-primary);}
.greeting-values {display:flex; margin-top:0;}
.greeting-values li {display:flex; flex-direction:column; align-items:center; gap:var(--space-20); flex:1; min-width:0; padding:var(--space-60) var(--space-60) 0; text-align:center;}
.greeting-values .num {color:var(--color-primary); font-size:var(--font-size-18); font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
.greeting-values .ico {display:block; width:160px; height:160px; margin:0 auto; background-color:#f9f9f9; background-repeat:no-repeat; background-position:center; background-size:80px auto; border-radius:50%; transition:.3s;}
.greeting-values li:nth-child(1) .ico {background-image:url(../images/sub/greeting-icon1.svg);}
.greeting-values li:nth-child(2) .ico {background-image:url(../images/sub/greeting-icon2.svg);}
.greeting-values li:nth-child(3) .ico {background-image:url(../images/sub/greeting-icon3.svg);}
.greeting-values li:hover .ico {background-color:var(--color-primary);}
.greeting-values li:nth-child(1):hover .ico {background-image:url(../images/sub/greeting-icon1-active.svg);}
.greeting-values li:nth-child(2):hover .ico {background-image:url(../images/sub/greeting-icon2-active.svg);}
.greeting-values li:nth-child(3):hover .ico {background-image:url(../images/sub/greeting-icon3-active.svg);}
.greeting-values p {color:var(--color-sub); font-size:var(--font-size-18); font-weight:500; line-height:1.55em; letter-spacing:-.03em;}

/* 찾아오시는 길 */
.location-addr {position: relative; padding: 0 0  var(--space-40) 15px; color:var(--color-sub); letter-spacing:-.03em;}
.location-addr:before {content:""; position: absolute; left:0; top:1px; width:4px; height:22px; background:var(--color-primary);}
.location-addr .main {font-size:var(--font-size-24); font-weight:600; line-height:1.2em;}
.location-addr .sub {font-size:var(--font-size-20); font-weight:500; line-height:1.2em;}
.location-map {width:100%; height:500px; border-radius:var(--radius-16); overflow:hidden;}
.location-map .root_daum_roughmap,
.location-map .root_daum_roughmap .wrap_map {width:100%; height:100%;}
.location-info {display:flex;}
.location-info li {position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; flex:1; min-width:0;  padding:var(--space-40); border-right:1px solid #ddd;}
.location-info li:last-child {border-right:0;}
.location-info .con {width:100%;}
.location-info .label {margin-bottom:var(--space-16); color:var(--color-primary); font-size:var(--font-size-18); font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
.location-info .txt {color:var(--color-sub); font-size:var(--font-size-20); font-weight:600; line-height:1.2em; letter-spacing:-.03em;}
.location-info .txt a {color:inherit;}
.location-info .ico {display:flex; align-items:center; justify-content:center; width:88px; height:88px; background:#f9f9f9; border-radius:50%;}
.location-info .ico img {display:block; max-width:32px; max-height:32px;}

/*************************** 사업분야 ***************************/
/* 공통 */
.biz-intro {margin-bottom:var(--space-60); text-align:center;}
.biz-intro-tit {display:flex; align-items:center; justify-content:center; gap:var(--space-24); color:var(--color-sub); font-size:var(--font-size-28); font-weight:500; line-height:1.2em; letter-spacing:-.03em;}
.biz-intro-tit:before,
.biz-intro-tit:after {content:""; flex-shrink:0; display: inline-block; width:32px; height:32px; background:no-repeat center / contain;}
.biz-intro-tit:before {background-image:url(../images/sub/biz-quote-l.svg);}
.biz-intro-tit:after {background-image:url(../images/sub/biz-quote-r.svg);}
.biz-intro-tit strong {font-weight:700; color:var(--color-primary);}
.biz-intro-desc {margin-top:var(--space-20); color:#878787; font-size:var(--font-size-18); font-weight:400; line-height:1.2em; letter-spacing:-.03em;}
.biz-sec + .biz-sec {margin-top:var(--space-100);}
.biz-tit {display:flex; align-items:flex-start; gap:8px; color:var(--color-sub); font-size:var(--font-size-24); font-weight:700; line-height:1.2em; letter-spacing:-.03em;}
.biz-tit:before {content:""; flex-shrink:0; width:4px; height:22px; margin-top: 3px; background:var(--color-primary);}
.biz-box {margin-top:var(--space-30); padding:var(--space-30); background:#f4f4f4; border-radius:var(--radius-8);}
.biz-box p {color:#505050; font-size:var(--font-size-18); font-weight:400; line-height:1.78em; letter-spacing:-.03em;}
.biz-table {overflow-x:auto; margin-top:var(--space-30);}
.biz-table table {width:100%; border-collapse:collapse; border-spacing:0;}
.biz-table th,
.biz-table td {border:1px solid #ddd; height:60px; padding:0 var(--space-20); font-size:var(--font-size-18); line-height:1.2em; letter-spacing:-.03em; text-align:center; vertical-align:middle;}
.biz-table thead th {background:#f4f4f4; color:var(--color-sub); font-weight:700; font-size:var(--font-size-20);}
.biz-table tbody th {width:17.86%; color:#505050; font-weight:600;}
.biz-table tbody td {color:#505050; font-weight:400;}
.biz-table tr th:first-child,
.biz-table tr td:first-child {border-left:0;}
.biz-table tr th:last-child,
.biz-table tr td:last-child {border-right:0;}
.biz-table.type-col3 tr th:last-child {width: 41%;}
.biz-table thead tr th {border-top:1px solid #ddd;}
.biz-note {margin-top:var(--space-16); color:#878787; font-size:var(--font-size-16); font-weight:400; line-height:1.2em; letter-spacing:-.03em;}
.biz-chips {display:flex; flex-wrap:wrap; gap:var(--space-20) var(--space-30); margin-top:var(--space-30);}
.biz-chips li {display:flex; align-items:flex-start; gap:var(--space-12); width:calc((100% - var(--space-30)) / 2); padding:var(--space-20); border:1px solid #ddd; border-radius:var(--radius-8); color:#505050; font-size:var(--font-size-18); font-weight:400; line-height:1.2em; letter-spacing:-.03em;}
.biz-chips li:before {content:""; flex-shrink:0; width:20px; height:20px; background:url(../images/sub/biz-check.svg) no-repeat center / contain; margin-top: 1px;}
.biz-method {display:flex; flex-direction:column; gap:var(--space-40); margin-top:var(--space-30);}
.biz-method-item {padding:var(--space-40); background:#f4f4f4; border-radius:var(--radius-8);}
.biz-method-head .num {display:block; color:var(--color-primary); font-size:var(--font-size-40); font-weight:700; line-height:1.2em; letter-spacing:-.03em;}
.biz-method-head h4 {margin-top:var(--space-15); color:var(--color-sub); font-size:var(--font-size-24); font-weight:700; line-height:1.2em; letter-spacing:-.03em;}
.biz-method-head p {margin-top:var(--space-20); color:#505050; font-size:var(--font-size-18); font-weight:400; line-height:1.67em; letter-spacing:-.03em;}
.biz-method-cols {display:flex; gap:var(--space-30); margin-top:var(--space-30);}
.biz-method-cols .col {flex:1; min-width:0; overflow:hidden; background:#fff; border-radius:var(--radius-8);}
.biz-method-cols .col-tit {display:flex; align-items:center; justify-content:center; height:50px; color:#fff; font-size:var(--font-size-20); font-weight:600; line-height:1.2em; letter-spacing:-.03em;}
.biz-method-cols .type-pro .col-tit {background:var(--color-primary);}
.biz-method-cols .type-con .col-tit {background:#878787;}
.biz-method-cols ul {display:flex; flex-direction:column; gap:var(--space-20); min-height:200px; padding:var(--space-30);}
.biz-method-cols li {display:flex; align-items:flex-start; gap:var(--space-8); color:#505050; font-size:var(--font-size-18); font-weight:400; line-height:1.2em; letter-spacing:-.03em;}
.biz-method-cols .type-pro li:before {content:""; flex-shrink:0; width:20px; height:20px; background:url(../images/sub/biz-method-check.svg) no-repeat center / contain;}
.biz-method-cols .type-con li:before {content:""; flex-shrink:0; width:20px; height:20px; margin-top: 1px; background:url(../images/sub/biz-cross.svg) no-repeat center / contain;}
.biz-process {position:relative; display:flex; flex-wrap: wrap; justify-content:space-between; margin-top:30px; padding:40px 0;}
.biz-process:before {content:""; position:absolute; left:10%; right:10%; top:96px; border-top:1px dashed #ddd;}
.biz-process li {position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:var(--space-15); flex:1; max-width: 233px; min-width:0; padding: 0 10px; text-align:center;}
.biz-process .num {color:#878787; font-size:var(--font-size-16); font-weight:600; line-height:1.2em; letter-spacing:-.03em;}
.biz-process .ico {display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:#878787; border:5px solid rgba(255,255,255,.2); border-radius:50%; box-sizing:border-box;}
.biz-process .ico img {display:block; width:24px; height:24px;}
.biz-process .name {margin-top:var(--space-15); color:var(--color-sub); font-size:var(--font-size-20); font-weight:600; line-height:1.2em; letter-spacing:-.03em;}
.biz-process .desc {color:#878787; font-size:var(--font-size-16); font-weight:400; line-height:1.2em; letter-spacing:-.03em;}
.biz-process li:nth-child(even) .num {color:var(--color-primary);}
.biz-process li:nth-child(even) .ico {background:var(--color-primary);}

/*************************** 시공실적 ***************************/
/* 목록 */
.portfolio-cate {display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 var(--space-50); margin-bottom:var(--space-60);}
.portfolio-cate a {color:#878787; font-size:var(--font-size-20); font-weight:600; line-height:1.2em; letter-spacing:-.03em;}
.portfolio-cate .active a {color:var(--color-primary); font-weight:700;}
.portfolio-cate a:hover {color:var(--color-primary);}

.portfolio-list ul {display:flex; flex-wrap:wrap; margin:0 -20px;}
.portfolio-list ul li {width:25%; padding:0 20px; margin-bottom:30px; text-align:left;}
.portfolio-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.portfolio-list ul li a {display:block;}
.portfolio-list ul li .thumb {position:relative; padding-bottom:104.7%; margin-bottom:30px; border-radius:var(--radius-16); overflow:hidden;}
.portfolio-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.portfolio-list ul li .cate {padding:0 var(--space-10); color:#505050; font-size:var(--font-size-14); font-weight:600; line-height:1.2em; letter-spacing:-.03em;}
.portfolio-list ul li .tit {overflow:hidden; margin-top:var(--space-10); padding:0 var(--space-10); color:var(--color-sub); font-size:var(--font-size-22); font-weight:600; line-height:1.2em; letter-spacing:-.03em; white-space:nowrap; text-overflow:ellipsis;}
.portfolio-list ul li .addr {display:flex; align-items:flex-start; gap:var(--space-8); margin-top:var(--space-25); padding:0 var(--space-10); color:#505050; font-size:var(--font-size-14); font-weight:400; line-height:1.2em; letter-spacing:-.03em;}
.portfolio-list ul li .addr:before {content:""; flex-shrink:0; width:16px; height:16px; background:url(../images/main/project-pin.svg) no-repeat center / contain;}
.portfolio-list ul li a:hover .thumb img {transform:translateY(-50%) scale(1.05);}

/* 상세 */
.portfolio-view {display:flex; align-items:center; gap:var(--space-100);}
.portfolio-view-media {position:relative; flex:0 1 50%; max-width:650px; min-width:0;}
.portfolio-view-media .swiper { border-radius:var(--radius-16); overflow:hidden;}
.portfolio-view-media .swiper-slide {height:100%;}
.portfolio-view-media .swiper-slide .img {position:relative; padding-bottom:104.7%; overflow:hidden;}
.portfolio-view-media .swiper-slide .img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.portfolio-view-media .slide-btn {position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:56px; height:56px; margin-top: 0; border:0; border-radius:50%; background: url(../images/sub/portfolio-arrow.svg) no-repeat center / contain; cursor:pointer;}
.portfolio-view-media .slide-prev {left:10px; transform:translateY(-50%) rotate(180deg);}
.portfolio-view-media .slide-next {right:10px;}
.portfolio-view-info {display:flex; flex-direction:column; justify-content:center; flex:1; min-width:0;}
.portfolio-view-info .head {display:flex; flex-direction:column; gap:var(--space-16);}
.portfolio-view-info .cate {color:#878787; font-size:var(--font-size-18); font-weight:600; line-height:1.2em; letter-spacing:-.03em;}
.portfolio-view-info .tit {color:var(--color-sub); font-size:var(--font-size-40); font-weight:700; line-height:1.2em; letter-spacing:-.03em;}
.portfolio-view-info .line {position:relative; height:2px; margin: var(--space-32) 0; background:#ddd;}
.portfolio-view-info .line:before {content:""; position:absolute; left:0; top:0; width:20px; height:2px; background:var(--color-primary);}
.portfolio-view-info .meta {display:flex; flex-direction: column; gap:var(--space-24) 0;}
.portfolio-view-info .meta li {display:flex; align-items:center; gap:var(--space-12);}
.portfolio-view-info .meta .label {display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:50px; background:rgba(0,0,0,.03); color:#878787; font-size:var(--font-size-18); font-weight:600; line-height:1.2em; letter-spacing:-.03em; white-space:nowrap;}
.portfolio-view-info .meta .txt {color:#505050; font-size:var(--font-size-20); font-weight:400; line-height:1.2em; letter-spacing:-.03em;}
.portfolio-view-info .btns {display:flex; gap:var(--space-16); margin-top: var(--space-60);}
.portfolio-view-info .btns .btn {display:flex; align-items:center; justify-content:center; flex:1; height:56px; padding: 0 var(--space-30); border-radius:99px; font-size:var(--font-size-16); font-weight:600; line-height:1.2em; letter-spacing:-.03em;}
.portfolio-view-info .btns .type-list {border:1px solid var(--color-sub); color:var(--color-sub);}
.portfolio-view-info .btns .type-inquiry {background:var(--color-primary); color:#fff;}

/*************************** 고객지원 ***************************/
.board-search .input {border-radius: 4px;}
.board-search .btn-pack {border-radius: 4px;}
.btn-pack.round {border-radius: 4px;}

/* 시공동영상 */
.video-list ul {display:flex; flex-wrap:wrap; margin:0 -20px;}
.video-list ul li {width:33.333%; padding:0 20px; margin-bottom:60px; text-align:left;}
.video-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.video-list ul li a {display:block;}
.video-list ul li .thumb {position:relative; padding-bottom:56.3%; margin-bottom:30px; border-radius: 8px; overflow:hidden;}
.video-list ul li .thumb img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.video-list ul li .thumb:after {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width: 48px; height: 48px; background: url(../images/sub/video-icon.svg) no-repeat center / contain;}
.video-list ul li .tit {overflow: hidden; color:#000; font-size:18px; font-weight: 600;line-height:1.2em; white-space:nowrap; text-overflow:ellipsis;}
.video-list ul li .date {display: flex; align-items: center; gap: 6px; color:#878787; font-size:14px; line-height:1.3em; margin-top:20px;}
.video-list ul li .date:before {content:""; flex-shrink:0; width:14px; height:14px; background:url(../images/sub/date-icon.svg) no-repeat center / contain;}

/* 견적문의 */
.required {color:var(--color-primary); }
.board-form .input {border-radius: 4px; height: 48px;}
.board-form .input::placeholder {color:#bebebe; font-size: 16px; font-weight: 500;}
.board-form .captcha-wrap {height: 48px;}
.file-upload {display:flex; gap: var(--space-16); width: 100%; height:48px;}
.file-button {display:flex; justify-content:center; align-items:center; width: 100px; height:100%; padding:0 16px; border:0; background:#121212; color:#fff; cursor:pointer; border-radius: 4px;}
.file-button:hover {background:#2c2c2c;}
.file-name {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; height:100%; padding:0 14px; border:1px solid #ddd; color: #bebebe; font-size: 16px; font-weight: 500; border-radius: 4px;}
.submit-btn {height: 56px; width: 180px; padding: 0 var(--space-30); border-radius: 99px; font-size:var(--font-size-16); font-weight:600; line-height:1.2em; letter-spacing:-.03em; background:var(--color-primary); border:0; color:#fff; cursor:pointer;}