@import url('sub.css'); 



/**** S:: 회사소개 > 회사개요 ****/
#overview dl {width:100%; display:flex; gap:0 60px; align-items: flex-end; justify-content:space-between;}
#overview dl dt {position:relative; order:2; width:calc(50% - 30px); overflow:hidden;}
#overview dl dt img {display:block; width:100%; height:100%;}
#overview dl dd {order:1; width:calc(50% - 30px);}
#overview .subTit {margin-bottom:50px;}
#overview .overview_info {border-top:1px solid var(--black);}
#overview .overview_info li {position:Relative; display:flex; flex-wrap:wrap; align-items: center; padding:23px 20px; gap:0 20px; border-bottom:1px solid var(--border);}
#overview .overview_info h4 {position:relative; width:120px; font-weight:normal; line-height:1;}
#overview .overview_info h4::after {position:absolute; right:0; top:50%; transform:translateY(-50%); z-index:5; width:1px; height:15px; background:var(--border); content:"";}
#overview .overview_info p {width:calc(100% - 140px); color:var(--black); font-weight:500;}
/**** E:: 회사소개 > 회사개요 ****/


/**** S:: 회사소개 > 인사말 ****/
#greeting dl {width:100%; display:flex; gap:0 60px; justify-content:space-between;}
#greeting dl dt {position:relative; width:calc(50% - 30px);}
#greeting dl dt img {max-width:100%;} 
#greeting dl dd {width:calc(50% - 30px); align-self:center;}
#greeting .subTit {margin-bottom:30px;}
#greeting .greet_cnt {}
#greeting .greet_cnt p {margin-bottom:25px;}
#greeting .greet_cnt p:last-child {margin-bottom:0; color:var(--black); font-weight:600;}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 조직도 ****/
.organ_cont{}
.organ_cont .fs20{padding:0 0 50px; font-weight: 400; color:var(--baisc); opacity: 0.8;}
.organ_cont .img{box-sizing:border-box; text-align:center;}
.organ_cont .img.m{display:none;}
.organ_cont .img img{max-width:100%;}
/**** E:: 회사소개 > 조직도 ****/


/**** S:: 회사소개 > 찾아오시는 길 ****/
#location {overflow: hidden; background:var(--grayBg);}
#location .mapbox .root_daum_roughmap_landing {width:100% !important; height:600px; overflow:hidden;}
#location .mapbox .wrap_map {height:100% !important; width:100%;}
#location .mapbox .root_daum_roughmap .wrap_controllers, #location .mapbox .root_daum_roughmap .cont {display:none;}
#location .mapbox .root_daum_roughmap_landing .map_border {display:none;}

#location .location_in {position: relative; display: flex;}
#location .map_area {width: 60%;}
#location .mapbox {width: 100%; height: 600px; border: 1px solid var(--border);}
#location .location_txt {position: relative; width:40%; min-width:600px; padding:60px 50px 60px 60px; box-sizing:border-box; align-self:center;}
#location .info_list {margin: 30px 0 60px;}
#location .info_list li {display: flex; align-items: flex-start; gap: 8px;}
#location .info_list li + li {margin-top: 7px;}
#location .info_list .icon {flex-shrink: 0; height: calc(1em * 166.667 / 100); font-size: 1rem; display: flex; align-items: center; justify-content: center;}
#location .info_list .icon::before {font-size: 24px; line-height: 1;}
#location .info_list .info_addr .icon::before {content: "\e0c8";}
#location .info_list .info_email .icon::before {content: "\e158";}
#location .map_btn {display: flex; gap: 4px;}
#location .map_btn a {display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-width: 0; padding: 13px 30px; border-radius: 9999px; border: 1px solid; box-sizing: border-box; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
#location .map_btn a > span:not(.map_btn_img) {white-space: nowrap;}
#location .map_btn .map_btn_img {display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative;}
#location .map_btn .map_btn_img img {display: block; transition: opacity 0.3s ease;}
#location .map_btn .map_btn_img img:last-child {opacity: 0; position: absolute; left: 0; top: 0;}
#location .map_btn a:hover .map_btn_img img:first-child {opacity: 0;}
#location .map_btn a:hover .map_btn_img img:last-child {opacity: 1;}
#location .map_btn a.naver {background-color: #10D265; border-color: #10D265; color: var(--white);}
#location .map_btn a.kakao {background-color: #FEDA0D; border-color: #FEDA0D; color: var(--black);}
#location .map_btn a.naver:hover {background-color: var(--white); color: #10D265;}
#location .map_btn a.kakao:hover {background-color: var(--black); color: #FEDA0D; border-color: var(--black);}
/**** E:: 회사소개 > 찾아오시는 길 ****/



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

