@import url("sub.css");
/* 건축부분 */
.build_cont .build_toptxt {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; margin-bottom: 60px;}
.build_cont .build_grid {counter-reset: counter_name;}
.build_cont .build_grid img {max-width: 100%; height: auto;}
.build_cont .build_grid .imgbox {margin-bottom: 60px;}
.build_cont .build_grid .txtbox {display: flex; flex-direction: column; gap: 15px;}
.build_cont .build_grid .txtbox h4 {position: relative;}
.build_cont .build_grid .txtbox h4::before {content: "0" counter(counter_name); counter-increment: counter_name; font-family: var(--eng); letter-spacing: 0; font-weight: 800; font-size: 2.778rem; line-height: 120%; opacity: 0.1; position: absolute; left: 0; bottom: 10px;}

/* 엔지니어링 부문 */
.basic_cont:has(.engineering_cont) {width: 100%; max-width: 100%; margin-bottom: 0;}
.engineering_cont .engineering_bottom {background: url('/product/img/engineering_bottom.jpg') center center / cover no-repeat; padding-top: 150px;}

.engineering_cont .engineering_bottom_head {display: flex; align-items: center; gap: 30px; max-width: 1380px; margin: 0 auto 140px; width: 90%; position: relative;}
.engineering_cont .engineering_bottom_head .cm {width: 300px; padding: 22px 0 17px; border-radius: 9999px; background: var(--main); text-align: center; position: relative; flex-shrink: 0;}
.engineering_cont .engineering_bottom_head .cm .cm_top {position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 3px 20px; border-radius: 9999px; background: var(--white); border: 2px solid var(--main); line-height: 162.5%; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.20);}
.engineering_cont .engineering_bottom_head .effects {flex-shrink: 0; text-align: center; display: flex; flex-direction: column; align-items: center;}
.engineering_cont .engineering_bottom_head .effects::after {width: 130px; aspect-ratio: 130 / 14; background: url('/product/img/effects_arrow.svg') center / contain no-repeat; content: '';}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list {text-align: center; flex: 1; gap: 10px; counter-reset: counter2;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li {padding: 30px 20px 20px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; backdrop-filter: blur(10px);}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li::before {content: "0" counter(counter2); counter-increment: counter2; font-family: var(--eng); letter-spacing: 0; font-weight: 700; font-size: 15px; position: absolute; left:50%; top: 0; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #888; border-radius: 50%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); line-height: 40px;}

.engineering_cont .engineering_bottom_cont_list {position: relative;}
.engineering_cont .engineering_bottom_cont_list > li {height: 100%; display: flex; flex-direction: column; position: relative;}
.engineering_cont .engineering_bottom_cont_list > li h4 {padding: 22px 15px; text-align: center; background: var(--sub); border-radius: 10px 10px 0 0;}
.engineering_cont .engineering_bottom_cont_list > li ul {padding: 30px 25px; background: rgba(255, 255, 255, 0.9); border-radius: 0 0 10px 10px; flex: 1;}
.engineering_cont .engineering_bottom_cont_list > li ul li {position: relative; padding-left: 11px;}
.engineering_cont .engineering_bottom_cont_list > li ul li + li {margin-top: 5px;}
.engineering_cont .engineering_bottom_cont_list > li ul li::before {width: 3px; aspect-ratio: 1/1; background: var(--sub); position: absolute; top: 13px; left: 0; content: ""; border-radius: 50%;}


.engineering_cont .engineering_bottom_head::before {content: ''; height: 100%; top: 60px; left: 150px; border-left: 1px solid rgba(255, 255, 255, 0.5); content: ''; position: absolute;}
.engineering_cont .engineering_bottom_cont_list::before {content: ''; top: -80px; left: 50%; transform: translateX(-50%); border-bottom: 1px solid rgba(255, 255, 255, 0.5); content: ''; position: absolute; width: calc(((100% + 30px) / 4)* 3);}
.engineering_cont .engineering_bottom_cont_list > li::before {content: ''; height: 80px; top: -80px; left: 50%; transform: translateX(-50%); border-left: 1px solid rgba(255, 255, 255, 0.5); content: ''; position: absolute;}

/*******************************************************************************
    @media 1740px
*******************************************************************************/
@media all and (max-width:1740px){
/* 엔지니어링 부문 */
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li br {display: none;}
}
/*******************************************************************************
    @media ~1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* 엔지니어링 부문 */
.engineering_cont .engineering_bottom_head .cm {width: 250px;}
.engineering_cont .engineering_bottom_head::before {left: 125px;}
}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 건축부분 */
.build_cont br {display: none;}

/* 엔지니어링 */
.engineering_cont .engineering_bottom_head {gap: 15px;}
.engineering_cont .engineering_bottom_head .cm {width: 200px; padding: 18px 0 13px;}
.engineering_cont .engineering_bottom_head .cm .cm_top {font-size: 14px;}
.engineering_cont .engineering_bottom_head .effects::after {width: 110px;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li {padding: 25px 15px 20px;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li::before {width: 35px; line-height: 35px; height: 35px; font-size: 14px;}

.engineering_cont .engineering_bottom_cont_list {gap: 15px;}
.engineering_cont .engineering_bottom_cont_list > li h4 {padding: 18px 12px;}
.engineering_cont .engineering_bottom_cont_list > li ul {padding: 25px 20px;}

.engineering_cont .engineering_bottom_head::before {left: 100px;}
.engineering_cont .engineering_bottom_cont_list::before {width: calc(((100% + 15px) / 4)* 3);}
}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 건축부분 */
.build_cont .build_toptxt {gap: 15px; margin-bottom: 40px;}

.build_cont .build_grid {gap: 15px;}
.build_cont .build_grid .imgbox {margin-bottom: 40px;}
.build_cont .build_grid .txtbox {gap: 10px;}
.build_cont .build_grid .txtbox h4::before {font-size: 2.4rem;}

/* 엔지니어링 부문 */
/* .engineering_cont .engineering_bottom_head {flex-direction: column; margin-bottom: 100px;}
.engineering_cont .engineering_bottom_head .cm::before {display: none;}
.engineering_cont .engineering_bottom_head .effects {margin-bottom: 15px; flex-direction: row; gap: 10px;}
.engineering_cont .engineering_bottom_head .effects::after {width: auto; aspect-ratio: 14 / 130; background-image: url('/product/img/effects_arrow2.svg'); height: 80px;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li {border-radius: 5px; padding: 20px 15px 15px;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li::before {width: 32px; height: 32px; line-height: 32px; font-size: 13px;}

.engineering_cont .engineering_bottom_cont_list {gap: 10px;}
.engineering_cont .engineering_bottom_cont_list::before {width: calc(((100% + 10px) / 4)* 3); top: -50px;}
.engineering_cont .engineering_bottom_cont_list > li::before {top: -50px; height: 50px;}
.engineering_cont .engineering_bottom_cont_list > li h4 {padding: 15px 12px; border-radius: 5px 5px 0 0;}
.engineering_cont .engineering_bottom_cont_list > li ul {padding: 20px 15px; border-radius: 0 0 5px 5px;}
.engineering_cont .engineering_bottom_cont_list > li ul li {padding-left: 10px;}
.engineering_cont .engineering_bottom_cont_list > li ul li::before {top: 11px;} */


.engineering_cont .engineering_bottom {padding-top: 90px;}
.engineering_cont .engineering_bottom_head {gap: 10px; width: 92%; margin-bottom: 100px;}
.engineering_cont .engineering_bottom_head .cm {width: 150px; font-size: 1.1rem; padding: 18px 0 13px;}
.engineering_cont .engineering_bottom_head .cm .cm_top {font-size: 13px; padding: 2px 15px;}
.engineering_cont .engineering_bottom_head .effects::after {width: 90px;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list {gap: 10px;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li {padding: 22px 15px 15px; border-radius: 5px;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li::before {font-size: 13px; width: 32px; height: 32px; line-height: 32px;}

.engineering_cont .engineering_bottom_cont_list {gap: 10px;}
.engineering_cont .engineering_bottom_cont_list > li h4 {padding: 15px 10px;}
.engineering_cont .engineering_bottom_cont_list > li ul {padding: 20px 15px; border-radius: 0 0 5px 5px;}
.engineering_cont .engineering_bottom_cont_list > li ul li {padding-left: 10px;}
.engineering_cont .engineering_bottom_cont_list > li ul li::before {top: 11px;}

.engineering_cont .engineering_bottom_head::before {left: 75px; top: 50px;}
.engineering_cont .engineering_bottom_cont_list::before {width: calc(((100% + 10px) / 4)* 3); top: -50px;}
.engineering_cont .engineering_bottom_cont_list > li::before {top: -50px; height: 50px;}

}
/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
/* 엔지니어링 부문 */

.engineering_cont .engineering_bottom_wrap {position: relative; overflow-x: auto; padding: 20px 0 0;}
.engineering_cont .engineering_bottom_wrap .responsive-dim.show {display: block;}
.engineering_cont .engineering_bottom .engineering_bottom_in {width: 800px;}
}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 건축부분 */
.build_cont .build_toptxt {gap: 10px; margin-bottom: 30px;}
.build_cont .build_grid {gap: 30px; grid-template-columns: repeat(1, 1fr);}
.build_cont .build_grid .imgbox {margin-bottom: 30px;}
.build_cont .build_grid .txtbox {gap: 5px;}
.build_cont .build_grid .txtbox h4::before {font-size: 2.2rem;}

/* 엔지니어링 부문 */
.engineering_cont .engineering_bottom_head {margin-bottom: 70px;}
.engineering_cont .engineering_bottom_head .cm {padding: 15px 0 10px;}
.engineering_cont .engineering_bottom_head .cm .cm_top {font-size: 12px; padding: 1px 10px;}
.engineering_cont .engineering_bottom_head .effects::after {width: 80px;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li {padding: 20px 10px 10px;}
.engineering_cont .engineering_bottom_head .engineering_bottom_head_list li::before {font-size: 12px; width: 30px; height: 30px; line-height: 30px;}

.engineering_cont .engineering_bottom_cont_list > li h4 {padding: 10px;}
.engineering_cont .engineering_bottom_cont_list > li ul {padding: 15px;}
.engineering_cont .engineering_bottom_cont_list > li ul li {padding-left: 9px;}
.engineering_cont .engineering_bottom_cont_list > li ul li::before {top: 10px;}

.engineering_cont .engineering_bottom_head::before {top: 35px;}
.engineering_cont .engineering_bottom_cont_list > li::before {height: 35px; top: -35px;}
.engineering_cont .engineering_bottom_cont_list::before {top: -35px;}
}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){
.engineering_cont .engineering_bottom .engineering_bottom_in {width: 650px;}
}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

}