@import url('sub.css'); 


/**** S:: Àλ縻 ****/
.greeting_cont{display: flex;}
.greeting_cont > div{box-sizing:border-box;}
.greeting_cont .img_area{width: 560px;}
.greeting_cont .img_area img{border-radius:var(--borderR50); overflow: hidden; max-width: 100% !important; height: auto !important;}
.greeting_cont .img_area .mo{display: none;}
.greeting_cont .txt_area{padding: 0 0 0 90px; width: calc(100% - 560px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.greeting_cont .txt_area .fs41 span{display: inline; letter-spacing: inherit; line-height: inherit;}
.greeting_cont .txt_area .fs25{font-weight: 600; margin-top: 35px;}
.greeting_cont .txt_area .fs19{margin-top: 15px;}
.greeting_cont .txt_area .fs19 + .fs19{margin-top: 30px;}
.greeting_cont .txt_area .ceo_name{display: flex; align-items:center; gap:10px 15px; flex-wrap:wrap; padding: 60px 0 0;}
.greeting_cont .txt_area .ceo_name dt{font-size:1rem; font-weight: 600; letter-spacing: var(--letter-spacing-default); line-height: 150%; color:var(--black);}
.greeting_cont .txt_area .ceo_name dd{}
.greeting_cont .txt_area .ceo_name dd img{max-width:109px; height: auto;}
/**** E:: Àλ縻 ****/


/**** S:: Á¶Á÷µµ ****/
.org-chart-container{text-align: center;}
.org-chart-container .ceo{width: 240px; height: 240px; margin: 0 auto; box-sizing:border-box; display: flex;  flex-direction: column; justify-content: center; align-items: center; border-radius:50%; position: relative; background:url('/about/img/org-chart.png') no-repeat center bottom/contain;}
.org-chart-container .ceo::before{content:''; display: block; width: 200px; height: 200px; background:var(--white); border:10px solid var(--main); position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; box-sizing:border-box;}
.org-chart-container .ceo::after{content:''; display: block; width: 12px; height: 12px; background:url('/about/img/org-dot.png') no-repeat center/contain; border-radius:50%; position: absolute; left:50%; margin-left: -6px; bottom: -6px; box-shadow: 0 0 15px rgba(0, 116, 161, 0.50);}
.org-chart-container .ceo span{display: block; line-height: 120%; position: relative; z-index: 2;}
.org-chart-container .ceo .fs41{font-weight: 700; font-family:var(--eng); letter-spacing: 0; color:var(--main);}
.org-chart-container .ceo .fs19{color:var(--sub); padding: 5px 0 0;}
.org-chart-container .tree{}
.org-chart-container .tree > ul{margin: 40px 0 0; display: flex; gap:50px; position: relative;}
.org-chart-container .tree > ul::before{content:''; display: block; width: 50%; height: 1px; background:var(--border); position: absolute; left:50%; top:49px; transform:translateX(-50%); z-index: -1;}
.org-chart-container .tree > ul::after{content:''; display: block; width: 1px; height: 90px; background:var(--border); position: absolute; left:50%; top:-40px; transform:translateX(-50%); z-index: -1;}
.org-chart-container .tree > ul > li{}
.org-chart-container .tree > ul > li:nth-child(1){flex:2;}
.org-chart-container .tree > ul > li:nth-child(2){flex:3;}
.org-chart-container .tree > ul > li > ul{margin: 80px 0 0; display: flex; gap:30px; align-items: flex-start; position: relative;}
.org-chart-container .tree > ul > li > ul::before{content:''; display: block; height: 1px; background:var(--border); position: absolute; left:50%; transform:translateX(-50%); top:-40px; z-index: -1;}
.org-chart-container .tree > ul > li:nth-child(1) > ul::before{width: calc(((100% + 30px) / 2) * 1);}
.org-chart-container .tree > ul > li:nth-child(2) > ul::before{width: calc(((100% + 30px) / 3) * 2);}
.org-chart-container .tree > ul > li > ul li{flex:1; position: relative;}
.org-chart-container .tree > ul > li > ul li::before{content:''; display: block; width: 1px; height: 100%; background:var(--border); position: absolute; left:50%; top:-40px; z-index: -1;}
.org-chart-container .node{margin: 0 auto; background:var(--sub); border-radius:var(--borderR10); box-sizing:border-box; padding: 16px 10px; position: relative;}
.org-chart-container .node::before{content:''; display: block;	width: 1px; height: 40px; background:var(--border); position: absolute; left:50%; bottom: -40px;}
.org-chart-container .tree > ul > li:nth-child(1) .node{max-width:calc((100% - 30px)/2);}
.org-chart-container .tree > ul > li:nth-child(2) .node{max-width:calc((100% - 60px)/3);}


.org-chart-container .node span{display: block; line-height: 120%; position: relative; z-index: 2;}
.org-chart-container .node .title{font-size:1.632rem; font-weight: 700; font-family:var(--eng); letter-spacing: 0; color:var(--white);}
.org-chart-container .node .desc{font-weight: 400; color:var(--white); padding: 5px 0 0;}
.org-chart-container .dept{color:var(--white); font-weight: 600; box-sizing:border-box; background:var(--main); border-radius:var(--borderR10); padding: 20px 10px;}
.org-chart-container .team-list{margin: 20px 0 0;}
.org-chart-container .team-list span{display: block; box-sizing:border-box; border:1px solid var(--border); background:var(--white); border-radius:var(--borderR10); padding: 18px 10px; transition: all 0.2s;}
.org-chart-container .team-list span ~ span{margin: 5px 0 0;}
.org-chart-container .team-list span:hover {background: #f0f4f8;}
/**** E:: Á¶Á÷µµ ****/



/**** S:: ã¾Æ¿À½Ã´Â ±æ ****/
.location_in{position: relative;} 
.location_in::before{content:''; display: block; width: 100%; height: 100%; position: absolute; left:0; top:0; box-sizing:border-box; border-radius:var(--borderR20); border:1px solid #ddd; z-index: -1;}
.location_top{display: flex; height: 640px; overflow: hidden;}
.location_img{width: 40%; overflow: hidden; border-radius:var(--borderR20) 0 0  var(--borderR20);}
.location_img img{display: block; width: 100%; height: 100%; object-fit:cover;}
.location_map{width: 60%; border:1px solid #ddd; border-left:0; overflow: hidden; border-radius:0 var(--borderR20) var(--borderR20) 0;}
.location_map .wrap_map{width: 100%; height: 640px !important;}
.location_map .map_border{display: none !important;}
.location_map .wrap_controllers{display: none !important;}
.location_map .cont{display: none !important;}

.location_txt{box-sizing:border-box; position:relative; padding:40px 200px 40px 50px;}
.location_txt .fs41{}
.location_info{display: flex; flex-wrap:wrap; gap:10px 40px; padding: 20px 0 0;}
.location_info dl{display: flex; gap:0 10px;}
.location_info dl dt{display: flex; align-items:center; gap:0 10px; font-size:1rem; font-weight: 600; color:var(--black); letter-spacing: var(--letter-spacing-default); line-height: 140%;}
.location_info dl dt::before{display: inline-block; width: 45px; height: 45px; line-height: 45px; font-size:24px; text-align:center; color:var(--main); border-radius:50%; background:rgba(0,116,161,.1); font-family:var(--icon); font-weight: 400;}
.location_info dl.address dt::before{content:'\e0c8';}
.location_info dl.tel dt::before{content:'\e0b0';}
.location_info dl.fax dt::before{content:'\e8ad';}
.location_info dl dd{font-size:1rem; font-weight: 400; color:var(--basic); letter-spacing: var(--letter-spacing-default); line-height: 140%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}

.location_btn{position: absolute; right: 50px; bottom: 50px; display: flex; gap:10px; z-index: 999;}
.location_btn a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100px; height: 100px; font-size:0.889rem; font-weight: 600; color:var(--black); letter-spacing: var(--letter-spacing-default); border-radius:var(--borderR15); text-align:center; transition:all .3s linear;}
.location_btn a img{width: 28px; height: auto; margin: 0 auto 8px; display: block;}
.location_btn a.kakao_btn{color:var(--black); background:#FAE100;}
.location_btn a.kakao_btn:hover{background:#FAD400;}
/**** E:: ã¾Æ¿À½Ã´Â ±æ ****/




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




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

/**** S:: Àλ縻 ****/
.greeting_cont{}
.greeting_cont .img_area{width: 40%;}
.greeting_cont .txt_area{padding: 0 0 0 60px; width: 60%;}
.greeting_cont .txt_area .fs25{margin-top: 25px;}
.greeting_cont .txt_area .fs19{margin-top: 10px;}
.greeting_cont .txt_area .fs19 + .fs19{margin-top: 20px;}
.greeting_cont .txt_area .ceo_name{padding: 40px 0 0;}
/**** E:: Àλ縻 ****/

}

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



/**** S:: Àλ縻 ****/
.greeting_cont{}
.greeting_cont .img_area img{border-radius:var(--borderR30);}
.greeting_cont .txt_area{padding: 0 0 0 40px;}
.greeting_cont .txt_area .fs25{margin-top: 15px;}
.greeting_cont .txt_area .fs19{margin-top: 8px;}
.greeting_cont .txt_area .fs19 + .fs19{margin-top: 10px;}
.greeting_cont .txt_area .ceo_name{gap:6px 10px; padding: 20px 0 0;}
.greeting_cont .txt_area .ceo_name dd img{max-width:80px; height: auto;}
/**** E:: Àλ縻 ****/


/**** S:: Á¶Á÷µµ ****/
.org-chart-container .ceo{width: 200px; height: 200px;}
.org-chart-container .ceo::before{width: 160px; height: 160px; border-width:5px;}
.org-chart-container .ceo::after{width: 12px; height: 12px; margin-left: -6px; bottom: -6px;}
.org-chart-container .tree{}
.org-chart-container .tree > ul{margin: 30px 0 0; gap:20px;}
.org-chart-container .tree > ul::after{height: 80px; top:-30px;}
.org-chart-container .tree > ul > li{}
.org-chart-container .tree > ul > li > ul{margin: 60px 0 0; gap:10px;}
.org-chart-container .tree > ul > li > ul::before{top:-30px;}
.org-chart-container .tree > ul > li:nth-child(1) > ul::before{width: calc(((100% + 10px) / 2) * 1);}
.org-chart-container .tree > ul > li:nth-child(2) > ul::before{width: calc(((100% + 10px) / 3) * 2);}
.org-chart-container .tree > ul > li > ul li::before{top:-30px;}
.org-chart-container .node::before{height: 30px; bottom: -30px;}
.org-chart-container .tree > ul > li:nth-child(1) .node{max-width:calc((100% - 20px)/2);}
.org-chart-container .tree > ul > li:nth-child(2) .node{max-width:calc((100% - 30px)/3);}

.org-chart-container .dept{padding: 15px 5px; font-size:1rem;}
.org-chart-container .team-list{margin: 10px 0 0;}
.org-chart-container .team-list span{padding: 14px 5px;}
/**** E:: Á¶Á÷µµ ****/





/**** S:: ã¾Æ¿À½Ã´Â ±æ ****/
.location_in{} 
.location_top{height: 400px;}
.location_map .wrap_map{height: 400px !important;}

.location_txt{padding:30px;}

.location_btn{right: 20px; bottom: auto; top:-100px; z-index: 99;}
.location_btn a{width: 80px; height: 80px;}
.location_btn a img{width: 20px; height: auto; margin: 0 auto 8px;}
/**** E:: ã¾Æ¿À½Ã´Â ±æ ****/

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




/**** S:: Àλ縻 ****/
.greeting_cont{flex-wrap:wrap;}
.greeting_cont .img_area{width: 100%;}
.greeting_cont .img_area img{border-radius:var(--borderR20);}
.greeting_cont .img_area .mo{display: block;}
.greeting_cont .img_area .pc{display: none;}
.greeting_cont .txt_area{padding: 30px 0 0; width: 100%;}
.greeting_cont .txt_area .fs25{margin-top: 10px;}
/**** E:: Àλ縻 ****/


/**** S:: Á¶Á÷µµ ****/
.org-chart-container .organization_in{position: relative; overflow-y: auto;} 
.org-chart-container .responsive-dim.show{display: block;}
.org-chart-container .ceo{width: 150px; height: 150px;}
.org-chart-container .ceo::before{width: 120px; height: 120px;}
.org-chart-container .tree{width: 680px;}
.org-chart-container .tree > ul{margin: 20px 0 0; gap:10px;}
.org-chart-container .tree > ul::before{width: 50%; top:38px;}
.org-chart-container .tree > ul::after{height: 70px; top:-30px;}
.org-chart-container .tree > ul > li > ul{margin: 40px 0 0; gap:10px;}
.org-chart-container .tree > ul > li > ul::before{top:-20px;}
.org-chart-container .tree > ul > li > ul li::before{top:-20px;}
.org-chart-container .node{padding: 10px;}
.org-chart-container .node::before{height: 20px; bottom: -20px;}
.org-chart-container .tree > ul > li:nth-child(1) .node{max-width:70%;}
.org-chart-container .tree > ul > li:nth-child(2) .node{max-width:50%;}
/**** E:: Á¶Á÷µµ ****/



/**** S:: ã¾Æ¿À½Ã´Â ±æ ****/
.location_in{} 
.location_in::before{border-radius:var(--borderR10);}
.location_top{height: 600px; flex-wrap:wrap; border-bottom:1px solid var(--border); border-radius:var(--borderR10);}
.location_img{width: 100%; height: 300px; border-radius:var(--borderR10) var(--borderR10) 0 0;}
.location_map{width: 100%; border-radius:0 0 var(--borderR10) var(--borderR10); border:1px solid var(--border);}
.location_map .wrap_map{height: 300px !important;}

.location_txt{padding:20px;}
.location_info{gap:8px 30px; padding: 15px 0 0;}
.location_info dl{gap:8px; width: 100%;}
.location_info dl dt{gap:0 8px; width: 65px;}
.location_info dl dt::before{width: 30px; height: 30px; line-height: 30px; font-size:16px;}
.location_info dl dd{width: calc(100% - 65px);}

.location_btn{right: 10px; bottom: auto; top:-80px; gap:5px;}
.location_btn a{width: 70px; height: 70px;}
.location_btn a img{width: 16px; height: auto; margin: 0 auto 5px;}
/**** E:: ã¾Æ¿À½Ã´Â ±æ ****/

}