@charset "utf-8";



/* 레이아웃 기본공통영역  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
html {
	font-size:62.5%; /* 반응형 폰트사이즈 */
	
	/* 모바일 웹폰트 크기 자동조정 문제 */
	-webkit-text-size-adjust:none; /* 크롬/사파리/오페라 신버전 */
	-moz-text-size-adjust:none; /* 파이어폭스 */
	-ms-text-size-adjust:none; /* 익스 */
	-o-text-size-adjust:none; /* 오페라 구버전 */
	text-size-adjust:none;
}
@media screen and (max-width: 1024px) {
	html {font-size:60%;}
}
@media screen and (max-width: 481px) { 
	html {font-size:57%;}
}

body {min-width:320px;} /* 반응형일때 최소넓이 */



/* 기본 레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.inner {width:100%; max-width:1500px; margin:0 auto; padding:0 5rem;}

@media screen and (max-width: 1200px){
	.inner {padding:0 3rem;}
}

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

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

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


/* 상단영역 */
#headerUser {position:fixed; top:0; z-index:20; width:100%; height:8rem; padding:0 5rem; background:transparent; overflow:hidden;}

.gnb_wrapper {height:100%; flex:1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.gnb_wrapper h1 a {display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem;}
.gnb_wrapper h1 a img {height:4rem;}
.gnb_wrapper h1 a strong {font-size:1.8rem; font-weight:bold; color:#222;}

.gnb_pc {display:flex; flex-wrap:wrap; justify-content:center; gap:7rem; padding-left:7rem;}
.gnb_pc > li > a {font-size:1.8rem; font-weight:500; color:#1f1f1f; transition:all 0.2s;}
.gnb_pc > li > a:hover {font-weight:bold; color:#2460a4;}

.gnb_navi {display:flex; flex-wrap:wrap; align-items:center; gap:2rem;}
.gnb_navi * {position:relative; font-size:1.5rem; color:#888;}
.gnb_navi a::after {content:""; display:block; position:absolute; left:-1rem; top:4px; width:1px; height:12px; background:#777;}
.gnb_navi a:first-child::after {display:none;}
.gnb_navi strong {font-weight:500; color:#222;}

#headerUser.hasBg {background:#fff; box-shadow:-10px 0 10px rgba(0,0,0,0.1);} /* 스크롤할 경우, header 스타일 변경 */


/* 모바일-햄버거메뉴 */
.hmg {display:none;}

/* 모바일-메뉴선택시 배경 */
.overlay {display:none; position:fixed; width:100vw; height:100vh; top:0; left:0; z-index:50; margin:0; background:rgba(0,0,0,0.65);}

/* 모바일 메뉴영역 */
#menuMobBox {display:none; position:fixed; top:0; right:0; z-index:90; height:100vh; height:-webkit-fill-available; height:fill-available; margin-right:-100%; background:#fff; overflow-y:scroll; -ms-overflow-style:none;}
#menuMobBox::-webkit-scrollbar {display:none;}

@media screen and (max-width: 1280px){
	.gnb_pc {gap:5rem;}
	.gnb_pc > li > a {font-size:1.7rem;}
	.gnb_navi * {font-size:1.4rem;}
	.gnb_navi a::after {top:2px;}
}

@media screen and (max-width: 1200px){
	#headerUser {height:5.5rem; padding:0 2rem;}
	
	.gnb_wrapper h1 a img {height:3rem;}
	
	.gnb_pc {display:none;} /* PC 메뉴영역 */
	.gnb_navi {display:none;} /* PC 상단네비영역 */
	
	/* 모바일-햄버거메뉴 */
	.hmg, .hmg span {display:inline-block; transition:all 0.3s; cursor:pointer;}
	.hmg {position:relative; z-index:10; width:22px; padding:0; border:none; background:none;}
	.hmg span {position:absolute; right:0; height:2px; background:#222;}
	
	.hmg_open {height:18px;}
	.hmg_open span {background:#222;}
	.hmg_open span.bar_one {top:0; width:60%;}
	.hmg_open span.bar_two {top:8px; width:100%;}
	.hmg_open span.bar_three {top:16px; width:100%;}
	
	.hmg_close {height:20px;}
	.hmg_close span {background:#fff;}
	.hmg_close span.bar_one {top:0; width:100%; transform:translateY(10px) rotate(-45deg);}
	.hmg_close span.bar_two {top:0; width:0; opacity:0;}
	.hmg_close span.bar_three {top:20px; width:100%; transform:translateY(-10px) rotate(45deg);}
	
	/* 모바일-메뉴선택시 배경 */
	.overlay.open {display:block;}
	
	/* 모바일 메뉴영역 */
	#menuMobBox {display:flex; flex-direction:column; width:50vw;}
	
	.mob_top {display:flex; flex-direction:column; gap:3rem; padding:3rem 2rem; background:linear-gradient(to bottom, #3a7ecd, #6da4e3);}
	.mob_top .mob_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:3rem;}
	.mob_top .mob_head a {display:flex; justify-content:center; align-items:center; text-align:center; gap:1rem; font-size:1.5rem; color:#fff; padding:8px 1.8rem; border-radius:50em; background:rgba(0,0,0,0.1);}
	.mob_top .mob_head a i {font-size:1.2rem; opacity:0.6;}
	
	.mob_top .mob_info {display:flex; flex-direction:column; gap:2rem;}
	.mob_top .mob_info p {display:flex; align-items:center; gap:5px; font-size:1.5rem; padding:1.5rem 2rem; border-radius:1rem; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.15);}
	.mob_top .mob_info p b {font-size:1.6rem; color:#222;}
	.mob_top .mob_info p i {font-size:2rem; color:#2b3d73; margin:2px 5px 0 0;}
	.mob_top .mob_info div {display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem;}
	.mob_top .mob_info div a {position:relative; font-size:1.5rem; color:#fff; text-align:center;}
	.mob_top .mob_info div a ~ a::after {content:""; display:block; position:absolute; left:-10px; top:4px; width:1px; height:12px; background:rgba(255,255,255,0.5);}
	
	.mob_menu {flex:1; position:relative; z-index:0; width:100%; min-height:0; background:#fff; overflow:auto;}
	.mob_menu::before {content:""; display:block; position:absolute; left:0; top:0; z-index:-1; width:14rem; height:100%; background:#f6f6f6;}
	.mob_menu a {display:flex; align-items:center; font-size:1.6rem; letter-spacing:-0.02em; color:#222; word-break:keep-all;}
	.mob_menu a i {font-size:1.2rem; color:#999;}
	.mob_menu > li > a {width:14rem; padding:2.5rem 1.5rem; background:#f6f6f6;}
	.mob_menu > li.on > a {font-weight:500; color:#fff; background:linear-gradient(120deg, #2b3d73, #11204d);}
	.mob_menu > li > ul {position:absolute; top:0; right:0; bottom:0; width:calc(100% - 14rem); padding:2rem;}
	.mob_menu > li > ul > li > a {height:6rem; justify-content:space-between; padding:0 1rem; border-bottom:1px solid #e5e5e5;}
	.mob_menu > li > ul > li.on > a {font-weight:bold; border-bottom:2px solid #222;}
	.mob_menu > li > ul > li.on > a i {color:#222;}
	.mob_menu > li > ul > li > ul {padding:1rem;}
	.mob_menu > li > ul > li > ul > li > a {position:relative; height:4rem; color:#555; padding-left:1.8rem;}
	.mob_menu > li > ul > li > ul > li > a::after {content:""; display:block; position:absolute; left:5px; top:17px; width:4px; height:4px; border-radius:50%; background:#3a7ecd;}
}

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

@media screen and (max-width: 769px){
	#menuMobBox {width:80vw;}
}

@media screen and (max-width: 481px){
	#menuMobBox {width:100%;}
}


/* 하단영역 */
#footerUser {width:100%; display:flex; flex-wrap:wrap; gap:3rem 5rem; padding:4rem 5rem; background:#1f2742;}
#footerUser h1 img {height:4rem;}

.fnb {flex:1;}
.fnb * {font-size:1.5rem; line-height:1.5; letter-spacing:0.02em; color:#a8acb1; word-break:keep-all;}
.fnb_addr {display:grid; grid-template-columns:auto 1fr; gap:1rem 4rem;}
.fnb_addr .campus2, .fnb_addr .campus3 {grid-column:span 2;}
.fnb_addr p {display:flex; align-items:center; gap:1rem 2rem;}
.fnb_addr p b {font-weight:500; color:rgba(255,255,255,0.9);}

.fnb_info {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem 5rem; padding-top:3rem; margin-top:3rem; border-top:1px solid rgba(255,255,255,0.2);}
.fnb_info > div {display:flex; flex-wrap:wrap; align-items:center; gap:1rem 3rem;}
.fnb_info > div a {position:relative;}
.fnb_info > div a ~ a::after {content:""; display:block; position:absolute; left:-1.5rem; top:7px; width:1px; height:1rem; background:#a8acb1;}
.fnb_info > div a.privacy {font-weight:bold; color:#3a7ecd;}
.fnb_info > div a:hover {color:rgba(255,255,255,0.9);}

/* 상단으로 이동 */
.go_top {position:fixed; z-index:9; right:2rem; bottom:2rem; width:5rem; height:5rem; padding:5px; border-radius:50%; background:rgba(58,126,205,0.3);}
.go_top > span {width:100%; height:100%; display:flex; justify-content:center; align-items:center; border-radius:50%; background:#3a7ecd;}
.go_top > span i {color:#fff;}

@media screen and (max-width: 1200px){
	#footerUser {flex-direction:column; padding:4rem 2rem;}
	#footerUser h1 img {height:3.5rem;}
}

@media screen and (max-width: 1025px){
	#footerUser h1 {display:none;}
}

@media screen and (max-width: 769px){
	.fnb_addr {display:flex; flex-direction:column;}
	.fnb_addr p.campus {flex-direction:column; align-items:flex-start;}
	.fnb_addr .campus2, .fnb_addr .campus3 {margin-top:1rem;}
	
	.fnb_info > div {gap:1rem 2rem;}
	.fnb_info > div a ~ a::after {display:none;}
}

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


/* 서브비주얼 */
#subVisual {width:100%; height:25rem; margin-top:8rem; padding:0 5rem;}
#subVisual > div {height:100%; display:flex; justify-content:center; align-items:center; text-align:center; padding:0 5rem; border-radius:1rem; background:#f7f9ff; background-size:cover !important;}
#subVisual > div h2 {font-size:4.2rem; font-weight:bold; color:#fff;}

#subVisual.bgMENU0001 > div {background:url('../images/common/subVisual001.jpg') center center no-repeat;} /* 비교과 프로그램 */
#subVisual.bgMENU0002 > div {background:url('../images/common/subVisual002.jpg') center center no-repeat;} /* 핵심역량진단 */
#subVisual.bgMENU0003 > div {background:url('../images/common/subVisual003.jpg') right center no-repeat;} /* 커뮤니티 */
#subVisual.bgMENU0004 > div {background:url('../images/common/subVisual004.jpg') left center no-repeat;} /* 학생 마이페이지 */
#subVisual.bgMENU0005 > div {background:url('../images/common/subVisual005.jpg') left center no-repeat;} /* 비교과 담당자 마이페이지 */

@media screen and (max-width: 1200px){
	#subVisual {height:20rem; margin-top:6.5rem; padding:0 2rem;}
	#subVisual > div h2 {font-size:3.6rem;}
}

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

@media screen and (max-width: 769px){
	#subVisual {height:15rem;}
	#subVisual > div h2 {font-size:2.8rem;}
}

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


/* 콘텐츠영역 */
#contentUser {position:relative; max-width:1500px; min-height:70rem; display:flex; gap:5rem; margin:6rem auto; padding:0 5rem; background:#fff;}
#contentUser #left {width:20rem;}
#contentUser #right {flex:1; width:calc(100% - 25rem);}

@media screen and (max-width: 1200px){
	#contentUser {padding:0 3rem;}
	#contentUser #left {display:none;}
	#contentUser #right {width:100%;}
	
	#contentUser {margin:4rem auto 5rem;}
}

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

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

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


/* 좌측메뉴 */
.lnb_user > div {height:7rem; display:flex; font-size:2.2rem; font-weight:bold; color:#222; padding-top:1rem; margin-bottom:2rem; border-bottom:2px solid #222; word-break:keep-all;}
.lnb_user > ul > li > a {position:relative; display:flex; align-items:center; font-size:1.5rem; color:#333; padding:1.5rem 1.2rem;}
.lnb_user > ul > li > a:hover {font-weight:500; color:#3a7ecd;}
.lnb_user > ul > li > a.on {font-weight:500; color:#fff; border-radius:3px; background:#3a7ecd;}
.lnb_user > ul:has(.sub_depth2) > li > a:after {
	content:"\f107"; display:block; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
	font-family:"Font Awesome 6 Free"; font-size:1.2rem; font-weight:900; line-height:0; color:#3a7ecd;
} /* 2depth가 존재하는 경우 */
.lnb_user > ul > ul {padding:1rem 1.5rem; border-radius:3px; background:#f5f6f9;}
.lnb_user > ul > ul > li > a {position:relative; display:flex; align-items:center; font-size:1.4rem; color:#555; padding:5px 1rem 5px 1.2rem; word-break:keep-all;}
.lnb_user > ul > ul > li > a::before {content:""; display:block; position:absolute; left:0; top:12px; width:3px; height:3px; border-radius:50%; background:#3a7ecd;}
.lnb_user > ul > ul > li > a.on {font-weight:500; color:#333; text-decoration:underline;}

.lnb_user:has(.sub_depth2) > ul:has(.on) {margin-top:10px;}
.lnb_user:has(.sub_depth2) > ul:has(.on) > li > a {color:#fff; border-radius:3px; background:#3a7ecd;}
.lnb_user:has(.sub_depth2) > ul:has(.on) > li > a::after {color:rgba(255,255,255,0.6);}
.lnb_user:has(.sub_depth2) > ul:has(.on) > ul {margin-top:5px;}

/* 네비-타이틀 */
#naviUser {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem; padding-bottom:3rem; margin-bottom:3rem; border-bottom:2px dotted #ccc;}
#naviUser h3 {font-size:2.8rem; font-weight:bold; color:#222; text-align:center; word-break:keep-all;}
#naviUser p {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px; font-size:1.5rem; color:#555;}
#naviUser p i {font-size:1.2rem;}
#naviUser p span {font-weight:500; color:#222;}

@media screen and (max-width: 1200px){
	#naviUser h3 {font-size:2.4rem;}
}

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

@media screen and (max-width: 769px){
	#naviUser {flex-direction:column;}
	#naviUser h3 {font-size:2.2rem;}
	#naviUser p {font-size:1.4rem;}
}

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




/* 공통 레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 신규 검색폼 */
.search_box {
	display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem 3rem; padding:1.5rem; margin-bottom:4rem;
	border-radius:1rem; border:1px solid #ddd; background:#fff; box-shadow:1px 1px 5px 1px rgba(0,0,0,0.05); overflow:hidden;
}
.search_box label {font-size:1.3rem; color:#333; margin:0;}

.search_box input[type="text"]:-webkit-autofill, 
.search_box input[type="text"]:-webkit-autofill:hover, 
.search_box input[type="text"]:-webkit-autofill:focus, 
.search_box input[type="text"]:-webkit-autofill:active {
	transition:background-color 5000s ease-in-out 0.5s;
	-webkit-text-fill-color:#727272 !important;
} /*크롬 input 자동완성 배경색 제거 */

.search_box input[type="text"], .search_box select {min-width:9rem;}

.search_box .form_row {flex:1; display:flex; flex-direction:column; gap:1.5rem;}
.search_box .row {display:flex; flex-wrap:wrap; gap:1.5rem;}
.search_box .row .items {display:flex; flex-wrap:wrap; flex-direction:column; gap:5px;}
.search_box .row .items span {display:flex;}

.search_box .row .wide {flex:1;} /* 넓게 */
.search_box .row .wide input[type="text"] {min-width:15rem;}

.search_box .row .equal {min-width:20rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(20%, 1fr)); gap:1.5rem;} /* 동일간격 */
.search_box .row .equal span {flex-direction:column; gap:5px;}

.search_box .row .words {flex:1;}  /* 상세검색 */
.search_box .row .words span {flex:1; display:grid; grid-template-columns:10rem 1fr; gap:5px;}

.search_box .row .dates span {display:grid; grid-template-columns:10rem 2.5rem 1rem 10rem 2.5rem; align-items:center; gap:3px;}  /* 날짜 */
.search_box .row .dates span em {font-size:1.4rem; text-align:center;}

.search_box .submit {display:flex; justify-content:center; align-items:center;}
.search_box .submit button {
	font-family:"Pretendard"; width:12rem; height:4rem; display:flex; justify-content:center; align-items:center; gap:1rem; 
	font-size:1.6rem; line-height:0; letter-spacing:1px; font-weight:500; color:#fff; text-align:center; border-radius:5em; background:#2b3d73;
}
.search_box .submit button i {font-size:1rem; margin-top:2px; opacity:0.6;}

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

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

@media screen and (max-width :769px) {
	.search_box {flex-direction:column; align-items:flex-start;}
	.search_box > * {width:100%;}
	
	.search_box label {font-size:1.4rem;}
	.search_box .row {flex-direction:column;}
	
	.search_box .row .dates span {grid-template-columns:1fr 2.5rem 1rem 1fr 2.5rem;}  /* 날짜 */
	
	.search_box .submit button {width:100%; font-size:1.5rem; border-radius:5px;}
	.search_box .submit button i {display:none;}
}

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



/* 사용자UI /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ##### 핵심역량진단 ##### */
/* 핵심역량진단 카드형 UI */
.diagnosis_card {display:grid; grid-template-columns:repeat(2, 1fr); gap:3rem;}
.diagnosis_card .nodata {
	height:50rem; grid-column:span 2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4rem; 
	font-size:1.8rem; line-height:1.6; color:#222; text-align:center; padding:3rem; word-break:keep-all; background:#fff;
}
.diagnosis_card .nodata i {font-size:6rem; color:rgba(0,0,0,0.2);}
/* 데이터가 존재하지 않는 경우 */

.diag_box {padding:2.5rem; border-radius:1rem; border:1px solid #ccc; background:#fff; cursor:pointer; transition:all 0.3s;}
.diag_box:hover {border:1px solid #3a7ecd; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.diag_box b {font-size:1.5rem; font-weight:normal; color:#333;}
.diag_box span {display:block; font-size:1.5rem; color:#555; text-align:right; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

.diag_box .diag_info {display:flex; flex-direction:column; gap:1rem;} /* 상태-제목 */
.diag_box .diag_info > p {display:flex; flex-wrap:wrap; align-items:center; column-gap:1.5rem;}
.diag_box .diag_info > p span {font-size:1.5rem; color:#777;}
.diag_box .diag_info > p em {width:max-content; min-width:7rem; height:2.5rem; display:flex; justify-content:center; align-items:center; font-size:1.3rem; color:#fff; text-align:center; padding:5px 8px; border-radius:50em; background:#ccc;}
.diag_box .diag_info > h4 {font-size:1.8rem; line-height:1.4; font-weight:bold; color:#222; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}

.diag_box .diag_desc {padding:1.5rem 0; margin:1.5rem 0; border-top:2px dotted #ddd; border-bottom:2px dotted #ddd;}
.diag_box .diag_desc li {display:grid; grid-template-columns:6rem 1fr; align-items:center; gap:1rem;}
.diag_box .diag_desc li ~ li {margin:1rem 0;}

.diag_box .diag_result {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem;}
.diag_box .diag_result > p {display:grid; grid-template-columns:6rem 1fr; align-items:center; gap:1rem;}
.diag_box .diag_result > div {display:flex; flex-wrap:wrap; align-items:center; gap:1rem;}
.diag_box .diag_result > div span {font-weight:bold; color:#d02258;}

.diag_box.before .diag_info > p em {background:#e4a035;} /* 검사전 */

.diag_box.done {background:rgba(0,185,241,0.02);} /* 검사완료 */
.diag_box.done .diag_info > p em {background:#3a7ecd;}

.diag_box.end {background:rgba(247,248,252,0.5);} /* 검사기간종료 */
.diag_box.end .diag_info > p em {background:#777;}

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

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

@media screen and (max-width :769px) {
	.diagnosis_card {grid-template-columns:1fr; gap:2rem;}
	.diagnosis_card .nodata {grid-column:span 1;}
}

@media screen and (max-width :481px) {
	.diag_box .diag_result {flex-direction:column; align-items:flex-start; gap:2rem 1rem;}
	.diag_box .diag_result:has(.not_join) {flex-direction:row; align-items:center; gap:1rem;} /* 미참여인 경우 */
	.diag_box .diag_result:has(.not_join) > * {width:auto;}
	.diag_box .diag_result > * {width:100%;}
	.diag_box .diag_result > div button {flex:1; height:40px;}
}



/* ##### 비교과 프로그램 ##### */
/* 비교과 프로그램-역량 선택 */
.program_core {display:flex; flex-wrap:wrap; align-items:center; gap:1rem;}
.program_core li label {font-size:1.4rem; margin:0; padding:8px 1.5rem; border-radius:50em; background:#f0f0f0; transition:all 0.3s; cursor:pointer;}
.program_core li label:hover {box-shadow:0 0 8px rgba(58,126,205,0.3);}

.program_core li.show_all label input[type="radio"]:checked {border-color:#555; background:#555;} /* 전체보기 */

.program_core li.core1 label {background:#ffeee7;} /* 가치탐구역량 */
.program_core li.core1 label input[type="radio"]:checked {border-color:#f68857; background:#f68857;}

.program_core li.core2 label {background:#e0f9fa;} /* 자기계발역량 */
.program_core li.core2 label input[type="radio"]:checked {border-color:#52c9d1; background:#52c9d1;}

.program_core li.core3 label {background:#e7fad9;} /* 의사소통역량 */
.program_core li.core3 label input[type="radio"]:checked {border-color:#87d64d; background:#87d64d;}

.program_core li.core4 label {background:#efebff;} /* 공동체역량 */
.program_core li.core4 label input[type="radio"]:checked {border-color:#8353c5; background:#8353c5;}

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

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

@media screen and (max-width :769px) {
	.program_core_check {width:100%;}
	.program_core {width:100%; display:grid; grid-template-columns:repeat(2, 1fr);}
	.program_core li.show_all {grid-column:span 2;} /* 전체보기 */
	.program_core li label {width:100%;}
}

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


/* 비교과 카드형(서브) */
.program_sub {display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; margin-top:4rem;}
.program_sub .nodata {
	height:30rem; grid-column:span 3; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4rem; 
	font-size:1.8rem; line-height:1.6; color:#222; text-align:center; padding:3rem; word-break:keep-all; background:#fff;
}
.program_sub .nodata i {font-size:6rem; color:rgba(0,0,0,0.2);} /* 데이터가 존재하지 않는 경우 */

.program_card_sub {border-radius:5px; border:1px solid #ccc; background:#fff; transition:all 0.3s; overflow:hidden;}
.program_card_sub:hover {border-color:#2460a4; box-shadow:0 0 15px rgba(0,0,0,0.15);}

.program_card_sub.core_B10210 {border-color:#f68857;} /* 가치탐구역량 */
.program_card_sub.core_B10210:hover {box-shadow:0 0 10px #ffeee7;}
.program_card_sub.core_B10220 {border-color:#52c9d1;} /* 자기계발역량 */
.program_card_sub.core_B10220:hover {box-shadow:0 0 10px #e6f9fa;}
.program_card_sub.core_B10230 {border-color:#87d64d;} /* 의사소통역량 */
.program_card_sub.core_B10230:hover {box-shadow:0 0 10px #ecfae2;}
.program_card_sub.core_B10240 {border-color:#8353c5;} /* 공동체역량 */
.program_card_sub.core_B10240:hover {box-shadow:0 0 10px #efebff;}

.program_card_sub .thumbnail {position:relative; width:100%; height:18rem; border-radius:5px 5px 0 0; background:#fff; overflow:hidden;}
.program_card_sub .thumbnail img {width:100%; height:100%; object-fit:contain;}
.program_card_sub .thumbnail .scrap {position:absolute; right:1.5rem; top:1.5rem; z-index:9;}
.program_card_sub .thumbnail .scrap i {font-size:2rem;}
.program_card_sub .thumbnail .scrap_before i {color:#ccc;} /* 스크랩전 */
.program_card_sub .thumbnail .scrap_after i {color:#e4a035;} /* 스크랩후 */

.program_card_sub .info {min-height:232px; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:2rem; border-radius:0 0 5px 5px; border-top:1px solid #ccc; background:#fff; overflow:hidden;}
.program_card_sub .info .name {max-height:50px; display:-webkit-box !important; font-size:1.8rem; line-height:1.4; font-weight:500; color:#222; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden;} /* 제목 */
.program_card_sub .info .sub_name {max-height:20px; font-size:1.4rem; line-height:1.4; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} /* 세부교과목명 */
.program_card_sub .info .dept {font-size:1.4rem; color:#01a8cd;} /* 부서 */
.program_card_sub .info .part {display:flex; flex-wrap:wrap; align-items:center; gap:6px;} /* 년도-학기-사용자 */
.program_card_sub .info .part span {position:relative; font-size:1.4rem; color:#777;}
.program_card_sub .info .part span ~ span {margin-left:6px;}
.program_card_sub .info .part span ~ span::after {content:""; display:block; position:absolute; left:-6px; top:3px; width:1px; height:1.2rem; background:#777; opacity:0.8;}
.program_card_sub .info .part em {max-width:8.5rem; height:2.5rem; display:flex; justify-content:center; align-items:center; text-align:center; font-size:1.2rem; line-height:100%; color:#fff; padding:0 7px; margin-right:3px; border-radius:5em; background:#777;}
.program_card_sub .info .part em.survey_y {background:#01a8cd;} /* 만족도 응답 */

.program_card_sub .info .sub_head {display:flex; flex-direction:column; gap:1rem 3rem;}
.program_card_sub .info .sub_head > div {display:grid; grid-template-columns:1fr 6rem; gap:3rem;}
.program_card_sub .info .sub_head > div em {height:2.5rem; display:flex; justify-content:center; align-items:center; text-align:center; font-size:1.2rem; line-height:100%; color:#fff; border-radius:5em; background:#777;}

.program_card_sub .info .part.wait span {color:#7b68ba;} /* 접수준비 */
.program_card_sub .info .part.wait span ~ span::after {background:#7b68ba;}
.program_card_sub .info .sub_head > div em.wait {background:#7b68ba;}

.program_card_sub .info .part.accept span {color:#e4a035;} /* 접수중 */
.program_card_sub .info .part.accept span ~ span::after {background:#e4a035;}
.program_card_sub .info .sub_head > div em.accept {background:#e4a035;}

.program_card_sub .info .part.start span {color:#01a8cd;} /* 진행중 */
.program_card_sub .info .part.start span ~ span::after {background:#01a8cd;}
.program_card_sub .info .sub_head > div em.start {background:#01a8cd;}

.program_card_sub .info .part.todo span {color:#199eff;} /* 진행예정 */
.program_card_sub .info .part.todo span ~ span::after {background:#199eff;}
.program_card_sub .info .sub_head > div em.todo {background:#199eff;}

.program_card_sub .info .desc {display:flex; flex-direction:column; gap:1rem; padding-top:2rem; border-top:2px dotted #ccc;}
.program_card_sub .info .desc li {display:grid; grid-template-columns:5rem 1fr; gap:1rem;}
.program_card_sub .info .desc li * {font-size:1.4rem; color:#777; word-break:keep-all;}
.program_card_sub .info .desc li b {font-weight:normal; color:#333;}
.program_card_sub .info .desc li strong {color:#222; padding-right:3px;}

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

@media screen and (max-width :991px) {
	.program_sub {grid-template-columns:repeat(2, 1fr);}
	.program_sub .nodata {grid-column:span 2;}
}

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

@media screen and (max-width :581px) {
	.program_sub {grid-template-columns:1fr;}
	.program_sub .nodata {grid-column:span 1;}
}


/* 비교과 프로그램 상세 */
.program_details * {word-break:keep-all;}
.program_details {display:flex; flex-direction:column; gap:4rem;}
.program_details .info {display:grid; grid-template-columns:37.5rem 1fr; gap:4rem;}
.program_details .thumbnail {width:100%; height:100%; max-height:300px; border:1px solid #ddd; overflow:hidden;}
.program_details .thumbnail img {width:100%; height:100%; object-fit:contain;}
.program_details .details {display:flex; flex-direction:column; justify-content:space-evenly; gap:2rem; padding:1rem 0;}
.program_details .details > div {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem 4rem;}
.program_details .details > div > div {display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;}
.program_details .details > div > div em {
	height:3rem; display:flex; justify-content:center; align-items:center; font-size:1.4rem; line-height:0; 
	font-weight:500; color:#fff; text-align:center; padding:5px 1.5rem; border-radius:50em; background:#01a8cd;
}
.program_details .details > div > div span {position:relative; font-size:1.5rem; color:#333;}
.program_details .details > div > dl {display:flex; align-items:center; gap:5px; font-size:1.4rem; color:#777;}
.program_details .details > dl {display:flex; flex-direction:column; gap:1rem;}
.program_details .details > dl dt {font-size:1.8rem; line-height:1.4; font-weight:500; color:#222;}
.program_details .details > dl dd {font-size:1.4rem; line-height:1.4;}
.program_details .details > ul li {position:relative; display:grid; grid-template-columns:10rem 1fr; gap:2rem; padding-left:15px;}
.program_details .details > ul li ~ li {margin-top:1rem;}
.program_details .details > ul li::after {content:""; display:block; position:absolute; left:0; top:10px; width:3px; height:3px; border-radius:50%; background:#e4a035;}
.program_details .details > ul li b {font-size:1.5rem; line-height:1.4; font-weight:500; color:#1f1f1f;}
.program_details .details > ul li span {font-size:1.5rem; line-height:1.4; color:#555;}

.program_details .desc {display:grid; grid-template-columns:repeat(2, 1fr); gap:3rem 2rem; padding:3rem; border-radius:1rem; border:1px solid #ddd; background:#f9fbfe;}
.program_details .desc dl {display:grid; grid-template-columns:12rem 1fr; align-items:center; gap:1.5rem 2rem;}
.program_details .desc dl dt {display:grid; grid-template-columns:2rem 1fr; align-items:center; gap:1rem; font-size:1.5rem; line-height:0; color:#1f1f1f;}
.program_details .desc dl dt i {display:flex; justify-content:center; align-items:center; font-size:1.4rem; color:rgba(58,126,205,0.6);}
.program_details .desc dl dd {font-size:1.5rem; color:#555;}
.program_details .desc dl.long {grid-column:span 2;} /* 내용이 길 경우 */
.program_details .desc .file_list a {color:#1a62a8;}

.extra_editor_view * {all:revert-layer; font:revert-layer; line-height:unset;} /* 비교과 프로그램 에디터 입력란 */
.extra_editor_view {font-size:1.4rem; padding:3rem; border-radius:1rem; border:1px solid #ddd; background:#f9fbfe;}
.extra_editor_view img {position:relative; width:auto; max-width:945px; height:auto; margin:1rem auto; text-align:center;}

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

@media screen and (max-width :1025px) {
	.program_details .info {grid-template-columns:1fr;}
	.program_details .thumbnail {width:auto; min-width:375px; height:auto; min-height:250px; margin:0 auto;}
	.program_details .details {padding:0;}
	.program_details .details > div {flex-direction:column-reverse; justify-content:flex-start; align-items:flex-start;}
	.program_details .details > div > dl {align-self:flex-end;}
	
	.program_details .desc {grid-template-columns:1fr;}
	.program_details .desc dl.long {grid-column:span 1;}
	
	.extra_editor_view img {max-width:685px;}
}

@media screen and (max-width :769px) {
	.extra_editor_view img {max-width:100%; height:auto !important;}
	.extra_editor_view table {table-layout:auto !important;}
}

@media screen and (max-width :481px) {
	.program_details .thumbnail {width:100%; min-width:100%;}
	.program_details .thumbnail img {width:100%;}
	
	.program_details .desc {gap:2rem; padding:3rem 2rem;}
	.program_details .desc dl {grid-template-columns:1fr; padding:0 5px;}
	.program_details .desc dl ~ dl {padding-top:2rem; border-top:2px dotted #ddd;}
}


/* ##### 마이홈 ##### */
/* 마이홈 :: 공통레이아웃 ========== */
.my_home .home_box {padding:2rem; border-radius:1rem; background:#f4f5fa;}
.my_home .home_box ~ .home_box {margin-top:2rem;}
.my_home .home_head {position:relative; font-size:1.8rem; font-weight:bold; color:#1f1f1f; padding-left:2.8rem; margin-bottom:2rem;}
.my_home .home_head::after {content:""; display:block; position:absolute; left:0; top:4px; width:16px; height:16px; background:url('../images/common/icn_title.png') no-repeat;}

/* 박스영역 */
.my_home .home_section {display:flex; flex-direction:column; gap:1.5rem; padding:1.5rem; border-radius:1rem; border:1px solid #ddd; background:#fff; overflow:hidden;}
.my_home .box_head_wrap {display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; padding-bottom:1.2rem; border-bottom:1px solid #ddd;}
.my_home .box_head_wrap h4 {width:auto; padding:0; border:none;}
.my_home .box_head {width:100%; font-size:1.5rem; font-weight:500; color:#1f1f1f; padding-bottom:1.2rem; border-bottom:1px solid #ddd;}
.my_home .box_more {display:flex; align-items:center; gap:5px; font-size:1.4rem; font-weight:500; color:#3a7ecd;}
.my_home .box_more i {font-size:1.2rem; line-height:0; color:#3a7ecd; margin-top:3px;}

/* 내정보 영역 */
.home_info_wrapper {display:grid; grid-template-columns:36rem 1fr; gap:1rem;}
.home_info_wrapper article {display:flex; flex-direction:column; gap:1rem;}

/* 내정보 */
.home_profile {flex:auto;}
.home_profile .profile_box {height:100%; display:flex; flex-direction:column; justify-content:center; gap:2rem; overflow:hidden; padding:0 1rem 1rem 1rem;}
/* .home_profile .profile_info {display:grid; grid-template-columns:8rem 1fr; gap:2rem;}
.home_profile .profile {width:100%; height:8rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:1rem; background:#dff1ff;}
.home_profile .profile i {font-size:3.6rem; color:#3a7ecd;} */
.home_profile .profile_info > div {display:flex; flex-direction:column; justify-content:center; gap:1rem 3rem; padding-top:1rem;}
.home_profile .profile_info > div strong {font-size:2.2rem; color:#1f1f1f;}
.home_profile .profile_info > div em {width:max-content; min-width:6rem; height:2.5rem; display:flex; justify-content:center; align-items:center; font-size:1.3rem; color:#fff; border-radius:50em;}
.home_profile .profile_info > div em.study {background:#01a8cd;}
.home_profile .profile_info > div em.graduate {background:#e4a035;}
.home_profile .profile_details {display:flex; flex-direction:column; gap:8px;}
.home_profile .profile_details li {display:grid; grid-template-columns:auto 1fr; gap:1rem; font-size:1.5rem;}
.home_profile .profile_details li b {font-weight:500; color:#333;}


/* 학생 마이홈 :: 나의 학습공간 ========== */
/* 진행상태 */
.home_progress {flex:1; display:grid; grid-template-columns:repeat(2, 1fr); align-items:center; gap:1rem;}
.home_progress li {height:100%; flex:1; display:flex; align-items:center; gap:1.5rem; padding:1.2rem; border-radius:1rem; border:1px solid #ddd; background:#fff;}
.home_progress li span {width:3.5rem; height:3.5rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50em; background:#ddd;}
.home_progress li span i {font-size:1.4rem;}
.home_progress li div {display:flex; flex-direction:column; gap:3px;}
.home_progress li div strong {font-family:"Pretendard"; font-size:2.2rem; font-weight:bold; color:#1f1f1f;}
.home_progress li div p {font-size:1.3rem; color:#666;}

/* 진행상태-비교과 프로그램 */
.extra_progress .home_progress li.doing {border-color:#18bec4;} /* 진행과정 */
.extra_progress .home_progress li.doing span {background:#ddf6f7;}
.extra_progress .home_progress li.doing span i {font-size:1.6rem; color:#18bec4;}

.extra_progress .home_progress li.survey {border-color:#fe881c;} /* 미이수 */
.extra_progress .home_progress li.survey span {background:#feecdc;}
.extra_progress .home_progress li.survey span i {color:#fe881c;}

.extra_progress .home_progress li.done {border-color:#199eff;} /* 수강완료 */
.extra_progress .home_progress li.done span {background:#dff1ff;}
.extra_progress .home_progress li.done span i {color:#199eff;}

.extra_progress .home_progress li.cancle {border-color:#fe6869;} /* 수강취소 */
.extra_progress .home_progress li.cancle span {background:#ffe9ea;}
.extra_progress .home_progress li.cancle span i {color:#fe6869;}

/* 진행상태-역량진단 */
.diag_progress .home_progress li.not_done {border-color:#e4a035;} /* 미완료 */
.diag_progress .home_progress li.not_done span {background:#fcecd3;}
.diag_progress .home_progress li.not_done span i {color:#e4a035;}

.diag_progress .home_progress li.done {border-color:#4b49bd;} /* 완료 */
.diag_progress .home_progress li.done span {background:#e6e6ff;}
.diag_progress .home_progress li.done span i {color:#4b49bd;}

/* 차트 :: 핵심역량별 이수현황/비교과 영역별 이수현황 */
.isu_chart .no_chart {height:25rem; display:flex; justify-content:center; align-items:center; font-size:1.4rem; line-height:1.4; text-align:center; word-break:keep-all;}


/* 학생 마이홈 :: 비교과 프로그램 대시보드 ========== */
.my_extra {display:grid; grid-template-columns:40rem 1fr; gap:1rem;}

/* 비교과 프로그램 이수내역 */
.extra_isu_list {height:100%; display:flex; flex-direction:column; gap:1rem; overflow:hidden;}
.extra_isu_list li {flex:1; display:flex; flex-direction:column; justify-content:center; gap:1rem; padding:1.5rem; border-radius:1rem; border:1px solid #ddd; background:#fff; overflow:hidden; transition:all 0.3s;}
.extra_isu_list li span {position:relative; font-size:1.3rem; font-weight:500; padding-left:1.5rem;}
.extra_isu_list li span::before {content:""; display:block; position:absolute; left:0; top:4px; width:7px; height:7px; border-radius:50%;}
.extra_isu_list li strong {display:block; font-size:1.6rem; color:#1f1f1f; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.extra_isu_list li dl {display:grid; grid-template-columns:5rem 1fr; gap:2rem; font-size:1.3rem;}
.extra_isu_list li dl dt {color:#333;}
.extra_isu_list li dl dd {color:#888; word-break:keep-all;}

.extra_isu_list li:has(.isu):hover {border-color:#199eff;} /* 이수 */
.extra_isu_list li span.isu {color:#199eff;}
.extra_isu_list li span.isu::before {background:#199eff;}

.extra_isu_list li:has(.doing):hover {border-color:#e4a035;} /* 진행중 */
.extra_isu_list li span.doing {color:#e4a035;}
.extra_isu_list li span.doing::before {background:#e4a035;}

.extra_isu_list:has(.noData) {height:calc(100% - 31px - 1.5rem);} /* 데이터 존재하지 않는 경우 */
.extra_isu_list .noData {font-size:1.4rem; text-align:center; word-break:keep-all; border:none;}

/* 비교과 프로그램 추천 */
.extra_recommend_list {display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; overflow:hidden;}
.extra_recommend_list li {border-radius:1rem; border:1px solid #ddd; background:#fff; overflow:hidden; transition:all 0.3s;}
.extra_recommend_list li:hover {border-color:#2460a4;}
.extra_recommend_list .thumbnail {position:relative; width:100%; height:16rem; border-radius:1rem 1rem 0 0; background:#fff; overflow:hidden;}
.extra_recommend_list .thumbnail img {width:100%; height:100%; object-fit:cover;}
.extra_recommend_list .info {display:flex; flex-direction:column; gap:1rem; padding:1.5rem; border-top:1px solid #ddd;}
.extra_recommend_list .info > span {font-size:1.3rem; color:#01a8cd;}
.extra_recommend_list .info > strong {display:block; font-size:1.6rem; color:#1f1f1f; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.extra_recommend_list .info > div {display:flex; gap:5px;}
.extra_recommend_list .info > div em {width:max-content; height:2.5rem; display:flex; justify-content:center; align-items:center; font-size:1.2rem; color:#555; text-align:center; padding:5px; background:#edeef3;}
.extra_recommend_list .info > p {display:flex; flex-wrap:wrap; gap:5px; font-size:1.3rem; padding-top:1rem; border-top:2px dotted #ddd;}
.extra_recommend_list .info > p b {font-weight:500; color:#333;}
.extra_recommend_list .info > p span {color:#888; word-break:keep-all;}

.extra_recommend_list:has(.noData) {height:calc(100% - 31px - 1.5rem);} /* 데이터 존재하지 않는 경우 */
.extra_recommend_list .noData {height:100%; grid-column:span 3; display:flex; justify-content:center; align-items:center; font-size:1.4rem; word-break:keep-all; text-align:center; padding:1.5rem; border:none;}


/* 담당자 마이홈 ========== */
/* 나의 비교과 프로그램 개설현황 */
.my_open {flex:1; display:grid; grid-template-columns:repeat(2, 1fr); align-items:center; gap:1rem;}
.my_open li {height:100%; flex:1; display:flex; align-items:center; gap:1.5rem; padding:1.2rem; border-radius:1rem; border:1px solid #ddd; background:#fff;}
.my_open li span {width:3.5rem; height:3.5rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50em; background:#ddd;}
.my_open li span i {font-size:1.4rem;}
.my_open li div {flex:1; display:flex; flex-direction:column; gap:3px;}
.my_open li div strong {font-family:"Pretendard"; font-size:2.2rem; font-weight:bold; color:#1f1f1f;}
.my_open li div p {font-size:1.3rem; color:#666; word-break:keep-all;}

.my_open li.total {border-color:#eaf5ff; background:#eaf5ff;} /* 전체 */
.my_open li.total span {background:#cae4ff;}
.my_open li.total span i {color:#0f76fc;}

.my_open li.ready {border-color:#ffeff0; background:#ffeff0;} /* 접수준비 */
.my_open li.ready span {background:#ffdadc;}
.my_open li.ready span i {color:#fe6869;}

.my_open li.open {border-color:#fff5de; background:#fff5de;} /* 접수중 */
.my_open li.open span {background:#ffe7ad;}
.my_open li.open span i {color:#eeab00;}

.my_open li.run {border-color:#effacb; background:#effacb;} /* 운영중 */
.my_open li.run span {background:#dbf09d;}
.my_open li.run span i {color:#77bb1c;}

.my_open li.survey {border-color:#ddf6f7; background:#ddf6f7;} /* 설문조사 */
.my_open li.survey span {background:#b9ecee;}
.my_open li.survey span i {color:#18bec4;}

.my_open li.done {border-color:#f3edff; background:#f3edff;} /* 완료 */
.my_open li.done span {background:#e2d3ff;}
.my_open li.done span i {color:#6422f4;}

/* 역량별 비교과 프로그램 개설현황 */
.core_open {display:grid; grid-template-columns:repeat(4, 1fr); align-items:center; gap:1rem;}
.core_open li {height:100%; flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.5rem; text-align:center; padding:2rem 1.5rem; border-radius:1rem; border:1px solid #ddd; background:#fff;}
.core_open li span {width:4rem; height:4rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50em; background:#ddd;}
.core_open li span i {font-size:1.4rem;}
.core_open li div {flex:1; width:100%; display:flex; flex-direction:column; align-items:center; gap:1rem;}
.core_open li div strong {font-family:"Pretendard"; font-size:2.2rem; font-weight:bold; color:#1f1f1f;}
.core_open li div p {font-size:1.4rem; color:#666; word-break:keep-all;}
.core_open li div p br {display:none;}

.core_open li.core1 {border-color:transparent; background:#ffeee7;} /* 가치탐구역량 */
.core_open li.core1 span {background:#f68857;}
.core_open li.core1 span i {color:#fff;}

.core_open li.core2 {border-color:transparent; background:#e6f9fa;} /* 자기계발역량 */
.core_open li.core2 span {background:#52c9d1;}
.core_open li.core2 span i {font-size:1.8rem; color:#fff;}

.core_open li.core3 {border-color:transparent; background:#ecfae2;} /* 의사소통역량 */
.core_open li.core3 span {background:#87d64d;}
.core_open li.core3 span i {color:#fff;}

.core_open li.core4 {border-color:transparent; background:#e7f2fc;} /* 공동체역량 */
.core_open li.core4 span {background:#518fce;}
.core_open li.core4 span i {font-size:1.6rem; color:#fff;}

/* 영역별 비교과 프로그램 개설현황 */
.part_extra {flex:auto;}

.part_open {display:grid; grid-template-columns:repeat(2, 1fr); align-items:center; gap:1rem;}
.part_open li {height:100%; flex:1; display:flex; align-items:center; gap:1.5rem; padding:1.2rem; border-radius:1rem; border:1px solid #aaa; background:#fff;}
.part_open li span {width:3.5rem; height:3.5rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50em; background:#e5e5e5;}
.part_open li span i {font-size:1.4rem;}
.part_open li div {flex:1; display:flex; flex-direction:column; gap:3px;}
.part_open li div strong {font-family:"Pretendard"; font-size:2.2rem; font-weight:bold; color:#1f1f1f;}
.part_open li div p {font-size:1.3rem; color:#666; word-break:keep-all;}

.part_open li.study {border-color:#199eff;} /* 학생학습 */
.part_open li.study span {background:#dff1ff;}
.part_open li.study span i {color:#199eff;}

.part_open li.psy {border-color:#fe6869;} /* 심리상담 */
.part_open li.psy span {background:#ffe9ea;}
.part_open li.psy span i {color:#fe6869;}

.part_open li.course {border-color:#77bb1c;} /* 진로 */
.part_open li.course span {background:#ebf7c8;}
.part_open li.course span i {color:#77bb1c;}

.part_open li.career {border-color:#eeab00;} /* 취업 */
.part_open li.career span {background:#ffecbf;}
.part_open li.career span i {font-size:1.6rem; color:#eeab00;}

.part_open li.startup {border-color:#18bec4;} /* 창업 */
.part_open li.startup span {background:#ddf6f7;}
.part_open li.startup span i {font-size:1.6rem; color:#18bec4;}

.part_open li.human {border-color:#fe881c;} /* 인권지원 */
.part_open li.human span {background:#feecdc;}
.part_open li.human span i {color:#fe881c;}

.part_open li.global {border-color:#855adf;} /* 글로벌지원 */
.part_open li.global span {background:#e5d8ff;}
.part_open li.global span i {color:#7347d1;}

/* 비교과 프로그램 이수내역 */
.extra_open_list {height:100%; display:flex; flex-direction:column; gap:1rem; overflow:hidden;}
.extra_open_list li {flex:1; display:grid; grid-template-columns:1fr 10rem; align-items:center; gap:2rem; padding:1.5rem; border-radius:1rem; border:1px solid #ddd; background:#fff; overflow:hidden; transition:all 0.3s;}
.extra_open_list .info {display:flex; flex-direction:column; gap:1rem; overflow:hidden;}
.extra_open_list .info span {position:relative; font-size:1.3rem; font-weight:500; padding-left:1.5rem;}
.extra_open_list .info span::before {content:""; display:block; position:absolute; left:0; top:4px; width:7px; height:7px; border-radius:50%;}
.extra_open_list .info strong {display:block; font-size:1.6rem; color:#1f1f1f; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.extra_open_list .info > div {display:flex; flex-direction:column; gap:5px;}
.extra_open_list .info > div dl {display:grid; grid-template-columns:8rem 1fr; gap:2rem; font-size:1.3rem;}
.extra_open_list .info > div dl dt {color:#333;}
.extra_open_list .info > div dl dd {color:#888; word-break:keep-all;}
.extra_open_list .btns {display:flex; flex-direction:column; gap:5px;}
.extra_open_list .btns button {width:100%; height:3rem; display:flex; justify-content:center; align-items:center; gap:5px; font-size:1.3rem; color:#fff; text-align:center; padding:5px; border-radius:5px;}
.extra_open_list .btns button.student_btn {background:linear-gradient(45deg, #6f7179, #4d505c);}
.extra_open_list .btns button.survey_btn {background:linear-gradient(45deg, #3a7ecd, #0755b0);}
.extra_open_list .btns button.result_btn {background:linear-gradient(45deg, #30bede, #0095b7);}

.extra_open_list li:has(.check_y):hover {border-color:#199eff;} /* 승인 */
.extra_open_list .info span.check_y {color:#199eff;}
.extra_open_list .info span.check_y::before {background:#199eff;}

.extra_open_list li:has(.check_c):hover {border-color:#e4a035;} /* 조건부승인 */
.extra_open_list .info span.check_c {color:#e4a035;}
.extra_open_list .info span.check_c::before {background:#e4a035;}

.extra_open_list li:has(.check_n):hover {border-color:#fe6869;} /* 미승인 */
.extra_open_list .info span.check_n {color:#fe6869;}
.extra_open_list .info span.check_n::before {background:#fe6869;}

.extra_open_list:has(.noData) {height:calc(100% - 31px - 1.5rem);} /* 데이터 존재하지 않는 경우 */
.extra_open_list .noData {font-size:1.4rem; text-align:center; border:none; word-break:keep-all;}

@media screen and (max-width :1400px) {
	/* 학생 */
	.my_extra {display:flex; flex-direction:column;}
	.extra_recommend_list .thumbnail {height:15rem;}
	
	/* 담당자 */
	.core_open li div p br {display:block;}
	.part_open {grid-template-columns:repeat(2, 1fr);}
}

@media screen and (max-width :1025px) {
	.home_info_wrapper {display:flex; flex-direction:column;}
	
	/* 담당자 */
	.my_open {grid-template-columns:repeat(2, 1fr);}
	
	.core_open {grid-template-columns:repeat(2, 1fr);}
	.core_open li {flex-direction:row; justify-content:flex-start; text-align:left; padding:1.5rem;}
	.core_open li span {width:3.5rem; height:3.5rem;}
	.core_open li span i {font-size:1.4rem;}
	.core_open li div {flex-direction:column-reverse; align-items:flex-start; gap:3px;}
	.core_open li div p {font-size:1.3rem;}
	.core_open li div p br {display:none;}
}

@media screen and (max-width :769px) {
	/* 학생 */
	.extra_recommend_list {grid-template-columns:repeat(2, 1fr);}
	
	.isu_chart .no_chart {height:auto; padding:1.5rem;}
	
	/* 담당자 */
	.extra_open_list li {grid-template-columns:1fr;}
	.extra_open_list .btns {flex-direction:row;}
}

@media screen and (max-width :481px) {
	.my_home .box_head_wrap {flex-direction:column;}
	.my_home .box_head {align-self:flex-start;}
	.my_home .box_more {align-self:flex-end;}
	
	/* 학생 */
	.home_progress {display:flex; flex-direction:column; gap:1rem;}
	.home_progress li {width:100%;}
	
	.extra_recommend_list {grid-template-columns:1fr;}
	
	/* 담당자 */
	.my_open {grid-template-columns:1fr;}
	.core_open {grid-template-columns:1fr;}
	.part_open {grid-template-columns:1fr;}
	
	.extra_open_list .btns {flex-direction:column;}
}


/* ##### My 포트폴리오 ##### */
/* 포트폴리오 설정 ==================== */
/* 포트폴리오 인적사항 */
.portfolio_basic {display:flex; flex-direction:column; gap:3rem; padding:2rem 3rem 3rem; border-radius:1rem; border:1px solid #ccc; background:#fff; overflow:hidden;}
.portfolio_basic .title {display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-bottom:1rem; border-bottom:2px dotted #ccc;}
.portfolio_basic .title h3 {flex:1; font-size:1.8rem; font-weight:bold; color:#1f1f1f; word-break:keep-all;}

.portfolio_basic .info_view {display:grid; grid-template-columns:120px 1fr; gap:3rem 5rem; align-items:center; overflow:hidden;}

.portfolio_basic .info_photo {display:flex; flex-direction:column; align-items:center; gap:1.5rem;}
.portfolio_basic .info_photo .photo_add {width:120px; height:155px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1rem; text-align:center; border:1px solid #ddd; background:#f7f8fc; overflow:hidden;}
.portfolio_basic .info_photo .photo_add i {font-size:2.4rem; color:#999;}
.portfolio_basic .info_photo .photo_add span {font-size:1.4rem; color:#777;}
.portfolio_basic .info_photo .photo_show {width:120px; height:155px; border:1px solid #ddd; background:#f7f8fc; overflow:hidden;}
.portfolio_basic .info_photo .photo_show img {width:100%; height:100%; object-fit:fill;}
.portfolio_basic .info_photo p {font-size:1.3rem; line-height:1.4; margin:0;}

.portfolio_basic .info_stud {display:flex; flex-direction:column; gap:1.2rem;}
.portfolio_basic .info_stud strong {font-size:2.2rem; color:#1f1f1f; margin-bottom:1rem;}
.portfolio_basic .info_stud dl {display:grid; grid-template-columns:12rem 1fr; gap:2rem; align-items:center; font-size:1.5rem;}
.portfolio_basic .info_stud dl dt {color:#333;}
.portfolio_basic .info_stud dl dd {color:#777;}

.portfolio_basic .info_add {display:flex; flex-direction:column; gap:1.5rem; padding-top:3rem; border-top:2px dotted #ccc;} /* 추가정보 */
.portfolio_basic .info_add dl {display:grid; grid-template-columns:auto 1fr; gap:2rem; font-size:1.5rem;}
.portfolio_basic .info_add dl dt {color:#333; padding-top:5px;}
.portfolio_basic .info_add dl dd {color:#777;}
.portfolio_basic .info_add .address dd {display:flex; flex-direction:column; gap:1rem;}
.portfolio_basic .info_add .address .addr_find {display:flex; align-items:center; gap:5px;}
.portfolio_basic .info_add .address .addr_detail {display:flex; align-items:center; gap:1rem;}
.portfolio_basic .info_add .address .addr_detail > * {flex:1;}


/* 포트폴리오 공개여부 */
.portfolio_open {overflow:hidden;}
.portfolio_open .title {display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-bottom:1rem; border-bottom:2px dotted #ccc;}
.portfolio_open .title h3 {flex:1; font-size:1.8rem; font-weight:bold; color:#1f1f1f; word-break:keep-all;}
.portfolio_open .caution.long {margin-top:2rem;}

.portfolio_open .open_check {display:flex; gap:1rem; padding:1rem; margin-top:2rem; border-radius:1rem; background:#f2f3f8; overflow:hidden;}
.portfolio_open .open_check > div {flex:1; display:flex; flex-direction:column; gap:1.5rem; padding:1.5rem; border-radius:1rem; border:1px solid #ddd; background:#fff; transition:all 0.3s;}
.portfolio_open .open_check > div:hover {border-color:#3a7ecd; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.portfolio_open .open_check > div strong {height:35px; display:flex; justify-content:center; align-items:center; font-size:1.5rem; font-weight:500; color:#222; text-align:center; word-break:keep-all;}
.portfolio_open .open_check > div span {display:flex; flex-direction:column; gap:5px 1rem;}
.portfolio_open .open_check > div span label {flex:1; font-size:1.4rem; color:#333; text-align:center; padding:8px 1rem; margin:0; border-radius:3px; background:#ebf6ff;}

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

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

@media screen and (max-width :769px) {
	.portfolio_basic {padding:2rem;}
	.portfolio_basic .info_view {grid-template-columns:1fr;}
	.portfolio_basic .info_photo {justify-content:center; align-items:center;}
	.portfolio_basic .info_stud strong {text-align:center;}
	
	.portfolio_open .open_check {flex-direction:column;}
	.portfolio_open .open_check > div {flex-direction:row; justify-content:space-between;}
	.portfolio_open .open_check > div strong {flex:1; height:auto; justify-content:flex-start; text-align:left;}
	.portfolio_open .open_check > div strong br {display:none;}
	.portfolio_open .open_check > div span {flex-direction:row;}
	.portfolio_open .open_check > div span label {min-width:8.5rem;}
}

@media screen and (max-width :481px) {
	.portfolio_basic .info_stud {gap:2rem 1.2rem;}
	.portfolio_basic .info_stud dl {display:flex; flex-direction:column; align-items:flex-start; gap:1rem;}
	.portfolio_basic .info_stud dl > * {width:100%;}
	
	.portfolio_basic .info_add {gap:2rem 1.5rem;}
	.portfolio_basic .info_add dl {display:flex; flex-direction:column; align-items:flex-start; gap:1rem;}
	.portfolio_basic .info_add dl dt {padding-top:0;}
	.portfolio_basic .info_add dl dd {width:100%;}
	.portfolio_basic .info_add .address .addr_detail {flex-direction:column;}
	.portfolio_basic .info_add .address .addr_detail > * {flex:unset;}
	
	.portfolio_open .open_check > div {flex-direction:column;}
	.portfolio_open .open_check > div strong {justify-content:center; text-align:center;}
}


/* 나의 목표 및 계획 ==================== */
.portfolio_plan {display:flex; flex-direction:column; gap:1rem; padding:1rem; border-radius:1rem; background:#f2f3f8; overflow:hidden;}

.plan_box {display:flex; flex-direction:column; gap:2rem; padding:2.5rem; border-radius:1rem; border:1px solid #ccc; background:#fff; overflow:hidden; transition:all 0.3s;}
.plan_box:hover {box-shadow:0 0 10px rgba(0,0,0,0.1);}

.plan_title {display:flex; flex-direction:column; gap:1.5rem;}
.plan_title dt {display:grid; grid-template-columns:6rem 1fr; gap:1.5rem; align-items:center;}
.plan_title dt span {height:3rem; display:flex; justify-content:center; align-items:center; font-family:"Pretendard"; font-size:1.6rem; font-weight:bold; color:#fff; text-align:center; border-radius:50em;}
.plan_title dt strong {font-size:1.8rem; color:#1f1f1f;}
.plan_title dd {font-size:1.5rem; word-break:keep-all;}

.plan_write pre {font-family:"NotoSansKR"; white-space:pre-wrap; color:#555;}

.plan_graduate:hover {border-color:#01a8cd;} /* 졸업  후 계획 */
.plan_graduate .plan_title dt span {background:#01a8cd;}

.plan_career:hover {border-color:#3a7ecd;} /* 목표 직업 */
.plan_career .plan_title dt span {background:#3a7ecd;}

.plan_study:hover {border-color:#4b49bd;} /* 학업 계획서 */
.plan_study .plan_title dt span {background:#4b49bd;}

.plan_check {display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem;}
.plan_check input[type=radio] {width:0; height:0; position:absolute; left:-9999px;}
.plan_check input[type=radio] + label {
	position:relative; display:block; font-size:1.5rem; line-height:1.4; color:#555; text-align:center; padding:1.2rem 1rem; margin:0;
	border-radius:5px; border:solid 1px #ccc; background:#fff; box-shadow:0 0 0 rgba(255, 255, 255, 0); cursor:pointer;
	transition:border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.plan_check input[type=radio]:checked + label {color:#fff; border:1px solid #46aedb; background:#46aedb; box-shadow: 0 0 10px rgba(102, 179, 251, 0.3);}

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

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

@media screen and (max-width :769px) {
	.plan_box {padding:2rem;}
	.plan_check {display:grid; grid-template-columns:repeat(2, 1fr);}
}

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


/* 역량개발현황 ==================== */
.portfolio_status {display:flex; flex-direction:column; gap:1rem; padding:1rem; border-radius:1rem; background:#f2f3f8; overflow:hidden;}
.portfolio_status > div {min-height:40rem; padding:1rem; border-radius:1rem; border:1px solid #ccc; background:#fff; overflow:hidden;}
.portfolio_status .no_chart {min-height:40rem; display:flex; justify-content:center; align-items:center; font-size:1.6rem; line-height:1.4; color:#555; text-align:center; word-break:keep-all;}


/* 비교과 프로그램 참여내역 ==================== */
.portfolio_extra .nodata {
	height:50rem; grid-column:span 2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4rem; 
	font-size:1.8rem; line-height:1.6; color:#222; text-align:center; padding:3rem; word-break:keep-all; background:#fff;
}
.portfolio_extra .nodata i {font-size:6rem; color:rgba(0,0,0,0.2);}
/* 데이터가 존재하지 않는 경우 */

.portfolio_extra_list {display:flex; flex-direction:column; gap:1.5rem;}
.portfolio_extra_list > li {display:grid; grid-template-columns:1fr 12rem; gap:3rem; padding:2.5rem; border-radius:1rem; border:1px solid #ccc; background:#fff; overflow:hidden; transition:all 0.3s;}
.portfolio_extra_list > li:hover {border-color:#3a7ecd; box-shadow:0 0 10px rgba(0,0,0,0.1);}

.portfolio_extra_list .list_info {display:flex; flex-direction:column; justify-content:space-between; gap:2rem; overflow:hidden;}
.portfolio_extra_list .list_info > div {display:flex; flex-direction:column; gap:1.5rem;}
.portfolio_extra_list .list_info > div h3 {font-size:1.8rem; font-weight:bold; color:#1f1f1f;}
.portfolio_extra_list .list_info > div div {font-size:1.5rem;}
.portfolio_extra_list .list_info > div div span {font-size:1.4rem; color:#8e9aae;}
.portfolio_extra_list .list_info > div div span ~ span {margin-left:1.5rem;}
.portfolio_extra_list .list_info > ul li {display:grid; grid-template-columns:7rem 1fr; gap:1rem;}
.portfolio_extra_list .list_info > ul li strong {font-size:1.4rem; font-weight:normal; color:#333;}
.portfolio_extra_list .list_info > ul li span {font-size:1.4rem; color:#777;}

.portfolio_extra_list .list_btns {display:flex; flex-direction:column; justify-content:center; gap:5px;}
.portfolio_extra_list .list_btns button {width:100%; height:3.5rem; display:flex; justify-content:center; align-items:center; gap:5px; text-align:center; font-size:1.5rem; color:#fff; padding:1rem; border-radius:3px; overflow:hidden;}
.portfolio_extra_list .list_btns button em {font-weight:500; letter-spacing:0.02em;}
.portfolio_extra_list .list_btns button:nth-child(1) {background:#3a7ecd;}
.portfolio_extra_list .list_btns button:nth-child(2) {background:#2b3d73;}
.portfolio_extra_list .list_btns button:nth-child(3) {background:#777;}

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

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

@media screen and (max-width :769px) {
	.portfolio_extra_list > li {grid-template-columns:1fr;}
	.portfolio_extra_list .list_btns button {height:4rem;}
}

@media screen and (max-width :481px) {
	.info_portfolio_files .left .count {width:100%; margin:2rem 0 0 0 !important;}
	.info_portfolio_files .file_btns {width:100%;}
	.info_portfolio_files .file_btns button {flex:1;}
	.info_portfolio_files .file_btns .file_down {flex:100%;}
}


/* 이력서/자기소개서 ==================== */
.portfolio_resume {display:flex; flex-direction:column; gap:4rem;}

.resume_manage {display:flex; flex-direction:column; gap:2rem;}
.resume_manage .title {display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-bottom:1rem; border-bottom:2px dotted #ccc;}
.resume_manage .title h3 {flex:1; font-size:1.8rem; font-weight:bold; color:#1f1f1f; word-break:keep-all;}

/* 리스트 존재하지 않는 경우 */
.resume_manage .nodata {
	height:20rem; grid-column:span 2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3rem; 
	font-size:1.8rem; line-height:1.6; color:#222; text-align:center; padding:3rem; word-break:keep-all; background:#fff;
}
.resume_manage .nodata i {font-size:5rem; color:rgba(0,0,0,0.2);}

/* 대표설정 리스트 */
.resume_manage_list {display:grid; grid-template-columns:repeat(4, 1fr); gap:1.5rem;}
.resume_manage_list li {
	position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:3rem; 
	padding:5rem 2rem 2rem; border-radius:1rem; border:1px solid #ccc; background:#fff; overflow:hidden; transition:all 0.3s;
}
.resume_manage_list li:has(.select) {border-color:#f68857; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.resume_manage_list .main_resume {
	position:absolute; right:2rem; top:0; width:7.5rem; height:2.5rem; display:flex; justify-content:center; align-items:center; 
	font-size:1.3rem; color:#fff; text-align:center; padding:5px 1rem; border-radius:0 0 5px 5px; background:#2b3d73;
}
.resume_manage_list .main_resume.select {background:#f68857;}
.resume_manage_list .info {display:flex; flex-direction:column; gap:1.2rem;}
.resume_manage_list .info h4 {font-size:1.8rem; font-weight:500; color:#1f1f1f;}
.resume_manage_list .info dl {display:grid; grid-template-columns:5rem 1fr; gap:1rem;}
.resume_manage_list .info dl dt {font-size:1.4rem; font-weight:normal; color:#333;}
.resume_manage_list .info dl dd {font-size:1.4rem; color:#777;}
.resume_manage_list .show_resume {display:flex; justify-content:center; align-items:center; width:100%; height:4rem; font-size:1.5rem; color:#777; text-align:center; border-radius:3px; border:1px solid #ccc; background:#f7f8fc;}

.resume_manage_list li:hover {box-shadow:0 0 10px rgba(0,0,0,0.1);}
.resume_manage_list li:hover .show_resume {color:#2b3d73; border-color:#2b3d73; background:#fff;}

/* 제목입력영역 */
.manage_resume_title {display:flex; flex-direction:column; gap:1.5rem; padding:2.5rem; border-radius:1rem; background:#eff5ff;}
.manage_resume_title strong {font-size:1.6rem; color:#1f1f1f;}
.manage_resume_title input[type="text"] {height:5rem;}

/* 이력서 입력사항 */
.resume_section {display:flex; flex-direction:column; gap:4rem;}
.resume_section .title {display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-bottom:1rem; border-bottom:2px dotted #ccc;}
.resume_section .title h3 {flex:1; font-size:1.8rem; font-weight:bold; color:#1f1f1f; word-break:keep-all;}

.resume_part {display:flex; flex-direction:column; gap:2rem;}

.resume_list {position:relative; border:1px solid #ccc; border-top:1px solid #222; background:#fff; overflow:hidden; overflow-x:auto;}
.resume_list table {width:100%; table-layout:fixed;}
.resume_list table thead th {font-weight:500; color:#222; text-align:center; padding:1.2rem 8px; border-bottom:1px solid #ccc; background:#f4f8fc;}
.resume_list table thead th ~ th {border-left:1px solid #ddd;}
.resume_list table tbody tr ~ tr {border-top:1px solid #ddd;}
.resume_list table tbody th {text-align:center; padding:8px; border-right:1px solid #ddd;}
.resume_list table tbody td {text-align:center; padding:8px; color:#333;}
.resume_list table tbody th ~ th,
.resume_list table tbody td ~ td {border-left:1px solid #ddd;}
.resume_list .mob_title {display:none;}

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

@media screen and (max-width :1025px) {
	.resume_manage_list {grid-template-columns:repeat(2, 1fr);}
	
	.resume_list {border:none;}
	.resume_list table thead, .resume_list colgroup {display:none;}
	.resume_list table tbody tr {display:flex; flex-direction:column; gap:1rem; padding:1.5rem; border-radius:1rem; border:1px solid #ccc; overflow:hidden;}
	.resume_list table tbody tr:nth-child(even) {background:#f7f8fc;}
	.resume_list table tbody tr ~ tr {margin-top:1.2rem;}
	.resume_list table tbody td {display:flex; align-items:center; gap:1rem 1.5rem;}
	.resume_list table tbody td {padding:0;}
	.resume_list table tbody td ~ td {border:none;}
	.resume_list table tbody td > :not(strong) {flex:1; text-align:left;}
	.resume_list .add_del {gap:1rem;}
	.resume_list .add_del span {position:static; width:100%; height:100%; display:flex; justify-content:center; align-items:center; font-size:1.5rem; color:#fff; text-align:center;}
	.resume_list .add_del i {display:none;}
	.resume_list .mob_title {display:block; width:8rem; font-size:1.5rem; color:#777; text-align:left;}
}

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

@media screen and (max-width :481px) {
	.resume_manage_list {grid-template-columns:1fr;}
}


/* 자기소개서 입력사항 */
.self_intro_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem 3rem; margin-bottom:2rem;}
.self_intro_head .count {margin:0;}

.self_intro_part {border-radius:1rem; border:1px solid #ccc; background:#fff;}
.self_intro_part article ~ article {border-top:1px solid #ccc;}
.self_intro_part article .title {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem 10rem; padding:1rem; border-bottom:1px solid #ccc; background:#f7f8fc;}
.self_intro_part article .title.view {color:#222; font-weight:bold; padding:1.5rem;}
.self_intro_part article .title > div {flex:1; display:flex; align-items:center; gap:5px;}
.self_intro_part article .title > div input[type="text"] {flex:1;}
.self_intro_part article .title .count {margin:0;}
.self_intro_part article:first-child .title {border-radius:1rem 1rem 0 0;}
.self_intro_part article .write {padding:1rem;}
.self_intro_part article .view {padding:1.5rem;}
.self_intro_part article .view pre {font-family:"NotoSansKR"; white-space:pre-wrap; color:#555;}

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

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

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

@media screen and (max-width :481px) {
	.self_intro_part article .title {flex-direction:column; align-items:flex-start;}
	.self_intro_part article .title > div {width:100%;}
	.self_intro_part article .title .count {align-self:flex-end;}
}


/* 포트폴리오 출력하기 ==================== */
.porfolio_print {display:flex; flex-direction:column; gap:2rem;}

.portfolio_print_select {display:flex; flex-direction:column; gap:2rem; padding:2.5rem; border-radius:1rem; background:#eff5ff;}
.portfolio_print_select strong {font-size:1.6rem; color:#1f1f1f; padding-bottom:1.5rem; border-bottom:2px dotted #ccc;}
.portfolio_print_select ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem 1.5rem;}
.portfolio_print_select ul li {font-size:1.5rem;}

.portfolio_template {display:flex; flex-wrap:wrap; gap:2rem;}
.portfolio_template > li {flex:1; display:flex; flex-direction:column; gap:1rem; padding:1rem; border-radius:1rem; border:1px solid #ccc; background:#fff;}
.portfolio_template > li:has(input[type="radio"]:checked) {border-color:#eee; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.portfolio_template > li label {font-size:1.5rem; font-weight:500; color:#222; padding:1rem 1.5rem; margin:0; border-radius:5px; border:1px solid #ccc; background:#fff; overflow:hidden; cursor:pointer; transition:all 0.3s;}
.portfolio_template > li label:has(input[type="radio"]:checked) {border:1px solid #2460a4;}
.portfolio_template > li div {border:1px solid #ddd;}
.portfolio_template > li div img {width:100%; height:100%; object-fit:fill;}

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

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

@media screen and (max-width :769px) {
	.portfolio_print_select ul {grid-template-columns:repeat(2, 1fr);}
}

@media screen and (max-width :521px) {
	.portfolio_print_select ul {grid-template-columns:1fr;}
	.portfolio_template {flex-direction:column;}
}