@import url('sub.css');
/* 공통 */
.service_cont {padding-top:94px}
.tit_wrap {margin-bottom:40px}
.tit_wrap .dots {margin-top:40px}
.toptxt {margin-bottom:60px}
.toptxt p.fs20 {color:var(--basic2)}
.toptxt p:not(.fs20) {color: var(--black); font-size: 1.7rem; font-weight: 400; line-height: 141.176%; letter-spacing: -1.7px; margin-bottom:15px; text-wrap:balance}

/* 건축설계본부 */
.design_cont {}
.design_cont .service_info {margin-bottom:60px}
.design_cont .service_info ul li {display:flex; align-items:center; padding:20px 40px 20px 20px; gap:40px; border:1px solid var(--border)}
.design_cont .service_info ul li + li {margin-top:10px}
.design_cont .service_info ul li .imgbox {max-width:350px; flex-shrink:0; width:40%}
.design_cont .service_info ul li .imgbox img {width:100%; height:auto}
.design_cont .service_info ul li .tbox .fs22 {color:var(--black); font-weight:600; margin-bottom:5px}
.design_cont .service_info ul li .tbox p.fs20 {color:var(--basic2);}

.design_cont .design_process > h4.fs40 {color:var(--black); margin-bottom:60px; font-weight:400}

:root {
 --first-color: #6EBF93;
	--second-color: #3DA96F;
	--third-color: #269F5D;
	--last-color: #146F3E;
}

.design_cont .design_process ol {}
.design_cont .design_process ol li {display:flex; align-items:center}
.design_cont .design_process ol li + li {margin-top:10px}
.design_cont .design_process ol li .num_wrap {width:200px; position:relative}
.design_cont .design_process ol li .num_wrap::before {position:absolute; top:50%; right:0; transform:translateY(-50%); content:""; border-bottom:1px dashed var(--black); width:110px; opacity:0.3}
.design_cont .design_process ol li span.num {width:100px; aspect-ratio:1/1; border-radius:50%; background:rgba(110,191,147,0.2); font-family:var(--eng); font-size: 1rem; font-weight: 700; line-height: 170%; letter-spacing: 0.2px; color:var(--white); display:flex; align-items:center; justify-content:center; position:relative}
.design_cont .design_process ol li span.num span {position:relative; z-index:2}
.design_cont .design_process ol li span.num::before {content:""; position:absolute; top:50%; left:50%; background:var(--first-color); width:80%; height:80%; border-radius:50%; transform:translate(-50%,-50%)} 
.design_cont .design_process ol li dl {display:flex; max-width:1150px; flex:1; border:1px solid var(--border);}
.design_cont .design_process ol li dl dt {width:30%; max-width:315px; display:flex; padding:30px 40px; align-items:center; gap:30px; border-right:1px solid var(--border); flex-shrink:0; flex-grow:0}
.design_cont .design_process ol li dl dt p {color:var(--first-color)}
.design_cont .design_process ol li dl dt p.kor {font-weight:600}
.design_cont .design_process ol li dl dt p.eng {font-size: 0.8rem; line-height: 150%; white-space:nowrap}
.design_cont .design_process ol li dl dd:first-of-type {width:55%; max-width:620px; padding:30px 40px; border-right:1px solid var(--border); flex-shrink:0; flex-grow:0}
.design_cont .design_process ol li dl dd:first-of-type p.fs20 {color:var(--basic2)}
.design_cont .design_process ol li dl dd:first-of-type p.fs20 + p.fs20 {margin-top:2px}
.design_cont .design_process ol li dl dd:last-of-type {flex:1; max-width:215px; display:flex; align-items:center; justify-content:center; background:rgba(245, 245, 245, 0.50);}
.design_cont .design_process ol li dl dd:last-of-type p.fs20 {text-align:center; color: var(--basic2)}
.design_cont .design_process ol li dl dd:last-of-type p.fs20 span.eng {color: var(--black); text-align: center; font-size: 1.1rem; font-weight: 600; line-height: 154.545%; display:block}

