@import url("sub.css");

/* 대표 인사말 */
.basic_cont:has(.greeting_cont) {margin-bottom: 220px; margin-top: 100px;}
.greeting_in {display: flex; gap: 50px; align-items: flex-start;}
.greeting_in > h3 {width: 40%; max-width: 630px; flex-shrink: 0; font-size: 2.5rem; line-height: 128.889%; letter-spacing: -0.03em;}
.greeting_in .greeting_txt {width: 100%;}
.greeting_in .greeting_txt p.fs20 {margin-bottom: 50px;}
.greeting_in .greeting_txt dt {display: inline;}
.greeting_in .greeting_txt dd {display: inline; font-size: 1.667rem; line-height: 140%; letter-spacing: -0.04em;}

/* 찾아오시는 길 */
.location_cont .mapbox .root_daum_roughmap_landing {width:100% !important; height:600px; overflow:hidden;}
.location_cont .mapbox .wrap_map {height:100% !important; width: 100%;}
.location_cont .mapbox .root_daum_roughmap .wrap_controllers, .location-content figure .root_daum_roughmap .cont {display:none;} 
.location_cont .mapbox .root_daum_roughmap_landing .map_border {display:none;}

.location_cont .map_info_link {display: flex; gap: 5px;}
.location_cont .map_info_link a {display: flex; gap: 12px; align-items: center; justify-content: center; padding: 10px 25px; background: rgba(255, 255, 255, 0.2); border-radius: 5px;}
.location_cont .map_info_link a:hover {background: rgba(255, 255, 255, 0.5); }
.location_cont .map_info_dl {display: flex; gap: 5px 30px; flex-wrap: wrap;}
.location_cont .map_info_dl dl {display: flex; gap: 15px;}

.location_cont h3 {margin-bottom: 10px;}

.location_cont .hq_top {display: flex; gap: 30px; margin-bottom: 50px;}
.location_cont .hq_top .mapbox {width: 70%; max-width: 1050px;}
.location_cont .hq_top .imgbox {flex: 1;}
.location_cont .hq_top .imgbox img {width: 100%; height: 100%; object-fit: cover;}
.location_cont .hq {margin-bottom: 120px;}
.location_cont .hq .map_info {display: flex; gap: 30px; justify-content: space-between; flex-wrap: wrap; align-items: center;}

.location_cont .factory {display: flex; gap: 50px; align-items: center;}
.location_cont .factory .map_imgbox {width: 50%; max-width: 778px; flex-shrink: 0;}
.location_cont .factory .map_imgbox img {max-width: 100%; height: auto; }
.location_cont .factory .factory_info {flex: 1;}
.location_cont .factory .factory_info .map_info_link {margin-top: 30px;}

/* 조직도 */
:root {
    --organ-margin:100px;
}

.organ_chart .box {width: 250px; min-height: 75px; padding: 12px 10px; border-radius: 5px; text-align: center; position: relative; display: flex; align-items: center; justify-content: center;}

.organ_chart .ceo {display: flex; justify-content: center; margin-bottom: var(--organ-margin); position: relative;}
.organ_chart .ceo .box {background: var(--main);}

.organ_chart .ceo::before {content: ''; position: absolute; left: 50%; bottom: 0; border-left: 1px solid var(--white3); transform: translate(-50%, 100%); height: 275px;}

