@import url('sub.css');

/* Overview */
.basic_cont:has(.overview_cont) {width: 100%; max-width: 100%; margin-bottom: 0;}
.basic_cont:has(.overview_cont) .subtitle_wrap {width: 90%; margin-left: auto; margin-right: auto; max-width: 1590px;}

.overview_cont {padding-bottom: 200px; background: url('/about/img/about_page_bg.png') center / cover no-repeat;}
.overview_in {display: flex; align-items: flex-start; justify-content: space-between; gap: 100px; position: relative;}
.overview_in .txtbox {width: 50%; flex-shrink: 0; max-width: 780px;}
.overview_in .overview_txt_head {margin-bottom: 50px;}
.overview_in .overview_txt_head .fs28 {margin-bottom: 10px;}
.overview_in .overview_txt_body {margin-bottom: 100px;}
.overview_in .overview_txt_body .fs20 {margin-bottom: 20px; line-height: 140%;}
.overview_in .overview_txt_icon {display: flex; justify-content: space-between; gap: 20px;}
.overview_in .overview_txt_icon img {max-width: 100%;}
.overview_in .logobox {position: absolute; right: 0; top: 52%; max-width: 40%;} 
.overview_in .logobox img {max-width: 100%;}


/* 연혁 (메인 게시물 노출) */
.history_top{background:url('/twcenter/bbs/skin/historyBasic/image/history_top.jpg') no-repeat center/cover; box-sizing:border-box; text-align:center; height: 650px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;}
.history_top h3{font-weight: 400;}
.history_top p{color: var(--basicW);}

.basic_cont:has(.history_cont) {width: 100%; max-width: 100%;}
.basic_cont:has(.history_cont) .subtitle_wrap {width: 90%; margin-left: auto; margin-right: auto; max-width: 1590px;}
.wrapper:has(.history_cont) {overflow: initial;}

.history_list_wrap {position: relative;}
.history_in {display: flex; gap: 195px; padding-top: 200px; align-items: flex-start; position: relative; z-index: 2;}
.history_left {width: 510px; flex-shrink: 0; position: sticky; top: 100px;}
.history_left h4 {margin-bottom: 50px; font-weight: 900;}
.history_left img {max-width: 100%;}
.history_list {flex:1}
.history_list .his_in + .his_in {margin-top: 60px;}
.history_list h5 {font-size: 1.944rem; font-weight: 900; line-height: 128.571%; margin-bottom: 20px; position: relative;}
.history_list .dot {position: absolute; left:-64px; top:20px; display: block; width: 9px; height: 9px; border-radius:50%; background:var(--border); z-index: 9; transition:all .3s;}
.history_list .dot::after {content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; background:var(--border); border-radius:50%; position: absolute; left:0; top:0; z-index: 9; animation: dots 1.5s ease-in-out infinite;}
.history_list ul {display: flex; flex-direction: column; gap: 6px;}
.history_list li {position: relative; padding-left: 11px;}
.history_list li::before {content: ''; display: block; width: 3px; height: 3px; background: var(--basic); border-radius: 50%; position: absolute; left: 0; top: 15px;}
@keyframes dots {
    0%{
      opacity: 0.5;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(6);
    }
}

.history_list .his_in.effect .dot {background: var(--main);}
.history_list .his_in.effect .dot::after {background: var(--main);}


.progressbar {display: block; position: absolute; left:644px; top:0; width: 1px; height: 100%; background: var(--border); z-index: 1;}
.progressbar .progress {display: block; width: 1px; height: 0; border-radius: 3px; background: var(--main); position: absolute; left: 50%; top: 0; transition: all 0.3s;}

/* CEO 메시지 */
.greeting_in {display: flex; gap: 30px; align-items: center;}
.greeting_in > div {flex: 1;}
.greeting_in .imgbox img {max-width: 100%;}
.greeting_in .txtbox .fs50 {margin-bottom: 30px;}
.greeting_in .txtbox .greeting_txt_body .fs20  {margin-bottom: 30px;}
.greeting_in .txtbox .ceo_wrap {margin-top: 50px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap;}
.greeting_in .txtbox .ceo_wrap dl {display: flex; align-items: flex-end; gap: 10px; transform: translateY(1px);}
.greeting_in .txtbox .ceo_wrap dl dd {font-size: 1.6667rem; line-height: 133.333%; letter-spacing: var(--letter-spacing-default);}
.greeting_in .txtbox .ceo_img {display: flex;}

/* 조직도 */
.basic_cont:has(.organ_cont) {width: 100%; max-width: 100%; margin-bottom: 0;}
.basic_cont:has(.organ_cont) .subtitle_wrap {width: 90%; margin-left: auto; margin-right: auto; max-width: 1590px;}

.organ_cont {padding: 200px 0; background: url('/about/img/organ_bg.jpg') center / cover no-repeat;}
.organ_cont .toptxt {display: flex; gap: 20px; flex-direction: column; align-items: center; margin-bottom: 80px;}

