@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.fs18 {color:var(--basic2)}
.toptxt p:not(.fs18) {color: var(--black); font-size: 1.7rem; font-weight: 400; line-height: 130%; margin-bottom:15px; text-wrap:balance}

/* 건축설계본부 */
.design_cont .service_info {margin-bottom:0 !important}
.design_cont .service_info ul li {display:flex; align-items:center; padding:20px 40px 20px 20px; gap:40px; box-shadow:0 0 0 1px 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.fs18 {color:var(--basic2);}



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

.design_fed > h4.fs50 {color:var(--black); margin-bottom:20px; font-weight:400}
.design_fed .design_fed_list_wrap h5 {color:var(--black); margin-bottom:30px; font-weight:600; font-size:1.1rem; line-height:163.636%}
.design_fed > p.fs18 {color:var(--basic2); margin-bottom:40px;}

.design_fed ol {display:grid; grid-template-columns:repeat(2,1fr); grid-gap:30px}
.design_fed ol li {display:flex; align-items:center}
.design_fed ol li .num_wrap {width:160px; position:relative}
.design_fed 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_fed ol li span.num {width:130px; aspect-ratio:1/1; border-radius:50%; background:rgba(61,169,111,0.2); display:flex; align-items:center; justify-content:center; position:relative}
.design_fed ol li span.num span {position:relative; z-index:2}
.design_fed ol li span.num::before {content:""; position:absolute; top:50%; left:50%; background:var(--second-color); width:110px; height:110px; border-radius:50%; transform:translate(-50%,-50%)} 
.design_fed ol li p.fs18 {padding:30px 25px; flex:1; color:var(--black); background:var(--white)}


.design_fed ol li:nth-child(2) span.num {background:rgba(38, 159, 93, 0.2)}
.design_fed ol li:nth-child(2) span.num::before {background:var(--third-color);}

.design_fed ol li:nth-child(3) span.num {background:rgba(13, 148, 75, 0.2)}
.design_fed ol li:nth-child(3) span.num::before {background:var(--main);}

.design_fed ol li:nth-child(4) span.num {background:rgba(20, 111, 62, 0.2)}
.design_fed ol li:nth-child(4) span.num::before {background:var(--last-color);}

/* 건설사업관리본부 */
.business_cont {}
.business_cont .whiteBg {padding:80px 60px; border:1px solid var(--border)}
.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: 150%; width:300px; flex-shrink:0}
.business_cont article .article_cont > p.fs18 {color:var(--basic2); margin-bottom:30px}
.business_cont article .article_cont ul {display:grid; grid-template-columns:repeat(2, 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(2) {background:rgba(245, 245, 245, 0.50);}
.business_cont article .article_cont ul li:nth-child(3) {background:rgba(245, 245, 245, 0.50);}
.business_cont article .article_cont ul li:nth-child(6) {background:rgba(245, 245, 245, 0.50);}
.business_cont article .article_cont ul li .fs18 {color:var(--black); line-height:1.4}
.business_cont article .article_cont ul li .fs16 {display:block; color:var(--basic); line-height:1.5;}

.business_cont article:nth-child(2) .article_cont ul {display:grid; grid-template-columns:repeat(1, 1fr);}
.business_cont article:nth-child(2) .article_cont ul li {background:rgba(245, 245, 245, 0.50); padding:25px 40px;}
.business_cont article:nth-child(2) .article_cont ul li:nth-child(2) {background:var(--white)}
.business_cont article:nth-child(2) .article_cont ul li .fs18 {display:flex; align-items:center; gap:8px}

.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; position:relative; top:2.5px}
.business_cont .dia .dia_tit .eng2 {font-weight: 600; text-transform: uppercase; position:relative; top:-2.5px}
.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.fs18 {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(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_fed ol li p.fs18 br {display:none}

.business_cont article > h4 {width:260px}

.business_cont article .article_cont ul li {padding:25px 30px}
.business_cont article .article_cont ul li i img {width:55px; height:auto}

.business_cont .dia_wrap {height:452px; transform:scale(0.95)}
.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.fs18 {font-size:16px}

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

/*******************************************************************************
    @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.fs50 {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}

.design_fed ol {grid-gap:15px}
.design_fed ol li p.fs18 {padding:20px 15px}
.design_fed ol li .num_wrap {width:140px}
.design_fed ol li span.num {width:110px; }
.design_fed ol li span.num::before {width:90px; height:90px}
.design_fed ol li img {width:60px; height:auto}
.design_fed ol li:nth-child(2) img {width:55px;}
.design_fed ol li:nth-child(3) img {width:62px;}
.design_fed ol li:nth-child(4) img {width:62px;}


/* 건설사업관리본부 */
.business_cont article > h4 {font-size:1rem; width:190px}
.business_cont article .article_cont > p.fs18 {font-size:0.9rem}
.business_cont article .article_cont ul li p.fs18 {font-size:0.8rem}
.business_cont article .article_cont ul li .fs16 {font-size:14px}
.business_cont article > h4 br {display:none}
.business_cont article .article_cont ul li {padding:20px 25px;}
.business_cont article .article_cont ul li i img {width:50px; height:auto}
.business_cont article:nth-child(2) .article_cont ul li {gap:20px; padding:20px 25px}

.business_cont .dia_wrap {transform:scale(0.87)}
}

/*******************************************************************************
    @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}

/* 건축설계본부 */
.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_fed > h4.fs50 {margin-bottom:15px}
.design_fed > p.fs18 {margin-bottom:25px}
.design_fed > .fs18 br {display:none}
.design_fed .design_fed_list_wrap h5 {margin-bottom:20px}
.design_fed ol {grid-template-columns:repeat(1,1fr);}
.design_fed ol {grid-gap:10px}
.design_fed ol li p.fs18 {padding:15px}

/* 건설사업관리본부 */
.business_cont .whiteBg {padding:40px 30px}
.business_cont article {gap:0}
.business_cont article .article_cont > p.fs18 {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%; font-size:1.3rem}
.business_cont article .article_cont ul li p.fs18 {font-size:14px}

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

.business_cont .dia .dia_tit span {font-size:20px !important}

.business_cont article:nth-child(2) .article_cont ul li {padding:15px 20px;}
/* .business_cont article:nth-child(2) .article_cont ul {grid-template-columns:repeat(3,1fr);} 
.business_cont article:nth-child(2) .article_cont ul li .fs18 {display:block}*/
}

/*******************************************************************************
    @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 article .article_cont ul li {flex-wrap:wrap; justify-content:center; gap:15px; align-items:flex-start}
.business_cont article .article_cont ul li p.fs18 {width:100%; text-align:center}
.business_cont article:nth-child(2) .article_cont ul li {align-items:center; justify-content:flex-start; align-items:center; flex-wrap:nowrap}
.business_cont article:nth-child(2) .article_cont ul li .fs18 {width:auto}

.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.fs18 {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); border-right:1px solid var(--white);}
.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){
/* 탭 스타일 */
.tab ul {justify-content:flex-start !important; box-sizing:border-box; gap:0 !important; width:fit-content; margin-left:auto; margin-right:auto}
.tab li a {margin:0 10px}

/* 공통 */
.tit_wrap .dots {margin-top:15px}
.service_cont {padding-top:60px}
.toptxt {margin-bottom:30px}

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

.design_fed ol li .num_wrap {width:100px}
.design_fed ol li .num_wrap::before {width:100px}
.design_fed ol li span.num {width:80px}
.design_fed ol li span.num::before {width:70px; height:70px}
.design_fed ol li img {width:50px;}
.design_fed ol li:nth-child(2) img {width:40px;}
.design_fed ol li:nth-child(3) img {width:52px;}
.design_fed ol li:nth-child(4) img {width:52px;}


/* 건설사업관리본부 */
.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}
.business_cont article .article_cont > p.fs18 {font-size:14px}

.business_cont article:nth-child(2) .article_cont ul li {padding:10px 15px;}
}
/*******************************************************************************
    @media ~480px             
*******************************************************************************/
@media all and (max-width:480px){

/* 건설사업관리본부 */
.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)}

.business_cont article:nth-child(2) .article_cont ul li {flex-direction:column; gap:10px}
.business_cont article:nth-child(2) .article_cont ul li .fs18 {width:100%; display:block; text-align:center}

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

}