@charset "utf-8";

@media screen and (max-width: 1200px){
}

@media screen and (max-width: 1025px){
}

@media screen and (max-width: 769px){
}

@media screen and (max-width: 576px){
}

@media screen and (max-width: 481px){
}

/* 공통영역 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* 플로우 차트 */
.cont-flow * {word-break:keep-all;}
.cont-flow {display:flex; flex-wrap:wrap; gap: 2rem;}
.cont-flow > li.flow { display: flex; flex: 1; position: relative; border-radius: 0.5rem; border: 1px solid #ddd; background: #fff; flex-direction: column; }
.cont-flow > li > span {
	position:absolute; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; top:-2rem; left:50%; transform:translateX(-50%);
	width:4rem; height:4rem; font-size:1.6rem; font-weight:bold; color:#fff; border-radius:50%; /* background:#0b3162; */ background:#0f4fa1;
}
.cont-flow > li > h4 {width:100%; font-size:1.6rem; font-weight:bold; color:#333; text-align:center; padding:3.5rem 1.5rem 1.5rem 1.5rem; border-radius:1rem 1rem 0 0; background:#f7f8fc;}
.cont-flow > li > h4 span {display:block; font-size:1.4rem; font-weight:normal; margin-top:0.5rem;}
.cont-flow > li > h4 dfn {padding-top:1rem; margin-top:1rem; border-top:2px solid #ddd;}
.cont-flow > li > h4 dfn:first-child {padding-top:0; margin-top:0; border-top:none;}
.cont-flow > li > div {display:flex; flex-wrap:wrap; flex-direction:column; justify-content:center; width:100%; padding:2rem 1.5rem; border-radius:0 0 1rem 1rem; border-top:1px dashed #ccc;}
.cont-flow > li > div * {font-size:1.6rem;}
.cont-flow > li > div > dl {margin-top:1rem;}
.cont-flow > li > div > dl:first-child {margin:0;}
.cont-flow > li > div > dl dt {color:#333; font-weight:500;}
.cont-flow > li > div > dl dd {margin-top:0.5rem;}
.cont-flow > li > div > ul > li {position:relative; line-height:1.3; padding:0.2rem 0 0.2rem 2rem;}
.cont-flow > li > div > ul > li:after {content:""; display:block; position:absolute; left:5px; top:1.2rem; width:6px; height:1px; background:#999;}
.cont-flow > li > div > p {width:100%; text-align:center;}
.cont-flow > li > div > p > span {font-size:1.3rem; color:#777;}

@media screen and (max-width: 1025px){
	.cont-flow > li > h4 br {display:none;}
}
@media screen and (max-width: 769px){
	.cont-flow { flex-direction: column; gap: 4rem; }
}

/* 재직자 교육/미취업자 교육 프로그램 리스트 */
.pro_tab { display: flex; padding: 0 4rem; margin-top: 1rem; gap: 5rem; align-items: center; border-radius: 5px; background: #f7f8fc; box-shadow: rgba(0, 0, 0, 5%) 0 1px 20px; border: 1px solid #e5e5e5; }
.pro_tab .pro_tab_label { font-weight: 600; font-size: 2rem; color: #0f4fa1; flex: 0 0 auto; letter-spacing: -0.1em; }
.pro_tab .tab-text { display: flex; align-items: center; gap: 0 2rem; color: #555; font-size: 1.5rem; flex: 1; flex-wrap: wrap; }
.pro_tab .tab-text a { display: inline-block; position: relative; padding: 2.2rem 0; letter-spacing: -0.08em; }
.pro_tab .tab-text a::before { content: ""; display: inline-block; position: absolute; width: 100%; height: 2px; left: 0; bottom: 0; background: currentColor; opacity: 0; transition: all 0.3s; }
.pro_tab .tab-text a.on, .pro_tab .tab-text a:hover { color: #222; font-weight: 500; }
.pro_tab .tab-text a.on::before, .pro_tab .tab-text a:hover::before { opacity: 1; }
.pro_tab .tab-select {display:none;}

@media screen and (max-width: 767px) {
	.pro_tab { padding: 1rem 2rem; gap: 2rem; margin-top: 0; }
	.pro_tab .tab-text {display:none;}
	.pro_tab .tab-select {display:block; margin: 0; width: 100%; }
	.pro_tab .tab-select select {width:100%; height:50px;}
	.pro_tab .tab-select select option {color:#555;}
}
@media screen and (max-width: 576px){
	.pro_tab { flex-direction: column; padding: 15px 10px; gap: 1rem; align-items: flex-start; }
	.pro_tab .pro_tab_label { font-size: 1.6rem; font-weight: 500; }
}

.programList {  }
.programList li { display: flex; position: relative; padding: 4rem; gap: 5rem; border-bottom: 1px solid #ddd; flex-wrap: wrap; align-items: center; }
.programList li:first-child { border-top: 1px solid #ddd; }
.program-img { width: 48rem; height: 30rem; }
.program-img img { display: inline-block; width: 100%; height: 100%; object-fit: cover; }
.program-info { display: flex; /* position: relative; */ /* padding: 3.5rem 0; */ flex: 1 0; gap: 3rem; flex-direction: column; }
.program-info .place { display: flex; margin-bottom: 2rem; gap: 1rem; align-items: center; }
.program-info .place .p_img { display: inline-flex; width: 5rem; height: 5rem; padding: 1rem; border: 1px solid #e1e1e1; border-radius: 50em; }
.program-info .place .p_img img { display: inline-block; width: 100%; height: 100%; object-fit: contain; }
.program-info .place .p_name { color: #555; font-size: 1.8rem;}
.program-info .title {  }
.program-info .title a { display: block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 600; font-size: 3rem; color: #333; letter-spacing: -0.08em; }
.program-info .title a:hover { text-decoration: underline; }
.program-info .date { display: flex; font-size: 1.8rem; color: #777; flex-direction: column; gap: 1.6rem; }
.program-info .date p { line-height: 1em; }
.program-info .date dfn { display: inline-block; width: 8rem; color: #333; font-weight: 500; }
.program-info .date span {  }
.program-info .chips { display: flex; gap: 1rem; flex-wrap: wrap; }
.program-info .chips span { display: inline-block; padding: 0.6em 1em; border-radius: 50em; background: #ecf0fd; font-size: 1.6rem; color: #33416b; font-weight: 500; line-height: 1em; }
.program-info .starPick { position: absolute; right: 4rem; top: 4rem; padding: 0; font-size: 1.8rem; color: #ddd; }
.program-info .starPick a { display: inline-block; width: 2.5rem; height: 2.5rem; }
.program-info .starPick img { display: inline-block; width: 100%; height: 100%; object-fit: contain;}

.programList .no-list {  }


@media screen and (max-width: 1200px){
	.program-img { width: 40rem; height: 25rem; }
	.program-info { gap: 2.4rem; }
	.program-info .place { margin-bottom: 1rem; }
	.program-info .place .p_img { width: 4.5rem; height: 4.5rem; }
	.program-info .title a { font-size: 2.8rem; }
	.program-info .date { font-size: 1.7rem; }
}

@media screen and (max-width: 1025px){
	.program-img { width: 32rem; height: 20rem; }
	.programList li { padding: 3rem 2rem; gap: 3.5rem; }
	.program-info .place .p_img { width: 3.6rem; height: 3.6rem; }
	.program-info .date { gap: 0.8rem; font-size: 1.6rem; }
	.program-info .chips span { font-size: 1.5rem; }
	.program-info .title a { font-size: 2.6rem; }
	.program-info .place .p_name { font-size: 1.7rem; }
	.program-info .starPick a { width: 2.2rem; height: 2.2rem; }
	.program-info .starPick { top: 3rem; right: 3rem; }
}

@media screen and (max-width: 769px){
	.programList li { flex-direction: column; }
	.program-img { width: 100%; height: 62.5%; }
	.program-info { position: relative; width: 100%; }
	.program-info .starPick { right: 0; top: 0; }
}

@media screen and (max-width: 576px){
	.programList li { padding: 3rem 0; }
	.program-info { gap: 2rem; }
	.program-info .title a { font-size: 2.2rem; }
}

@media screen and (max-width: 481px){
}




/* 콘텐츠영역 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* 사업개요 */
.bus_intro h3 { display: inline-block; flex:0 0 15rem; margin-bottom: auto; padding: 0.6em 1.6em; border-radius: 50em; border: 2px solid #0f4fa1; background: #fff; font-weight: 600; color: #0f4fa1; font-size: 1.8rem; text-align: center; }
.bus_intro .bus_intro_tit { position: relative; padding: 4em 2em; border-radius: 0.5rem; background: #f7faff; border: 1px solid #ddd; text-align: center; }
.bus_intro .bus_intro_tit::before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/common/logo.svg) left -3.5rem bottom -1.5rem no-repeat; opacity: 0.1; background-size: 25rem; }
.bus_intro .bus_intro_tit h3 { margin-bottom: 2rem; }
.bus_intro .bus_intro_tit p { font-size: 2.6rem; line-height: 1.4; font-weight: 200; letter-spacing: -0.07em; color: #1f1f1f; }
.bus_intro .bus_cnt_wrap {display:flex; flex-wrap:wrap; gap:5rem; padding:4rem 1rem; border-bottom:2px dashed #f0f0f0; align-items: center; }
.bus_intro .bus_cnt_wrap:last-child {padding-bottom:0; border:none;}
.bus_intro .bus_cnt_wrap .desc { flex: 1; font-size: 1.8rem; letter-spacing: -0.06em; align-items: center; word-break: keep-all; line-height: 1.3; }

@media screen and (max-width: 1200px){
	.bus_intro .bus_cnt_wrap { align-items: flex-start; flex-direction: column; gap: 3rem; }
	.bus_intro h3 { flex: 0; }
	.bus_intro .bus_cnt_wrap .desc { width: 100%; }
}

@media screen and (max-width: 1025px){
}

@media screen and (max-width: 769px){
	.bus_intro .bus_intro_tit { background: #fff; }
}

@media screen and (max-width: 576px){
	.bus_intro h3 { padding: 0; border: none; font-size: 2rem; }
	.bus_intro .bus_intro_tit::before { background: none; }
	.bus_intro .bus_intro_tit h3 { padding: 0; border: none; font-size: 2rem; }
	.bus_intro .bus_intro_tit p { font-size: 2rem; }
}

@media screen and (max-width: 481px){
}








/* 사업목표 */
.goal_flow {  }
.goal_flow h3 { display: inline-block; margin-bottom: 2rem; padding: 0.6em 1.6em; border-radius: 50em; border: 2px solid #0f4fa1; background: #fff; font-weight: 600; color: #0f4fa1; font-size: 1.8rem; }
.goal_flow .goal_tit { position: relative; padding: 4em 2em; border-radius: 0.5rem; background: #f7faff; border: 1px solid #ddd; text-align: center; }
.goal_flow .goal_tit::before { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/common/logo.svg) left -3.5rem bottom -1.5rem no-repeat; opacity: 0.1; background-size: 25rem; }
.goal_flow .goal_tit p { font-size: 2.6rem; line-height: 1.4; font-weight: 200; letter-spacing: -0.07em; color: #1f1f1f; }
.goal_flow .goal_arr { margin: 2rem 0; text-align: center; font-size: 3rem; color: #d1d1d1;}
.goal_flow .goal_cnt_wrap { display: flex; padding: 4rem; gap: 5rem; flex-wrap: wrap; border: 1px solid #ddd; border-radius: 0.5rem; background: #fff; }
.goal_flow .goal_cnt { flex: 1 0 auto; }
.goal_flow .goal_cnt p {  }
.goal_flow .goal_cnt.cnt01 ul { display: flex; gap: 2.2rem; flex-direction: column; }
.goal_flow .goal_cnt.cnt01 li { display: flex; position: relative; padding-left: 5rem; font-size: 1.8rem; letter-spacing: -0.06em; align-items: center; word-break: keep-all; line-height: 1.3; }
.goal_flow .goal_cnt.cnt01 li span { position: absolute; display: inline-flex; left: 0; width: 3.5rem; height: 3.5rem; background: #eee; border-radius: 50em; font-size: 1.5rem; align-items: center; justify-content: center; }
.goal_flow .goal_cnt.cnt02 ul { display: flex; gap: 5rem;}
.goal_flow .goal_cnt.cnt02 li { display: flex; position: relative; padding: 3rem 3rem; flex: 1 0; align-items: center; justify-content: center; border-radius: 0.5rem; color: #fff; font-size: 2rem; word-break: keep-all; text-align: center; line-height: 1.3; letter-spacing: -0.06em; }
.goal_flow .goal_cnt.cnt02 li:nth-child(1) { background: #4eac94; }
.goal_flow .goal_cnt.cnt02 li:nth-child(2) { background: #4caeb9; }
.goal_flow .goal_cnt.cnt02 li:nth-child(3) { background: #3c70a0; }
.goal_flow .goal_cnt.cnt02 li::after {content: "\2b";position: absolute;left: 100%;font-family: 'Font Awesome';font-size: 3.4rem;font-weight: 900;color: #d1d1d1;transform: translateX(50%);}
.goal_flow .goal_cnt.cnt02 li:last-child::after { content: none; }

@media screen and (max-width: 1200px){
}

@media screen and (max-width: 1025px){
}

@media screen and (max-width: 769px){
	.goal_flow .goal_tit { background: #fff; }
	.goal_flow .goal_tit::before { opacity: 0.05; }
	.goal_flow .goal_tit p { font-size: 2.4rem; word-break: keep-all; }
	.goal_flow .goal_tit br { display: none; }
	.goal_flow .goal_cnt { width: 100%; }
	.goal_flow .goal_cnt.cnt02 ul { flex-direction: column; gap: 4rem; }
	.goal_flow .goal_cnt.cnt02 li { padding: 2rem; }
	.goal_flow .goal_cnt.cnt02 li::after { left: 50%; top: 100%; transform: translate(-50%, 0); font-size: 3rem; }
}

@media screen and (max-width: 576px){
	.goal_flow .goal_tit::before { background: none; }
	.goal_flow .goal_cnt_wrap { padding: 3rem 2rem; }
	.goal_flow h3 { padding: 0; border: none; font-size: 2rem; }
	.goal_flow .goal_tit p { font-size: 2rem; }
}

@media screen and (max-width: 481px){
}






/* 총괄 추진체계 */
.bus_flow { display: flex; flex-direction: column; gap: 4rem; }
.bus_flow > div { display: flex; justify-content: center; }
.bus_flow .box { display: inline-flex; padding: 1em; border-radius: 0.5rem; font-size: 1.8rem; flex-direction: column; align-items: center; gap: 1rem; border: 1px solid #ddd; background: #fff; }
.bus_flow > *::before, .bus_flow > *::after { z-index: -1; }
.bus_flow .line_btm, .bus_flow .line_top { position:relative; }
.bus_flow .line_btm::before, .bus_flow .line_top::after { content:""; display: inline-block; position: absolute; width: 1px; height: 4rem; background: #ddd; }
.bus_flow .line_top::after { bottom: 100%; }
.bus_flow .line_btm::before { top: 100%; }

.bus_flow .box > p { width: 100%; padding: 1em; border-radius: 0.5rem; text-align: center; font-weight: 500; word-break: keep-all; }
.bus_flow .box > ul > li { color: #1f1f1f }

.bus_flow .dep01 .box p { background: #234898; color: #fff; }
.bus_flow .dep01 .line_btm::before { height: 17rem; }

.bus_flow .dep02 { position: relative; }
.bus_flow .dep02 .box { position: absolute; transform: translate(-38rem, -50%); }
.bus_flow .dep02 .box p { background: #23986f; color: #fff; }
.bus_flow .dep02 .line_btm::before { display: none; }
.bus_flow .dep02::after { content: ""; display: inline-block; position: absolute; top: 50%;  width: 30rem; height: 1px; transform: translate(-50%, 50%); background: #ddd; }

.bus_flow .dep03 { position: relative; margin: 12rem 0 4rem; gap: 2rem; }
.bus_flow .dep03::before { content:""; display: inline-block; position: absolute; top: -4rem; width: 88rem; height: 1px; background: #ddd; }
.bus_flow .dep03::after { content:""; display: inline-block; position: absolute; bottom: -4rem; width: 88rem; height: 1px; background: #ddd; }
.bus_flow .dep03 .box { width: 20rem; }
.bus_flow .dep03 .box p { background: #333; color: #fff; font-size: 1.6rem; }
.bus_flow .dep03 .box ul { display: flex; width: 100%; font-size: 1.5rem; flex-direction: column; align-items: center; gap: 0.5em; }
.bus_flow .dep03 .box li { width: 100%; padding: 0.6em; text-align: center; background: #f0f5ff; border-radius: 0.5rem; }

.bus_flow .dep04 {  }
.bus_flow .dep04 .box { background: linear-gradient(45deg, #f7fffd, #f2f4fa); }
.bus_flow .dep04 .box p { padding: 1em 2em; background: linear-gradient(45deg, #23986f, #234898); color: #fff; }
.bus_flow .dep04 .box ul { display: flex; gap: 1em; flex-wrap: wrap; }
.bus_flow .dep04 .box li { display: flex; flex: 1 0; padding: 2em 1em; width: 22rem; height: 22rem; background: #fff; border-radius: 50em; box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.1); align-items: center; justify-content: center; letter-spacing: -0.05em; font-weight: 500; color: #333; text-align: center; word-break: keep-all; line-height: 1.3; border: 1px solid #ddd; }

@media screen and (max-width: 1199px){
	.bus_flow .dep02 .box { position: relative; transform: none; }
	.bus_flow .dep02 .line_btm::before { display: inline-block; }
	.bus_flow .dep02::after { content: none;  }
	
	.bus_flow .dep03 { margin: 0; /* padding: 3em; border: 1px solid #ddd; flex-wrap: wrap; border-radius: 0.5rem; */ }
	.bus_flow .dep03::before, .bus_flow .dep03::after, .bus_flow .dep03 .line_btm::before , .bus_flow .dep03 .line_top::after { content: none; }
	.bus_flow .dep03 .box { width: 30rem; }
}

@media screen and (max-width: 1025px){
	.bus_flow .dep03 { flex-direction: column; align-items: center; }
}

@media screen and (max-width: 769px){
	.bus_flow .dep04 .box ul { width: 100%; flex-direction: column; gap: 0.8rem; }
	.bus_flow .dep04 .box li { padding: 1em 1em; width: 100%; }
}

@media screen and (max-width: 481px){
	.bus_flow .box { width: 100%; }
	.bus_flow .dep03 .box { width: 100%; }
}


/* 마이페이지 CQI보고서 */
.cqi_process {margin:15px 0; padding:15px; box-sizing:border-box; border-top:1px dashed #ddd; border-bottom:1px dashed #ddd; overflow:hidden;}
.cqi_process > ul {}
.cqi_process > ul > li {position:relative; z-index:2; float:left; width:12%; margin-right:10%;}
.cqi_process > ul > li:last-child {margin-right:0;}
.cqi_process > ul > li:before { content:""; display: block; position: absolute; left: 100%; top: 50%; width: 100%; height: 1px; background: #bbb; }
.cqi_process > ul > li:after { content:""; display: block; position: absolute; left: 50%; top: 100%; width: 1px; height: 100px; background: #bbb; }
.cqi_process > ul > li:last-child:before {display:none;}
.cqi_process > ul > li > div {display: flex; position: relative; justify-content: center; align-items: center; height: 50px; color:#fff; font-weight:500; box-sizing:border-box;  border-radius:3px; background:#29b59b; }
.cqi_process > ul > li > div::before { content:"\f138"; display: block; position: absolute; left: 140%; top: 50%; color: #666; font-family: 'FontAwesome'; transform: translateY(-50%); }
.cqi_process > ul > li > div::after { content: "\f139"; display: block; position: absolute; left: 50%; top: 100%; color: #666; font-family: 'FontAwesome'; transform: translate(-50%, 30px); z-index: 1; }
.cqi_process > ul > li:last-child > div::after { content: none; }
.cqi_process > div {position:relative; z-index:2; width:100%; margin-top:125px;}
.cqi_process > div:before {content:""; display:block; position:absolute; left:6%; top:50%; z-index:-1; width:88%; height:1px; background:#bbbbbb; }
.cqi_process > div > div {display: flex; justify-content: center; align-items: center; width:20%; height: 50px; margin:0 auto; color:#fff; font-weight:500; text-align:center; box-sizing:border-box; padding:10px 5px; border-radius:3px; background:#294cb5;}
@media screen and (max-width: 576px){
.cqi_process > ul { display: flex; flex-direction: column; gap: 4rem; }
.cqi_process > ul > li { width: 100%; margin-right: none; }
.cqi_process > ul > li:before { content: none; }
.cqi_process > ul > li > div::before { content: none; }
.cqi_process > ul > li > div::after { content: "\f13a"; top: unset; bottom: 0; }
.cqi_process > div > div { width: 100%; }
.cqi_process > div { margin-top: 4rem; }
.cqi_process > ul > li:last-child > div::after { content: "\f13a"; }
.cqi_process > ul > li:after { height: 8rem; }
}

.center_intro_text {font-size:1.5rem; line-height:1.2em; color:#333; box-sizing:border-box; padding:2rem 2.5rem; word-break:keep-all; background:#fff; border:5px solid #f2f3f8;}
.center_intro_text strong {display:inline-block; font-size:2rem; font-weight:500; line-height:1.2em; color:#294cb5; padding-bottom:1rem;}
.center_intro_text strong > span {color:#454f63;}
.center_intro_text span {color:#2e75b6;}
.center_intro_text p {margin:3px 0;}
.center_intro_text p > strong {font-size:1.6rem; line-height:1.3; font-weight:500; color:#222; padding-bottom:0;}