/**** S:: 회사소개 > 찾아오시는 길 ****/
#location .location_txt .fs55 br {display:none;}
/**** E:: 회사소개 > 찾아오시는 길 ****/

}


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

/**** S:: 회사소개 > 인사말 ****/
#greeting .subTit br {display:none;}
#greeting .greet_cnt p br {display:none;}
/**** E:: 회사소개 > 인사말 ****/

}


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


/**** S:: 회사소개 > 회사개요 ****/
#overview dl {gap:0 40px;}
#overview dl dt {width:calc(50% - 20px);}
#overview .subTit {margin-bottom:40px;}
#overview .overview_info li {padding:20px 15px; gap:0 15px;}
#overview .overview_info h4 {width:80px;}
#overview .overview_info h4::after {height:15px;}
#overview .overview_info p {width:calc(100% - 95px);}
/**** E:: 회사소개 > 회사개요 ****/

/**** S:: 회사소개 > 인사말 ****/
#greeting dl {gap:0 40px;}
#greeting dl dt {width:calc(50% - 20px);}
/**** E:: 회사소개 > 인사말 ****/

/**** S:: 회사소개 > 찾아오시는 길 ****/
#location .mapbox, #location .mapbox .root_daum_roughmap_landing {height:520px;}
#location .location_txt {width:35%; min-width:540px; padding:50px 40px 50px 50px;}
#location .info_list {margin:25px 0 50px;}
#location .map_btn a {padding: 10px 20px;}
/**** E:: 회사소개 > 찾아오시는 길 ****/



}

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


/**** S:: 회사소개 > 회사개요 ****/
#overview dl {flex-wrap:wrap; flex-direction:column; gap:40px 0;}
#overview dl dt {width:100%; order:1;}
#overview dl dd {width:100%; order:2;}
#overview .subTit {margin-bottom:30px;}
#overview .overview_info li {padding:15px;}
#overview .overview_info h4::after {height:12px;}
/**** E:: 회사소개 > 회사개요 ****/


/**** S:: 회사소개 > 인사말 ****/
#greeting dl {flex-wrap:wrap; flex-direction:column; gap:40px 0;}
#greeting dl dt {width:100%;}
#greeting dl dt img {width:100%;}
#greeting dl dd {width:100%;}
#greeting .subTit {margin-bottom:20px;}
#greeting .subTit br {display:block;}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 찾아오시는 길 ****/
#location .location_in {flex-direction: column; align-items: stretch;}
#location .map_area {width: 100%; max-width: 100%;}
#location .mapbox, #location .mapbox .root_daum_roughmap_landing {height: 400px;}
#location .location_txt {width: 100%; min-width: 100%; padding:35px 25px;}
#location .info_list {margin: 20px 0 30px;}
#location .info_list .icon::before {font-size: 20px;}
/**** E:: 회사소개 > 찾아오시는 길 ****/

}


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

/**** S:: 회사소개 > 회사개요 ****/
#overview dl {gap:40px 0;}
#overview .subTit {margin-bottom:20px;}
#overview .overview_info li {padding:12px 10px; gap:0 10px;}
#overview .overview_info h4 {width:60px;}
#overview .overview_info h4::after {height:10px;}
#overview .overview_info p {width:calc(100% - 70px);}
/**** E:: 회사소개 > 회사개요 ****/


/**** S:: 회사소개 > 인사말 ****/
#greeting dl {gap:30px 0;}
#greeting .subTit br {display:none;}
#greeting .greet_cnt p {margin-bottom:15px;}
/**** E:: 회사소개 > 인사말 ****/


/* location */
#location .mapbox,
#location .mapbox .root_daum_roughmap_landing {height: 280px;}
#location .info_list {margin:15px 0 25px 0;}
#location .info_list li {gap: 5px;}
#location .info_list li + li {margin-top: 5px;}
#location .info_list .icon::before {font-size: 18px;}
#location .map_btn {width: 100%;}
#location .map_btn li {width: 50%;}
#location .map_btn a {gap:8px; padding: 8px;}
#location .map_btn a.naver .map_btn_img img {max-height:12px;}
#location .map_btn a.kakao {gap:8px 6px;}
#location .map_btn a.kakao .map_btn_img img {max-height:15px;}


}

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

/**** S:: 회사소개 > 회사개요 ****/
#overview dl {gap:30px 0;}
#overview .subTit br {display:none;}
/**** E:: 회사소개 > 회사개요 ****/

}