.design_cont .design_process ol li:nth-child(2) span.num {background:rgba(61, 169, 111, 0.2)}
.design_cont .design_process ol li:nth-child(2) span.num::before {background:var(--second-color);}
.design_cont .design_process ol li:nth-child(2) dl dt p {color:var(--second-color);}

.design_cont .design_process ol li:nth-child(3) span.num {background:rgba(38, 159, 93, 0.2)}
.design_cont .design_process ol li:nth-child(3) span.num::before {background:var(--third-color);}
.design_cont .design_process ol li:nth-child(3) dl dt p {color:var(--third-color);}

.design_cont .design_process ol li:nth-child(4) span.num {background:rgba(13, 148, 75, 0.2)}
.design_cont .design_process ol li:nth-child(4) span.num::before {background:var(--main);}
.design_cont .design_process ol li:nth-child(4) dl dt p {color:var(--main);}

.design_cont .design_process ol li:nth-child(5) span.num {background:rgba(20, 112, 62, 0.2)}
.design_cont .design_process ol li:nth-child(5) span.num::before {background:var(--last-color);}
.design_cont .design_process ol li:nth-child(5) dl dt p {color:var(--last-color);}

/* 건설사업관리본부 */
.business_cont {}
.business_cont .whiteBg {padding:80px 60px; background:var(--white);}
.business_cont article {display:flex; align-items:flex-start; gap:30px}
.business_cont article + article {margin-top:60px}
.business_cont article > h4 {color: var(--black); font-size: 1.3rem; font-weight: 400; line-height: 161.538%; letter-spacing: -1.3px; width:235px; flex-shrink:0}
.business_cont article .article_cont > p.fs20 {color:var(--basic2); margin-bottom:30px}
.business_cont article .article_cont ul {display:grid; grid-template-columns:repeat(3, 1fr);}
.business_cont article .article_cont ul li {padding:30px 40px; display:flex; gap:30px; align-items:center}
.business_cont article .article_cont ul li:nth-child(2n) {background:rgba(245, 245, 245, 0.50);}
.business_cont article .article_cont ul li .fs20 {color:var(--black)}
.business_cont article .article_cont ul li .fs16 {display:block; color:var(--basic); margin-top:-5px}

.business_cont article:nth-child(2) .article_cont ul li {background:var(--grayBg)}
.business_cont article:nth-child(2) .article_cont ul li:nth-child(2n) {background:var(--white)}

.business_cont .dia_wrap_m {display:none} 
.business_cont .dia_wrap {height:560px; display:flex; align-items:center; justify-content:center; position:relative}
.business_cont .dia .dia_tit_wrap {width:520px; aspect-ratio:1/1; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative}
.business_cont .dia .dia_tit_wrap::before {content:""; width:100%; height:100%; background:rgba(17,17,17,0.04); border-radius:50%; position:Absolute; top:0; left:0}
.business_cont .dia .dia_tit_wrap::after {content:""; width:340px; height:340px; background:rgba(17,17,17,0.04); border-radius:50%; position:Absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.business_cont .dia .dia_tit {width:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--black); border-radius: 50%; background:var(--white); position:relative; z-index:2; aspect-ratio:1/1}
.business_cont .dia .dia_tit .eng {text-align: center; font-size: 1rem; font-weight: 700; line-height: 170%; letter-spacing: 0.2px; text-transform: uppercase;}
.business_cont .dia .dia_tit .kor {font-weight: 600;}
.business_cont .dia .dia_item {width:190px; aspect-ratio:1/1; border-radius:50%; background:var(--main); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:absolute; /* left:210px */}
.business_cont .dia .dia_item p.fs20 {color:var(--white)}

