@import url('sub.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

/* 공통 */
.company_cont h4.fs40 {margin-bottom:17px; color:var(--black)}
.tc {font-family:'Noto Sans TC', 'Pretendard', Malgun Gothic,'Malgun Gothic', sans-serif;}

/**** S:: COMPANY > 회사개요 ****/
.about_cont .top_img {max-width:1720px; margin:0 auto 75px; background:url('/company/img/company_aboutImg1.jpg') center/cover no-repeat; height:480px; border-radius:var(--borderR20); width:95%;}
.about_cont h4.fs40 span {display:inline-block}
.about_cont ul {display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:30px}
.about_cont ul li {border-radius:var(--borderR20); padding:30px 30px 45px 35px; display:flex; flex-direction:column}
.about_cont ul li i {align-self: flex-end; margin-bottom:44px}
.about_cont ul li dt.fs20 {color:var(--black); margin-bottom:7px}
.about_cont ul li dd span {display:inline-block}
/**** E:: COMPANY > 회사개요 ****/

/**** S:: COMPANY > 인사말 ****/
.greeting_cont {display:flex; gap:85px; align-items:center}
.greeting_cont .img_wrap {max-width:575px; flex-shrink:0; aspect-ratio:115 / 136; width:45%; align-self:flex-start}
.greeting_cont .img_wrap img {width:100%; height:100%; object-fit:cover; display:block}
.greeting_cont .img_wrap img:last-child {display:none}
.greeting_cont .t_box h4.fs40 span {display:inline; letter-spacing: inherit}
.greeting_cont .t_box p.subTxt {color:var(--black); margin-bottom:17px}
.greeting_cont .t_box .main_txt p.fs18 {margin-bottom:12px}
.greeting_cont .t_box .main_txt p.fs18:last-child {margin-bottom:0}
.greeting_cont .t_box p span {display:inline-block}
.greeting_cont .t_box p.ceo {color:var(--black);}
.greeting_cont .t_box p.ceo strong{display:inline-block}
/**** E:: COMPANY > 인사말 ****/

/**** S:: COMPANY > 조직도 ****/
.organ_cont .organ_wrap {display:flex; align-items:center; flex-direction:column;}
.organ_cont .ceoBox {width:315px; background:var(--main); border-radius: var(--borderR5); color: var(--white); padding: 20px 10px 10px; text-align:center; position:relative}
.organ_cont .ceoBox::before {width:11px; height:11px; box-sizing:border-box; content:""; border:3px solid var(--sub); border-radius:50%; position:absolute; bottom:-40px; left:50%; transform:translate(-50%, 50%); z-index:99; background:var(--white);}
.organ_cont .ceoBox::after {position:absolute; left:50%; transform:translate(-50%, 100%); width:1px; height:40px; background:var(--border); content:""; bottom:0}
.organ_cont .ceoBox .whiteBox {background:var(--white); border-radius:2px; color:var(--black); display:inline-block; width:calc(100% - 20px); font-weight:400; padding:15px 0; margin-top:20px}
.organ_cont .organ_grid {width:100%}
.organ_cont .organ_grid .second {display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:30px; width:100%; margin-bottom:5px; margin-top:80px; position:relative}
.organ_cont .organ_grid .second::before {position:absolute; left:50%; width:calc(((100% + 30px) / 4)* 3); height:1px; background:var(--border); content:""; top:-40px; transform:translate(-50%, 0)}
.organ_cont .organ_grid .second li {background:var(--sub2); color:var(--white); border-radius: var(--borderR5); text-align:center; position:relative; min-height:76px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;}
.organ_cont .organ_grid .second li:before {position:absolute; left:50%; transform:translate(-50%, -100%); width:1px; height:40px; background:var(--border); content:""; top:0}
.organ_cont .organ_grid .second li:last-child {background: #687D93; }
.organ_cont .organ_grid .third {display:flex; justify-content:space-between; align-items:flex-end}
.organ_cont .organ_grid .third > li:first-child {width:calc((100% - 90px) / 4);}
.organ_cont .organ_grid .third .border_Box {border-radius: var(--borderR5); text-align:center; border:1px solid var(--border); margin-bottom:5px; min-height:76px; box-sizing:border-box; display:flex; align-items:center; justify-content:center;}
.organ_cont .organ_grid .third .border_Box:last-child {margin-bottom:0}
.organ_cont .organ_grid .third .third_right {background:var(--grayBg); width:calc(((100% - 30px) / 4) * 2); display:flex; box-sizing:border-box; min-height:76px; align-items:center; padding-left:30px; border-radius: var(--borderR5); position:relative}
.organ_cont .organ_grid .third .third_right::before {position:absolute; top:0; left:0; width:100%; height:100%; background:url('/company/img/right_box_bg.png') right 5px bottom 0/69px 50px no-repeat; content:""; pointer-events:none}
.organ_cont .organ_grid .third .third_right i {font-style:normal; margin-right:8px; display:flex; align-items:center; justify-content:center}
.organ_cont .organ_grid .third .third_right i::before {content:"\e853"; font-family:var(--icon); color:var(--black); font-size:23px; font-variation-settings: "FILL" 1}
.organ_cont .organ_grid .third .third_right .tot {color:var(--black); margin-right:10px}
.organ_cont .organ_grid .third .third_right .tot strong {font-weight:600}
/**** E:: COMPANY > 인사말 ****/



/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1500px){
.about_cont p.fs18 br {display:none}
.greeting_cont .t_box .main_txt p.fs18 br {display:none}
.greeting_cont h4 br {display:none}
.greeting_cont .t_box h4.fs40 span:first-child {display:block}

}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){
/**** S:: COMPANY > 회사개요 ****/
.about_cont .top_img {height:400px}
.about_cont ul {grid-gap:15px;}
.about_cont ul li {padding:20px 20px 35px 25px}
/**** E:: COMPANY > 회사개요 ****/

/**** S:: COMPANY > 인사말 ****/
.greeting_cont {gap:50px;}
/**** E:: COMPANY > 인사말 ****/
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 공통 */
.company_cont h4.fs40 {margin-bottom:10px;}


/**** S:: COMPANY > 회사개요 ****/
.about_cont .top_img {height:300px; margin-bottom:30px}
.about_cont ul {grid-template-columns:repeat(2,1fr); grid-gap:10px}
.about_cont ul li i {margin-bottom:-50px}
/**** E:: COMPANY > 회사개요 ****/

/**** S:: COMPANY > 인사말 ****/
.greeting_cont {gap:35px}
.greeting_cont .img_wrap {width:50%}
.greeting_cont .t_box p.subTxt {margin-bottom:10px}
.greeting_cont .t_box .main_txt p.fs18 {margin-bottom:8px}
/**** E:: COMPANY > 인사말 ****/

/**** S:: COMPANY > 조직도 ****/
.organ_cont .fs24 {font-size:18px}
.organ_cont .fs20 {font-size:16px}
.organ_cont .fs18 {font-size:15px}
.organ_cont .ceoBox {width:200px; padding:15px 10px 10px;}
.organ_cont .ceoBox .whiteBox {width:calc(100% - 10px); margin-top:10px; padding: 5px 0}
.organ_cont .organ_grid .second {grid-gap:15px}
.organ_cont .organ_grid .second::before {width:calc(((100% + 15px) / 4)* 3)}
.organ_cont .organ_grid .second li {min-height:60px; padding:0 10px}
.organ_cont .organ_grid .third .border_Box {min-height:60px; padding:0 10px}
.organ_cont .organ_grid .third > li:first-child {width:calc((100% - 45px) / 4)}
.organ_cont .organ_grid .third .third_right {min-height:60px; padding:0 10px}
.organ_cont .organ_grid .third .third_right::before {background-size:50px 40px}
/**** E:: COMPANY > 조직도 ****/

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 공통 */
.company_cont h4.fs40 {margin-bottom:5px;}


/**** S:: COMPANY > 회사개요 ****/
.about_cont .top_img {height:220px; margin-bottom:20px}
.about_cont ul {grid-template-columns:repeat(1,1fr);}
.about_cont ul li {padding: 20px; position:relative }
.about_cont ul li dt.fs20 {margin-bottom:4px}
.about_cont ul li i {margin-bottom:0; position:absolute; right:20px; bottom:20px}
.about_cont ul li i img {height:40px}
/**** E:: COMPANY > 회사개요 ****/

/**** S:: COMPANY > 인사말 ****/
.greeting_cont {display:block}
.greeting_cont .img_wrap {width:100%; aspect-ratio:unset; margin-bottom:20px}
.greeting_cont .img_wrap img:first-child {display:none}
.greeting_cont .img_wrap img:last-child {display:block}
.greeting_cont .t_box p.subTxt {margin-bottom:5px}
.greeting_cont .t_box .main_txt p.fs18 {margin-bottom:3px}
/**** E:: COMPANY > 인사말 ****/

/**** S:: COMPANY > 조직도 ****/
.organ_cont {overflow-x:auto}
.organ_wrap {width:620px}
.organ_cont .ceoBox::after {height:20px}
.organ_cont .ceoBox::before {bottom:-20px}
.organ_cont .organ_grid .second {grid-gap:10px; margin-top:40px}
.organ_cont .organ_grid .second::before {width:calc(((100% + 10px) / 4)* 3); top:-20px}
.organ_cont .organ_grid .second li:before {height:20px}
.organ_cont .organ_grid .third > li:first-child {width:calc((100% - 30px) / 4)}
/**** E:: COMPANY > 조직도 ****/

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

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




}