@charset "utf-8";


/* 시스템이용-안내문구 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 페이지 준비중 */
.ready_page * {line-height:1.4; word-break:keep-all;}
.ready_page {width:100%; min-height:50rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:40px; text-align:center; margin:0 auto; overflow:hidden;}
.ready_page span {width:120px; height:120px; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; background:linear-gradient(to bottom, #3a7ecd, #6da4e3); box-shadow:0 0 10px rgba(0,0,0,0.1);}
.ready_page span img {height:60px; padding:5px 0 0 5px;}
.ready_page h3 {font-size:48px; color:#1f1f1f;}
.ready_page p {font-size:18px;}
.ready_page p ~ p {margin-top:5px;}

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

@media screen and (max-width: 1025px){
	#userSub .ready_page span {width:100px; height:100px;}
	#userSub .ready_page span img {height:50px;}
	#userSub .ready_page h3 {font-size:36px;}
	#userSub .ready_page p {font-size:16px;}
}

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

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


/* 로딩화면 */
.loader {position:fixed; top:0; left:0; z-index:9999; width:100%; height:100%; background:#fff;}
.loader .load_area {width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.loader .load_area > *:not(.load_animation) {letter-spacing:-0.03em; padding:0 30px; text-align:center; word-break:keep-all;}
.loader .load_area h3 {font-size:20px; font-weight:bold; color:#333;}
.loader .load_area p {font-size:15px; color:#777; margin-top:12px;}
.loader .load_area .load_animation {position:relative; width:60px; height:60px; margin:0 auto 30px auto;}
.loading {
	--b: 10px; width:60px; margin:0 auto; aspect-ratio:1; border-radius:50%; padding:1px; background:conic-gradient(#0000 10%,#f13e3e) content-box;
	-webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg), radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
	-webkit-mask-composite: destination-in; mask-composite: intersect; animation:spin 1.2s infinite steps(10);
}
@keyframes spin {
	to{transform:rotate(1turn);}
}



/* 문구 공통영역 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 타이틀 */
.sub_title1 {position:relative; font-size:20px; font-weight:bold; color:#222; margin-bottom:25px; word-break:keep-all;}
.sub_title2 {position:relative; font-size:18px; font-weight:bold; color:#222; margin-bottom:20px; padding:0 0 0 25px; word-break:keep-all;}
.sub_title2:after {content:""; display:block; position:absolute; left:0; top:5px; width:16px; height:16px; background:url('../images/common/icn_title.png') no-repeat;}
.sub_title3 {font-size:18px; font-weight:bold; color:#222; margin-bottom:20px; word-break:keep-all;}

/* 안내문구(좌-우) */
.info_sect {display:flex; justify-content:flex-end; align-items:center; gap:20px; margin-bottom:15px;}
.info_sect > * {display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:0 !important; margin-bottom:0 !important;}
.info_sect .left {margin-right:auto;}
.info_sect .left > * {margin-top:0 !important; margin-bottom:0 !important;}

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

@media screen and (max-width: 1025px){
	#userSub .info_sect {flex-direction:column;}
	#userSub .info_sect:not(.left) {align-items:flex-end;}
	
	.portfolio_cont .info_sect {flex-direction:column;} /* 포트폴리오 팝업 */
	.portfolio_cont .info_sect:not(.left) {align-items:flex-end;}
}

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

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

/* 중요-경고 문구 */
.warn {position:relative; font-size:15px; padding:2px 0 2px 20px; margin-bottom:15px; word-break:keep-all;}
.warn:after {content:"\f06a"; display:block; position:absolute; left:0; top:4px; font-family:"FontAwesome"; font-size:13px; color:#d02258;}
.warn span, .warn strong {color:#d02258;}
.warn em {letter-spacing:0.02em; font-weight:bold; color:#222;}

/* 테이블 내부 안내문구 */
.caution {position:relative; display:inline-block; font-size:14px; letter-spacing:0; margin:0 10px; padding-left:10px; word-break:keep-all;}
.caution::after {content:"*"; position:absolute; left:0; top:0; color:#de1819;}
.caution.long {display:block; margin:10px 0 0 0;}

/* 목록카운트 */
.count {font-size:14px; color:#888; margin-bottom:15px;}
.count strong {font-family:"Pretendard"; font-size:16px; color:#222;}

/* 내용 리스트 */
.sub_list > li {position:relative; font-size:15px; line-height:1.4; padding:5px 0 5px 18px; word-break:keep-all;}
.sub_list > li:after {content:""; display:block; position:absolute; left:0; top:14px; width:8px; height:1px; background:#777;}
.sub_list > li > ul {margin-top:10px;}
.sub_list > li > ul > li {position:relative; font-size:15px; padding:6px 0 6px 14px;}
.sub_list > li > ul > li::after {content:""; display:block; position:absolute; left:0; top:14px; width:4px; height:4px; border-radius:50%; background:#3a7ecd;}

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

@media screen and (max-width: 1025px){
	#userSub .sub_list * {font-size:14px;}
}

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

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

/* 파일리스트 */
.file_list li {display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:14px; padding:4px 0;}
.file_list a {font-weight:normal; text-decoration:none;}
.file_list a:hover {color:#222; text-decoration:none;}
.file_list i {display:inline-flex; justify-content:center; align-items:center; width:16px; height:16px; font-size:10px; color:#fff; padding-top:2px; border-radius:3px; background:#d02258;}

/* 박스영역 */
.boxarea {font-size:15px; line-height:1.4; padding:15px 20px; margin:20px 0; border-radius:3px; border:1px solid #ddd; background:#f7f8fc;}
.boxarea .warn {margin:0;}
.boxarea .warn ~ .warn {margin-top:5px;}

/* 설명박스 */
.explain_box * {word-break:keep-all;}
.explain_box {width:100%; margin-bottom:2rem; border-radius:5px; border:1px solid #ccc; background:#fff; overflow:hidden;}
.explain_box > strong {display:block; font-size:16px; font-weight:bold; color:#74757e; padding:12px 15px; border-radius:5px 5px 0 0; border-bottom:1px solid #ccc;}
.explain_box > div {font-size:14px; padding:12px 15px; border-radius:0 0 5px 5px; background:#f7f8fc;}
.explain_box > div ul li {position:relative; font-size:14px; line-height:1.2; color:#333; padding:5px 0 5px 12px;}
.explain_box > div ul li:after {content:""; display:block; position:absolute; left:0; top:12px; width:3px; height:3px; border-radius:50%; background:#ee2b48; opacity:0.8;}
.explain_box b {color:#222;}




/* 공통영역 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 탭버튼 */
.tab_button * {font-size:15px; word-break:keep-all;}
.tab_button {display:flex; flex-wrap:wrap; margin-bottom:40px; border:1px solid #ccc;}
.tab_button li {flex:1;}
.tab_button li ~ li {border-left:1px solid #ccc;}
.tab_button li button {width:100%; height:100%; position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; font-weight:500; text-align:center; padding:15px 10px; background:#fff;}
.tab_button li button:hover {color:#3a7ecd;}
.tab_button li button.on {color:#fff; background:linear-gradient(to bottom, #3a7ecd, #6da4e3);}
.tab_button li button.on::after {content:""; position:absolute; width:0; height:0; left:50%; bottom:-1px; border-bottom:6px solid #fff; border-left:6px solid transparent; border-right:6px solid transparent; transform:translate(-50%);}

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

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

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

@media screen and (max-width: 481px){
	#userSub .tab_button * {font-size:14px;}
	
	#userSub .tab_button.even li {flex:0 0 50%; border-top:1px solid #ccc;} /* 탭::짝수형일때 */
	#userSub .tab_button.even li:nth-child(odd) {border-left:none;}
	#userSub .tab_button.even:nth-child(1), .tab_button.even:nth-child(2) {border-top:none;}
}


/* 동의서 */
.agree_page {position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; max-width:1500px; margin:30px auto; padding:0 50px; background:#fff; overflow:hidden;}
.agreement h3 {font-size:22px; line-height:1.6; font-weight:bold; color:#222; text-align:center; margin-bottom:30px; word-break:keep-all;}
.agreement h3 br {display:none;}

.agree_box * {font-size:15px; line-height:1.4; color:#333; word-break:keep-all;}
.agree_box {padding:30px; border:1px solid #ccc; background:#fff;}
.agree_box h4 {font-size:20px; font-weight:bold; color:#222; text-align:center; margin-bottom:20px;}
.agree_box em {font-weight:500; letter-spacing:0; color:#d02258;}
.agree_box .agree_intro {margin-bottom:20px;}
.agree_box .warn {font-size:14px; margin:20px 0;}
.agree_box .warn::after {top:3px;}
.agree_box .caution {font-size:14px;}

.agree_info {color:#555; padding:20px; background:#f9f9f9;}
.agree_info ol li, .agree_info ul li {padding:5px 0;}
.agree_info ol li > ol, .agree_info ol li > ul {padding:10px 0 10px 15px;}
.agree_info ol li > ol li, .agree_info ol li > ul li {color:#555;}
.agree_info ul li {position:relative; padding-left:18px;}
.agree_info ul li::after {content:""; display:block; position:absolute; left:0; top:14px; width:8px; height:1px; background:#999;}

.agree_check {display:flex; justify-content:center; align-items:center; gap:15px; padding:10px 15px; margin-top:20px; background:#f1f8fe;}
.agree_check p {flex:1; font-weight:500; color:#222;}

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

@media screen and (max-width :1025px) {
	.agree_page {position:static; transform:none; margin:50px auto; padding:0 30px;}
}

@media screen and (max-width :769px) {
	.agree_page {padding:0 20px;}
	.agreement h3 {font-size:20px;}
	.agreement h3 br {display:block;}
	
	.agree_box * {font-size:14px;}
	.agree_box {padding:20px;}
	.agree_box h4 {font-size:18px; margin-bottom:20px;}
	
	.agree_info {padding:20px;}
	
	.agree_check {flex-direction:column; padding:0; background:transparent;}
	.agree_check p {flex:1; font-weight:500; color:#222; text-align:center;}
	.agree_check span {width:100%; display:flex; flex-direction:column; gap:5px; margin:0 auto; padding:10px; background:#f1f8fe;}
}

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


/* 만족도조사 */
.satisfaction * {font-size:15px;}
.satisfaction .sf_content {background:#fff;}
.satisfaction .sf_head {display:flex; flex-direction:column; gap:15px; padding:20px; background:#2b3d73;}
.satisfaction .sf_head h3 {font-size:18px; font-weight:500; color:#fff;}
.satisfaction .sf_head p {font-size:15px; color:rgba(255,255,255,0.8);}
.satisfaction .sf_answer {padding:20px; border:1px solid #ccc; border-top:none;}
.satisfaction .sf_answer:nth-child(odd) {background:#f8fcff;}
.satisfaction .sf_answer h4 {font-size:16px; font-weight:bold; color:#333;}
.satisfaction .sf_answer p {font-size:15px; margin:15px 0 20px; color:#555;}
.satisfaction .sf_answer label {margin:0;}
.satisfaction .sf_answer ul li {padding:5px 0;} /* 문항이 긴 경우 */
.satisfaction .sf_answer ul li.ect {display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px;}
.satisfaction .sf_answer div {display:flex; flex-wrap:wrap; align-items:center; gap:8px 30px;}
.satisfaction .sf_end {color:#555; padding:20px; border:1px solid #ccc; border-top:none; background:#f7f8fc;}

/* 공통 만족도 문항 */
.satification_common * {line-height:1.4; word-break:keep-all;}
.satification_common {display:flex; flex-direction:column; gap:20px; padding:20px; border:1px solid #ddd; background:#f4f8fc;}
.satification_common .common_box {display:flex; flex-direction:column; gap:15px; padding:20px; background:#fff;}
.satification_common .common_box strong {font-size:15px; font-weight:500; color:#1f1f1f;}
.satification_common .common_box ul {display:flex; gap:8px 10px;}
.satification_common .common_box ul li {font-size:14px;}
.satification_common .common_box ul li.ect {display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px;} /* 기타 */
.satification_common .common_box ul li label {margin:0;}
.satification_common .common_box ul.long {flex-direction:column;} /* 문항이 긴 경우 */

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

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

@media screen and (max-width :769px) {
	.satisfaction .sf_answer div {flex-direction:column; align-items:flex-start;}
	
	.satification_common .common_box ul {flex-direction:column;}
}

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


/* 설문조사-추가질문항목 */
.ques_form {padding-top:40px; margin-top:40px; border-top:2px dotted #ccc;}

.ques_btns {display:flex; justify-content:flex-end; align-items:center; gap:5px; margin-bottom:15px;} /* 제목-버튼영역 */
.ques_btns b {flex:1; font-size:18px; color:#1f1f1f;}

.ques_row ~ .ques_row {margin-top:40px;} /* 진단지내용 */
.ques_row .tableView {padding:12px 10px 10px; border:1px solid #ccc; background:#fff;}
.ques_row .tableView table {border-top:1px solid #002e66;}

.ques_row .ques_core_select {display:grid; grid-template-columns:140px 1fr; gap:5px;} /* 핵심역량-하위역량 선택 */
.ques_row .ques_answer {padding:20px;} /* 진단-답변예시 */
.ques_row .ques_list li ~ li {margin-top:5px;} /* 질문리스트 */
.ques_row .ques_ect {display:flex; align-items:center; gap:5px;} /* 기타 */
.ques_row .ques_ect input[type="text"] {flex:1;}
.ques_row .ques_ect input[type="text"][readonly=readonly] {flex:1; width:100%; height:35px; padding:0 8px; resize:none; border:1px solid #ccc; background:#fff;}
.ques_row .ques_write_add {display:grid; grid-template-columns:1fr 35px 35px; gap:5px;} /* 답변항목 추가-삭제 */

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

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

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

@media screen and (max-width :481px) {
	#userSub .ques_btns {display:block; text-align:right;}
	#userSub .ques_btns b {display:block; text-align:left; margin-bottom:15px;}
}


/* 설문조사 */
.survey_wrapper {font-size:15px; overflow:hidden;}
.survey_wrapper * {word-break:keep-all;}
.survey_wrapper .survey-title {font-size:22px; text-align:center; font-weight:bold; color:#fff; padding:20px; background:#333;}
.survey_wrapper .survey-text {font-size:16px; text-align:left; padding:20px; word-break:break-word; background:#f7f8fc;}
.survey_wrapper .survey-ex {font-size:14px; color:#828aa0; padding:15px 20px; border-bottom:1px dashed #ddd;}
.survey_wrapper > dl {padding:20px; border-bottom:1px solid #ddd;}
.survey_wrapper > dl dt {font-size:16px; line-height:1.3; font-weight:bold; margin-bottom:10px;}
.survey_wrapper > dl dd > ul > li {padding:3px 0;}
.survey_wrapper > dl dd > ul > li input#etc_0 {width:200px;}


/* 통계 */
/* 단과대학/학과/학부/전공/학년 수료인원 */
.stats_univ_area article ~ article {padding-top:40px; margin-top:40px; border-top:2px dotted #ccc;}

/* 영역별 레이아웃 */
.stats_dash {display:flex; flex-direction:column; gap:20px;}
.stats_dash > * {margin:0 !important;}
.stats_dash .stats_chart {width:100%; padding:15px; border-radius:10px; border:1px solid #ccc; background:#fff;}

/* 비교과 영역별 */
.stats_dash.stats_extra {display:grid; grid-template-columns:350px 1fr;}
.stats_dash.stats_extra table {height:100%;}

/* 핵심역량 역량별 */
.stats_dash.stats_core {display:grid; grid-template-columns:350px 1fr;}
.stats_dash.stats_core table {height:100%;}

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

@media screen and (max-width :1025px) {
	#userSub .stats_dash.stats_extra {grid-template-columns:1fr;}
	#userSub .stats_dash.stats_core {grid-template-columns:1fr;}
}

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

@media screen and (max-width :481px) {
	.stats_dash .stats_chart canvas {width:100% !important; height:auto !important;}
}