.organ_chart .ceo {width: 220px; height: 220px; border-radius: 50%; background: var(--black); display: flex; flex-direction: column; align-items: center; gap: 15px; padding-top: 75px; margin-left: auto; margin-right: auto; position: relative; }
.organ_chart .ceo img {max-width: 100%; width: 130px;}

.organ_depth.organ_depth2 {margin: 80px 0;}
.organ_depth ul {display: flex; gap: 30px; justify-content: center; position: relative;}
.organ_depth li {width: calc((100% - 120px) / 5); flex-shrink: 0; flex-grow: 0; text-align: center;}
.organ_depth li .box {border-radius: 10px; background: var(--white); min-height: 70px; padding: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid;}
.organ_depth li .box.box1 {border-color: var(--basic); position: relative;}
.organ_depth li .box.box2 {border-color: var(--border);}
.organ_depth li .box.box3 {border-color: transparent; background: var(--border); flex-direction: column; gap: 7px; padding: 15px 10px 10px; margin-top: 10px;}

.organ_depth li .box2_wrap {margin-top: 20px; display: flex; flex-direction: column; gap: 5px;}

.organ_chart .ceo::before {height: 80px; border-left: 1px solid var(--border); position: absolute; left: 50%; bottom: -80px; transform: translateX(-50%); content: '';}

.organ_depth ul::before {content: ''; display: block; position: absolute; top: -40px; transform: translateX(-50%); left: 50%; border-bottom: 1px solid var(--border); width: calc(((100% + 30px) / 5)* 4);}
.organ_depth.organ_depth3 ul::before {display: none;}

.organ_depth li .box.box1::before {content: ''; display: block; height: 40px; position: absolute; left: 50%; top: -40px; transform: translateX(-50%); border-left: 1px solid var(--border);}
.organ_depth li:nth-child(3) .box.box1::before {display: none;}
.organ_depth.organ_depth3 li .box.box1::before {display: none;}

/* 오시는 길 */
.basic_cont:has(.location_cont) {width: 100%; max-width: 100%; }
.basic_cont:has(.location_cont) .subtitle_wrap {width: 90%; margin-left: auto; margin-right: auto; max-width: 1590px;}

.location_cont .mapbox {position:relative; margin-bottom:50px; line-height:0;}
.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 {display: flex; gap:10px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;}
.location_cont .map_info_left .dl_wrap {display: flex; gap: 2px 20px; margin-top: 5px; flex-wrap: wrap;}
.location_cont .map_info_left .dl_wrap dl {display: flex; gap: 5px; align-items: center;}
.location_cont .map_info_left .dl_wrap dt {display: flex;}
.location_cont .map_info_left .dl_wrap dt::before {font-size: 20px;}
.location_cont .map_info_left .dl_wrap dt.tel::before {content:'\e0b0';}
.location_cont .map_info_left .dl_wrap dt.email::before {content:'\e158';}
.location_cont .map_info_left .dl_wrap dd {letter-spacing: var(--letter-spacing-relaxed);}

