@import url("sub.css");
/* COMPANY — SUMMARY */
.summary{display:flex; flex-direction:column; gap:60px;}
.summary .summary_txt{display:flex; flex-direction:column; align-items:center; gap:30px; text-align:center; box-sizing: border-box; width: 100%; padding: 0 2%;}
.summary .summary_txt h3{color:var(--black); width:100%; word-break:keep-all; overflow-wrap:normal; line-break:strict;}
.summary .summary_txt h3 .point{color:var(--main); letter-spacing:inherit; line-height:inherit; display:inline; word-break:keep-all; overflow-wrap:normal;}
.summary .summary_txt p{color:var(--basic); word-break:keep-all; overflow-wrap:normal; text-wrap:balance;}
.summary .summary_txt p br{display:none;}
.summary .summary_list{display:flex; flex-wrap:wrap; gap:30px;}
.summary .summary_list li{display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; width:calc((100% - 60px)/3); min-height:300px; padding:40px 30px; box-sizing:border-box; background:var(--grayBg); border-radius:var(--borderR10);}
.summary .summary_list li .info{width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:7px;}
.summary .summary_list li .info strong{color:var(--black);}
.summary .summary_list li .info p{color:var(--basic);}
.summary .summary_list li .info p.contact{display:flex; flex-direction:column; gap:2px;}
.summary .summary_list li .info p.contact span{display:flex; align-items:center; gap:5px; min-height:32px;}
.summary .summary_list li .info p.contact .tel::before{content:'\e0b0'; display:block; width:20px; height:20px; flex-shrink:0; font-size:20px; line-height:20px; font-family:var(--icon); color:var(--black); opacity: 0.5; text-align:center; font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;}
.summary .summary_list li .info p.contact .fax::before{content:'\ead8'; display:block; width:20px; height:20px; flex-shrink:0; font-size:20px; line-height:20px; font-family:var(--icon); color:var(--black); opacity: 0.5; text-align:center; font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;}
.summary .summary_list li .ico{display:block; width:70px; height:70px; flex-shrink:0;}
.summary .summary_list li .ico img{display:block; width:100%; height:100%; object-fit:contain;}


/* COMPANY — GREETING */
.greeting{display:flex; gap:60px;}
.greeting .greet_img{flex-shrink:0; width:760px;}
.greeting .greet_img .img{display:block; aspect-ratio: 760/740; border-radius:var(--borderR30); overflow:hidden;}
.greeting .greet_img img{display:block; width:100%; height:100%; object-fit:cover;}
.greeting .greet_txt{flex:1; min-width:0; display:flex; flex-direction:column; justify-content: center; gap:30px;}
.greeting .greet_txt h3{color:var(--black);}
.greeting .greet_txt h3 .point{color:var(--main); display:inline; letter-spacing:inherit; line-height:inherit;}
.greeting .greet_txt .desc{color:var(--basic);}
.greeting .greet_txt .desc p + p{margin-top:30px;}
.greeting .greet_txt .sign{display:flex; align-items:center; gap:10px; padding:20px 0; color:var(--black);}
.greeting .greet_txt .sign strong{letter-spacing:var(--letter-spacing-heading);}



