@charset "utf-8";



/* 팝업창 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.web_popup {position:fixed; left:0; height:0; width:100%; min-width:320px; height:100%; background:#fff; overflow:hidden;}

/* 타이틀 */
.popup_title {
	position:fixed; left:0; top:0; z-index:5; width:100%; height:60px; display:flex; justify-content:space-between; align-items:center; gap:0 50px; 
	padding:10px 20px; border-bottom:1px solid #eee; background:#fff; box-shadow:0 0 8px 0 rgba(0,0,0,0.2);
}
.popup_title h3 {flex:1; font-size:18px; font-weight:bold; color:#222; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.popup_title i {font-size:30px; color:#222;}

/* 내용영역 */
.popup_cont {width:100%; height:calc(100vh - 120px); padding:30px; margin:60px auto; background:#fff; overflow-y:auto;}
.popup_cont.no_btns {height:calc(100vh - 60px);} /* 버튼이 존재하지 않는 경우 */

/* 버튼영역 */
.popup_btns {
	width:100%; height:60px; position:fixed; left:0; bottom:0; z-index:5; display:flex; justify-content:center; align-items:center; gap:5px; 
	text-align:center; padding:10px 20px; border-top:1px solid #eee; background:#f2f3f8; box-shadow:0 0 5px 0 rgba(0,0,0,0.1);
}
.popup_btns a, .popup_btns button {height:30px !important; border-radius:50em;}



/* 레이어팝업 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.layer_popup {position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:99; max-width:1000px; max-height:90vh; background:#fff; overflow:auto;}

/* 타이틀 */
.layer_title {width:100%; display:flex; justify-content:space-between; align-items:center; gap:0 50px; padding:15px 20px; border-bottom:1px solid #ccc; background:#fff;}
.layer_title h3 {flex:1; font-size:18px; font-weight:bold; color:#222; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.layer_title i {font-size:28px; color:#222;}

/* 내용영역 */
.layer_cont {width:100%; padding:20px;}

/* 버튼영역 */
.layer_btns {
	width:100%; height:60px; position:sticky; left:0; bottom:0; z-index:5; display:flex; justify-content:center; align-items:center; gap:3px; 
	text-align:center; padding:10px 20px; border-top:1px solid #eee; background:#f2f3f8; box-shadow:0 0 8px 0 rgba(0,0,0,0.2);
}
.layer_btns a, .layer_btns button {height:35px !important; border-radius:50em; margin:3px;}

@media screen and (max-width :1200px) {
}

@media screen and (max-width :1025px) {
	.layer_popup {width:90vw;}
}

@media screen and (max-width :769px) {
}

@media screen and (max-width :481px) {
}



/* 팝업창  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 타이틀 */
.popTitle {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:15px 20px; background:#333; overflow:hidden;}
.popTitle p {width:calc(100% - 40px); font-size:22px; font-weight:500; color:#fff;}
.popTitle a {width:15px; margin-left:25px;}
.popTitle a i {font-size:24px; color:#fff;}

/* 영역 */
.popArea {padding:20px; background:#fff;}



/* 핵심역량 진단결과 팝업 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 영역별 박스 레이아웃 */
.core_result {background:#3a7ecd;} /* 팝업 콘텐츠영역 배경색상 */

.pop_result_box {width:100%; padding:20px; border-radius:10px; background:#fff; overflow:hidden; box-shadow:0 0 20px 0 rgba(0,0,0,0.2);}
.pop_result_box + .pop_result_box {margin-top:30px;}
.pop_result_box > h3 {display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:18px; font-weight:500; color:#222; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #bbb; word-break:keep-all; overflow:hidden;}
.pop_result_box > h3 span {display:flex; justify-content:center; align-items:center; width:26px; height:26px; font-family:'Pretendard'; font-size:14px; font-weight:bold; text-align:center; color:#fff; border-radius:50%; background:#222;}
.pop_result_box > div {border-radius:0 0 8px 8px; background:#fff;}

/* 핵심역량별 점수 */
.my_core_score {display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; padding:20px; margin:0 auto; overflow:hidden;}
.my_core_score li {width:170px; height:170px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:15px; margin:0 auto; padding:15px; border-radius:10px; box-shadow:1px 1px 10px rgba(0,0,0,0.2);}
.my_core_score li > * {width:100%; word-break:keep-all;}
.my_core_score li > h4 {height:50px; display:flex; justify-content:center; align-items:center; font-size:16px; font-weight:500; color:#fff; text-align:center; border-bottom:2px dotted rgba(255,255,255,0.3);}
.my_core_score li > strong {height:50px; display:flex; justify-content:center; align-items:center; font-family:'Pretendard'; font-size:28px; color:#fff; text-align:center;}
.my_core_score li > div {display:flex; justify-content:space-between; align-items:center; padding:8px 10px 8px 8px; border-radius:50em; background:#fff; overflow:hidden;}
.my_core_score li > div b {width:10px; height:10px; border-radius:50%;}
.my_core_score li > div span {font-size:13px; color:#555;}
.my_core_score .score1 {background:linear-gradient(45deg, #56b5ff 0%, #4260e6 100%);} /* 파랑계열-매우 우수 */
.my_core_score .score2 {background:linear-gradient(45deg, #6dd199 0%, #00a348 100%);} /* 초록계열-우수 */
.my_core_score .score3 {background:linear-gradient(45deg, #facb94 0%, #ff9418 100%);} /* 노랑계열-보통 */
.my_core_score .score4 {background:linear-gradient(45deg, #e6898d 0%, #e2373f 100%);} /* 빨강계열-미흡 */

/* 개인-학과별 평균점수 */
.core_average * {word-break:keep-all;}
.core_average {display:flex; flex-wrap:wrap; align-items:center; gap:30px 60px; padding:20px; margin:30px auto; border-radius:10px; background:#f2f4ff;}
.core_average dl {flex:1; position:relative; display:grid; grid-template-columns:140px 1fr; align-items:center; gap:10px 20px;}
.core_average dl ~ dl::after {content:""; display:block; position:absolute; left:-30px; top:0; width:1px; height:22px; background:#999;}
.core_average dl dt {font-size:15px; color:#333;}
.core_average dl dd {font-family:'Pretendard'; font-size:20px; font-weight:bold; color:#1f1f1f; text-align:right;}

/* 역량진단 그래프 */
.result_chart {width:100%; padding:15px; border-radius:10px; border:1px solid #ccc; background:#fff; overflow:hidden;}

/* 기타 메모항목 */
.memo_ect {width:100%; min-height:400px; padding:20px; border-radius:10px; border:1px solid #ccc; overflow:hidden;}

@media screen and (max-width: 991px){
	.my_core_score li {width:100%; max-width:170px;}
}

@media screen and (max-width: 769px){
	.pop_result_box > h3 {font-size:16px;}
	
	.my_core_score {grid-template-columns:repeat(2, 1fr); padding:10px;}
	
	.core_average {gap:12px 30px;}
	.core_average dl {grid-template-columns:1fr; justify-content:center; align-items:center; text-align:center;}
	.core_average dl ~ dl::after {height:100%; left:-15px;}
	.core_average dl dd {text-align:center;}
}

@media screen and (max-width: 481px){
	.my_core_score {grid-template-columns:1fr;}
	
	.core_average {flex-direction:column;}
	.core_average dl {width:100%;}
	.core_average dl ~ dl {padding-top:15px;}
	.core_average dl ~ dl::after {left:0; top:0; width:100%; height:1px;}
}

/* 포트폴리오 팝업 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.portfoilo_wrapper {display:flex; flex-direction:column; gap:5rem; overflow:hidden;}

.portfolio_head_menu {width:100%; display:flex; flex-wrap:wrap; overflow:hidden;}
.portfolio_head_menu li {flex:1;}
.portfolio_head_menu li a {height:6rem; display:flex; justify-content:center; align-items:center; font-size:15px; color:rgba(255,255,255,0.75); text-align:center; padding:1.5rem 1rem; word-break:keep-all; background:#3a7ecd;}
.portfolio_head_menu li ~ li a {border-left:1px solid rgba(255,255,255,0.2);}
.portfolio_head_menu li a:hover {font-weight:500; color:#fff;}
.portfolio_head_menu li a.on {font-weight:500; color:#fff; background:#2460a4;}

.portfolio_container {padding:0 3rem 3rem 3rem;}
.portfolio_container .resume_manage_list {grid-template-columns:1fr;}

@media screen and (max-width: 769px){
	.portfolio_head_menu li {flex:0 0 33.333%;}
	.portfolio_head_menu li ~ li a:nth-last-child(1),
	.portfolio_head_menu li ~ li a:nth-last-child(2),
	.portfolio_head_menu li ~ li a:nth-last-child(3) {border-top:1px solid rgba(255,255,255,0.2);}
	.portfolio_head_menu li a {font-size:14px;}
}

@media screen and (max-width: 481px){
	.portfolio_head_menu li a {font-size:13px;}
}