/* iframe 스타일 */
.chartbox iframe {
    width: 100%;
    height: 750px;
    border: none;
    display: block;
}

/* --------------------------------------- */
/* [필수] 로딩바 CSS 추가 */
/* --------------------------------------- */
#loading-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: transparent;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;

    /* [추가됨] 트랙(배경) 자체를 둥글게 처리 */
    border-radius: 4px;
    /* border-radius: 0 0 4px 4px; 위쪽은 직각(박스에 붙음), 아래쪽만 둥글게 */

    /* [중요] 내부의 파란색 바가 둥근 모서리를 뚫고 나가지 않게 자름 */
    overflow: hidden;
}

#loading-track.active {
    opacity: 1;
    background-color: #e0e0e0;
}

#loading-bar {
    width: 0%;
    height: 100%;
    background-color: #004ea2;
    /* 로딩바 색상 */
    transition: width 0.3s ease;

    /* 오른쪽 끝부분 둥글게 (진행되는 앞부분) */
    border-radius: 0 4px 4px 0;

    /* 입체감 그림자 */
    box-shadow: 2px 0 5px rgba(0, 78, 162, 0.4);
}

/* 학내, 학외 */
.pfrmSys { position: relative; } 
.pfrmSys::before { position: absolute; bottom: -5.5rem; left: -7rem; width: calc(100vw + 7rem); height: 12.75rem; background: linear-gradient(to right, #9EE6EB, #58A6E5); border-radius: 12rem 0 0 0; opacity: 0.2; content: ""; z-index: -1; }
.pfrmSys ul { display: flex; flex-wrap: wrap; gap: 2rem; }
.pfrmSys ul li { width: calc((100% - 6rem) / 4); }
.pfrmSys.typ2 ul li { width: calc((100% - 8rem) / 5); }
.pfrmSys ul li a { display: block; height: 100%; background: #fff; border-radius: 0.8rem; padding: 1.5rem; border: 2px solid #fff; box-shadow: 0 0 15px rgba(47, 95, 124, 0.25); transition: 0.3s; }
.pfrmSys ul li a .img { display: flex; justify-content: center; align-items: center; height: 8rem; margin: 0 auto; text-align: center; }
.pfrmSys.iconTy ul li a .img { width: 7rem; height: 7rem; border-radius: 50%; background: #EEF5FE; }
.pfrmSys ul li a .img img { max-width: 100%; }
.pfrmSys ul li a .txt_box { padding-top: 1.5rem; border-top: 1px solid #ddd; text-align: center; }
.pfrmSys.iconTy ul li a .txt_box { margin-top: 1.5rem; }
.pfrmSys ul li a .txt_box span { display: block; font-family: 'Montserrat'; margin-bottom: 0.5rem; font-size: 0.85rem; color: #7E8D92; transition: 0.3s; }
.pfrmSys ul li a .txt_box .tit { position: relative; display: inline-block; padding-right: 1.3rem; font-size: 1rem; font-weight: 500; transition: 0.3s; }
.pfrmSys ul li a .txt_box .tit::before { position: absolute; top: 0; right: 0; font-family: 'remixicon'; color: #999; content: "\ecaf"; font-weight: 500; transition: 0.3s; }
.pfrmSys ul li a:hover,
.pfrmSys ul li a:focus { border-color: #1672A9; border-radius: 0.8rem 3rem 0.8rem 0.8rem; }
.pfrmSys ul li a:hover .txt_box span,
.pfrmSys ul li a:focus .txt_box span { color: #003E8A; font-weight: 600; } 
.pfrmSys ul li a:hover .txt_box .tit,
.pfrmSys ul li a:focus .txt_box .tit { font-weight: 600; } 
.pfrmSys ul li a:hover .txt_box .tit::before,
.pfrmSys ul li a:focus .txt_box .tit::before { color: #245592; } 
.pfrmSys .data + .data { margin-top: 2rem; }
.pfrmSys .data:nth-child(3) ul li a { background: #F6FFE9; border-color: #F6FFE9; }
.pfrmSys .data:nth-child(3) ul li a:hover,
.pfrmSys .data:nth-child(3) ul li a:focus { border-color: #7cb725; }
.pfrmSys .data:nth-child(1) ul li a { background: #FFF7EB; border-color: #FFF7EB; }
.pfrmSys .data:nth-child(1) ul li a:hover,
.pfrmSys .data:nth-child(1) ul li a:focus { border-color: #f19711; }

/* 인사말 */
.greeting{position:relative; padding-right:23.5rem;}
.greeting .sign{display:flex; align-items:flex-end; position:relative; margin-top:1.8rem; gap:0.5rem;}
.greeting .sign span:not(.name){font-size:1rem; color:#000; line-height:1.3;}
.greeting .sign .name{padding-bottom:0.2rem; font-size:0; line-height:0;}
.greeting .grtImg{display:flex; flex-direction:column; align-items:center; position:absolute; top:0; right:0;}
.greeting .grtImg > span{position:absolute; top:2.5rem; left:-2rem; font-size:0.95rem; color:#DEE5ED; line-height:1.3; letter-spacing:0.05em; font-weight:500; font-family:'Montserrat'; writing-mode:vertical-rl; text-orientation: mixed; transform: rotate(180deg);}
.greeting .grtImg .img{display:flex; position:relative; width:18rem;}
.greeting .grtImg .img:before{display:block; position:absolute; bottom:-0.8rem; right:-0.8rem; width:calc(100% - 0.5rem); height:65%; background:#0084E2; border-bottom-right-radius:4.5rem; content:'';}
.greeting .grtImg .img img{overflow:hidden; position:relative; border-radius:4rem 0 4rem 0.75rem;}
.greeting .grtTxt{word-break:keep-all;}
.greeting .grtTxt .txt{display:flex; flex-direction:column; position:relative; gap:1.6rem; padding:2.5rem 1.5rem 0 0;}
.greeting .grtTxt .txt:before{position:absolute; z-index:-2; top:0; right:0; width:100vw; height:100vh; background:#F7FBFE; border-top-right-radius:10rem; content:'';}
.greeting .grtTxt .txt > p{font-size:1rem; line-height:1.7; font-weight:400;}
.greeting .grtTit{position:relative; padding:1.25rem 0 1.5rem;}
.greeting .grtTit .title{position:relative; font-size:1.6rem; line-height:1.2; font-weight:700;}
.greeting .grtTit .title:after{display:block; position:absolute; top:-0.2rem; left:calc(100% + 0.4rem); width:0.8rem; height:0.8rem; background:#0084E2; border-radius:100%; content:'';}
.greeting .grtTit > p:not(.title){margin-top:0.8rem; font-size:1.2rem; line-height:1.65; font-weight:400;}
.greeting .grtTit .pc_blue2{color: #0084E2;}

/* 조직도 */
.work_list{display:flex; position:relative; gap:1.8rem;}
.work_list ol{display:flex; flex-direction:column; position:relative; flex:1; min-width:0; gap:1rem;}
.work_list ol:before{display:block; position:absolute; z-index:-1; top:0; left:calc((100% - 1px) / 2); width:1px; height:100%; background:#ccc; content:'';}
.work_list ol li{display:flex; align-items:center; position:relative; width:100%; height:3.75rem; padding:0.8rem 1.5rem; background:#fff; border-radius:3rem; font-size:0.9rem; line-height:1.2;}
.work_list ol li .num{display:flex; flex-shrink:0; align-items:center; width:1.75rem; padding-top:0.2rem; font-size:15px; line-height:1.5; font-weight:700; font-family:'GmarketSans';}
.work_list ol:nth-child(1) li{border:1px solid #22C0D5;}
.work_list ol:nth-child(1) li:nth-child(even){background:#F6FDFD;}
.work_list ol:nth-child(1) li .num{color:#07A3B4;}
.work_list ol:nth-child(2) li{border:1px solid #0087E6;}
.work_list ol:nth-child(2) li:nth-child(even){background:#F7FBFE;}
.work_list ol:nth-child(2) li .num{color:#245592;}

/* 오시는 길 */
.map_box{display:block; position:relative; width:100%; margin-top:2.2rem;}
.map_box .map{display:block; overflow:hidden; position:relative; width:100%; height:27rem; border-radius:16px;}
.map_box .cont{position:relative; width:100%;}
.map_box .cont .section{position:relative; width:100%; padding:0 2rem;}
.map_box .cont .section > div{display:flex; align-items:center; position:relative; padding:1.5rem 0;}
.map_box .cont .section > div + div:before{display:block; position:absolute; top:0; left:0; width:100%; height:1px; background:#ccc; content:'';}
.map_box .cont .section .bus .tit{align-self:flex-start;}
.map_box .cont .section .tit{display:flex; align-items:center; position:relative; width:16rem; gap:0.5rem; font-size:1.1rem; font-weight:700;}
.map_box .cont .section .tit i {font-weight:500;}
.map_box .cont .section .con{display:flex; align-items:center; position:relative; flex:1; min-width:0;}
.map_box .cont .section .con .list_st1{width:100%;}
.map_box .cont .section .con .list_st1 li:before{top:calc(50% - 0.35rem);}
.map_box .cont .section .con .btnGrp{display:inline-flex; align-items:center; margin-left:1rem; gap:0.5rem;}

/* 연혁 */
.history { position: relative; }
.history::before { position: absolute; top: -13rem; right: calc(100% - 16rem); width: 29.15rem; height: 21rem; background: url('/images/web/upmc/sub/history_deco01.png') no-repeat center; content: ""; z-index: -1; }
.history::after { position: absolute; bottom: -10rem; left: 100%; width: 20.6rem; height: 27.4rem; background: url('/images/web/upmc/sub/history_deco02.png') no-repeat center; content: ""; z-index: -1; }
.history .img_box { position: relative; height: 17rem; border-radius: 1rem; overflow: hidden; }
.history .img_box .img { height: 100%; display: flex; justify-content: center; align-items: end; }
.history .img_box .txt { position: absolute; bottom: 0; right: 0; max-width: calc(100% - 2rem); background: #fff; padding: 1rem 2.2rem; color: #0E3361; font-size: 1.5rem; border-radius: 1.5rem 0 0 0; word-break: keep-all; text-align: right; }
.history .img_box .txt strong { font-weight: 700; }
.history .img_box .txt::before { position: absolute; bottom: 100%; right: 0; width: 1.65rem; height: 1.65rem; background: url('/images/web/upmc/sub/history_txt_deco.png') no-repeat center; content: ""; }
.history .img_box .txt::after { position: absolute; bottom: 0; right: 100%; width: 1.65rem; height: 1.65rem; background: url('/images/web/upmc/sub/history_txt_deco.png') no-repeat center; content: ""; }
.history .list_box { margin-top: 4rem; }
.history .list_box dl + dl { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #ddd; }
.history .list_box dl { display: flex; gap: 4rem; }
.history .list_box dl dt { width: 16rem; height: fit-content; font-size: 2.25rem; font-family: 'Montserrat'; font-weight: 800; color: #245592; background: url('/images/web/upmc/sub/history_line.png') no-repeat center right; line-height: normal; }
.history .list_box dl dd { width: calc(100% - 20rem); flex: 1; margin-top: 0.7rem; }
.history .list_box dl dd .lst { display: flex; } 
.history .list_box dl dd .lst + .lst { margin-top: 2.25rem; }
.history .list_box dl dd .lst .date { width: 7.3rem; font-size: 1rem; font-weight: 700; font-family: 'Montserrat'; color: #333; }
.history .list_box dl dd .lst ul { width: calc(100% - 7.3rem); flex: 1; }
.history .list_box dl dd .lst ul li { position: relative; padding-left: 0.7rem; color: #111; font-size: 1rem; }
.history .list_box dl dd .lst ul li::before { position: absolute; top: 0.55rem; left: 0; width: 4px; height: 4px; border-radius: 1px; background: #A4AAB3; content: "";  }
.history .list_box dl dd .lst ul li + li { margin-top: 0.75rem; }

/* SDG */
.SDG {display:flex;gap:0.5rem;flex-wrap: wrap;}
.SDG a{width: calc((100% / 9) - 0.45rem);}
.SDG a img{max-width: 100%;}

@media (min-width:769px) {
    /* 운영목표 */ 
    .box_st_img.type2{padding:0; border:none; border-radius:0;}


}

@media (min-width:1025px) {
    /* 인사말 */
    .greeting .grtTxt .sign{display:none;}
}

@media (min-width:1441px) {
    /* 인사말 */
    .greeting .grtTxt .txt{padding-bottom:1.5rem;}
}

@media (max-width:1440px){
    /* 학내, 학외 */
    .pfrmSys ul { gap: 1.5rem; }
    .pfrmSys ul li { width: calc((100% - 4.5rem) / 4) !important; }
    .pfrmSys .data + .data { margin-top: 1.5rem; }
    
    /* 인사말 */
    .greeting{padding-right:20rem;}
    .greeting .grtImg > span{top:0; left:-1rem;}
    .greeting .grtImg .img{width:15rem;}
    .greeting .grtTit .title{font-size:1.4rem;}
    .greeting .grtTit > p:not(.title){font-size:1.1rem;}
    .greeting .grtTxt br{display:none;}
    .greeting .grtTxt .txt:before{border-top-right-radius:5rem;}
    .greeting .grtTxt .txt > p{font-size:0.95rem;}
    
    /* 조직도 */
    .work_list{gap:2vw;}
    
    /* 오시는 길 */
    .map_box .cont .section{padding:0 1rem;}
}

@media (max-width:1280px){
    /* 학내, 학외 */
    .pfrmSys.iconTy ul li a .img { width: 6rem; height: 6rem; }
    .pfrmSys.iconTy ul li a .img img { height: 50px; }
    .pfrmSys ul li a .txt_box span { font-size: 0.8rem; }
    .pfrmSys ul li a .txt_box .tit { font-size: 1rem; }
    
    /* 인사말 */
    .greeting{padding-right:15rem;}
    .greeting .sign span:not(.name){font-size:0.95rem;}
    .greeting .grtImg > span{font-size:0.8rem;}
    .greeting .grtImg .img{width:12rem;}
    .greeting .grtImg .img:before{bottom:-0.6rem; right:-0.6rem;}

    /* 연혁 */
    .history .img_box .txt { font-size: 1.2rem; }
    .history .list_box dl + dl { margin-top: 1.5rem; padding-top: 1.5rem; }
    .history .list_box dl dt { width: 8rem; background: none; font-size: 2rem; }
    .history .list_box dl dd { width: calc(100% - 12rem); margin-top: 0.5rem; }
    .history .list_box dl dd .lst .date { width: 5rem;}


}

@media (max-width:1280px) and (min-width:1025px) {
    /* 인사말 */
    .greeting .sign{flex-direction:column; align-items:center; margin-top:1.4rem;}
}

@media (max-width:1024px){
    /* 학내, 학외 */
    .pfrmSys ul li { width: calc((100% - 3rem) / 3) !important; }
    .pfrmSys ul li a { padding: 1.5rem; }
    .pfrmSys ul li a .txt_box { padding-top: 1rem; }
    .pfrmSys.iconTy ul li a .txt_box { margin-top: 1rem; }
    
    /* 인사말 */
    .greeting{padding-right:0;}
    .greeting .sign{margin-top:0;}
    .greeting .grtImg{align-items:flex-end;}
    .greeting .grtImg .sign{display:none;}
    .greeting .grtImg .img{width:8.5rem;}
    .greeting .grtImg .img:before{bottom:-0.4rem; right:-0.4rem; border-bottom-right-radius:3.2rem;}
    .greeting .grtImg > span{display:none;}
    .greeting .grtImg .img img{border-radius:3rem 0 3rem 0.75rem;}
    .greeting .grtTit{padding:2.5rem 10rem 2.5rem 0;}
    .greeting .grtTit > p:not(.title){font-size:1.05rem; line-height:1.5;}
    .greeting .grtTit .title:after{left:-10px; width:8px; height:8px;}
    .greeting .grtTxt .txt{ gap:1.3rem; padding:2rem 1.5rem 0 0;}
    .greeting .grtTxt .txt:before{right:-1rem;}
    
    /* 오시는 길 */
    .map_box .cont .section .tit{width:27vw; font-size:1rem;}
    .map_box .cont .section > div{padding:1.2rem 0;}

    /* SDG */
    .SDG a{width: calc((100% / 6) - 0.5rem);}
}

@media (max-width:860px){
    /* 인사말 */
    .greeting .grtTit{padding:1.5rem 10rem 1.5rem 0;}
    
    /* 조직도 */
    .work_list{flex-direction:column; gap:1rem;}
    .work_list ol li{padding-left:1.2rem;}
    .work_list ol + ol:after{display:block; position:absolute; z-index:-1; top:-1rem; left:calc((100% - 1px) / 2); width:1px; height:1rem; background:#ccc; content:'';}
    
    /* 오시는 길 */
    .map_box .map{height:22rem;}



}

@media (max-width:738px){
    /* 학내, 학외 */
    .pfrmSys ul li { width: calc((100% - 1.5rem) / 2) !important; }
}

@media (max-width:700px) {
    /* 연혁 */
    .history .img_box .txt { font-size: 1rem; padding: 1rem; }
    .history .list_box { margin-top: 2rem; }
    .history .list_box dl { display: block; }
    .history .list_box dl dt { width: 100%; font-size: 1.5rem; }
    .history .list_box dl dd { width: 100%; margin-top: 1rem; }
    .history .list_box dl dd .lst + .lst { margin-top: 1rem; }
    .history .list_box dl dd .lst .date { width: 4.5rem; }
    .history .list_box dl dd .lst ul { width: calc(100% - 4.5rem); }
    .history .list_box dl dd .lst ul li { font-size: 0.9rem; }

}

@media (max-width:640px) {
    /* 인사말 */
    .greeting .grtImg .img{width:8rem;}
    .greeting .grtTit{padding:1rem 8.5rem 1.5rem 0;}
    .greeting .grtImg .img:before{border-bottom-right-radius:2.2rem;}
    .greeting .grtImg .img img{border-radius:2rem 0 2rem 0.75rem;}
    .greeting .grtTit .title{font-size:1.2rem;}
    .greeting .grtTit > p:not(.title){font-size:0.95rem;}
    .greeting .grtTxt .txt{padding:1.5rem 0 0 0;}
    .greeting .grtTxt .txt:before{border-top-right-radius:3rem;}
    .greeting .grtTxt .txt > p{font-size:0.9rem;}
    
    /* 오시는 길 */
    .map_box .cont .section{padding:0 0.2rem;}
    .map_box .cont .section > div{flex-direction:column; align-self:flex-start; gap:0.5rem; padding:1rem 0;}
    .map_box .cont .section .tit{width:100%; align-items:flex-start;}
    .map_box .cont .section .con{flex:auto; min-width:0; width:100%;}
    .map_box .cont .section .con .btnGrp{margin-left:0.5rem;}


}

@media (max-width:480px){
    /* 학내, 학외 */
    .pfrmSys ul li { width: 100% !important; }
    .pfrmSys ul li a { padding: 1rem; }
    .pfrmSys ul li a .img { height: auto; }
    .pfrmSys.iconTy ul li a .img { width: 4.5rem; height: 4.5rem; }
    .pfrmSys.iconTy ul li a .img img { height: 35px; }
    .pfrmSys ul li a .txt_box { margin-top: 1rem; }
    .pfrmSys ul li a:hover,
    .pfrmSys ul li a:focus { border-radius: 0.8rem; }
    
    /* 인사말 */
    .greeting .grtImg{position:relative; align-items:center;}
    .greeting .grtTit{padding:2rem 0 1.2rem;}
    .greeting .grtTxt .txt > p{flex-direction:column;}
    
    /* 조직도 */
    .work_list ol li{padding:0.7rem 1rem;}
    .work_list ol li .num{font-size:14px;}
    
    /* 오시는 길 */
    .map_box .cont .section .list_st1 .btnGrp{display:flex; flex-wrap:wrap; margin-left:0;}
    .map_box .cont .section .con .list_st1 li:before{top:0.4rem;}

    /* SDG */
    .SDG a{width: calc((100% / 3) - 0.35rem);}
}