@import url('sub.css'); 

#overview .top {margin:0 0 40px;}
#overview .top h3 {text-transform:uppercase; letter-spacing:0;}
#overview .top .tit {display:flex; flex-direction:column; gap:20px;}
#overview .top .tit .eng {font-size:5.882352941176471rem; line-height:1.2; color:var(--black);}
#overview .hero {display:block; overflow:hidden; width:100%; height:650px; background:url('/about/img/overview_bg.jpg') no-repeat center/cover;}
#overview .line {counter-reset:ovline; border-top:1px solid rgba(47,43,42,0.12);}
#overview .line li {counter-increment:ovline; border-bottom:1px solid rgba(47,43,42,0.12); padding:30px 0;}
#overview .line li .in {display:flex; align-items:center; max-width: 780px; margin:0 auto; width:90%;}
#overview .line li .in p.eng {display:flex; align-items:center; flex:1; color:var(--black);}
#overview .line li .in p.eng::before {content:counter(ovline, decimal-leading-zero); font-family:var(--eng); font-size:0.8823529411764706rem; font-weight:600; line-height:1.666666666666667; color:var(--main); margin-right:14px;}
#overview .line li .in .fs17 {color:var(--basic); white-space:nowrap;}
#overview .mid {display:flex; flex-direction:column; gap:40px;}
#overview .mid .txt .fs46 {line-height:1.260869565217391;}
#overview .card {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px;}
#overview .card li {position:relative; aspect-ratio:510 / 563; display:block; overflow:hidden;}
#overview .card li > img {width:100%;  display:block;}
#overview .card li .fs25 {display:flex; align-items:center; gap:0 20px; position:absolute; left:0; bottom:0; color:var(--white); width:100%; font-weight: 600; letter-spacing: 0; padding:45px; box-sizing: border-box;}
#overview .core {display:flex; flex-direction:column; gap:40px;}
#overview .core .core_list {background:var(--grayBg); padding:100px 60px;}
#overview .core ul {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 20px; max-width: 950px; margin:0 auto;}
#overview .core ul li {display:flex; flex-direction:column; align-items:center; gap:20px;}
#overview .core ul li i {width:100%; aspect-ratio: 1 / 1; border-radius:100%; display:flex; align-items:center; justify-content:center; background-color: var(--white); position:relative;}
#overview .core ul li i::after {content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:calc(100% - 30px); aspect-ratio: 1 / 1; border-radius:100%; border:1px solid var(--main); z-index:1; opacity: 0.3;}
#overview .core ul li i img {max-width: 50%;}
#overview .core ul li .eng {color:var(--black); text-align:center; letter-spacing: 0;}




#people {position:relative; overflow:hidden; z-index: 10;}
#people::before {content:''; position:absolute; left:0%; top:0; width:100%; height:100%; background:url('/about/img/people_bg.png') no-repeat center bottom/cover;  pointer-events:none;} 
#people .in {display:flex; align-items:flex-start; justify-content:center; gap:80px;}
#people figure {flex:none; width:270px; background:var(--white); overflow:hidden;}
#people figure img {width:100%;}
#people .txt {flex:1; min-width:0;}
#people .txt .fs21 {color:var(--black); font-weight: 600; margin:0 0 20px;}
#people .txt .fs17+.fs17 {margin:10px 0 0;}

#people .ceo {display:flex; align-items:flex-end; position:relative; padding:65px 0 0;}
#people .ceo .fs21 {display:flex; gap:5px; font-weight: 300; color:var(--black);}
#people .ceo .fs21 b {letter-spacing: inherit; font-weight: 700;}
#people .ceo img {margin-left: 16px; position:relative; z-index: 10; top:-8px;}



.mart95 {margin:95px 0 0;}
.sub_nav_list {margin:70px 0; position:relative; z-index:10;}
.sub_nav_list::after {content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--black); z-index: 1;}
.sub_nav_list ul {display:flex; flex-wrap: wrap;}
.sub_nav_list ul li {position:relative; flex:1;}
.sub_nav_list ul li a {display:flex; align-items:center; justify-content:center; gap:0 7px; padding:20px 10px; box-sizing: border-box; background:var(--grayBg); border:1px solid var(--border); border-bottom: 0;}
.sub_nav_list ul li a .fs15 {color: var(--light); font-weight:400 !important;}