/* COMPANY — ORGAN */
.organ_chart{display: flex; flex-direction: column; gap:60px; position: relative;}
.organ_chart::before{content: ''; display: block; width: 2px; height: 100%; background: var(--border); position: absolute; left: 50%; top:0; z-index: -1;}
.organ_chart .node{max-width: 270px; padding: 5px; width: 100%; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.organ_chart .node p{font-weight: 700; color: var(--white);}
.organ_chart .node.ceo{min-height: 86px; background: var(--main) url('/company/img/organ_corner.png') no-repeat right bottom/25px auto;}
.organ_chart .node.manager{min-height: 82px; background:var(--green);}
.organ_chart .depts{display: flex; justify-content: space-between; align-items: flex-start; gap: 170px; background: var(--white); position: relative; z-index: 2;}
.organ_chart .depts::before{content: ''; display: block; width: calc((100% + 170px)/4*3); height: 2px; background: var(--border); position: absolute; left: 50%; top:0; transform: translateX(-50%);}
.organ_chart .depts .dept_wrap{display: flex; flex-direction: column; gap: 36px; max-width: 270px; width: 100%; position: relative; padding: 60px 0 0;}
.organ_chart .depts .dept_wrap::before{content: ''; display: block; width: 2px; height: 100%; background: var(--border); position: absolute; left: 50%; top: 0; z-index: 0;}
.organ_chart .depts .dept_wrap.advisor::before{width: 170px; height: 2px; left: 100%; top: 50%; margin-top: 30px;}
.organ_chart .depts .dept_wrap .dept{width: 100%; min-height: 74px; padding: 5px; background: var(--blueBg); margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; text-align: center;}
.organ_chart .depts .dept_wrap .dept p{font-weight: 600; color: var(--main); line-height: 140%;}
.organ_chart .depts .dept_wrap.advisor .dept{background: var(--white); border:2px solid var(--main);}
.organ_chart .depts .dept_wrap .pros{display: flex; flex-direction: column; gap: 10px;  position: relative; z-index: 2;}
.organ_chart .depts .dept_wrap .pros li{width: 100%; min-height: 60px; padding: 5px; background: var(--white); width: 100%; border: 2px dashed var(--basic); margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.organ_chart .depts .dept_wrap .pros li p{font-weight: 500; color: var(--black);}
.organ_chart .depts .dept_wrap .dept.advisor{display: none; background: var(--white); border:2px solid var(--main);}


/* COMPANY — LOCATION */
.location{display:flex; flex-direction:column; gap:50px;}
.location .map{position:relative; width:100%; height: 600px; border-radius:var(--borderR30); overflow:hidden;}
.location .map .map_shield{position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; box-sizing:border-box;}
.location .map .cont{display: none !important;}
.location .map .wrap_controllers{display: none !important;}
.location .map .map_border{display: none !important;}
.location .map .root_daum_roughmap {width: 100%; height: 100% !important;}
.location .map .wrap_map{width: 100%; height: 100% !important;}
.location .map_btm{display:flex; align-items:flex-end; justify-content:space-between; width:100%; gap:30px;}
.location .map_info{display:flex; flex-direction:column; gap:10px; min-width:0;}
.location .map_info .addr{color:var(--black);}
.location .map_info .contact{display:flex; align-items:center; gap:5px 30px; flex-wrap:wrap;}
.location .map_info .contact .item{display:flex; align-items:center; gap:15px;}
.location .map_info .contact .label{color:var(--basic); white-space:nowrap; line-height: 150%;}
.location .map_info .contact .val{color:var(--black); line-height: 150%;}
.location .map_info .contact .val.tel{color:var(--main);}
.location .map_btns{display:flex; align-items:center; gap:5px; flex-shrink:0;}
.location .map_btns .btn{display:flex; align-items:center; justify-content:center; gap:15px; height:60px; padding:0 30px; box-sizing:border-box; border-radius:var(--borderR5); transition:box-shadow .3s ease;}
.location .map_btns .btn img{display:block; flex-shrink:0; width:auto; height:20px;}
.location .map_btns .btn.kakao{background:#fae100; color:#371c1d;}
.location .map_btns .btn.kakao:hover{box-shadow:0 8px 20px rgba(250,225,0,0.5);}
.location .map_btns .btn.naver{background:#10d265; color:var(--white);}
.location .map_btns .btn.naver:hover{box-shadow:0 8px 20px rgba(16,210,101,0.5);}










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


/* COMPANY — GREETING */
.greeting .greet_img{width:48%;}
.greeting .greet_txt h3 br{display: none;}




/* COMPANY — ORGAN */
.organ_chart .node{max-width: calc((100% - 150px)/4);}
.organ_chart .depts{gap: 50px;}
.organ_chart .depts::before{width: calc((100% + 50px)/4*3);}
.organ_chart .depts .dept_wrap{max-width: 100%;}
.organ_chart .depts .dept_wrap.advisor::before{width: 50px;}



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

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




}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){
/* COMPANY — SUMMARY */
.summary{gap:40px;}
.summary .summary_txt{gap:20px;}
.summary .summary_list{gap:20px;}
.summary .summary_list li{width:calc((100% - 20px)/2); min-height:250px; padding:30px 20px;}
.summary .summary_list li .ico{width:60px; height:60px;}

/* COMPANY — GREETING */
.greeting{gap:40px; flex-wrap: wrap;}
.greeting .greet_img{width:100%;}
.greeting .greet_img .img{border-radius:var(--borderR20);}
.greeting .greet_txt{gap:20px;}
.greeting .greet_txt .desc p + p{margin-top:20px;}
.greeting .greet_txt .sign{padding:10px 0;}

/* COMPANY — ORGAN */
.organ_chart{gap:40px;}
.organ_chart .node{max-width: calc((100% - 90px)/4);}
.organ_chart .node.ceo{min-height: 70px; background-size: 20px auto;}
.organ_chart .node.manager{min-height: 65px;}
.organ_chart .depts{gap: 30px;}
.organ_chart .depts::before{width: calc((100% + 30px)/4*3);}
.organ_chart .depts .dept_wrap{gap: 20px; padding: 40px 0 0;}
.organ_chart .depts .dept_wrap.advisor::before{width: 30px; margin-top: 20px;}
.organ_chart .depts .dept_wrap .dept{min-height: 60px;}
.organ_chart .depts .dept_wrap .pros li{min-height: 50px;}





/* COMPANY — LOCATION */
.location{gap:30px;}
.location .map{border-radius:var(--borderR20); height: 400px;}
.location .map_btm{position: relative; z-index: 9;}
.location .map_btns{position: absolute; right: 10px; top: -90px;}
.location .map_btns .btn{gap:0; width: 50px; height:50px; padding:0; font-size: 0;}




}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* COMPANY — SUMMARY */
.summary{gap:30px;}
.summary .summary_txt{gap:10px;}
.summary .summary_list{gap:10px;}
.summary .summary_list li{width:100%; min-height:100px; padding:20px; gap:10px; flex-direction: row;}
.summary .summary_list li .info{gap:5px;}
.summary .summary_list li .info p.contact span{min-height:auto;}
.summary .summary_list li .info p.contact .tel::before,
.summary .summary_list li .info p.contact .fax::before{width:16px; height:16px; font-size:16px; line-height:16px;}
.summary .summary_list li .ico{width:40px; height:40px;}

/* COMPANY — GREETING */
.greeting{gap:30px;}
.greeting .greet_img .img{border-radius:var(--borderR15);}
.greeting .greet_txt{gap:10px;}
.greeting .greet_txt .desc p + p{margin-top:10px;}
.greeting .greet_txt .sign{gap:5px; padding:10px 0 0;}


/* COMPANY — ORGAN */
.organ_chart{gap:20px;}
.organ_chart .node{max-width: 100%; padding:12px 10px;}
.organ_chart .node.ceo{min-height: auto; background-size: 20px auto;}
.organ_chart .node.ceo p{font-size:18px;}
.organ_chart .node.manager{min-height: auto;}
.organ_chart .node.manager p{font-size:16px;}
.organ_chart .depts{gap: 10px;}
.organ_chart .depts::before{width: calc((100% + 10px)/3*2);}
.organ_chart .depts .dept_wrap{gap: 10px; max-width: 100%; padding: 20px 0 0;}
.organ_chart .depts .dept_wrap.advisor{display: none;}
.organ_chart .depts .dept_wrap.advisor::before{width: 10px; margin-top: 20px;}
.organ_chart .depts .dept_wrap .dept{min-height: auto; padding: 10px;}
.organ_chart .depts .dept_wrap .dept p{font-size: 1rem;}
.organ_chart .depts .dept_wrap .pros{gap: 5px;}
.organ_chart .depts .dept_wrap .pros li{min-height: auto; padding: 10px;}
.organ_chart .depts .dept_wrap .dept.advisor{display: flex;}





/* COMPANY — LOCATION */
.location{gap:20px;}
.location .map{border-radius:var(--borderR15); aspect-ratio:unset; height: 300px;}
.location .map_info{gap:5px;}
.location .map_info .contact{gap:5px 20px;}
.location .map_info .contact .item{gap:10px;}
.location .map_btns{top: -70px;}
.location .map_btns .btn{width: 40px; height:40px;}
.location .map_btns .btn img{height:16px;}



}