@charset "utf-8";
/* 서브공통 */
.text-right {text-align: right;}
.sub-section {position: relative;}
.com-txt {position: absolute; left: 0; top: 0; font-family: 'bebasneue'; font-size: var(--font-size-80); letter-spacing: 0; line-height: 1.175em; color: #eee; text-align: left; z-index: -1;}

/********************* about us *********************/
/* 회사소개 */
.greeting { position: relative; overflow: hidden; padding: var(--space-200) 0 var(--space-170); border-radius: var(--radius-40) var(--radius-40) 0 0; }
.greeting .bg-wrap { position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius-40) var(--radius-40) 0 0; }
.greeting .bg-wrap .img { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: var(--radius-40) var(--radius-40) 0 0; }
.greeting .bg-wrap .img img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.greeting .head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.greeting .head .logo {flex-shrink: 0; }
.greeting .head .logo img { width: 100%; height: 100%; object-fit: contain; }
.greeting .head .txt { font-size: var(--font-size-20); font-weight: 500; line-height: 1.75; letter-spacing: -0.03em; color: rgba(255,255,255,0.8); }
.greeting .head .txt p {margin-bottom: var(--space-40); }
.greeting .head .txt p:last-child {margin-bottom: 0;}
.greeting .list { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-start; gap: 167px; padding: 0; list-style: none; }
.greeting .list .item { display: flex; flex-direction: column; align-items: center; gap: 20px; flex-shrink: 0; }
.greeting .list .tit { font-size: 24px; font-weight: 600; line-height: 1.583em; letter-spacing: -0.03em; text-align: center; color: rgba(255,255,255,0.5); margin: 0;}
.greeting .line-wrap {position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-20); margin-top: clamp(115px, calc(220 / var(--inner) * 100vw), 220px);}
.greeting .line-wrap .line { position: absolute; left: 0; top: 72px; width: 0%; height: 1px; background: rgba(255,255,255,0.4); transition: width 1.5s ease; }
.greeting .line-wrap.on .line { width: 100%; transition-delay: 0.7s; }