.sub_nav_list ul li.on {z-index:20;}
.sub_nav_list ul li.on a {border-color: var(--black); background:var(--white); font-weight: 600;}
.sub_nav_list ul li.on::after {content:''; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background:var(--white); z-index:60;}

#recruit .tit {margin:0 0 40px;}
#recruit .tit .fs46 {color:var(--black);}
#recruit .tit .fs17 {margin:20px 0 0;}
.process {position:relative; display:flex; align-items:flex-start; justify-content:center;  gap:30px 110px;}
.process::before {content:''; position:absolute; left:0; top:66px; width:100%; height:18px; border-radius:500px; background:linear-gradient(90deg, #DC471A 16.627%, #DC921A 83.373%);}
.process li {position:relative; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:15px; z-index:1;}
.process li::before {content:'\e5c8'; font-size:18px; display:block; line-height:1; color:var(--white); font-family: var(--icon); position: absolute; top:66px; right:-65px; opacity:0.5;}
.process i {width:150px; aspect-ratio:1 / 1; border-radius:100%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.8); box-shadow:0 0 13px rgba(0,0,0,0.05); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);}
.process i::after {content:''; border:1px solid rgba(220,71,26,0.25); width:calc(100% - 22px); aspect-ratio:1 / 1; border-radius:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; box-sizing: border-box;}
.process i img {/* max-width:52%;  */height:auto; display:block;}
.process .fs17 {text-align:center; }
.process li:last-of-type::before {display:none;}

#recruit .section_btn {text-align:center; margin:40px 0 0;}




