@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+KR:wght@200..900&display=swap');

/* #Base */
/* Reset */
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background:#fff;
    font-family: 'Pretendard Variable', Pretendard, "NanumSquare", -apple-system, sans-serif;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    background:#f9f9f9;
    user-select: none
}

* {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

a {
    color: inherit;
    text-decoration: none;
    outline: 0;
}

img {

    height: auto;
    vertical-align: top;
    border: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

form {
    display: inline;
}

input {
    font-family: inherit;
    outline:none;
}

select {
    font-family: inherit;
}

textarea {
    font-family: inherit;
    resize: vertical;
    outline:none;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    outline: 0;
}

embed, iframe, object {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

body::-webkit-scrollbar {width:10px;background-color:#f8f8f8;}
body::-webkit-scrollbar-thumb { background-color:#666;}
input {outline: none;}
ul,li{list-style:none;}
.hidden {display:none;}

/* 전체 */
body {height:calc(var(--vh, 1vh) * 100);}
#wrap {margin:0 auto;position: relative;height:100%;text-align: center;width:100%;}
#wrap.drop {padding-top:0px;}

.back-video {object-fit: cover;width: 100vw;height:calc(var(--vh, 1vh) * 100);position: fixed;top: 0;left: 0;z-index:1;}

/* 메인 히어로 : 영상 위 오버레이 */
.back-black.hero-overlay {
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(30,28,25,0)    8%,
        rgba(30,28,25,.42) 46%,
        rgba(30,28,25,.12) 76%,
        rgba(30,28,25,.50) 100%
    );
}

/* 메인 히어로 : 문구 · 버튼 */
.hero {width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:fixed;top:0px;left:0px;right:0px;bottom:0px;z-index:3;}
.hero .hero-inner {display:none;text-align:center;padding:0 20px;}
.hero-title {
    font-family: 'Noto Serif KR', serif;
    font-weight: 200;
    font-size: 34px;
    line-height: 1.5;
    letter-spacing: .02em;
    color: #FFFFFF;
}
.hero-sub {
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
    font-weight: 300;
    font-size: 13px;
    letter-spacing: .09em;
    color: #FFFFFF;
    opacity: .82;
    margin-top: 16px;
}
.hero-cta-wrap {margin-top:34px;display:flex;align-items:center;justify-content:center;}
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2E2B27;
    color: #FFFFFF;
    font-family: 'Pretendard Variable', Pretendard, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    padding: 13px 26px;
    border-radius: 2px;
    border: none;
    transition: background .22s ease;
}
.hero-cta:hover {background:#1A1815;}

#header {display:flex;padding:55px 75px;width:100%;top: 0;left: 0;z-index:999;position:fixed;justify-content: center;text-align:left;height:130px;}

#header .logo {margin-right:auto;flex: 1;justify-content: flex-start;align-items: center;display:flex;}
#header .logo img {height:25px;}
#header .right {font-size:13px;color:#1a1a1a;margin-right:auto;flex: 1;justify-content: flex-end;text-align:right;font-weight:bold;min-width:140px;display:flex;align-items: center;}
#header .right:hover {font-weight:900;}
#header .right a {display:inline-flex;align-items: center;justify-content: center;}
#header .right img {vertical-align: -4px;}
#header .menu-list {display:inline-flex;gap:80px;color:#1a1a1a;}
#header .menu-list > .menu {position:relative;font-size:15px;display:inline-flex;align-items: center;justify-content: center;}
#header .menu-list > .menu a {display:inline-block;font-size:12px;color:#1a1a1a;font-weight:bold;}
#header .menu-list > .menu a.active {font-weight:900;}
#header .menu-list > .menu a .kr {display:none;}
#header .menu-list > .menu a:hover {color:#1a1a1a;font-weight:900;}

#header .menu-list > .menu a:after {
    content: "attr(title)";
    font-weight: 700;
    display: block;
    height: 0px;
    visibility: hidden;
}


#header.drop {
    position: fixed;
    /*animation: dropHeader 0.3s;*/
    background:rgba(255,255,255,0.7);
}

@keyframes dropHeader {
    0% {
        top: -5rem;
    }
    100% {
        top: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;

    }
    to {
        opacity: 0;
    }
}


.main-text {color:#fff;font-size:18px;display:flex;height:calc((var(--vh, 1vh) * 100) - 80px);align-items: center;justify-content: center;margin-top:-40px;font-weight:bold;}
.main-text .inner > div {line-height:40px;text-shadow: 1px 2px 1px #333;}
.main-text .inner > div.text-3 {}

.about {text-align:left;padding-bottom:30px;display:flex;}
.about .left {width:34%;height:100%;position:fixed;top:0px;bottom:0px;background:rgb(224,224,224);}
.about .left img {width:auto;}
.about .right {width:66%;overflow-y:auto;margin-left:auto;display:flex;align-items: center;justify-content: center;}
.about .right .cont {max-width:685px;width:100%;margin-top:230px;}
.about .top {padding:0 25px;}
.about .top .tag {color:#808080;font-size:13px;line-height:30px;}
.about .top h4 {color:#454545;font-size:24px;margin-top:3px;font-family:'Noto Serif KR', serif;font-weight:600;}
.about .top h4 span {color:#999;font-size:14px;}

.about .inner {padding:25px;color:#808080;text-align:left;font-size:14px;line-height:25px;letter-spacing: 0.2px;padding-top:40px;}
.about .inner .txt + .txt {margin-top:30px;}
.about .inner .video {margin-top:10px;}
.about .copyright {margin-top:125px;color:#1a1a1a;font-size:12px;text-align:center;}

.about .mag {width:100%;padding:25px;overflow:hidden;position:relative;margin-top:125px;}
.about .mag > .title {font-size:13px;color:#808080;font-weight:bold;margin-bottom:20px;}
.about .mag .swiper-slide img {border-radius:3px;filter:drop-shadow(6px 6px 10px rgba(0,0,0,0.5));width:100%;}
.about .mag .swiper-slide .title {text-align:center;margin-top:27px;color:#333;font-size:12px;font-weight:bold;display:block;}
.about .mag .swiper-slide .sub {text-align:center;margin-top:4px;color:#808080;font-size:11px;font-weight:bold;display:block;}
.about .mag .scrollbar {padding-left:25px;padding-right:25px;position:relative;margin-top:25px;}
.swiper-scrollbar-drag {background:#ab947e !important;opacity: 0.7;}

.mainVideo {
    margin-top:110px;
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    aspect-ratio: 16 / 9;
    filter: drop-shadow(0 0 4px rgb(0 0 0 / 50%));
}

.mainVideo iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: inset(0% 0% 0% 0% round 5px);
}

.project_list {padding:20px;max-width:1200px;margin:0 auto;padding-top:156px;}
.project_list .item img {width:100%;border-radius:3px;}
.project_list .item .title {height:40px;display:flex;align-items: center;justify-content: center;font-size:24px;color:#606060;}
.project_list .item .date {height:26px;display:flex;align-items: center;justify-content: center;color:#999;font-size:16px;margin-top:10px;}
.project_list .item + .item {margin-top:170px;}
.project_list .item .img:hover .desc {display:flex; animation: fade-in 1.4s;}
.project_list .item .img {position:relative;}
.project_list .item .img .desc {position:absolute;top:0px;left:0px;right:0px;bottom:0px;display:flex;align-items: center;justify-content: center;background:rgba(0,0,0,0.2);display:none;}
.project_list .item .img .desc .inner {display:block;}
.project_list .item .img .desc .inner .date {display:block;width:100%;font-size:14px;color:#fff;}
.project_list .item .img .desc .inner .bold {display:block;width:100%;font-size:21px;color:#fff;font-weight:bold;margin-top:4px;margin-bottom:12px;}
.project_list .item .img .desc .inner .title {display:block;width:100%;font-size:18px;color:#fff;}

.project_detail {padding:20px;max-width:1200px;margin:0 auto;padding-top:180px;}
.project_detail .title {font-size:21px;color:#1a1a1a;font-weight:800;}
.project_detail .date {font-size:14px;color:#4d4d4d;}

.project_detail .buttons {display:flex;align-items: center;justify-content: center;margin-top:20px;}
.project_detail .left {width:80px;height:80px;display:inline-flex;align-items: center;justify-content: center;position:fixed;left:75px;top:50%;margin-top:-40px;}
.project_detail .right {width:80px;height:80px;display:inline-flex;align-items: center;justify-content: center;position:fixed;right:75px;top:50%;margin-top:-40px;}
.project_detail .left img {width:26px;}
.project_detail .right img {width:26px;}
.project_detail .buttons .text {width:100%;color:#4d4d4d;line-height:32px;font-size:14px;}
.project_detail .detail {margin-top:35px;max-width:900px;margin:0 auto;margin-top:40px;}
.project_detail .detail .img {display:inline-block;width:100%;}
.project_detail .detail .img img {width:100%;}
.project_detail .detail .img + .img {margin-top:170px;}

.news_list {padding:20px;max-width:1400px;margin:0 auto;padding-top:230px;display:grid;grid-template-columns: repeat(3, 1fr);gap:150px;}
.news_list .item img {border-radius:3px;filter:drop-shadow(5px 5px 2px rgba(0,0,0,0.5));width:360px;}
.news_list .item .sub {display:flex;align-items: center;justify-content: center;font-size:11px;color:#808080;margin-top:10px;}
.news_list .item .title {display:flex;align-items: center;justify-content: center;font-size:18px;color:#4d4d4d;font-weight:900;margin-top:5px;}
.news_list .item .date {height:26px;display:flex;align-items: center;justify-content: center;color:#999;font-size:16px;margin-top:10px;}

.news_list .item .img:hover .desc {display:flex; animation: fade-in 1.4s;}
.news_list .item .img {position:relative;}
.news_list .item .img .desc {position:absolute;top:0px;left:0px;right:0px;bottom:0px;display:flex;align-items: center;justify-content: center;background:rgba(0,0,0,0.4);display:none;}
.news_list .item .img .desc .inner {display:block;}
.news_list .item .img .desc .inner .date {display:block;width:100%;font-size:16px;color:#fff;}
.news_list .item .img .desc .inner .bold {display:block;width:100%;font-size:24px;color:#fff;font-weight:bold;margin-top:12px;margin-bottom:12px;}
.news_list .item .img .desc .inner .title {display:block;width:100%;font-size:18px;color:#fff;}

.news_detail {padding:20px;}
.news_detail img {width:100%;}

.contact {width:100%;}
.contact img {width:100%;max-height:750px;object-fit: cover;}
.contact .inner {padding:50px 20px;padding-top:30px;}
.contact .inner .sns {display:flex;align-items: center;justify-content:center;gap:30px;margin-top:50px;}
.contact .inner .sns a {display:inline-flex;align-items: center;justify-content:center;}
.contact .inner .sns a img {width:26px;}
.contact .inner .desc {color:#4D4D4D;line-height:30px;font-size:12px;}
.contact .inner .register {margin-top:50px;font-size:12px;color:#1a1a1a;}

.process {margin-top:130px;}
.process .img {width:100%;position:relative;}
.process .img img {width:100%;max-height:30vh;object-fit: cover;}
.process .img .text {font-size:20px;font-weight:600;color:#fff;position:absolute;right:0;left:0;top:0;bottom:0;display:flex;align-items: center;justify-content: center;font-family:'Noto Serif KR', serif;}
.process .inner {padding-top:80px;padding-bottom:80px;max-width:1600px;margin:0 auto;padding-left:50px;padding-right:50px;}
.process .inner .step {display:flex;gap:80px;}
.process .inner .step + .step {margin-top:40px;}
.process .inner .step .box {display:block;text-align:left;width:360px;}
.process .inner .step .box .title {font-size:15px;color:#101010;height:42px;border-bottom:solid 1px #454545;}
.process .inner .step .box .desc {font-size:13px;color:#808080;margin-top:12px;line-height:22px;letter-spacing:1px;}
.process .inner .step .arrow {display:inline-flex;align-items: center;justify-content: center;padding:46px;}
.process .inner .step .down {margin-left:auto;display:inline-flex;align-items: center;justify-content: center;padding:46px;width:360px;}
.process .inner .step .down img {width:22px;}
.process .inner .step .arrow img {width:12px;}
.process .inner h4 {font-family:'Noto Serif KR', serif;font-size:16px;margin-bottom:50px;text-align:left;font-weight:400;}

/* 견적 관리 */
.inquiry .intro {position:relative;}
.inquiry .intro img {width:100%;}
.inquiry .intro .back-cover {background:rgba(0,0,0,0.4);position:absolute;top:0px;left:0px;right:0px;bottom:0px;display:flex;align-items: center;justify-content: center;font-size:13px;}
.inquiry .intro .back-cover .inner {display:block;color:#fff;line-height:30px;}
.inquiry .intro .back-cover .inner .btn-write {margin-top:20px;width:160px;height:42px;border-radius:40px;background:#ddd;color:#333;align-items: center;justify-content: center;display:inline-flex;border:none;}
.inquiry .step-list {padding:25px 40px;text-align:left;}
.inquiry .step-list .step {}
.inquiry .step-list .step h4 {font-size:16px;color:#1a1a1a;}
.inquiry .step-list .step .desc {font-size:13px;color:#999;margin-top:15px;}
.inquiry .step-list .step + .step {margin-top:40px;}

.estimate {text-align:left;padding-bottom:30px;display:flex;max-width:1200px;margin:0 auto;padding-top:190px;}
.estimate .left {}
.estimate .left img {width:500px;}
.estimate .right {width:60%;padding-left:80px;}
.estimate .right .cont {max-width:800px;width:100%;margin-top:200px;}
.estimate .right .form {text-align:right;margin-top:20px;max-width:600px;}
.estimate .right .form h3 {font-size:30px;font-weight:900;text-align: left;color:#333;}
.estimate .right .form .tip {font-size:14px;color:#333;border-bottom:solid 1px #666;margin-top:10px;padding-bottom:30px;text-align: left;font-weight:300;}
.estimate .right .form .frm {padding-top:75px;display:grid;grid-template-columns:1fr 1fr;gap:30px;text-align: left;}
.estimate .right .form .frm .form-group {display:inline-flex;align-items: center;width:100%;border-bottom:solid 1px #666;}
.estimate .right .form .frm .form-group input[type='text'],
.estimate .right .form .frm .form-group input[type='tel'] {border:none;background:none;width:100%;height:36px;line-height:36px;flex:1;}
.estimate .right .form .frm .form-group input[type='text']::placeholder,
.estimate .right .form .frm .form-group input[type='tel']::placeholder {color:#808080;}
.estimate .right .form .frm .form-group span {width:74px;font-weight:900;font-size:13px;}
.estimate .right .form .frm .form-group p {flex:1;}
.estimate .right .form .frm .form-group span em {color:#f33;}
.estimate .right .form .frm .form-group select {border:none;background:none;outline: none; width:100%;height:36px;padding-left:0px;color:#808080;flex:1;}

.estimate .right .form .frm .form-group-big {display:inline-flex;align-items: center;width:100%;border-bottom:solid 1px #666;grid-column: span 2;}
.estimate .right .form .frm .form-group-big input[type='text'],
.estimate .right .form .frm .form-group-big input[type='tel'] {border:none;background:none;width:100%;height:36px;padding-left:10px;line-height:36px;flex:1;}
.estimate .right .form .frm .form-group-big input[type='text']::placeholder,
.estimate .right .form .frm .form-group-big input[type='tel']::placeholder {color:#808080;}
.estimate .right .form .frm .form-group-big select {border:none;background:none;outline:none;width:100%;height:36px;padding-left:10px;color:#808080;flex:1;}
.estimate .right .form .frm .form-group-big .file-cont {font-size:13px;color:#808080;padding-left:10px;height:36px;display:flex;align-items: center;cursor:pointer;}
.estimate .right .form .frm .form-group-big span {width:65px;font-weight:900;font-size:13px;}
.estimate .right .form .frm .form-group-big .btn-search {width:80px;text-align:right;font-weight:900;font-size:13px;}
.estimate .right .form .frm .form-group-big span em {color:#f33;}
.estimate .right .form .btn-save {width:120px;color:#fff;background:#2E2B27;height:44px;display:inline-flex;align-items: center;justify-content: center;border-radius:2px;font-size:13px;font-weight:500;letter-spacing:.02em;transition:background .22s ease;}
.estimate .right .form .btn-save:hover {background:#1A1815;color:#fff;}

/* 상담신청 : 하단 버튼 영역 + 회신 안내 */
.estimate .right .form .btn-area {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:60px;flex-wrap:wrap;}
.estimate .right .form .reply-info {font-family:'Pretendard Variable', Pretendard, sans-serif;font-weight:300;font-size:12px;line-height:1.7;color:#8A857C;text-align:left;}

/* 상담신청 : 필수 입력 안내 */
.estimate .right .form .require-info {font-size:12px;color:#8A857C;font-weight:300;text-align:left;margin-top:20px;}
.estimate .right .form .require-info em {color:#f33;font-style:normal;}

/* 상담신청 : 접수 완료 화면 */
.counsel-done {display:none;text-align:left;padding:40px 0;}
.counsel-done h3 {font-size:24px;font-weight:600;color:#333;line-height:1.5;}
.counsel-done .desc {font-size:14px;font-weight:300;color:#4d4d4d;line-height:1.9;margin-top:24px;}
.counsel-done .tel {font-size:14px;color:#2E2B27;font-weight:500;letter-spacing:.02em;margin-top:24px;}
.counsel-done .btn-home {display:inline-flex;align-items:center;justify-content:center;width:120px;height:44px;margin-top:40px;background:#2E2B27;color:#fff;border-radius:2px;font-size:13px;font-weight:500;transition:background .22s ease;}
.counsel-done .btn-home:hover {background:#1A1815;}

.container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider-content {
    display: none;
    width: 100%;
    height: 200px;
    background-color: lightblue;
    text-align: center;
    font-size: 24px;
}

.fixed_inquiry {position:fixed;bottom:20px;right:10px;width:50px;height:50px;background:rgba(0,0,0,0.3);display:inline-flex;align-items: center;justify-content: center;border-radius:100px;}
.fixed_inquiry a {display:inline-flex;width:100%;height:100%;align-items: center;justify-content: center;position:relative;}
.fixed_inquiry a {font-size:22px;color:#fff;}
.fixed_inquiry img {width:20px;height:auto;}

/* 페이지 네이션 */
.pagination {display:flex;align-items: center;justify-content: center;height:50px;gap:10px;padding-bottom:60px;margin-top:60px;}
.pagination .page-item {padding:8px;display:inline-flex;align-items: center;justify-content: center;width:35px;height:35px;font-size:13px;border:solid 1px #eee;border-radius:4px;color:#333;background:none;}
.pagination .page-item.active {background:rgba(171, 148, 126,1);color:#fff;border:solid 1px rgba(171, 148, 126,1);}
.pagination .page-item.prev-page {background:none;color:#333;width:auto;}
.pagination .page-item.page-first {background:none;color:#333;width:auto;}
.pagination .page-item.next-page {background:none;color:#333;width:auto;}
.pagination .page-item.page-end {background:none;color:#333;width:auto;}

/* 헤더 반응형 처리 :400 */
@media screen and (max-width:1700px) {
    .about .left {width:50%;}
    .about .right {width:50%;}

    .process .inner .step .box .title {font-size:16px;}
    .process .inner .step .box .desc {font-size:12px;}
    .process .inner .step .arrow {padding:20px;}
    .process .inner .step .arrow img {width:12px;}
    .process .inner .step .down {padding:20px;}
    .process .inner .step .down img {width:26px;}
}

/* 헤더 반응형 처리 :400 */
@media screen and (max-width:1300px) {

    #header .menu-list {gap: 20px;}
}

/* 헤더 반응형 처리 :400 */
@media screen and (max-width:1000px) {
    #header .menu-list {gap: 0px;}
    #header .menu-list .menu {width:100px;}

    .about {display:block;}
    .about .left {width:100%;position:relative;}
    .about .left img {max-height:500px;object-fit:cover;}
    .about .right {width:100%;}
    .about .right .cont {margin-top:100px;}


    .estimate .left {display:none;}
    .estimate .right {width:100%;}
}

/* 히어로 반응형 : 768 */
@media screen and (max-width:768px) {
    .hero-title {font-size:26px;}
    .hero-sub {font-size:11.5px;margin-top:13px;}
}