body {font-family:PretendardR;}

.pageOutWrap {overflow:hidden;}

.contentWrap {width:100%; max-width:1400px; margin:0 auto;}

main {width:100%; max-width:1920px; margin:0 auto;}

button {
    appearance: none;
    -webkit-appearance: none;

    border: none;
    background: none;
    padding: 0;
    margin: 0;

    font: inherit;
    color: inherit;

    cursor: pointer;
}






/*
    ************************************** 헤더 ***************************************
*/
header {height:100px; background-color:#05210d;}
header .contentWrap {display:flex; justify-content:space-between; align-items:center; height:100%;}

header .logo {font-size:0;}

header nav {display:flex; align-items:center; font-size:22px; color:#ffffff;}
header nav a {color:#ffffff !important;}
header nav .divider {width:2px; height:13px; background-color:rgba(255,255,255,0.7); margin:0 40px;}

header nav .btnTel {display:flex; align-items:center; gap:14px; padding:8px 20px; border-radius:30px; border:solid 1px #ffffff; margin-left:45px;}

header .btnShowMMenu {display:none;}

header nav#mobileMenu {display:none;}




/*
    ************************************* 메인 비주얼 ***************************************
*/
.mainVisual {height:980px; background-image:url("../images/mainVisual.jpg"); background-size:cover; background-position:center;}
.mainVisual .contentWrap {display: flex; justify-content: space-between; align-items: center; height:100%;}

.mainVisual .visualContent {display: flex; justify-content:space-between; align-items:flex-end; width:100%;}
.mainVisual .visualText h1 {font-size:52px; color:#05210d; font-family:PretendardL; font-weight:normal; line-height:1.3;}
/*h1 안에서는 div 를 쓸 수 없어 span 으로 변경 → block 지정 필요*/
.mainVisual .visualText h1 .strongText {display:block; font-size:70px; font-family:PretendardB; margin-top:30px;}
.mainVisual .visualText .buttonWrap {display: flex; align-items: center; gap:10px; margin-top:100px;}

.mainVisual .infoIconWrap {display:grid; grid-template-columns: repeat(3, 184px); grid-auto-rows: 184px; gap:25px;}
.mainVisual .infoIconWrap .item {display: flex; justify-content: center; align-items: center; flex-direction: column; gap:12px; text-align:center; border-radius:50%; background-color:rgba(255,255,255,0.7);}



/*
    ************************************* 포트폴리오 ***************************************
*/
.portfolio {padding:150px 0; background-color:#faf8f4;}

.portfolio .portfolioList {display:grid; grid-template-columns: repeat(3, 449px); grid-auto-rows: 289px; gap:25px;}
.portfolio .portfolioList .item {position:relative; width:100%; height:100%;}
.portfolio .portfolioList .item > img {display:block; width:100%;}
.portfolio .portfolioList .item .overInfo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:15px;
    color:#ffffff;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.portfolio .portfolioList .item .overInfo .engText {font-size:28px; font-family:PretendardB;}
.portfolio .portfolioList .item .overInfo .korText {font-size:22px; font-family:PretendardR;}
.portfolio .portfolioList .item:hover .overInfo {opacity:1; transition:opacity 0.3s;}



/*
    ************************************* 왜 다빈 ***************************************
*/
.whyDabin {padding:150px 0; background-color:#d0b076;}
.whyDabin .cl_sectionTitle .subText {color:#ffffff; letter-spacing: 15px; margin-right:-15px;}
.whyDabin .cl_sectionTitle .mainText {color:#ffffff;}

.whyDabin .whyDabinList {display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 220px; gap:25px;}
.whyDabin .whyDabinList .item {display:flex; justify-content: center; align-items:center; gap:30px; border-radius:20px; padding:0 40px; box-sizing: border-box; box-shadow:3px 3px 10px rgba(0,0,0,0.17); background-color:#faf4ed;}
.whyDabin .whyDabinList .item .icon {width:116px;}
.whyDabin .whyDabinList .item .icon > img {display:block; width:100%;}
.whyDabin .whyDabinList .item .text {display:flex; flex-direction:column; gap:15px; flex:1;}
.whyDabin .whyDabinList .item .text .title {font-size:30px; color:#282828; font-family:PretendardB;}
.whyDabin .whyDabinList .item .text .desc {font-size:20px; color:#282828; font-family:PretendardR;}



/*
    ************************************* 시공분야 ***************************************
*/
.fields {padding:150px 0; background-image:url("../images/fieldBg.jpg"); background-size:cover; background-position:center;}

.fields .cl_sectionTitle .subText {letter-spacing: 15px; margin-right:-15px;}

.fields .fieldListBox {display:flex; align-items: flex-start; padding:45px 0; border-radius:20px; box-shadow: 3px 3px 18px rgba(0,0,0,0.08); background-color:#ffffff;}
.fields .fieldListBox .item {position:relative; flex:1; text-align: center;}
.fields .fieldListBox .item:after {content:""; position:absolute; top:20px; right:0; width:1px; height:290px; background-color:#f6f3ec;}
.fields .fieldListBox .item:last-child:after {display:none;}
.fields .fieldListBox .item .icon {font-size:0; margin-bottom:20px;}
.fields .fieldListBox .item .title {font-size:24px; color:#282828; font-family:PretendardB; margin-bottom:25px;}
.fields .fieldListBox .item .desc {font-size:17px; color:#282828; font-family:PretendardR;}

.fields .cl_sectionComment {color:#282828;}

.fields .fieldListWrap_m {display:none; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap:8px 5px;}
.fields .fieldListWrap_m .item {text-align:center; padding:15px 5px; box-sizing: border-box; border-radius:20px; box-shadow: 0 0 18px rgba(0,0,0,0.08); background-color:#ffffff;}
.fields .fieldListWrap_m .item .icon {font-size:0; text-align:center; margin-bottom:10px;}
.fields .fieldListWrap_m .item .icon img {width:80%;}
.fields .fieldListWrap_m .item .title {font-size:12px; color:#282828; font-family:PretendardB;}



/*
    ************************************* 3D 디자인 프리뷰 ***************************************
*/
.designPreview {padding:150px 0; background-color:#05210d;}

.designPreview .cl_sectionTitle .subText {color:#c9a66b; letter-spacing: 5px; margin-right:-5px;}
.designPreview .cl_sectionTitle .mainText {color:#ffffff; line-height:1.3;}
.designPreview .cl_sectionTitle .mainText .highlightText {color:#b3935e;}
.designPreview .cl_sectionTitle .descText {color:#ffffff;}

.designPreview .renderingBox {display:flex; justify-content:center; align-items:stretch; width:100%; margin-bottom:90px;}
.designPreview .renderingBox:last-child {margin-bottom:0;}
.designPreview .renderingBox .titleCell {position:relative; flex:1; padding-left:60px; padding-top:90px;}
.designPreview .renderingBox .titleCell .title {font-size:40px; color:#ffffff; font-family:NanumMjB; margin-bottom:30px;}
.designPreview .renderingBox .titleCell .decoText {font-size:19px; color:rgba(255,255,255,0.5);}
.designPreview .renderingBox .titleCell .decoText img {opacity:0.5; margin-left:15px;}
.designPreview .renderingBox .titleCell .thumb {position:absolute; bottom:75px; left:60px; border:solid 2px #ffffff; box-shadow: 3px 3px 15px rgba(0,0,0,0.45);}
.designPreview .renderingBox .titleCell .thumb img {display:block;}
.designPreview .renderingBox .renderImgCell img {display:block;}

.designPreview .renderingBoxWrap .renderingBox:nth-child(1) {background:linear-gradient(#837567, #4d4843);}
.designPreview .renderingBoxWrap .renderingBox:nth-child(2) {background:linear-gradient(#4d4843, #3f3b35);}
.designPreview .renderingBoxWrap .renderingBox:nth-child(3) {background:linear-gradient(#3d3832, #302b24);}

.designPreview .cl_sectionComment .highlightText {color:#b3935e;}



/*
    ************************************* 시공분야 ***************************************
*/
.process {padding:150px 0; overflow:hidden; background-image:url("../images/process_bg.jpg"); background-size:cover; background-position:center; background-color:#faf8f4;}

.process .cl_sectionTitle .subText {letter-spacing: 5px; margin-right:-5px;}

.process .processStepWrap {position:relative; display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; gap:70px 0;}
.process .processStepWrap .backLine {position:absolute; top:80px; left:200px; z-index:0;}
.process .processStepWrap .item {position:relative; z-index:1; text-align:center;}
.process .processStepWrap .item .icon {display:flex; justify-content: center; align-items: center; width:170px; height:170px; margin:0 auto; margin-bottom:25px; border-radius:50%; border:solid 1px #e4ded4; background-color:#ffffff;}
.process .processStepWrap .item .title {display: flex; flex-direction: column;}
.process .processStepWrap .item .title .num {font-size:22px; color:#c9a66c; font-family:PretendardB; margin-bottom:15px;}
.process .processStepWrap .item .title .text {font-size:30px; color:#282828; font-family:PretendardB; margin-bottom:15px;}
.process .processStepWrap .item .desc {font-size:22px; color:#282828; font-family:PretendardR; line-height:1.4;}



/*
    ************************************* 시공사례 ***************************************
*/
.project {padding:150px 0; background-color:#3d3229;}

.project .cl_sectionTitle .subText {color:#ffffff; letter-spacing: 5px; margin-right:-5px;}
.project .cl_sectionTitle .mainText {color:#c9a66b;}
.project .cl_sectionTitle .descText {color:#ffffff;}

.project .projectList {display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap:25px;}
.project .projectList .bnaBox {display:flex; align-items: flex-start;}
.project .projectList .bnaBox .thumb img {display:block; width:100%;}
.project .projectList .bnaBox .beforeCell {width:50%;}
.project .projectList .bnaBox .beforeCell:after {content:"Before"; display:flex; justify-content: center; align-items: center; width:100%; height:40px; font-size:20px; color:#ffffff; font-family:PretendardM; background-color:#554334;}
.project .projectList .bnaBox .afterCell {width:50%;}
.project .projectList .bnaBox .afterCell:after {content:"After"; display:flex; justify-content: center; align-items: center; width:100%; height:40px; font-size:20px; color:#ffffff; font-family:PretendardM; background-color:#b7955a;}



/*
    ************************************* faq ***************************************
*/
.faq {padding:150px 0; background-color:#faf8f4;}

.faq .cl_sectionTitle .subText {letter-spacing: 5px; margin-right:-5px;}

.faq .faqListWrap {border-top:solid 2px #282828;}
.faq .faqListWrap .faqList {display:flex; align-items: flex-start; gap:30px; padding:0 75px; border-bottom:solid 2px #f0f0f0; background-color:#ffffff; transition:all 0.3s linear;}
.faq .faqListWrap .faqList:before {content:"Q"; display:flex; justify-content: center; align-items: center; width:30px; height:90px; font-size:30px; color:#cac3b7; font-family:PretendardB;}
.faq .faqListWrap .faqList:after {content:""; display:flex; justify-content: center; align-items: center; width:30px; height:90px; font-family:xeicon; font-size:40px; color:#000000;}
.faq .faqListWrap .faqList .faqContent {flex:1;}
.faq .faqListWrap .faqList .faqContent .title {display:flex; align-items: center; min-height:90px; font-size:30px; color:#282828; font-family:PretendardB;}
/*접근성: 질문은 h3 안의 button 으로 마크업 (키보드 조작 기본 지원). 클릭영역을 제목 전체로 확장*/
.faq .faqListWrap .faqList .faqContent .title > button {display:flex; align-items:center; align-self:stretch; flex:1; text-align:left; cursor:pointer;}
.faq .faqListWrap .faqList .faqContent .desc {display:none; font-size:26px; color:#282828; font-family:PretendardR; line-height:1.5;}
.faq .faqListWrap .faqList .faqContent .desc ul li {position:relative; padding-left:30px;}
.faq .faqListWrap .faqList .faqContent .desc ul li:before {content:""; position:absolute; top:50%; left:10px; transform: translateY(-50%); width:5px; height:5px; border-radius:50%; background-color:#222222;}

.faq .faqListWrap .faqList.on {padding-top:20px; padding-bottom:45px; transition:all 0.3s linear;}
.faq .faqListWrap .faqList.on:after {content:"";}



/*
    ************************************* 상담 ***************************************
*/
.consultation {padding:150px 0; background-image:url("../images/consult_bg.jpg"); background-size:cover; background-position:center;}

.consultation .cl_sectionTitle {text-align:left;}
.consultation .cl_sectionTitle .subText {font-size:20px; letter-spacing: 5px; margin-right:-5px;}
.consultation .cl_sectionTitle .mainText {font-size:60px; font-family:PretendardB;}

.consultation .thumbWrap {display:grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap:25px; margin-bottom:80px;}
.consultation .thumbWrap .item img {display:block; width:100%;}

.consultation .buttonWrap {display:flex; justify-content: center; align-items: center; gap:34px; margin-bottom:70px;}
.consultation .buttonWrap .cl_baseButton {width:435px;}

.consultation .infoText {font-size:25px; color:#282828; text-align:center;}



/*
    ************************************* 푸터 ***************************************
*/
footer {padding-bottom:195px;}
footer .footerInfo {padding:65px 0; background-color:#faf8f4;}
footer .footerInfo .termsButtonWrap {display:flex; align-items: center; gap:30px; font-size:20px; color:#282828; font-family:PrentendardM; line-height:1; margin-bottom:25px;}
footer .footerInfo .termsButtonWrap .divider {width:2px; height:15px; background-color:#e3ded4;}
footer .footerInfo .addressWrap {display:flex; justify-content: space-between; align-items: center; font-size:20px; color:#282828; font-family:PretendardM; line-height:1.5;}
footer .footerInfo .addressWrap .space {padding-left:15px;}
footer .footerInfo .addressWrap .footerLogo {position:relative; top:-20px;}


footer .counselInfo {position:fixed; bottom:0; left:0; z-index:100; width:100%; padding:35px 0; background-color:#05210d;}
footer .counselInfo .contentWrap {display:flex; justify-content: space-between; align-items: center;}
footer .counselInfo .infoTextCell {font-size:32px; color:#ffffff; font-family:NanumMjB; line-height: 1.4;}
footer .counselInfo .infoTextCell .highlightText {color:#c9a66b;}
footer .counselInfo .infoTextCell .timeInfo {display:block; font-size:18px; font-family:PretendardR; margin-top:10px;}
footer .counselInfo .buttonCell .cl_baseButton {color:#05210d !important;}

















@media (max-width:1400px) {
    .contentWrap {padding:0 20px; box-sizing: border-box;}




    /*
        ************************************** 헤더 ***************************************
    */
    header {height:80px;}

    header .logo img {height:40px;}

    header nav {font-size:18px;}
    header nav .divider {height:10px; margin:0 20px;}

    header nav .btnTel {padding:8px 20px; margin-left:30px;}
    header nav .btnTel img {height:24px;}



    /*
        ************************************* 메인 비주얼 ***************************************
    */
    .mainVisual {height:800px;}

    .mainVisual .visualText h1 {font-size:50px; line-height:1.3;}
    .mainVisual .visualText h1 .strongText {font-size:60px; margin-top:30px;}
    .mainVisual .visualText .buttonWrap {gap:10px; margin-top:66px;}

    .mainVisual .infoIconWrap {grid-template-columns: repeat(3, 150px); grid-auto-rows: 150px; gap:20px;}
    .mainVisual .infoIconWrap .item {gap:12px;}
    .mainVisual .infoIconWrap .item > img {zoom:0.8;}



    /*
        ************************************* 포트폴리오 ***************************************
    */
    .portfolio {padding:120px 0;}

    .portfolio .portfolioList {grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap:20px;}
    .portfolio .portfolioList .item .overInfo {gap:15px;}
    .portfolio .portfolioList .item .overInfo .engText {font-size:22px;}
    .portfolio .portfolioList .item .overInfo .korText {font-size:18px;}



    /*
        ************************************* 왜 다빈 ***************************************
    */
    .whyDabin {padding:120px 0;}
    .whyDabin .cl_sectionTitle .subText {letter-spacing: 12px; margin-right:-12px;}

    .whyDabin .whyDabinList {grid-auto-rows: 180px; gap:20px;}
    .whyDabin .whyDabinList .item {gap:20px; border-radius:20px; padding:0 20px;}
    .whyDabin .whyDabinList .item .icon {width:90px;}
    .whyDabin .whyDabinList .item .text {gap:10px;}
    .whyDabin .whyDabinList .item .text .title {font-size:24px;}
    .whyDabin .whyDabinList .item .text .desc {font-size:16px;}


    /*
        ************************************* 시공분야 ***************************************
    */
    .fields {padding:120px 0;}

    .fields .cl_sectionTitle .subText {letter-spacing: 12px; margin-right:-12px;}

    .fields .fieldListBox {padding:30px 0; border-radius:15px; box-shadow: 3px 3px 18px rgba(0,0,0,0.08);}
    .fields .fieldListBox .item:after {top:20px; height:220px;}
    .fields .fieldListBox .item .icon {margin-bottom:15px;}
    .fields .fieldListBox .item .icon img {width:90px;}
    .fields .fieldListBox .item .title {font-size:18px; margin-bottom:20px;}
    .fields .fieldListBox .item .desc {font-size:15px;}


    /*
        ************************************* 3D 디자인 프리뷰 ***************************************
    */
    .designPreview {padding:120px 0;}

    .designPreview .cl_sectionTitle .subText {letter-spacing: 5px; margin-right:-5px;}

    .designPreview .renderingBox {margin-bottom:60px;}
    .designPreview .renderingBox .titleCell {padding-left:3vw; padding-top:5vw;}
    .designPreview .renderingBox .titleCell .title {font-size:3vw; margin-bottom:3vw;}
    .designPreview .renderingBox .titleCell .decoText {font-size:1.4vw;}
    .designPreview .renderingBox .titleCell .decoText img {width:8vw; margin-left:1vw;}
    .designPreview .renderingBox .titleCell .thumb {bottom:4.5vw; left:3vw;}
    .designPreview .renderingBox .titleCell .thumb img {width:30vw;}
    .designPreview .renderingBox .renderImgCell {width:70%;}
    .designPreview .renderingBox .renderImgCell img {width:100%;}


    /*
        ************************************* 시공분야 ***************************************
    */
    .process {padding:120px 0;}

    .process .cl_sectionTitle .subText {letter-spacing: 5px; margin-right:-5px;}

    .process .processStepWrap {gap:50px 0;}
    .process .processStepWrap .backLine {top:75px; left:190px; width:87%; height:390px;}
    .process .processStepWrap .item .icon {width:150px; height:150px; margin-bottom:20px;}
    .process .processStepWrap .item .title .num {font-size:20px; margin-bottom:15px;}
    .process .processStepWrap .item .title .text {font-size:28px; margin-bottom:15px;}
    .process .processStepWrap .item .desc {font-size:20px;}


    /*
        ************************************* 시공사례 ***************************************
    */
    .project {padding:120px 0;}



    /*
        ************************************* faq ***************************************
    */
    .faq {padding:120px 0;}

    .faq .cl_sectionTitle .subText {letter-spacing: 5px; margin-right:-5px;}

    .faq .faqListWrap .faqList {gap:25px; padding:0 60px;}
    .faq .faqListWrap .faqList:before {width:25px; height:70px; font-size:26px;}
    .faq .faqListWrap .faqList:after {width:25px; height:70px; font-size:36px;}
    .faq .faqListWrap .faqList .faqContent .title {min-height:70px; font-size:26px;}
    .faq .faqListWrap .faqList .faqContent .desc {font-size:22px;}

    .faq .faqListWrap .faqList.on {padding-top:15px; padding-bottom:35px;}



    /*
        ************************************* 상담 ***************************************
    */
    .consultation {padding:120px 0;}

    .consultation .cl_sectionTitle {text-align:left;}
    .consultation .cl_sectionTitle .subText {font-size:18px; letter-spacing: 5px; margin-right:-5px;}
    .consultation .cl_sectionTitle .mainText {font-size:50px;}

    .consultation .thumbWrap {grid-template-columns: repeat(3, 1fr); gap:20px; margin-bottom:70px;}

    .consultation .buttonWrap {gap:25px; margin-bottom:60px;}
    .consultation .buttonWrap .cl_baseButton {width:400px;}

    .consultation .infoText {font-size:22px;}

}




@media (max-width:980px) {
    /*
        ************************************** 헤더 ***************************************
    */
    body {padding-top:64px;}
    header {position:fixed; top:0; left:0; z-index:100; width:100%; height:64px;}

    header .logo img {height:30px;}

    header nav {display:none;}

    header .btnShowMMenu {display:block;}
    header .btnShowMMenu > img {display:block; height:26px;}



    /*
        *** 모바일 메뉴
    */
    header nav#mobileMenu {
        position: fixed;
        top: 75px;
        right: 20px;
        z-index: 100;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap:12px;
        font-size:16px;
        border-radius: 8px;
        padding: 20px;
        background-color: #05210d;
        transform:translateX(120%);
        transition:all 0.3s ease-out;
    }
    header nav#mobileMenu.on {transform: translateX(0); transition:all 0.3s ease-out;}
    header nav#mobileMenu .divider {width:100%; height:1px; opacity:0.3; margin:0; background-color:#ffffff;}

    header nav#mobileMenu .btnTel {gap:10px; padding:5px 10px; border-radius:5px; margin-left:0;}


    /*
        ************************************* 메인 비주얼 ***************************************
    */
    .mainVisual {height:490px; background-image:url("../images/mainVisual_m.jpg");}
    .mainVisual .visualContent {flex-direction: column; align-items: center; gap:30px;}

    .mainVisual .visualText h1 {font-size:26px; line-height:1.3; text-align: center;}
    .mainVisual .visualText h1 .strongText {font-size:35px; margin-top:15px;}
    .mainVisual .visualText .buttonWrap {display:none;}

    .mainVisual .infoIconWrap {grid-template-columns: repeat(3, 92px); grid-auto-rows: 95px; gap:12px;}
    .mainVisual .infoIconWrap .item {gap:10px; font-size:12px;}
    .mainVisual .infoIconWrap .item > img {zoom:0.5;}



    /*
        ************************************* 포트폴리오 ***************************************
    */
    .portfolio {padding:60px 0;}

    .portfolio .portfolioList {grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap:10px;}
    .portfolio .portfolioList .item .overInfo {gap:8px;}
    .portfolio .portfolioList .item .overInfo .engText {font-size:14px;}
    .portfolio .portfolioList .item .overInfo .korText {font-size:12px;}



    /*
        ************************************* 왜 다빈 ***************************************
    */
    .whyDabin {padding:60px 0;}
    .whyDabin .cl_sectionTitle .subText {letter-spacing: 12px; margin-right:-12px;}

    .whyDabin .whyDabinList {grid-template-columns: repeat(1, 1fr); grid-auto-rows: 140px; gap:10px;}
    .whyDabin .whyDabinList .item {gap:20px; border-radius:20px; padding:0 20px;}
    .whyDabin .whyDabinList .item .icon {width:80px;}
    .whyDabin .whyDabinList .item .text {gap:10px;}
    .whyDabin .whyDabinList .item .text .title {font-size:20px;}
    .whyDabin .whyDabinList .item .text .desc {font-size:14px;}



    /*
        ************************************* 시공분야 ***************************************
    */
    .fields {padding:60px 0;}

    .fields .fieldListBox {display:none;}
    .fields .fieldListWrap_m {display:grid;}



    /*
        ************************************* 3D 디자인 프리뷰 ***************************************
    */
    .designPreview {padding:60px 0;}

    .designPreview .cl_sectionTitle .subText {letter-spacing: 3px; margin-right:-3px;}

    .designPreview .renderingBox {flex-direction:column-reverse; margin-bottom:25px;}
    .designPreview .renderingBox .titleCell {padding:8px 17px;}
    .designPreview .renderingBox .titleCell .title {font-size:15px; margin-bottom:0;}
    .designPreview .renderingBox .titleCell .decoText {display:none;}
    .designPreview .renderingBox .titleCell .thumb {bottom:15px; left:auto; right:15px;}
    .designPreview .renderingBox .titleCell .thumb img {width:45vw;}
    .designPreview .renderingBox .renderImgCell {width:100%;}

    .designPreview .renderingBoxWrap .renderingBox:nth-child(2) .title {text-align: right;}
    .designPreview .renderingBoxWrap .renderingBox:nth-child(2) .titleCell .thumb {left:15px; right:auto;}



    /*
        ************************************* 시공분야 ***************************************
    */
    .process {padding:60px 0; background-size:400%; background-repeat: no-repeat; background-position:0 -200px;}

    .process .cl_sectionTitle .subText {letter-spacing: 3px; margin-right:-3px;}

    .process .processStepWrap {grid-template-columns: repeat(1, 1fr); grid-auto-rows: auto; gap:10px 0;}
    .process .processStepWrap .backLine {display:none;}
    .process .processStepWrap .item {display:flex; align-items: center; border-radius:10px; border:solid 1px #e4ded4; padding:25px; padding-right:10px; background-color:#ffffff;}
    .process .processStepWrap .item .icon {width:80px; height:80px; margin:0; border-radius:0; border:none; margin-right:20px; background-color:transparent;}
    .process .processStepWrap .item .icon img {zoom:0.7;}
    .process .processStepWrap .item .title {display: flex; flex-direction: row; align-items: center; margin-bottom:10px;}
    .process .processStepWrap .item .title .num {font-size:20px; margin-bottom:0; margin-right:5px;}
    .process .processStepWrap .item .title .text {font-size:20px; margin-bottom:0;}
    .process .processStepWrap .item .desc {font-size:14px; text-align:left;}

    .process .processStepWrap .item:nth-of-type(1) {order:1;}
    .process .processStepWrap .item:nth-of-type(2) {order:2;}
    .process .processStepWrap .item:nth-of-type(3) {order:3;}
    .process .processStepWrap .item:nth-of-type(4) {order:4;}
    .process .processStepWrap .item:nth-of-type(5) {order:8;}
    .process .processStepWrap .item:nth-of-type(6) {order:7;}
    .process .processStepWrap .item:nth-of-type(7) {order:6;}
    .process .processStepWrap .item:nth-of-type(8) {order:5;}



    /*
        ************************************* 시공사례 ***************************************
    */
    .project {padding:60px 0;}

    .project .cl_sectionTitle .subText {letter-spacing: 3px; margin-right:-3px;}

    .project .projectList {grid-template-columns: repeat(1, 1fr); gap:15px;}
    .project .projectList .bnaBox .beforeCell:after {height:28px; font-size:14px;}
    .project .projectList .bnaBox .afterCell:after {height:28px; font-size:14px;}



    /*
        ************************************* faq ***************************************
    */
    .faq {padding:60px 0;}

    .faq .cl_sectionTitle .subText {letter-spacing: 3px; margin-right:-3px;}

    .faq .faqListWrap .faqList {gap:10px; padding:0 15px;}
    .faq .faqListWrap .faqList:before {width:20px; height:45px; font-size:15px;}
    .faq .faqListWrap .faqList:after {width:20px; height:45px; font-size:18px;}
    .faq .faqListWrap .faqList .faqContent .title {min-height:45px; font-size:15px;}
    .faq .faqListWrap .faqList .faqContent .desc {font-size:13px;}
    .faq .faqListWrap .faqList .faqContent .desc ul li {padding-left:15px;}
    .faq .faqListWrap .faqList .faqContent .desc ul li:before {top:50%; left:5px; width:4px; height:4px;}

    .faq .faqListWrap .faqList.on {padding-top:5px; padding-bottom:15px;}



    /*
        ************************************* 상담 ***************************************
    */
    .consultation {padding:60px 0;}

    .consultation .cl_sectionTitle {text-align:center;}
    .consultation .cl_sectionTitle .subText {font-size:12px; letter-spacing: 3px; margin-right:-3px;}
    .consultation .cl_sectionTitle .mainText {font-size:30px;}

    .consultation .thumbWrap {grid-template-columns: repeat(2, 1fr); gap:10px; margin-bottom:30px;}
    .consultation .thumbWrap .item:last-child {display:none;}

    .consultation .buttonWrap {flex-direction:column; gap:8px; margin-bottom:30px;}
    .consultation .buttonWrap .cl_baseButton {width:70%;}

    .consultation .infoText {font-size:13px;}



    /*
        ************************************* 푸터 ***************************************
    */
    footer {padding-bottom:0;}
    footer .footerInfo {padding:30px 0;}
    footer .footerInfo .termsButtonWrap {gap:10px; font-size:13px; margin-bottom:15px;}
    footer .footerInfo .termsButtonWrap .divider {width:2px; height:12px;}
    footer .footerInfo .addressWrap {font-size:12px;}
    footer .footerInfo .addressWrap .space {padding-left:10px;}
    footer .footerInfo .addressWrap .footerLogo {top:10px;}
    footer .footerInfo .addressWrap .footerLogo img {width:85px;}

    footer .counselInfo {display:none;}
}