@charset "UTF-8";
/* cn_public_mobility */
.skip_navi{display: none;}

.sub-visual{display: flex; width:100%; height:460px; padding:80px 0;; background: var(--gray-500);}
.sub-content{width:100%; min-height:500px;}
.visual-inner{display: flex; justify-content: space-between; align-items: flex-end; max-width:1440px; width:100%; margin:0 auto;}
.visual-inner h2{display: flex; flex-direction: column; color:var(--gray-0);}
.visual-inner h2 .desc1{font-size:42px; font-weight: 700;}
.visual-inner h2 .desc2{font-size:18px; opacity: .75; font-weight: 300;}
.visual-inner > ul{display: flex; gap:15px; }
.visual-inner > ul > li{position: relative; display: inline-flex; align-items: center; justify-content: space-between; min-width: 150px; padding: 10px 15px; font-size: 18px; color:var(--gray-0); border: 1px solid var(--gray-100); border-radius: 100px; background: rgba(255, 255, 255, .25); backdrop-filter: blur(10px); transition: all .3s ease; cursor: pointer;}
.visual-inner > ul > li:hover{background: rgba(255, 255, 255, .5);}
.visual-inner > ul > li > span{font-size:14px;}
.visual-inner > ul > li > ul{position: absolute; left:0; top:calc(100% - 10px); width:100%; border:1px solid var(--gray-0); border-radius: 20px; background: #f8f8f8; backdrop-filter: blur(30px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; transition: all .3s ease;}
.visual-inner > ul > li > ul::before{position: absolute; content:''; left:0; bottom:100%; width:100%; height:11px;}
.visual-inner > ul > li.is-on > ul{top:calc(100% + 10px); opacity: 1; visibility: initial;}
.visual-inner > ul > li > ul li{overflow: hidden;}
.visual-inner > ul > li > ul li:first-child{border-radius: 20px 20px 0 0;}
.visual-inner > ul > li > ul li:last-child{border-radius: 0 0 20px 20px;}
.visual-inner > ul > li > ul li a{display: flex; align-items: center; padding: 10px 15px; color:var(--gray-500); font-size:14px; transition: all .3s ease;}
.visual-inner > ul > li > ul li:hover a{background: var(--gray-50);}

.sub-visual.bg1{background: url("../img/sec1-bg.png") no-repeat center / cover;}
.sub-visual.bg2{background: url("../img/bus-bg2.jpg") no-repeat center top / cover;}
.sub-visual.bg3{background: url("../img/bus-bg3.png") no-repeat center / cover;}
.sub-visual.bg4{background: url("../img/bus-bg4.png") no-repeat center / cover;}
.sub-visual.bg5{background: url("../img/bus-bg5.png") no-repeat center / cover;}


.sub-content{padding:50px 0; background: url("../img/sub-bg.png") no-repeat center / cover;}
.sub-intro{max-width:1200px; width:100%; margin:0 auto 75px;}
.sub-intro p{font-size:36px; font-weight: 700;}
.sub-inner{max-width:1200px; width:100%; margin:0 auto;}

@media (max-width:1440px) {
    .visual-inner{width:90%;}
}

@media (max-width:1200px) {
    .sub-intro,
    .sub-inner{width:90%;}
}

@media (max-width:1024px) {
    .visual-inner h2 .desc1{font-size:36px;}
    .visual-inner h2 .desc2{font-size:16px;}
    .visual-inner > ul > li{font-size:16px;}
    .sub-intro p{font-size:28px;}
}

@media (max-width:768px) {
    .sub-visual{height:320px;}
    .visual-inner{flex-direction: column; justify-content: center; align-items: center; gap:25px;}
    .visual-inner h2{justify-content: center; align-items: center; text-align: center;}
    .sub-content{padding:40px 0;}
    
}

@media (max-width:425px) {
    .visual-inner h2 .desc1{font-size:28px;}
    .visual-inner h2 .desc2{font-size:14px;}
    .visual-inner > ul > li{padding:7px 10px;}
    .sub-visual{height:280px; padding:0;}
    .sub-content{padding:30px 0;}
    .sub-intro{margin-bottom:50px;}
    .sub-intro,
    .sub-inner{width:95%;}
    .sub-intro p{font-size:24px;} 

}


/* 인사말 */
#greeting .sub-inner p{color:#4F4F4F; font-size:18px; margin-bottom:25px;}
#greeting .sub-inner p span{color:var(--blue-500); font-weight: 600;}
#greeting .sub-inner ul{display: flex; flex-direction: column; gap:25px; margin:50px 0;}
#greeting .sub-inner ul li{padding:35px; border:2px solid #fff; border-radius: 15px; background: #fafafa; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);}
#greeting .sub-inner ul li p{margin:0;}
#greeting .sub-inner .signature{display: flex; justify-content: flex-end; align-items: flex-end; gap:15px; margin:0; line-height: 1; }
#greeting .sub-inner .signature span{color:#4F4F4F;}
#greeting .sub-inner .signature .desc1{font-size:16px;}
#greeting .sub-inner .signature .desc2{font-size:24px; color:#000; letter-spacing: 20px; margin-right:-20px;}
@media (max-width:425px) {
    #greeting .sub-inner p{font-size:14px; margin-bottom:15px;}
    #greeting .sub-inner ul{margin:25px 0; gap:15px;}
    #greeting .sub-inner ul li{padding:15px;}
    #greeting .sub-inner .signature{margin-top:25px; justify-content: center; align-items: center;}
}



#mb-Introduction .cont-wrap{border-top:3px solid var(--gray-900)}
#mb-Introduction .cont{display: flex; padding:25px 0;}
#mb-Introduction .cont h2{width:20%; font-size:28px; font-weight: 700;}
#mb-Introduction .cont ul{display: flex; flex-direction: column; gap:25px; width:80%;}
#mb-Introduction .cont h4{font-size:20px; font-weight: 700;}
#mb-Introduction .cont1 ul li{display: flex; flex-direction: column; gap:10px;}
#mb-Introduction .cont2 ul li{display: flex; gap:25px; border-radius: 25px; padding:35px; border:3px solid #fff; background: #fafafa90; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);}
#mb-Introduction .cont2 ul li i{display: flex; align-items: center; justify-content: center; width:65px; aspect-ratio: 1;}
#mb-Introduction .cont2 ul li img{width:100%;}
#mb-Introduction .cont2 ul li .txt{display: flex; flex-direction: column; justify-content: center; gap:10px; width:calc(100% - 90px);}
@media (max-width:1024px) {
    #mb-Introduction .cont h2{font-size:24px;}
    #mb-Introduction .cont h4{font-size:18px;}
    #mb-Introduction .cont2 ul li{padding:15px;}
}

@media (max-width:768px) {
    #mb-Introduction .cont{flex-direction: column; gap:25px; border-bottom:1px solid var(--gray-50)}
    #mb-Introduction .cont h2{width:auto;}
    #mb-Introduction .cont h2 br{display: none;}
    #mb-Introduction .cont ul{width:100%;}
}

@media (max-width:425px) {
    #mb-Introduction .cont2 ul li{gap:10px;}
}


/* 연혁 */
#history .sub-inner{display: flex; flex-direction: column;}
#history .history-item{display: flex; padding:50px 0;}
#history .history-item:first-child{padding-top:0;}
#history .history-item:last-child{padding-bottom:0;}
#history .history-item .year{position: relative; display: inline-flex; align-items: flex-start; min-width:225px; text-align: center; font-size:40px; font-weight: 800; line-height: 1;}
#history .history-item ul{position: relative; display: flex; flex-direction: column; gap:10px; width:calc(100% - 175px); padding:22px 50px 0;}
#history .history-item ul::before{position: absolute; content:''; right:100%; top:0; transform: translateX(50%); width:1px; height:calc(100% + 100px); background: var(--gray-50);}
#history .history-item:last-child ul::before{height:100%;}
#history .history-item ul::after{position: absolute; content:''; right:100%; top:25px; transform: translateX(50%); width:15px; height:15px; border:5px solid var(--blue-500); border-radius: 50%;}
#history .history-item ul li{display: flex; gap:25px;}
#history .history-item ul li .date{width:45px; font-weight: 700; line-height: 1; padding-top:4px; color:var(--gray-200)}
#history .history-item ul li p{display: flex; flex-direction: column; gap:10px; width:calc(100% - 70px); font-size:21px; line-height: 1;}
#history .history-item ul li p span{word-break:auto-phrase;}
@media (max-width:768px) {
    #history .history-item .year{min-width:165px; font-size:35px;}
    #history .history-item ul{width:calc(100% - 165px); padding-right:0;}
    #history .history-item ul li{flex-direction: column; gap:15px;}
    #history .history-item ul li p{font-size:18px; line-height: 1.4;}
}


@media (max-width:600px) {
    #history .history-item .year{font-size:30px; min-width:115px;}
    #history .history-item ul{width:calc(100% - 115px); padding-top:10px; padding-left:25px; padding-right:0;}
    #history .history-item ul li p{font-size:16px;}
    #history .history-item ul::after{top:12px;}
    #history .history-item{padding:25px 0;}
    
}


/* 조직도: 문구와 박스 사이 기본 50px(20+30), 작은 화면 30px */
#organization .sub-intro{margin-bottom:20px;}
#organization .cont-wrap{display: flex; gap:75px; padding:30px 0;}
#organization .cont{display: flex; align-items: center; flex:1 1 0; --gap:40px; gap:var(--gap);}
#organization .item-group{display: flex; flex-direction: column; width:calc((100% - (var(--gap) * 3)) / 4); gap:var(--gap);}
#organization .item{position: relative; display: flex; align-items: center; justify-content: center; min-width:130px; padding:12px 28px; border-radius: 15px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); font-weight: 700; font-size:18px;}
/* 왼쪽 영역: 넓은 화면에서도 세로 형태(이사장→부이사장→전무이사→사업부/총무부) */
#organization .cont-left{flex-direction: column;}
#organization .cont-left .item-group{width:auto;}
#organization .cont-left .item::before{position: absolute; content:''; left:50%; top:100%; width:1px; height:40px; background: var(--blue-500); transform: translateY(0) translateX(-50%);}
#organization .cont-left .item-group:nth-child(1) .item{background: var(--blue-500); color:#fff;}
#organization .cont-left .item-group:nth-child(3) .item::before{width:1px; height:20px;}
#organization .cont-left .item-group:last-child .item::before{width:1px; height:20px; left:50%; top:0; transform: translateY(-100%) translateX(0);}
#organization .cont-left .item-group:last-child{position: relative; flex-direction: row;}
#organization .cont-left .item-group:last-child::before{position: absolute; content:''; width:calc(100% - 132px); height:1px; left:calc(50% + 1px); top:0; background: var(--blue-500); transform: translateY(-20px) translateX(-50%);}
#organization .cont-right{flex-direction: column;}
#organization .cont-right .item-group{flex-direction: row; width:auto;}
#organization .cont-right .item-group .item{background: #0045bd; color:#fff;}
#organization .cont-right .item-group:nth-child(2) .item{background: var(--blue-500); color:#fff;}
/* 오른쪽 영역 연결선: 이사장 - 이사회/감사 */
#organization .cont-right .item-group:first-child{position: relative;}
#organization .cont-right .item-group:first-child::after{position: absolute; content:''; left:50%; top:100%; width:1px; height:20px; background: var(--blue-500); transform: translateX(-50%);}
#organization .cont-right .item-group:last-child{position: relative;}
#organization .cont-right .item-group:last-child::after{position: absolute; content:''; left:50%; top:0; width:170px; height:1px; background: var(--blue-500); transform: translate(-50%, -20px);}
#organization .cont-right .item-group:last-child .item{position: relative;}
#organization .cont-right .item-group:last-child .item::before{position: absolute; content:''; left:50%; top:0; width:1px; height:20px; background: var(--blue-500); transform: translate(-50%, -100%);}
@media (max-width:1024px) {
    #organization .cont-wrap{flex-direction: column;}
    #organization .cont{flex-direction: column;}
    #organization .item-group{width:auto;}
}

@media (max-width:425px) {
    #organization .sub-intro{margin-bottom:0;}
    #organization .cont-wrap{padding:30px 0;}
    #organization .cont{--gap:25px; gap:25px;}
    /* 왼쪽: gap(25px)에 맞춰 연결선 높이 일치 */
    #organization .cont-left .item::before{height:25px;}
    #organization .cont-left .item-group:nth-child(3) .item::before{height:12.5px;}
    #organization .cont-left .item-group:last-child .item::before{height:12.5px;}
    #organization .cont-left .item-group:last-child::before{left:50%; transform: translateY(-12.5px) translateX(-50%);}
    /* 오른쪽(총회→이사회/감사): 가로선에만 닿도록 세로선 높이, 가로선은 박스 밖 삐져나오지 않게 */
    #organization .cont-right .item-group:first-child::after{height:12.5px;}
    #organization .cont-right .item-group:last-child::after{width:155px; transform: translate(-50%, -12.5px);}
    #organization .cont-right .item-group:last-child .item::before{height:12.5px;}
}


/* 역대이사장 */
#presidents ul{display: flex; flex-wrap: wrap; --gap: 35px; gap:var(--gap);}
#presidents ul li{display: flex; flex-direction: column; align-items: center; justify-content: center; gap:25px; width:calc((100% - (var(--gap) * 4)) / 5); padding:50px 0; border-radius: 15px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); }
#presidents ul li *{line-height: 1;}
#presidents ul li:first-child{box-shadow: 0 20px 40px #02389650;}
#presidents ul li .gen{padding:7px 10px; font-size:13px; background: var(--gray-100); border-radius: 100vw;}
#presidents ul li:first-child .gen{background: #236df7ab;}
#presidents ul li h4{font-size:24px; font-weight: 700;}
#presidents ul li .day{display: flex; flex-direction: column; align-items: center; justify-content: center; gap:5px; font-size:14px;}
@media (max-width:1024px) {
    #presidents ul li{width:calc((100% - (var(--gap) * 2)) / 3);}
}

@media (max-width:600px) {
    #presidents ul li{width:calc((100% - (var(--gap) * 1)) / 2);}
}

@media (max-width:425px) {
    #presidents ul{--gap:15px}
}

@media (max-width:320px) {
    #presidents ul li{width:100%;}
}

/* 오시는길 */
#Directions .cont-map-wrap{position: relative; display: flex;}
#Directions .cont-map{position: relative; width:100%; aspect-ratio: 16 / 9; border:1px solid var(--gray-50)}
#Directions .cont-map::after{position: absolute; content:''; left:50%; top:50%; transform: translate(-50%,-50%); width:100%; height:100%; z-index: 1;}
#Directions .map-info{display: flex; flex-wrap: wrap; gap:35px; position: absolute; left:50%; bottom:25px; transform: translateX(-50%); width:calc(100% - 50px);  padding:25px; border-radius: 15px; background: rgba(255, 255, 255, .75);; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); z-index: 1;}
#Directions .map-info li{display: flex; align-items: center; gap:10px;}
#Directions .map-info li .tit{font-size:13px; font-weight: 600; opacity: .75; color:var(--blue-500);}
.root_daum_roughmap .wrap_map,
.root_daum_roughmap_landing{width:100% !important; height:100% !important;}
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont{display: none;}
.root_daum_roughmap_landing .border1,
.root_daum_roughmap_landing .border2,
.root_daum_roughmap_landing .border3,
.root_daum_roughmap_landing .border4{display: none;}


@media (max-width:950px) {
    #Directions .map-info{flex-wrap: wrap; gap:15px;}
}

@media (max-width:768px) {
    #Directions .cont-map{aspect-ratio:1 ;}
}

@media (max-width:425px) {
    #Directions .cont-map{aspect-ratio: 1 / 1.75;}
}

/* 게시판 */
.admin_board .condition{padding:0 !important; border:0 !important;}
.admin_board .condition form{display: flex; justify-content: flex-end; gap:10px;}
.admin_board .condition .f_select select{border:1px solid #dde2e5 !important; border-radius: 5px;}
.admin_board .condition .item + .item{margin:0 !important;}
.admin_board .condition .f_search input[type=text]{font-size:14px !important; font-weight: 300 !important; padding:0 15px !important;}
.admin_board .board_list caption{display: none;}
.admin_board .board_list th,
.admin_board .board_list td{padding:15px 0 !important;}
.admin_board .board_view_top .tit{word-break: break-all;}
.admin_board .board_view_top .info{flex-wrap: wrap;}
.admin_board .board_view_top .info dl > *{white-space: nowrap;}
@media (max-width:700px) {
    .admin_board .board_view_top .info{align-items: center; justify-content: center;}
.admin_board .board_view_top .info{gap:15px !important;}
}
.admin_board #paging_div ul > *,
.admin_board #paging_div ul li a,
.admin_board #paging_div ul li strong{width:40px !important; height:40px !important; border-radius: 100%;}