.location_cont .map_info_right {flex-shrink: 0;}
.location_cont .map_info_right ul {display: flex; gap: 4px;}
.location_cont .map_info_right a {width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;}
.location_cont .map_info_right a img {transition: all 0.5s ease;}
.location_cont .map_info_right a:not(.google) img:last-child {opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.location_cont .map_info_right a.naver {background: #10d265; border: 1px solid #10d265;}
.location_cont .map_info_right a.kakao {background: #FAE100; border: 1px solid #FAE100;}
.location_cont .map_info_right a.google {background: var(--white); border: 1px solid #D4DBE0;}

.location_cont .map_info_right a:not(.google):hover img:first-child {opacity: 0;}
.location_cont .map_info_right a:not(.google):hover img:last-child {opacity: 1;}

.location_cont .map_info_right a.naver:hover {background: var(--white);}
.location_cont .map_info_right a.kakao:hover {background: #371C1D; border-color: #371C1D;}

.location_cont .map_info_right a.google:hover {border-color: var(--black);}


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

}

/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){
/* Overview */
.overview_in br {display: none;}
.overview_in .txtbox {width: 55%;}

/* CEO 메시지 */
.greeting_in br {display: none;}
}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* history */
.history_in {gap: 120px;}
.history_left {width: 400px;}
.progressbar {left: 460px;}

/* CEO 메시지 */
.greeting_in {align-items: flex-start;}
}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* Overview */
.overview_cont {padding-bottom: 120px;}

.overview_in .logobox {top: 40%;}

.overview_in .overview_txt_head {margin-bottom: 40px;}
.overview_in .overview_txt_head .fs28 {margin-bottom: 5px;}
.overview_in .overview_txt_body {margin-bottom: 70px;}
.overview_in .overview_txt_body .fs20 {margin-bottom: 10px;}

/* History */
.history_top {height: 450px;}

.history_in {gap: 80px; padding-top: 120px;}
.history_left {width: 300px;}
.history_left h4 {margin-bottom: 30px;}
.history_list h5 {margin-bottom: 12px; font-size: 1.5rem;}
.history_list ul {gap: 4px;}
.history_list li::before {top: 12px;}
.history_list .dot {left: -35px; top: 11px;}

.progressbar {left: 349px;}

/* CEO 메시지 */
.greeting_in .txtbox .fs50 {margin-bottom: 20px;}
.greeting_in .txtbox .greeting_txt_body .fs20 {margin-bottom: 20px;}
.greeting_in .txtbox .ceo_wrap {margin-top: 30px;}
.greeting_in .txtbox .ceo_wrap dl {transform: translateY(0); align-items: flex-start;}
.greeting_in .txtbox .ceo_wrap dl dd {font-size: 1.3rem;}

/* 조직도 */
.organ_cont {padding: 120px 0;}
.organ_cont .toptxt {margin-bottom: 60px; gap: 12px;}

.organ_chart .ceo {width: 180px; height: 180px; padding-top: 61px}
.organ_chart .ceo img {width: 100px;}

.organ_depth ul {gap: 15px;}
.organ_depth li {width: calc((100% - 60px) / 5);}
.organ_depth li .box {min-height: 55px; padding: 8px; border-radius: 5px;}

.organ_depth li .box.box3 {padding: 10px 8px 8px; gap: 5px;}
.organ_depth li .box.box3 img {width: 35px; height: auto; max-width: 100%;}

.organ_depth ul::before {width: calc(((100% + 15px) / 5)* 4); top: -30px;}

.organ_depth.organ_depth2 {margin: 60px 0;}
.organ_depth li .box2_wrap {margin-top: 12px;}

.organ_chart .ceo::before {bottom: -60px; height: 60px;}
.organ_depth li .box.box1::before {height: 30px; top: -30px;}

/* 오시는 길 */
.location_cont .mapbox {margin-bottom: 30px;}
.location_cont .mapbox .root_daum_roughmap_landing {height: 400px;}
.location_cont .map_info_left .dl_wrap dt::before {font-size: 18px;}

.location_cont .map_info_right a {width: 50px; height: 50px;}

.location_cont .map_info_right a.naver img {width: 15px; height: auto;}
.location_cont .map_info_right a.kakao img {width: 9px; height: auto;}
.location_cont .map_info_right a.google img {width: 20px; height: auto;}
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* Overview */
.overview_cont {padding-bottom: 70px;}

.overview_in {flex-direction: column-reverse; gap: 40px;}
.overview_in .txtbox {width: 100%; max-width: 100%;}
.overview_in .overview_txt_head {margin-bottom: 25px;}
.overview_in .overview_txt_body {margin-bottom: 50px;}
.overview_in .logobox {position: static; max-width: 100%;}
.overview_in .logobox img {max-width: 300px; width: 100%;}

/* History */
.history_top {height: 300px; gap: 10px;}
.history_top br {display: none;}

.history_in {flex-direction: column; gap: 30px; padding-top: 70px; padding-left: 40px;}
.history_left {width: 100%; position: static;}
.history_left h4 {margin-bottom: 20px;}
.history_list h5 {margin-bottom: 5px; font-size: 1.4rem;}
.history_list .dot {left: -44px; top: 8px;}
.history_list li {padding-left: 9px;}
.history_list li::before {top: 11px;}
.history_list .his_in + .his_in {margin-top: 20px;}

.progressbar {left: 0;}

/* CEO 메시지 */
.greeting_in {flex-direction: column-reverse;}
.greeting_in .txtbox .fs50 {margin-bottom: 15px;}
.greeting_in .txtbox .greeting_txt_body .fs20 {margin-bottom: 15px;}
.greeting_in .txtbox .ceo_wrap {margin-top: 20px;}
.greeting_in .txtbox .ceo_wrap dl {width: 100%; gap: 7px;}
.greeting_in .txtbox .ceo_img img {height: 40px;}

/* 조직도 */
.organ_cont {padding: 70px 0;}

.organ_cont .toptxt {margin-bottom: 40px; gap: 5px;}
.organ_cont .toptxt br {display: none;}

.organ_chart_wrap {overflow-x: auto; position: relative;}
.organ_chart_wrap .responsive-dim.show {display: block;}
.organ_chart {width: 800px;}

.organ_chart .ceo {width: 120px; height: 120px; padding-top: 39px; gap: 8px;}
.organ_chart .ceo img {width: 80px;}

.organ_chart .ceo::before {bottom: -40px; height: 40px;}
.organ_depth ul::before {top: -20px;}
.organ_depth li .box.box1::before {height: 20px; top: -20px;}

.organ_depth.organ_depth2 {margin: 40px 0;}

/* 오시는 길 */
.location_cont .mapbox .root_daum_roughmap_landing {height: 280px;}
.location_cont .map_info_left .dl_wrap dl {gap: 3px;}
.location_cont .map_info_left .dl_wrap dt::before {font-size: 16px;}

.location_cont .map_info_right a {width: 40px; height: 40px;}

.location_cont .map_info_right a.naver img {width: 13px;}
.location_cont .map_info_right a.kakao img {width: 8px;}
.location_cont .map_info_right a.google img {width: 17px;}
}