.business_cont .dia .dia_list {width:220px; aspect-ratio:1/1; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)}
/* .business_cont .dia .dia_item:nth-child(2) {top:20px; right:258px; width:170px; left:auto; background:var(--third-color)}
.business_cont .dia .dia_item:nth-child(3) {top:159px; right:83px; width:180px; left:auto; background:var(--last-color)}
.business_cont .dia .dia_item:nth-child(4) {top:350px; right:210px; width:160px; left:auto;}
.business_cont .dia .dia_item:nth-child(5) {top:400px; width:160px; left:310px;}
.business_cont .dia .dia_item:nth-child(6) {top:250px; width:170px; left:120px; background:var(--first-color)} */
.business_cont .dia .dia_item:nth-child(1) {top:20px; left:28px; transform:translate(-100%, -100%)}
.business_cont .dia .dia_item:nth-child(2) {width:170px; background:var(--third-color); transform:translate(100%, -100%); right:55px; top:20px;}
.business_cont .dia .dia_item:nth-child(3) {width:180px; background:var(--last-color); right:-110px; top:-11px; transform:translate(100%, 0);}
.business_cont .dia .dia_item:nth-child(4) {width:160px; transform:translate(100%, 0); right:0; bottom:-120px}
.business_cont .dia .dia_item:nth-child(5) {width:160px; bottom:-170px; left:-62px; background:var(--third-color);}
.business_cont .dia .dia_item:nth-child(6) {width:170px; left:-82px; bottom:-30px; background:var(--first-color); transform:translate(-100%, 0);}



/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
.toptxt br {display:none}
.design_cont .service_info ul li .tbox br {display:none}

.design_cont .design_process ol li dl dt p.eng {white-space:wrap}

/* .business_cont .dia .dia_item:nth-child(1) {left:21.7%; width:170px}
.business_cont .dia .dia_item:nth-child(2) {right:26.7%; width:150px}
.business_cont .dia .dia_item:nth-child(3) {right:8.6%; width:160px}
.business_cont .dia .dia_item:nth-child(4) {right:21.7%; width:140px}
.business_cont .dia .dia_item:nth-child(5) {left:32.1%; width:140px}
.business_cont .dia .dia_item:nth-child(6) {left:12.4%; width:150px} */
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 공통 */
.toptxt {margin-bottom:50px}

/* 건축설계본부 */
.design_cont {}
.design_cont .service_info {margin-bottom:50px}
.design_cont .service_info ul li {gap:30px; padding:20px 30px 20px 20px;}

.design_cont .design_process > h4.fs40 {margin-bottom:50px}
.design_cont .design_process ol li .num_wrap {width:150px}
.design_cont .design_process ol li span.num {width:90px}
.design_cont .design_process ol li dl dt {gap:20px; padding:20px 30px}
.design_cont .design_process ol li dl dt i img {width:50px; height:auto}
.design_cont .design_process ol li dl dd:first-of-type {padding:20px 30px}

/* 건설사업관리본부 */
.business_cont article > h4 {width:160px}
.business_cont article .article_cont ul li {padding:20px 25px; flex-wrap:wrap; gap:10px; justify-content:center;}
.business_cont article .article_cont ul li i img {width:55px; height:auto}
.business_cont article .article_cont ul li p.fs20 {width:100%; text-align:center}

.business_cont .dia_wrap {height:452px; margin-top:35px}
.business_cont .dia .dia_tit_wrap {width:400px}
.business_cont .dia .dia_tit_wrap::after {width:300px; height:300px}
.business_cont .dia .dia_tit {width:200px}
.business_cont .dia .dia_item i img {height:50px; width:auto}
.business_cont .dia .dia_item p.fs20 {font-size:18px}

.business_cont .dia .dia_list {width:200px}
.business_cont .dia .dia_item:nth-child(1) {width:150px;} 
.business_cont .dia .dia_item:nth-child(2) {width:130px} 
.business_cont .dia .dia_item:nth-child(3) {width:140px; right:-80px; top:30px} 
.business_cont .dia .dia_item:nth-child(4) {width:125px; right:20px; bottom:-110px} 
.business_cont .dia .dia_item:nth-child(5) {width:125px; bottom:-125px} 
.business_cont .dia .dia_item:nth-child(6) {width:130px; left:-60px; bottom:0} 