.organ_chart .depth2 {display: flex; margin-bottom: var(--organ-margin); position: relative;}
.organ_chart .depth2 .box_item {flex: 1;}
.organ_chart .depth2 .box {background: #666; margin: 0 auto;}

.organ_chart .depth2::before {content: ''; position: absolute; left: 50%; top: 50%; width: calc(((50% - 250px) / 2) * 2); border-top: 1px solid var(--white3); transform: translate(-50%,-50%);}

.organ_chart .depth3 {width: 50%; margin-left: auto; display: flex; justify-content: center; position: relative; margin-bottom: var(--organ-margin);}
.organ_chart .depth3 .box {background: #282520; border: 1px solid var(--white);}
.organ_chart .depth3 .box_item:first-child {position: absolute; left: 0; top: 0; transform: translateX(-50%);}

.organ_chart .depth3 .box_item:first-child::after {content: ''; position: absolute; right: 0; top: 50%; width: 200px; border-top: 1px solid var(--white3); transform: translateX(100%);}

.organ_chart .depth4 {display: flex; justify-content: space-between; position: relative;}
.organ_chart .depth4 .box_item {position: relative;}
.organ_chart .depth4 .box_item .box {width: 200px;}
.organ_chart .depth4 .box_item > .box {background: #333; border: 1px solid var(--white3); margin-bottom: 60px;}
.organ_chart .depth4 .box_item .sub_box .box {min-height: auto; background: #282520; border: 1px solid var(--white3);}
.organ_chart .depth4 .box_item .sub_box .box + .box {margin-top: 5px;}


.organ_chart .depth4::before {content: ''; position: absolute; left: 50%; top: -51px; width: calc(100% - 199px); border-top: 1px solid var(--white3); transform: translate(-50%, 0);}
.organ_chart .depth4 .box_item::before {content: ''; position: absolute; left: 50%; top: 0; border-left: 1px solid var(--white3); height: 50px; transform: translate(-50%, -100%);}
.organ_chart .depth4 .box_item:nth-child(3):before {height: 100px;}

.organ_chart .depth4 .box_item:has(.sub_box) > .box::after {content: ''; position: absolute; left: 50%; bottom: 0; border-left: 1px solid var(--white3); height: 60px; transform: translate(-50%, 100%);}



/*******************************************************************************
    @media 1760px
*******************************************************************************/
@media all and (max-width:1760px){
/* 대표 인사말 */
.greeting_cont br {display: none;}
}

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

}

/*******************************************************************************
    @media 1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* 대표 인사말 */
.greeting_in > h3 {font-size: 2rem;}

/* 조직도 */
.organ_chart .box {width: 200px; min-height: 65px;}
.organ_chart .depth4 .box_item .box {width: 160px;}

.organ_chart .depth2::before {width: calc(((50% - 200px) / 2) * 2);}
.organ_chart .depth4::before {width: calc(100% - 160px);}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* 대표 인사말 */
.basic_cont:has(.greeting_cont) {margin-bottom: 150px; margin-top: 80px;}
    
.greeting_in {flex-direction: column; gap: 30px;} 
.greeting_in > * {width: 100% !important; max-width: 100% !important;}
.greeting_in > h3 {font-size: 1.8rem;}
.greeting_in .greeting_txt p.fs20 {margin-bottom: 30px;}
.greeting_in .greeting_txt dd {font-size: 1.4rem;}


/* 찾아오시는 길 */
.location_cont .mapbox .root_daum_roughmap_landing {height: 400px;}

.location_cont h3 {margin-bottom: 5px;}
.location_cont .map_info_link a {padding: 8px 20px; gap: 10px;}
.location_cont .map_info_link a.naver img {width: 12px;}
.location_cont .map_info_link a.kakao img {width: 8px;}
.location_cont .map_info_dl {gap: 3px 20px;}
.location_cont .map_info_dl dl {gap: 10px;}


.location_cont .hq {margin-bottom: 80px;}
.location_cont .hq_top {flex-direction: column; gap: 10px; margin-bottom: 30px;}
.location_cont .hq_top .mapbox {width: 100%;}
.location_cont .hq .map_info {gap: 20px;}


.location_cont .factory {flex-direction: column-reverse; gap: 30px;}
.location_cont .factory > * {width: 100% !important; max-width: 100% !important;} 
.location_cont .factory .map_imgbox img {width: 100%;}
.location_cont .factory .factory_info .map_info_link {margin-top: 20px;}

/* 조직도 */
:root {
    --organ-margin: 60px;
}

.organ_chart .box.fs26 {font-size: 20px;}
.organ_chart .box.fs22 {font-size: 18px;}
.organ_chart .box.fs18 {font-size: 15px;}

.organ_chart .box {width: 150px; min-height: 52px;}
.organ_chart .depth4 .box_item .box {width: 120px;}
.organ_chart .depth4 .box_item > .box {margin-bottom: 30px;}
.organ_chart .depth4 .box_item .sub_box .box {padding: 10px;}


.organ_chart .ceo::before {height: 172px;}
.organ_chart .depth2::before {width: calc(((50% - 150px) / 2) * 2);}
.organ_chart .depth3 .box_item:first-child::after {width: 100px;}
.organ_chart .depth4::before {width: calc(100% - 120px); top: -26px;}
.organ_chart .depth4 .box_item:nth-child(3):before {height: 60px;}
.organ_chart .depth4 .box_item::before {height: 25px;}
.organ_chart .depth4 .box_item:has(.sub_box) > .box::after {height: 30px;}
}

/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
/* 조직도 */
.organ_chart_wrap {position: relative; overflow-x: auto;}
.organ_chart_wrap .responsive-dim.show {display: block;}
.organ_chart_wrap .organ_chart {width: 700px;}
}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* 대표 인사말 */
.basic_cont:has(.greeting_cont) {margin-bottom: 100px; margin-top: 60px;}
.greeting_in > h3 {font-size: 1.6rem;}
.greeting_in .greeting_txt p.fs20 {margin-bottom: 20px; line-height: 160%;}
.greeting_in .greeting_txt dd {font-size: 1.3rem;}

/* 찾아오시는 길 */
.location_cont .mapbox .root_daum_roughmap_landing {height: 280px;}
}

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

}

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

}