/* 연혁 */
.history-timeline {display: flex; gap: 240px;}
.history {position: relative; padding-top: 40px;}
.history .item {display:flex;}
.history .item h3 {font-family: "reiher-headline", sans-serif; font-size: var(--font-size-80); font-weight: 700; letter-spacing: 0; line-height: 1.175em; color: var(--color-sub); text-align:left; width:clamp(300px, calc(730 / var(--inner) * 100vw), 730px);}
.history .item-box {flex:1 1 auto; min-width:0; width:1%; padding:17px 0 100px 190px; position:relative;}
.history .item-box .box {position: relative; margin-bottom: var(--space-40);}
.history .item-box .box:last-child {margin-bottom: 0;}
.history .item-box .year {font-family: "reiher-headline", sans-serif; font-size: var(--font-size-32); font-weight: 700; line-height: 1.437em; letter-spacing: -0.03em; color: var(--color-sub); text-align: left; margin-bottom: var(--space-12);}
.history .item-box:before {position:absolute; content:""; background:var(--color-primary); margin-left:-15px; top:18px; left:-8px; width:48px; height:48px; border-radius:100%; border:14px solid rgba(255, 255, 255, 0.90);}
.history .item-box.on:before {transform: translateY(0);}
.history .item-box:after {position:absolute; content:""; left:0; top:19px; width:1px; height:100%; background:#ddd; z-index:-1;}
.history .list li {position: relative; margin-bottom:5px; display:flex; font-size: 18px; line-height:1.77em; padding-left: 16px;}
.history .list li:before {content: ""; width: 4px; height: 4px; position: absolute; left: 0; top: 16px; transform: translateY(-50%); background: #ddd; border-radius: 50%; flex-shrink: 0;}
.history .list li:last-child {margin-bottom:0;}
.history .list strong {min-width:68px; font-size:18px; font-weight: 600; color:var(--color-sub);}
.history .item:last-child .list {padding-bottom:0;} 

/* 프로젝트 수행 과정 */
.process { display: flex; gap: var(--space-64); align-items: flex-start; justify-content: space-between;}
.process .tit-area { flex-shrink: 0; width: clamp(300px, calc(630/var(--inner)*100vw), 630px); padding-bottom: var(--space-12); margin-top: 54px;}
.process .tit-area .tit { font-family: 'bebasneue'; font-size: var(--font-size-80); line-height: 1.175em; color: #eee; margin: 0 0 var(--space-12); }
.process .tit-area .subtit { font-family: "bebasneue"; font-size: clamp(50px, calc(100/var(--inner)*100vw), 100px); font-weight: 400; line-height: 1; letter-spacing: -0.01em; color: var(--color-sub); }
.process .tit-area .subtit p { margin: 0; }
.process .cols { display: flex; gap: 40px; flex-wrap: wrap; justify-content: flex-end; flex: 1; min-width: 0; margin-bottom: var(--space-80);}
.process .card {flex:0 0 calc(50% - 20px); min-width:0; width:1%; position: relative; max-width: 353px; min-height: 354px; padding: var(--space-32); border-radius: var(--radius-24); overflow: hidden; background-size: cover; background-position: center;}
.process .card:nth-of-type(even) {position: relative; top: 80px;}
.process .card:nth-child(1) { background-image: url(/images/sub/process-bg1.jpg); }
.process .card:nth-child(2) { background-image: url(/images/sub/process-bg2.jpg); }
.process .card:nth-child(3) { background-image: url(/images/sub/process-bg3.jpg); }
.process .card:nth-child(4) { background-image: url(/images/sub/process-bg4.jpg); }
.process .card:nth-child(5) { background-image: url(/images/sub/process-bg5.jpg); }
.process .card:nth-child(6) { background-image: url(/images/sub/process-bg6.jpg); }
.process .card .cont { position: relative; z-index: 1; display: flex; flex-direction: column;}
.process .card .num { display: inline-flex; align-items: center; justify-content: center; padding: 2px 18px; border: 1px solid #fff; border-radius: 100px; font-family: "reiher-headline", sans-serif; font-size: var(--font-size-18); font-weight: 700; color: #fff; line-height: 1.77em; align-self: flex-start; margin-bottom: var(--space-20);}
.process .card .tit { font-size: var(--font-size-28); font-weight: 700; line-height: 1.5em; letter-spacing: -0.03em; color: #fff; margin-bottom: var(--space-36); }
.process .card .desc { font-size: var(--font-size-16); font-weight: 500; line-height: 1.875em; letter-spacing: -0.03em; color: rgba(255,255,255,0.8); }

/* Certification */
.certification { display: flex; flex-direction: column; gap: var(--space-120); align-items: flex-start; }
.certification .main-tit { font-family: 'bebasneue', sans-serif; font-size: var(--font-size-60); line-height: 1.23em; color: #222; text-align: center; margin: 0; width: 100%; }
.certification .group { display: flex; flex-direction: column; gap: var(--space-30); width: 100%; }
.certification .cont-tit { display: flex; gap: var(--space-12); align-items: center; }
.certification .cont-tit::before { content: ""; display: block; width: 16px; height: 16px; flex-shrink: 0; background: url(/images/sub/tit.png) no-repeat center center / contain; }
.certification .cont-tit .tit { font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.03em; color: #222; margin: 0; }
.certification .list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-56) var(--space-40); padding: 0; list-style: none; margin: 0; }
.certification .item { display: flex; flex-direction: column; gap: var(--space-14); align-items: center; flex: 0 0 auto; }
.certification .item .img { border: 1px solid #eee; border-radius: var(--radius-16); overflow: hidden; }
.certification .item .desc { font-size: var(--font-size-18); font-weight: 600; line-height: 1.56em; letter-spacing: -0.03em; color: #222; text-align: center; margin: 0; }

/* 찾아오시는길 */
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 640px !important;}

.location-section .map {margin-bottom: var(--space-56); border-radius: var(--radius-24); overflow: hidden;}

.lct-info {border-top: 2px solid var(--color-primary);}
.lct-info dl {display: flex; padding: var(--space-28) 0; border-bottom: 1px solid #eee;}
.lct-info dl dt {display: flex; align-items: center; gap: var(--space-24); font-family: 'bebasneue'; font-size: var(--font-size-28); line-height: 1.5em; letter-spacing: 0em; color: var(--color-primary); margin: 0;}
.lct-info dl dt span {display: block; width: 160px;}
.lct-info dl dt:before {content: ""; display: block; width: 16px; height: 16px; background: url(/images/sub/tit.png) no-repeat center center / contain; }
.lct-info dl dd {font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; text-align: left; margin: 0;}

/********************* project *********************/
/* list */
.project-list ul {display:flex; flex-wrap:wrap; margin:0 -12px;}
.project-list ul li {width:50%; padding:0 12px; margin-bottom:24px; text-align:center;}
.project-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.project-list ul li a {display:block; position: relative;}
.project-list ul li .thumb {position:relative; padding-bottom:67%; border-radius: var(--radius-24); overflow:hidden;}
.project-list ul li .thumb:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); opacity: 0; transition: .3s;}
.project-list ul li a:hover .thumb:after {opacity: 1;}
.project-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;}
.project-list ul li .txt-box {display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; position: absolute; left: 0px; bottom: 0px; width: 100%; padding: var(--space-56); color:#fff; text-align: left;}
.project-list ul li .txt-box .tit {font-family:'dohyeon'; font-size:var(--font-size-32); line-height:1.218em; letter-spacing:0em; transition: .3s;}
.project-list ul li .txt-box .desc {max-height: 0; overflow: hidden; font-size:var(--font-size-18); line-height:1.778em; margin-top: 0; opacity: 0; transition: max-height .3s, margin-top .3s, opacity .3s;}
.project-list ul li a:hover .txt-box .desc {max-height: 10em; margin-top: var(--space-45); opacity: 1;}
.project-list ul li .txt-box .arrow {opacity: 0; width: 64px; height: 64px; transition: .3s; flex-shrink: 0;}
.project-list ul li a:hover .txt-box .arrow {opacity: 1;}
.project-section .paginate {margin-top: var(--space-60);}

/* view */
.view-visual {height: auto !important; padding: calc(var(--header-height) + var(--space-80)) 0 var(--space-80);}
.view-info {margin-top: var(--space-140);}
.view-info dl {flex: 1; color: #fff;}
.view-info dl dt {font-family: 'bebasneue'; font-size: var(--font-size-24); line-height: 1.583em; letter-spacing: 0; margin: 0; margin-bottom: 4px;}
.view-info dl dd {font-size: var(--font-size-18); line-height: 1.777em;}

.project-view-img {max-width: 1920px; margin: 0 auto var(--space-120);}
.view-editor {width: 100%; margin-bottom: var(--space-80);}
.view-btn-wrap {display: flex; align-items: center; justify-content: center; gap: 8px;}

.project-slide-wrap {position: relative; width: 100%; max-width: 1387px; max-width: 0 auto; overflow: hidden;}
.project-view-swiper {width: 100%; height: 100%; margin: 0;}
.project-view-swiper .swiper-wrapper {height: 100%;}
.project-view-swiper .swiper-slide {height: 100%;}
.project-view-swiper .swiper-slide .img > div {position:relative; padding-bottom:56.3%; overflow:hidden;}
.project-view-swiper .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;}

.project-nav {position: absolute; right: 0; bottom:0; width: 100%; padding: var(--space-30); z-index: 20;}
.project-nav .box {display: flex; align-items: center; justify-content: space-between;}
.project-btn-wrap {display: flex; align-items: center; justify-content: flex-start; gap: 6px;}
.project-btn-wrap .swiper-button-prev,
.project-btn-wrap .swiper-button-next {flex-shrink: 0; position: static; width:60px; height:60px; margin:0; border-radius: 8px; transition:.2s; background:rgba(255, 255, 255, 0.40) url("/images/sub/project-arrow.svg") no-repeat center / 8px;}
.project-btn-wrap .swiper-button-prev:hover,
.project-btn-wrap .swiper-button-next:hover {background-color:var(--color-primary);}
.project-btn-wrap .swiper-button-prev:after,
.project-btn-wrap .swiper-button-next:after {display:none;}
.project-btn-wrap .swiper-button-prev {transform: rotate(180deg);}

.project-pagination.swiper-pagination {display: inline-flex; align-items: center; justify-content: center; gap: var(--space-10); position: static; max-width: 92px; padding: var(--space-12) var(--space-16); border-radius: 8px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(20px);}
.project-pagination.swiper-pagination > span {color: #ffffff48; font-size: var(--font-size-16); font-weight: 600; line-height: 1.5em; letter-spacing:-.02em;}
.project-pagination.swiper-pagination .swiper-pagination-current {color: #fff;}
.project-pagination.swiper-pagination .bar {display: block; width: 2px; height: 12px; background: #ffffff48;}


/********************* product *********************/
/* list */
.prod-list ul {display:flex; flex-wrap:wrap; margin:0 -12px;}
.prod-list ul li {width:25%; padding:0 12px; margin-bottom:45px; text-align:center;}
.prod-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.prod-list ul li a {display:block;}
.prod-list ul li .thumb {position:relative; padding-bottom:100%; margin-bottom:21px; border-radius: var(--radius-24); overflow:hidden;}
.prod-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:contain; transition: .3s;}
.prod-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius: var(--radius-24); border:1px solid #eee; transition: .3s;}
.prod-list ul li .tit {position: relative; color:var(--color-sub); font-size:20px; font-weight: 600; line-height:1.7em; padding-left: 16px; margin-left: 16px; text-align: left; transition: .3s;}
.prod-list ul li .tit:before {content:""; position: absolute; top: 13px; left: 0; width:8px; height:8px; background:var(--color-primary); border-radius: 50%; transition: .3s;}
.prod-list ul li a:hover .tit {color:var(--color-primary);}
.prod-list ul li a:hover .thumb:after {border-color:var(--color-primary);}
.prod-list ul li a:hover .thumb img {transform: translateY(-50%) scale(1.05);}
.prod-list ul li a:hover .tit:before {background: #F0A4AB;}
.paginate.prod-paginate {margin: 0;}

/* view */
.prod-view { display: flex; gap: var(--space-80); align-items: center; flex-wrap: wrap; padding-bottom: var(--space-120); margin-bottom: var(--space-120); border-bottom: 1px solid var(--color-primary);}
.prod-view-img {width: clamp(300px, calc(640/var(--inner)*100vw), 640px);}
.prod-view-img div {position:relative; padding-bottom:100%; border-radius: var(--radius-24); overflow:hidden;}
.prod-view-img div:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius: var(--radius-24); border:1px solid #eee;}
.prod-view-img div img {position:absolute; top:50%; left:0; 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;}
.prod-view .info { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; }
.prod-view .head { display: flex; flex-direction: column; gap: var(--space-10); padding-bottom: 46px; margin-bottom: 46px; border-bottom: 1px solid #eee;}
.prod-view .subtit { font-size: var(--font-size-18); font-weight: 600; line-height: 1.78em; letter-spacing: -0.03em; color: var(--color-primary); margin: 0; }
.prod-view .tit { font-size: var(--font-size-48); font-weight: 700; line-height: 1.17em; letter-spacing: -0.03em; color: #222; margin: 0; }
.prod-view .desc { font-size: var(--font-size-16); line-height: 1.875em; letter-spacing: -0.03em; color: #484848; }
.prod-view .desc p { margin: 0 0 var(--space-24); }
.prod-view .desc p:last-child { margin-bottom: 0; }
.product-btn-wrap { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-70);}
.product-btn-wrap.center {justify-content: center;}
.com-btn.dark {color: #999; border-color: #ddd;}
.com-btn.red {color: var(--color-primary); border-color: var(--color-primary);}
.product-btn-wrap .com-btn:hover {color: #fff; border-color: var(--color-primary); background: var(--color-primary);}

/********************* catalogs *********************/
.catalogs .list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); padding: 0; list-style: none; margin: 0; }
.catalogs .item { display: flex; flex-direction: column; gap: var(--space-8);}
.catalogs .thumb {position:relative; padding-bottom:141.5%; border-radius: var(--radius-16); overflow: hidden; }
.catalogs .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd; border-radius: var(--radius-16);}
.catalogs .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;}
.catalogs .item:hover .thumb {border-color: var(--color-primary);}
.catalogs .download { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-24) var(--space-32); background: #fff; border: 1px solid #ddd; border-radius: var(--radius-16); font-family: 'bebasneue', sans-serif; font-size: var(--font-size-24); line-height: 1.58em; color: #686868; text-decoration: none; transition: .3s; }
.catalogs .item:hover .download {background: var(--color-primary); border-color: var(--color-primary); color: #fff;}
.catalogs .download:after{content:""; display: block; width: 24px; height: 24px; flex-shrink: 0;  background: url(/images/sub/pdf-down.svg) no-repeat center center / contain;}
.catalogs .item:hover .download:after{background-image: url(/images/sub/pdf-down-active.svg)}

/********************* contact us *********************/
/* news */

.news-img-list {padding:40px 0 0 0; border-top:2px solid #686868;}
.news-img-list ul {display:flex; flex-wrap:wrap; margin:0 -20px;}
.news-img-list ul li {width:33.333%; padding:0 20px; margin-bottom:40px; text-align:center;}
.news-img-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.news-img-list ul li a {display:block;}
.news-img-list ul li .thumb {position:relative; padding-bottom:75.5%; margin-bottom:21px; border-radius: var(--radius-24); overflow:hidden;}
.news-img-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;}
.news-img-list ul li a:hover .thumb img {transform: translateY(-50%) scale(1.1);}
.news-img-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.08);}
.news-img-list ul li .tit {color:#222; font-size:20px; font-weight: 600; line-height:1.7em; text-align: left;}
.news-img-list ul li .date {color:#999; font-size:16px; line-height:1.3em; margin-top:4px; text-align: left;}

/* 견적문의 */
.board-form .input {height: 44px; border-radius: 4px;}
.inq-btn {border-radius: 8px;}