/* .business_cont .dia .dia_item:nth-child(1) {left:21.7%; width:150px}
.business_cont .dia .dia_item:nth-child(2) {right:26.7%; width:130px}
.business_cont .dia .dia_item:nth-child(3) {right:8.6%; width:140px}
.business_cont .dia .dia_item:nth-child(4) {right:21.7%; width:120px}
.business_cont .dia .dia_item:nth-child(5) {left:32.1%; width:120px}
.business_cont .dia .dia_item:nth-child(6) {left:12.4%; width:130px} */
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.tit_wrap {margin-bottom:25px}
.tit_wrap .dots {margin-top:25px}
.service_cont {padding-top:70px}
.toptxt {margin-bottom:40px}
.toptxt p:not(.fs20) {margin-bottom:10px}

/* 건축설계본부 */
.design_cont .service_info {margin-bottom:40px}
.design_cont .service_info ul li .imgbox {width:35%}
.design_cont .service_info ul li .tbox .fs22 {margin-bottom:2px; font-size:18px}

.design_cont .design_process > h4.fs40 {margin-bottom:40px}
.design_cont .design_process ol li .num_wrap {width:100px}
.design_cont .design_process ol li .num_wrap::before {width:40px}
.design_cont .design_process ol li span.num {width:70px}
.design_cont .design_process ol li dl dt {gap:20px; padding:15px 20px; flex-direction:column; text-align:center; gap:10px}
.design_cont .design_process ol li dl dt i img {width:45px;}
.design_cont .design_process ol li dl dt p.eng {font-size:13px}
.design_cont .design_process ol li dl dd:first-of-type {padding:15px 20px; display:flex; flex-direction:column; justify-content:center}
.design_cont .design_process ol li dl dd:first-of-type p.fs20 + p.fs20 {margin-top:0}

/* 건설사업관리본부 */
.business_cont .whiteBg {padding:40px 30px}
.business_cont article {gap:0}
.business_cont article .article_cont > p.fs20 {margin-bottom:20px}
.business_cont article .article_cont ul li {padding:15px 20px}
.business_cont article .article_cont ul li i img {width:50px;}
.business_cont article {flex-direction:column; gap:5px}
.business_cont article > h4 {width:100%;}
.business_cont article .article_cont ul li .fs16 {margin-top:-3px}

.business_cont .dia .dia_item p.fs20 {font-size:16px}
.business_cont .dia .dia_item i img {height:45px; width:auto}

.business_cont .dia_wrap {margin-top:25px}
.business_cont .dia .dia_tit span {font-size:20px}
}

/*******************************************************************************
    @media  ~768px               
*******************************************************************************/
@media all and (max-width:768px){
/* 건축설계본부 */
.design_cont .service_info ul li {flex-direction:column; gap:15px; padding:20px}
.design_cont .service_info ul li .imgbox {width:100%; max-width:100%}

.business_cont .dia_wrap {display:none}
.business_cont .dia_wrap_m {display:block}
.business_cont .dia_wrap_m .dia_tit {color:var(--black); margin-bottom:15px; display:flex; gap:3px}
.business_cont .dia_wrap_m .dia_tit .eng {font-size: 1rem; font-weight: 700; line-height: 170%; letter-spacing: 0.2px; text-transform: uppercase;}
.business_cont .dia_wrap_m .dia_tit .kor {font-weight: 600;}
.business_cont article .article_cont .dia_wrap_m ul li {background:var(--main); border-bottom:1px solid var(--white); border-right:1px solid var(--white);}
.business_cont article .article_cont .dia_wrap_m ul li p.fs20 {color:var(--white);}
.business_cont article .article_cont .dia_wrap_m ul li:nth-child(3n) {border-right:0}
.business_cont article .article_cont .dia_wrap_m ul li i img {width:Auto; height:45px}

.business_cont article .article_cont .dia_wrap_m ul li:nth-child(2) {background:var(--third-color)}
.business_cont article .article_cont .dia_wrap_m ul li:nth-child(3) {background:var(--last-color)}
.business_cont article .article_cont .dia_wrap_m ul li:nth-child(4) {background:var(--main)}
.business_cont article .article_cont .dia_wrap_m ul li:nth-child(5) {background:var(--third-color)}
.business_cont article .article_cont .dia_wrap_m ul li:nth-child(6) {background:var(--first-color)}
}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 공통 */
.tit_wrap .dots {margin-top:15px}
.service_cont {padding-top:60px}
.toptxt {margin-bottom:30px}
.toptxt p:not(.fs20) {margin-bottom:5px}