/**** S:: 회사소개 > 오시는길 ****/
.loca_map_wrap {width:100%; height: 520px; background:url("/about/img/location_map.jpg") no-repeat center/cover; position:relative;}
.loca_map_wrap::after {content:''; width:100%; height:100%; border:1px solid var(--border); box-sizing:border-box; position:absolute; top:0; left:0; z-index:10;}
.root_daum_roughmap_landing, .root_daum_roughmap .wrap_map {height:100% !important; width:100% !important;}
.loca_map_info {margin:30px 0 0; position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:20px 10px;}
.loca_map_info .fs21 {display:flex; /* flex-wrap:wrap;  */gap:0 6px; margin:0 0 10px; font-weight: 600;}
.loca_map_info .fs21::before {content:'\e0c8'; font-size:27px; line-height:1; font-family:var(--icon); display:block; position:relative; top:2px; flex-shrink: 0; font-weight:500;}
.loca_map_info small {display:inline-block; letter-spacing: 0;}
.loca_map_info small+small {margin-left:20px;}
.loca_map_info small b {color:var(--black); font-weight:600; display:inline-block; margin-right:8px; letter-spacing: var(--letter-spacing-default);}
.root_daum_roughmap .map_border {display:none;}
.loca_map_info .loca_btn {display:flex; flex-wrap:wrap; gap:0 2px; width:324px; }
.loca_map_info .loca_btn a {flex:1; height:55px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;  font-weight:600; line-height:1; border-radius:50px; padding: 0 23px; box-sizing: border-box; box-sizing:border-box;}
.loca_map_info .loca_btn a::after {content:''; display:inline-block; mask-repeat:no-repeat; mask-position:center; mask-size:100%; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:100%; background-color:currentColor;}
.loca_map_info .loca_btn a.naver {background:#03CF5D; color:#fff; border:2px solid #03CF5D;}
.loca_map_info .loca_btn a.naver::after {width:21px; aspect-ratio:14/18; mask-image:url("/about/img/naver.svg"); -webkit-mask-image:url("/about/img/naver.svg");}
.loca_map_info .loca_btn a.naver:hover {background:#fff; color:#03CF5D;}
.loca_map_info .loca_btn a.kakao {background:#FEE102; color:#1A0000; border:2px solid #FEE102;}
.loca_map_info .loca_btn a.kakao::after {width:21px; aspect-ratio:9/18; mask-image:url("/about/img/kakao.svg"); -webkit-mask-image:url("/about/img/kakao.svg");}
.loca_map_info .loca_btn a.kakao:hover {background:#1A0000; border-color:#1A0000; color:#FEE102;}
/**** E:: 회사소개 > 오시는길 ****/






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


#overview .card {gap:20px;}

#people .in {gap:60px;}

.process {gap:30px 50px;}
.process li::before {right:-35px;}


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


#overview .top .tit .eng {font-size:5rem;}

#people .in {gap:40px;}




#recruit .tit br {display:none;}

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


#overview .top .tit .eng {font-size:4rem;}
#overview .hero {height: 480px;}
#overview .line li {padding:20px 0;}

#overview .card li .fs25 {padding:20px;}
#overview .card li i img {width:40px;}


#people figure {width:220px;}
#people .txt br {display: none;}

#recruit .tit {margin:0 0 25px;}
#recruit .tit .fs17 {margin:10px 0 0;}

.process {gap:30px 35px;}
.process::before {top:42px;}
.process li::before {right:-26px; top:41px;}
.process i {width:100px;}
.process i::after {width: calc(100% - 11px);}
.process i img {max-width:50px;}

/**** S:: 회사소개 > 오시는길 ****/
.loca_map_wrap {height:420px;}
.loca_map_info .loca_btn {width:100%;}
/**** E:: 회사소개 > 오시는길 ****/



}

/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:768px) { 


.process {flex-wrap:wrap; gap:3s0px; padding:20px 0;}
.process::before {content: '';  position: absolute;  left: 40px; top: 0;  width: 18px; height: 100%;  border-radius: 50px;  background: linear-gradient(180deg, #DC471A 16.627%, #DC921A 83.373%);}
.process li {flex:none; width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; flex-direction: row;}
.process li::before {content:'\f1e3'; right:auto; top:auto; left:40px; bottom:-24px;}
.process li br {display:none;}
.process i img {max-width:50px; max-height:50px;}

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

#overview .mid .txt .fs46 br {display: none;}
#overview .top {margin:0 0 20px;}
#overview .top .tit {gap:10px;}
#overview .top .tit .eng {font-size:3rem;}
#overview .hero {height: 300px;}

#overview .line li {padding:12px 0;}
#overview .line li .in {flex-wrap: wrap;}
#overview .line li .in p.eng {flex:none; width: 100%; align-items:flex-start;}
#overview .line li .in p.eng::before {margin-right: 0; position:relative; top:3px; width:22px;}
#overview .line li .in p.fs17 {width: 100%; margin:5px 0 0; padding-left:22px; box-sizing:border-box;}

#overview .mid {gap:20px;}
#overview .card {display: grid; grid-template-columns: repeat(1, minmax(0, 1fr));}
#overview .card li {aspect-ratio: 510 / 320;}
#overview .card li i img {width: 30px;}
#overview .card li .fs25 {padding:15px; gap:0 15px;}

#overview .core {gap:20px;}
#overview .core .core_list {padding:50px 20px;}
#overview .core ul {grid-template-columns: repeat(2, minmax(0, 1fr)); gap:25px 15px;}
#overview .core ul li {gap:10px;}
#overview .core ul li i::after {width: calc(100% - 16px);}

#people .in {flex-direction:column; align-items:flex-start; gap:25px; padding:0 0 60px;}
#people figure {width:70%; height:auto; aspect-ratio:270 / 220; /* margin:0 auto; */}
#people figure img {height:100%;}

#people .txt .fs21 {margin:0 0 15px;}
#people .txt .fs17+.fs17 {margin:5px 0 0;}
#people .ceo {padding:25px 0 0;}
#people .ceo img {width:70px; top: -12px;}


.sub_nav_list {margin:35px 0;}
.sub_nav_list ul li a {padding:10px; display:block; text-align:center;}
.sub_nav_list ul li a span {display:block;}

.mart95 {margin:40px 0 0;}
#recruit .tit {margin:0 0 20px;}
#recruit .section_btn {text-align:center; margin:20px 0 0;}

/**** S:: 회사소개 > 오시는길 ****/
.loca_map_info {margin:20px 0 0;}
.loca_map_wrap {height: 250px; background:url("/about/img/location_map.jpg") no-repeat center left 70% /auto 140%;}
.loca_map_info .fs21 {margin:0 0 6px;}
.loca_map_info .fs21::before {font-size:20px;}
.loca_map_info small {display:block;}
.loca_map_info small+small {margin-left:0; margin-top:5px;}
.loca_map_info .loca_btn a {height:44px; padding:0 15px}
.loca_map_info .loca_btn a.naver::after {width:18px;}
.loca_map_info .loca_btn a.kakao::after {width:16px;}
/**** E:: 회사소개 > 오시는길 ****/


}