/* 건축설계본부 */
.design_cont .service_info {margin-bottom:30px}
.design_cont .service_info ul li {padding:15px}

/* .design_cont .design_process > h4.fs40 {margin-bottom:30px}
.design_cont .design_process ol li {display:block}
.design_cont .design_process ol li + li {margin-top:20px}
.design_cont .design_process ol li .num_wrap {margin:0 auto; padding:0 0 15px; width:fit-content}
.design_cont .design_process ol li .num_wrap::before {width:auto; height:40px; top:auto; right:auto; height:40px; left:50%; transform:translate(-50%); border-right:1px dashed var(--black); border-bottom:0; bottom:0}
.design_cont .design_process ol li dl dt {padding:15px}
.design_cont .design_process ol li dl dt i img {width:40px;}
.design_cont .design_process ol li dl dd:first-of-type {padding:15px}
.design_cont .design_process ol li dl dd:last-of-type p.fs20 span.eng {font-size:14px} */
.design_cont .design_process > h4.fs40 {margin-bottom:30px}
.design_cont .design_process ol li .num_wrap {width:70px}
.design_cont .design_process ol li span.num {width:50px; font-size:13px}
.design_cont .design_process ol li dl dt {padding:15px; justify-content:center}
.design_cont .design_process ol li dl dt i img {width:40px;}
.design_cont .design_process ol li dl dd:first-of-type {padding:15px; width:50%}
.design_cont .design_process ol li dl dd:last-of-type p.fs20 span.eng {font-size:14px}

/* 건설사업관리본부 */
.business_cont .whiteBg {padding:30px 25px}
.business_cont article .article_cont ul li {padding:15px}
.business_cont article .article_cont ul li i img {width:45px;}
.business_cont article .article_cont ul li .fs16 {font-size:13px}

}
/*******************************************************************************
    @media ~480px             
*******************************************************************************/
@media all and (max-width:480px){
.design_cont .design_process ol li dl {flex-wrap:wrap}
.design_cont .design_process ol li span.num {width:55px}
.design_cont .design_process ol li dl dt {width:100%; max-width:100%; border-bottom:1px solid var(--border); border-right:0; flex-direction:row; padding:12px; justify-content:center; text-align:left; gap:15px; text-align:center}
.design_cont .design_process ol li dl dd:first-of-type {width:60%}

/* 건설사업관리본부 */
.business_cont article .article_cont ul {grid-template-columns:repeat(2, 1fr)}
.business_cont article:nth-child(1) .article_cont ul li:nth-child(3) {background:var(--grayBg)}
.business_cont article:nth-child(1) .article_cont ul li:nth-child(4) {background:var(--white)}
.business_cont article:nth-child(2) .article_cont ul {grid-template-columns:repeat(1, 1fr)}

.business_cont article .article_cont .dia_wrap_m ul li:nth-child(2n) {border-right:0}
.business_cont article .article_cont .dia_wrap_m ul li:nth-child(3n) {border-right:1px solid var(--white)}

}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

}