@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;} /* 반응형일 경우 최소넓이 */


/* 기본 레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.sub_wrap {position:relative; width:100%;}

.wrapper {max-width:1620px; padding:0 5rem; margin:0 auto;}

@media screen and (max-width: 1200px){
	.wrapper {padding:0 3rem;}
}
@media screen and (max-width: 1025px){
	.wrapper {padding:0 2rem;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* ########## footer ########## */
#headerUser {position:relative; width:100%; border-bottom:1px solid transparent; background:transparent;}

.gnb_util {width:100%; height:4.5rem; border-bottom:1px solid #ddd;}
.gnb_util .wrapper {height:100%; display:flex; justify-content:flex-end; align-items:center; gap:3rem;}
.gnb_util .wrapper a {position:relative; font-size:1.5rem; color:var(--fontcolor3);}
.gnb_util .wrapper a.univ {display:flex; align-items:center; gap:8px;}
.gnb_util .wrapper a.univ i {font-size:1.6rem; color:var(--fourthcolor); margin-top:1px; opacity:0.8;}
.gnb_util .wrapper a ~ a::after {content:""; display:block; position:absolute; left:-1.5rem; top:6px; width:1px; height:12px; background:var(--fontcolor4);}
.gnb_util .wrapper a:hover {color:var(--fontcolor1);}

.wapper_gnb {width:100%; height:8rem; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; column-gap:5rem;}
.wapper_gnb h1 a {display:block;}

.gnb_pc {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; column-gap:3.2rem;}
.gnb_pc li a {font-size:1.8rem; font-weight:500; color:var(--fontcolor1);}
.gnb_pc li a:hover {color:var(--maincolor);}

#mainBody #headerUser {background:#ecfbff;} /* 메인헤더 */
#mainBody .gnb_util {border-bottom-color:transparent;} /* 메인헤더 */

/* hamburger menu (mob) */
.hmg {display:none;}

/* overlay (mob) */
.overlay {display:none; position:fixed; left:0; top:0; z-index:50; width:100vw; height:100vh; margin:0; padding:0; background:rgba(0,0,0,0.65);}

/* mobile menu */
#mobileBox {display:none; position:fixed; top:0; right:0; z-index:90; height:100vh; height:-webkit-fill-available; height:fill-available; margin-right:-100%; background:var(--white); overflow-y:scroll; -ms-overflow-style:none;}
#mobileBox::-webkit-scrollbar {display:none;}

@media screen and (max-width: 1480px){
	.wapper_gnb {column-gap:3rem;}
	.wapper_gnb h1 a img {height:3.5rem;}
	
	.gnb_pc {column-gap:2rem;}
	.gnb_pc li a {font-size:1.7rem;}
}
@media screen and (max-width: 1280px){
	.gnb_pc {column-gap:1.6rem;}
	.gnb_pc li a {font-size:1.6rem;}
}
@media screen and (max-width: 1200px){
	.gnb_util {display:none;} /* 바로가기 (웹) */
	.gnb_pc {display:none;}  /* 메인메뉴 (웹) */
	
	.wapper_gnb {height:6rem;}
	.wapper_gnb h1 a img {height:3rem;}
	
	/* hamburger menu */
	.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;}
	
	.hmg_open {height:18px;}
	.hmg_open span {background:var(--fontcolor1);}
	.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:var(--white);}
	.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;}
	
	/* mobile menu */
	#mobileBox {display:flex; flex-direction:column; width:50vw;}
	
	.mob_util {display:flex; flex-direction:column; gap:3rem; padding:2rem 2rem 2.5rem; background:linear-gradient(45deg, var(--subcolor), var(--thirdcolor));}
	
	.mob_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; column-gap:3rem;}
	.mob_head a {display:flex; justify-content:center; align-items:center; text-align:center; gap:1rem; font-size:1.4rem; color:var(--white); padding:8px 1.8rem; border-radius:50em; background:rgba(255,255,255,0.1);}
	.mob_head a i {font-size:1.8rem; margin-top:2px; opacity:0.6;}
	
	.mob_info {display:flex; flex-direction:column; gap:2rem;}
	.mob_info > p {display:flex; align-items:center; gap:5px; font-size:1.5rem; padding:1.5rem 2rem; border-radius:5px; background:var(--white); box-shadow:0 0 10px rgba(0,0,0,0.15);}
	.mob_info > p b {font-size:1.6rem; color:var(--fontcolor1);}
	
	.mob_info .user_info {display:flex; align-items:center; gap:1.5rem; font-size:1.5rem; padding:1.5rem 2rem; border-radius:5px; background:var(--white); box-shadow:0 0 10px rgba(0,0,0,0.15);}
	.mob_info .user_info i {font-size:4.8rem; color:#ccc; margin-top:2px;}
	.mob_info .user_info div {display:flex; flex-direction:column; gap:5px; font-size:1.4rem;}
	.mob_info .user_info div b {font-size:1.6rem; color:var(--fontcolor1);}
	
	.mob_info .univ_site {display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem;}
	.mob_info .univ_site a {position:relative; font-size:1.5rem; color:var(--white); text-align:center;}
	.mob_info .univ_site 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_box {flex:1; position:relative; z-index:0; width:100%; min-height:0; background:var(--white); overflow:auto;}
	.mob_menu_box::before {content:""; display:block; position:absolute; left:0; top:0; z-index:-1; width:15rem; height:100%; background:#eaeff3;}
	.mob_menu_box a {display:flex; align-items:center; font-size:1.6rem; letter-spacing:-0.02em; color:var(--fontcolor1); word-break:keep-all;}
	.mob_menu_box > li > a {width:15rem; padding:2rem 1.5rem; background:#eaeff3;}
	.mob_menu_box > li:first-child a {word-break:break-all;} /* 대학일자리플러스센터 줄바꿈처리 */
	.mob_menu_box > li.on > a {font-weight:500; color:var(--white); background:var(--fourthcolor);}
	.mob_menu_box > li > ul {position:absolute; top:0; right:0; bottom:0; width:calc(100% - 15rem); padding:2rem;}
	.mob_menu_box > li > ul > li > a {height:5rem; justify-content:space-between; padding:0 1rem;}
	.mob_menu_box > li > ul > li.on > a {font-weight:bold; border-bottom:2px solid var(--fontcolor1);}
	
	/* 개발코드 변경전 디자인 임의 작업 */
	.mob_menu_box > li > ul > li.three_depth a.dropdepth3 {position:relative; font-size:1.6rem; padding:1rem 1rem 1rem 2.5rem; margin-left:1.5rem;}
	.mob_menu_box > li > ul > li.three_depth a.dropdepth3::after {content:""; display:block; position:absolute; left:1rem; top:20px; width:3px; height:3px; border-radius:50%; background:var(--fourthcolor);}
	
	/* [개발코드 변경되면 사용예정]
	.mob_menu_box > li > ul > li > ul {padding:1rem; background:#f7f8fc;}
	.mob_menu_box > li > ul > li > ul > li > a.dropdepth3 {position:relative; font-size:1.6rem; padding:1rem 1rem 1rem 2.5rem;}
	.mob_menu_box > li > ul > li > ul > li > a.dropdepth3::after {content:""; display:block; position:absolute; left:1rem; top:20px; width:3px; height:3px; border-radius:50%; background:var(--fourthcolor);}
	*/
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	#mobileBox {width:80vw;}
}
@media screen and (max-width: 481px){
	#mobileBox {width:100%;}
}

/* ########## footer ########## */
#footerUser {display:flex; flex-direction:column; padding:5rem 0; background:#0d1527;}
#footerUser b, #footerUser strong {font-weight:500; color:var(--white);}
#footerUser .wrapper {width:100%; display:flex; flex-direction:column; gap:4rem;}
#footerUser .wrapper > div {display:flex; justify-content:space-between; align-items:center; gap:4rem 5rem; font-size:1.5rem; color:#aeaeae; line-height:1.4; word-break:keep-all;}

#footerUser .util_logo {display:flex; align-items:center; gap:2rem 3rem;}
#footerUser .util_link {display:flex; align-items:center; gap:1rem 4rem;}
#footerUser .util_link a {position:relative; color:#aeaeae;}
#footerUser .util_link a ~ a::after {content:""; display:block; position:absolute; left:-2rem; top:7px; width:1px; height:10px; background:#aeaeae;}

#footerUser .univ_info {display:flex; flex-direction:column; gap:1.5rem;}
#footerUser .univ_info address {display:flex; flex-wrap:wrap; gap:1rem 4rem;}
#footerUser .univ_info address span {position:relative; letter-spacing:0.02em;}
#footerUser .univ_info address span ~ span::after {content:""; display:block; position:absolute; left:-2rem; top:7px; width:1px; height:10px; background:#aeaeae;}
#footerUser .univ_info p {letter-spacing:0.02em;}

@media screen and (max-width: 1200px){
	#footerUser {padding:4rem 0;}
}
@media screen and (max-width: 1025px){
	#footerUser .wrapper > div {flex-direction:column; align-items:flex-start;}
	
	#footerUser .util_logo img {height:30px;}
}
@media screen and (max-width: 769px){
	#footerUser .univ_info address {flex-direction:column;}
	#footerUser .univ_info address span ~ span::after {display:none;}
}
@media screen and (max-width: 481px){
	#footerUser .util_link {flex-direction:column; align-items:flex-start;}
	#footerUser .util_link a ~ a::after {display:none;}
}

/* 관련사이트 */
.family_site {position:relative; display:flex; align-self:flex-end;}
.family_site button {width:20rem; height:5rem; display:flex; justify-content:space-between; align-items:center; color:var(--white); padding:1rem 1.5rem; border-radius:5px; background:#333; overflow:hidden;}
.family_site button b {font-size:1.5rem; font-weight:500;}
.family_site button i {font-size:1rem; opacity:0.8; transform:all 0.3s;}
.family_site button.active i {transform:rotate(180deg);}
.family_site div {display:none; position:absolute; bottom:100%; left:0; z-index:5; width:100%; height:14rem; background:#454545; overflow-y:scroll !important;}
.family_site div > a {display:block; padding:1.2rem 1rem; font-size:1.4rem; color:rgba(255,255,255,0.6); border-bottom:1px dashed #707070;}
.family_site div > a:last-child {border-bottom:0;}
.family_site div > a:hover {background:var(--fontcolor2);}

.family_site div::-webkit-scrollbar {width:8px;height:8px;} /* 스크롤바 스타일 (웹킷 브라우저용) */
.family_site div::-webkit-scrollbar-track {border-radius:10px; background:var(--fontcolor1);}
.family_site div::-webkit-scrollbar-thumb {border-radius:10px; border:2px solid var(--fontcolor1); background:var(--fontcolor3);}
.family_site div::-webkit-scrollbar-thumb:hover {background:var(--fontcolor2);}
.family_site div {scrollbar-width:thin;scrollbar-color:var(--fontcolor3) var(--fontcolor1);} /* Firefox용 스크롤바 스타일 */

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.family_site {width:100%; align-self:flex-start;}
	.family_site button {width:100%;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* 상단으로 이동 */
.go_top {
	position:fixed; right:2rem; bottom:2rem; z-index:5; width:6rem; height:6rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; 
	font-size:1.2rem; color:var(--white); text-align:center; border-radius:50%; background:linear-gradient(120deg, var(--subcolor), var(--thirdcolor));
}
.go_top::before {content: ""; position:absolute; width:110%; height:110%; border:1px solid var(--subcolor); border-radius:100%;  animation:blink 1s ease-in-out infinite; -webkit-animation:blink 1s linear infinite;}
@keyframes blink {
	0% {
		opacity: 1;
	}
	100% {
		width: 120%; 
		height: 120%;
		opacity: 0;
	}
}

/* subvisual */
#subVisual {position:relative; width:100%; height:22rem; background:url('../images/common/subvisual_bg.png') right bottom no-repeat, linear-gradient(-120deg, #002749, #006699); background-size:cover;}
#subVisual::before {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.2);}
#subVisual > div {
	width:100%; height:100%; position:relative; z-index:2; display:flex; flex-wrap:wrap; flex-direction:column; 
	justify-content:center; align-items:center; gap:1rem; text-align:center; overflow:hidden;
}
#subVisual > div h2 {font-family:var(--fontPre); font-size:3.6rem; letter-spacing:0.05em; font-weight:700; color:var(--white); word-break:keep-all;}
#subVisual > div p {font-family:var(--fontEng); font-size:1.6rem; letter-spacing:0.2em; font-weight:500; color:rgba(255,255,255,0.6); word-break:keep-all;}

@media screen and (max-width: 1200px){
	#subVisual > div h2 {font-size:3.2rem;}
	#subVisual > div p {font-size:1.5rem;}
}
@media screen and (max-width: 1025px){
	#subVisual {height:18rem;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
	#subVisual > div h2 {font-size:2.8rem;}
	#subVisual > div p {font-size:1.4rem;}
}

/* navi-title */
#naviUser {width:100%; height:5rem; background:#eaeff3; overflow:hidden;}
#naviUser div {width:100%; height:100%; display:flex; align-items:center; gap:5px; font-size:1.5rem; color:var(--fontcolor2); overflow:hidden;}
#naviUser div i {font-size:1.8rem;}
#naviUser div > span {font-weight:bold; color:var(--black);}

#subTitleUser {font-size:2.4rem; font-weight:bold; color:var(--black); padding:1.5rem 0 2rem; border-bottom:1px dotted var(--gray);}

@media screen and (max-width: 1200px){
	#naviUser div {padding:0 3rem;}
	#subTitleUser {font-size:2.2rem; padding:0 0 2rem 0;}
}
@media screen and (max-width: 1025px){
	#naviUser div {padding:0 2rem;}
}
@media screen and (max-width: 769px){
	#naviUser div {font-size:1.4rem;}
}
@media screen and (max-width: 481px){
}

/* sub content */
#contentUser {max-width:1620px; display:flex; gap:5rem; margin:5rem auto 10rem; padding:0 5rem; background:var(--white);}
#contentUser #lnbUser {width:21rem;} /* 좌측영역-lnb */
#contentUser #subLayoutUser {width:calc(100% - 21rem); flex:1; display:flex; flex-direction:column; gap:4rem; min-height:80rem; /* overflow:hidden; */} /* 우측영역-sublayout */

@media screen and (max-width: 1200px){
	#contentUser {padding:0 3rem; margin:4rem auto 8rem;}
	#contentUser #lnbUser {display:none;}
	#contentUser #subLayoutUser {width:100%;}
}
@media screen and (max-width: 1025px){
	#contentUser #subLayoutUser {min-height:auto;}
}
@media screen and (max-width: 769px){
	#contentUser {padding:0 2rem;}
}
@media screen and (max-width: 481px){
}

/* lnb */
#lnbMenu h2 {
	position:relative; width:100%; height:10rem; display:flex; align-items:flex-end; font-size:2.2rem; line-height:1.2; font-weight:bold; color:var(--white); /* word-break:keep-all; */ 
	padding:2rem; border-radius:1rem; background:linear-gradient(45deg, var(--subcolor), var(--fourthcolor)); overflow:hidden;
}
#lnbMenu > ul {padding:1.5rem 1.5rem 3rem; margin-top:-1rem; border-radius:0 0 1rem 1rem; border:1px solid #ccc; background:var(--white);}
#lnbMenu > ul > li {border-bottom:1px dashed #ccc;}
#lnbMenu > ul > li > a {position:relative; display:flex; justify-content:space-between; align-items:center; font-size:1.5rem; word-break:keep-all; padding:1.5rem 1.5rem 1.5rem 5px;}
#lnbMenu > ul > li > a::after {
	content:"\f107"; display:block; position:absolute; right:5px; top:54%; transform:translateY(-50%);
	font-family:"Font Awesome 7 Free"; font-size:1rem; font-weight:900; line-height:0; color:var(--maincolor);
}
#lnbMenu > ul > li:has(a.on) {border-bottom:none;} /* class "on"이 존재하는 경우 border 삭제 */
#lnbMenu > ul > li > a.on {font-weight:bold; color:var(--fontcolor1); border-bottom:2px solid var(--fontcolor1);}
#lnbMenu > ul > li:has(.lnb_depth2) > a {border-bottom:1px dashed #ccc;}
#lnbMenu > ul > li:has(.lnb_depth2 a.on) > a {font-weight:bold; color:var(--fontcolor1); border-bottom:2px solid var(--fontcolor1);} /* 2depth가 존재하는 경우 */
#lnbMenu > ul > li > ul {padding:1rem 0; background:#f7f8fc;}
#lnbMenu > ul > li > ul > li {position:relative;}
#lnbMenu > ul > li > ul > li a {position:relative; display:flex; align-items:center; font-size:1.4rem; color:var(--fontcolor1); padding:5px 1.5rem 5px 2.8rem;}
#lnbMenu > ul > li > ul > li a::after {content:""; display:block; position:absolute; left:1.5rem; top:15px; width:3px; height:3px; border-radius:50%; background:var(--maincolor);}
#lnbMenu > ul > li > ul > li a:hover {color:var(--maincolor);}
#lnbMenu > ul > li > ul > li a.on {color:var(--maincolor);}

/* 회원가입용 레이아웃 */
#joinBody #contentUser {margin:6rem auto 10rem;}
#joinBody #contentUser #lnbUser {display:none;}
#joinBody #contentUser #subLayoutUser {width:100%;}
#joinBody #naviUser {display:none;}
#joinBody #subTitleUser {display:none;}


/* 사용자UI /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* ########## 진로설계 ########## */
/* 진로설계>자기특성탐색 */
.career_phy_exam:has(#resultCont.show) .phy_exam_intro {margin-top:4rem;}

/* 자기특성탐색-소개 */
.phy_exam_intro {border-radius:1rem; border:1px solid #ddd; background:var(--white);}
.phy_exam_intro * {word-break:keep-all;}

.phy_intro_head {display:flex; flex-direction:column; gap:1rem; padding:4rem 5rem; border-radius:1rem 1rem 0 0; border-bottom:1px solid #ddd; background:var(--bggray);}
.phy_intro_head h3 {font-size:2.2rem; font-weight:bold; color:var(--black);}
.phy_intro_head p {font-size:1.5rem;}

.phy_intro_cont {display:flex; flex-direction:column; gap:8rem; padding:8rem 8rem 4rem;}

.phy_intro_flow {display:flex; flex-direction:column; gap:4rem;}
.phy_intro_flow li {display:grid; grid-template-columns:10rem 1fr; gap:4rem; align-items:center; padding:0 2rem;}
.phy_intro_flow li ~ li {padding-top:4rem; border-top:1px dashed #ccc;}
.phy_intro_flow li > span {width:10rem; height:10rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; border:1px solid #ddd; background:var(--white);}
.phy_intro_flow li > span img {height:6rem;}
.phy_intro_flow li > dl {display:flex; flex-direction:column; gap:1.5rem;}
.phy_intro_flow li > dl dt {font-size:1.8rem; font-weight:500; color:var(--fontcolor1);}
.phy_intro_flow li > dl dd {font-size:1.5rem; color:var(--fontcolor2);}

.phy_intro_btns {display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;}
.phy_intro_btns a {height:5rem; display:flex; justify-content:center; align-items:center; font-size:1.6rem; font-weight:500; color:var(--white); text-align:center; border-radius:5px;}
.phy_intro_btns a.btn_phy_work {background:var(--fourthcolor);}
.phy_intro_btns a.btn_phy_exam {background:var(--subcolor);}
.phy_intro_btns a.btn_phy_result {background:var(--fifthcolor);}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.phy_intro_cont {padding:6rem 6rem 4rem;}
	
	.phy_intro_flow li {grid-template-columns:1fr; text-align:center;}
	.phy_intro_flow li > span {margin:0 auto;}
}
@media screen and (max-width: 769px){
	.phy_intro_head {padding:4rem;}
	.phy_intro_cont {gap:6rem; padding:6rem 4rem 4rem;}
	.phy_intro_btns {grid-template-columns:1fr;}
}
@media screen and (max-width: 481px){
}

/* 자기특성탐색-결과 */
.phy_exam_result {padding:3rem; border-radius:1rem; border:1px solid #ddd; background:var(--bggray);}
.phy_exam_result * {word-break:keep-all;}

.phy_result_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem 3rem; margin-bottom:3rem;}
.phy_result_head h3 {font-size:2.2rem; font-weight:bold; color:var(--black);}
.phy_result_head p {font-size:1.5rem; letter-spacing:0.05em; color:var(--fontcolor4);}

.career_items {display:flex; flex-direction:column; gap:3rem; padding:3rem; border-radius:1rem; border:1px solid #ddd; background:var(--white);}
.career_items ~ .career_items {margin-top:2rem;}

.career_items_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:3rem 5rem;}
.career_items_head dl {flex:1; display:flex; flex-direction:column; gap:1rem;}
.career_items_head dl dt {font-size:1.8rem; font-weight:bold; color:var(--fontcolor1);}
.career_items_head dl dd {font-size:1.5rem; color:var(--fontcolor2);}
.career_items_head button {width:10rem; display:inline-flex; justify-content:center; align-items:center; font-size:1.5rem; text-align:center; padding:5px 2rem; border-radius:50em; border:1px solid var(--fifthcolor); background:var(--white);}
.career_items_head button:hover {color:var(--white); background:var(--fifthcolor);}

.career_items_detail {display:flex; flex-direction:column; gap:2rem;}
.career_items_detail .phy_type_check {
	width:100%; height:4.5rem; display:flex; justify-content:center; align-items:center; font-size:1.5rem; font-weight:500;
	color:var(--white); text-align:center; padding:5px 2rem; border-radius:5px; background:var(--fourthcolor);
}

.phy_type {padding:3rem; border-radius:5px; background:var(--bgblue);}
.phy_result_type ~ .phy_result_type {margin-top:2rem;}
.phy_result_type {display:flex; flex-direction:column; gap:1rem;}
.phy_result_type strong {font-size:1.5rem; color:var(--fontcolor1);}
.phy_result_type p {font-size:1.5rem; color:var(--fontcolor3);}

.phy_result_none {min-height:22rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2rem; text-align:center;} /* 응시하지 않았을 경우 */
.phy_result_none i {font-size:3.6rem; color:var(--gray); opacity:0.5;}
.phy_result_none p {font-size:1.5rem; line-height:1.8; color:var(--fontcolor4);}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.career_items_head {flex-direction:column; margin-top:3rem;}
	.career_items_head dl {width:100%; justify-content:center; align-items:center; text-align:center;}
}
@media screen and (max-width: 769px){
	.phy_result_head {flex-direction:column;}
}
@media screen and (max-width: 481px){
}

/* 자기특성탐색-검사안내 팝업 */
.phy_result_guide > ul {padding:2rem 2.5rem; border-radius:1rem; background:var(--bgblue);}
.phy_result_guide > ul li {position:relative; font-size:14px; line-height:1.2; color:var(--fontcolor1); padding:5px 0 5px 12px;}
.phy_result_guide > ul li:after {content:""; display:block; position:absolute; left:0; top:12px; width:3px; height:3px; border-radius:50%; background:var(--fifthcolor); opacity:0.8;}

/* 자기특성탐색-추천 직업군 확인 */
.phy_recommend_list {display:flex; flex-direction:column; gap:1rem;}
.phy_recommend_list > div {display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; padding:1rem 1.5rem; border-radius:5px; border:1px solid #ddd; background:var(--bggray);}
.phy_recommend_list > div strong {flex:1; font-size:1.5rem; color:var(--fontcolor1); word-break:keep-all;}
.phy_recommend_list > div button {width:12rem; height:3rem; display:flex; justify-content:center; align-items:center; font-size:1.4rem; color:var(--white); text-align:center; padding:5px 1.5rem; border-radius:5px; background:var(--fifthcolor);}
.phy_recommend_list .nodata {min-height:15rem; display:flex; justify-content:center; align-items:center; font-size:1.6rem; color:var(--fontcolor1); text-align:center; padding:2rem;}

/* 진로설계>직업심리검사(고용24) */
.phy_exam_list {display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; margin-top:3rem;}
.phy_exam_list * {word-break:keep-all;}

.phy_exam_items {display:flex; flex-direction:column; justify-content:space-between; gap:3rem; padding:2.5rem; border-radius:1rem; border:1px solid #ccc; background:var(--white);}
.phy_exam_items:hover {border-color:var(--fifthcolor);}
.phy_exam_items > div {display:grid; grid-template-rows:auto auto; gap:3rem;}
.phy_exam_items > a {height:4rem; display:flex; justify-content:center; align-items:center; font-size:1.5rem; color:var(--white); text-align:center; padding:5px 1.5rem; border-radius:5px; background:var(--fourthcolor);}

.phy_exam_head {display:flex; flex-direction:column; gap:1rem;}
.phy_exam_head h3 {font-size:1.8rem; font-weight:bold; color:var(--fontcolor1);}
.phy_exam_head p {font-size:1.5rem; color:var(--fontcolor2);}

.phy_exam_desc {display:flex; flex-direction:column; gap:1rem;}
.phy_exam_desc dl {display:flex; align-items:center; gap:1rem 1.5rem;}
.phy_exam_desc dl dt {width:9rem; display:flex; justify-content:center; align-items:center; font-size:1.4rem; font-weight:500; color:var(--fifthcolor); text-align:center; padding:5px 1.5rem; border-radius:50em; background:#eff6ff;}
.phy_exam_desc dl dd {flex:1; font-size:1.5rem;}

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



/* ########## 지역청년 ########## */
/* 지역청년>지역청년 프로그램>개설현황 */
.program_local_youth {display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem;}
.program_local_youth > li {border:1px solid #ddd; background:var(--white); overflow:hidden; transition:all 0.3s; cursor:pointer;}
.program_local_youth > li:hover {border-color:var(--fifthcolor);}
.program_local_youth .thumbnail {width:100%; height:22rem; border-bottom:1px solid #ddd;}
.program_local_youth .info {display:flex; flex-direction:column; gap:1rem; padding:2rem;}
.program_local_youth .info * {word-break:keep-all;}
.program_local_youth .info .ply_state {
	width:6rem; height:2.5rem; display:inline-flex; justify-content:center; align-items:center; font-size:1.2rem; 
	color:var(--white); text-align:center; padding:5px 1.2rem; border-radius:5em;
}
.program_local_youth .info .ply_dept {display:block; font-size:1.4rem; font-weight:500; color:var(--fontcolor2); white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.program_local_youth .info div {display:flex; align-items:center; gap:1rem;}
.program_local_youth .info h3 {font-size:1.8rem; font-weight:500; color:var(--fontcolor1); white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.program_local_youth .info ul li {display:grid; grid-template-columns:6rem 1fr; gap:1rem; align-items:center; font-size:1.4rem; margin-top:8px;}
.program_local_youth .info ul li dfn {color:var(--fontcolor1);}

.program_local_youth .info .ply_state.ongoing {background:var(--subcolor);} /* 진행중 */
.program_local_youth .info .ply_state.waiting {background:var(--fourthcolor);} /* 접수중 */
.program_local_youth .info .ply_state.closed {background:var(--gray);} /* 종료 */

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


/* ########## 진로설계 ########## */
/* 고용24 채용정보 */
.work_recruit_tab {display:grid; grid-template-columns:repeat(3, 15rem) 1fr; gap:1rem;}
.work_recruit_tab > button {
	width:100%; min-width:100px; height:45px; display:flex; justify-content:center; align-items:center; font-size:15px; font-weight:bold; 
	color:var(--fontcolor4); text-align:center; word-break:keep-all; padding:10px 15px; border-radius:3px; border:2px solid #ddd; background:var(--white);
}
.work_recruit_tab > button.on {color:var(--fourthcolor); border-color:var(--fourthcolor);}

.work_recruit_tab label {position:relative; margin:0;}
.work_recruit_tab label input {width:100%; height:4.5rem; font-size:1.5rem; padding:0 5rem 0 1.5rem; border:2px solid #ddd;}
.work_recruit_tab label button {position:absolute; top:50%; right:1.5rem; font-size:1.6rem; color:var(--fifthcolor); transform:translateY(-50%); opacity:0.6;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.work_recruit_tab {grid-template-columns:repeat(3, 1fr);}
	.work_recruit_tab label {grid-column:span 3;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
	.work_recruit_tab > button {min-width:auto;}
}

/* 탭별 영역 */
.recruit_section_box {display:grid; margin:2rem 1px 1px; border-radius:5px; border:1px solid var(--fourthcolor); box-shadow:0 0 10px rgba(0,0,0,0.1);}

.section_step {display:grid; grid-template-rows:5rem 1fr;}
.section_step.show {display:grid !important; grid-template-rows:5rem 1fr;}
.section_step ~ .section_step {border-left:1px solid #ccc;}
.section_step h4 {display:flex; justify-content:center; align-items:center; font-size:1.6rem; font-weight:500; color:var(--fontcolor1); text-align:center; border-bottom:1px solid #ccc;}
.section_step ul {max-height:25rem; border-radius:5px; overflow:hidden; overflow-y:auto;}
.section_step ul li {position:relative; height:5rem; display:flex; align-items:center; font-size:1.5rem; color:var(--fontcolor1); padding:1rem 2rem; cursor:pointer;}
.section_step ul li.on {color:var(--fourthcolor); background:#eff6ff;}
.section_step ul li.on::after {content:"\f054"; position:absolute; top:50%; right:1.5rem; font-family:"Font Awesome 7 Free"; font-size:1rem; font-weight:900; line-height:0; color:var(--gray); transform:translateY(-50%);}
.section_step .empty {height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1rem; color:var(--fontcolor3); padding:4rem 2rem;}

.recruit_section_box.occupation {grid-template-columns:repeat(2, 1fr);} /* 업종 */
.recruit_section_box.occupation.show {display:grid !important; grid-template-columns:repeat(2, 1fr);}

.recruit_section_box.region.show {display:grid !important; grid-template-columns:25rem 1fr;} /* 지역 */
.recruit_section_box.region.show .section_step.region_step1 ul {display:grid; grid-template-columns:repeat(2, 1fr);}
.recruit_section_box.region.show .section_step.region_step2 ul {display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(50, max-content);}
.recruit_section_box.region.show:has(.empty) .section_step.region_step2 ul {display:flex;} /* 선택하지 않았을 경우 */
.recruit_section_box.region.show:has(.empty) .section_step.region_step2 ul li {flex:1;}

.recruit_section_box.condition {padding:3rem;} /* 상세조건 */ 
.recruit_section_box.condition.show > div {display:grid; grid-template-columns:8rem 1fr; gap:1rem 2rem; align-items:center;}
.recruit_section_box.condition.show > div ~ div {padding-top:2rem; margin-top:2rem; border-top:1px dotted #aaa;}
.recruit_section_box.condition.show > div b {font-size:1.5rem; color:var(--fontcolor1);}

.recruit_section_box .condition_check {display:flex; flex-wrap:wrap; align-items:center; gap:1rem;} /* 선택영역 */
.recruit_section_box .condition_check span {position:relative;}
.recruit_section_box .condition_check label {margin:0;}
.recruit_section_box .condition_check span input[type="radio"] {width:0; height:0; position:absolute; left:-9999px;}
.recruit_section_box .condition_check span input[type="radio"] + label {
	min-width:8rem; height:100%; position:relative; display:flex; justify-content:center; align-items:center; font-size:1.4rem; color:var(--fontcolor2); text-align:center; 
	padding:6px 1.5rem; border-radius:50em; background:#eee; 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;
}
.recruit_section_box .condition_check span input[type="radio"]:checked + label {color:var(--white); background:var(--fourthcolor); box-shadow: 0 0 10px rgba(102, 179, 251, 0.2);}
.recruit_section_box .condition_check span input[type="checkbox"] {width:0; height:0; position:absolute; left:-9999px;}
.recruit_section_box .condition_check span input[type="checkbox"] + label {
	min-width:8rem; height:100%; position:relative; display:flex; justify-content:center; align-items:center; font-size:1.4rem; color:var(--fontcolor2); text-align:center; 
	padding:6px 1.5rem; border-radius:50em; background:#eee; 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;
}
.recruit_section_box .condition_check span input[type="checkbox"]:checked + label {color:var(--white); background:var(--fourthcolor); box-shadow: 0 0 10px rgba(102, 179, 251, 0.2);}

.recruit_section_box .condition_money {display:flex; flex-wrap:wrap; align-items:center; gap:1rem; font-size:1.5rem;} /* 급여 */
.recruit_section_box .condition_money > div {display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.section_step ~ .section_step {border-left:none; border-top:1px solid #ccc;}
	
	.recruit_section_box.occupation {grid-template-columns:1fr;} /* 업종 */
	.recruit_section_box.occupation.show {grid-template-columns:1fr;}
	
	.recruit_section_box.region.show {grid-template-columns:1fr;} /* 지역 */
}
@media screen and (max-width: 769px){
	.recruit_section_box.condition.show > div {grid-template-columns:1fr;}
}
@media screen and (max-width: 481px){
	.recruit_section_box.region.show .section_step.region_step2 ul {grid-template-columns:1fr;} /* 지역 */
}

/* 선택영역 */
.recurit_select_category {display:flex; flex-direction:column; gap:1rem; margin:3rem 0;}

.recurit_search_box {
	display:flex !important; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem 3rem; padding:1.5rem 1.5rem 1.5rem 2rem;
	border-radius:5px; border:1px solid #ccc; background:var(--white); overflow:hidden;
}
.recurit_search_box .submit {display:flex; justify-content:center; align-items:center;}
.recurit_search_box .submit button {
	width:120px; height:40px; display:flex; justify-content:center; align-items:center; gap:10px; 
	font-size:16px; line-height:0; color:var(--white); text-align:center; border-radius:5em; background:var(--fifthcolor);
}
.recurit_search_box .submit button i {font-size:10px; margin-top:2px; opacity:0.6;}

.search_history {flex:1; display:flex; flex-direction:column;}
.search_history:has(ul li) {gap:1rem;}
.search_history b {font-size:1.5rem; color:var(--fontcolor1);}
.search_history ul {display:flex; flex-wrap:wrap; align-items:center; gap:1rem;}
.search_history ul li {display:flex; font-size:1.4rem; align-items:center; gap:1rem; padding:5px 1rem 5px 1.2rem; border-radius:3px; background:#f2f3f8;}
.search_history ul li i {font-size:1rem; color:var(--red);}

.reset_save_btns {display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:1rem 2rem;}
.reset_save_btns li {display:flex; align-items:center; gap:5px; font-size:1.4rem; cursor:pointer; transition:all 0.3s;}
.reset_save_btns li:hover {color:var(--fourthcolor);}
.reset_save_btns li i {font-size:1.8rem;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.recurit_search_box {flex-direction:column;}
	.recurit_search_box .submit {width:100%;}
	.recurit_search_box .submit button {width:100%; height:4rem; font-size:14px; border-radius:3px;}
	
	.search_history {width:100%;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* 조건 초기화 및 저장 */
.save_section {padding:2rem; margin-bottom:3rem; border-radius:5px; border:1px solid #ccc; background:var(--bggray);}

.condition_save_list {padding:2rem; margin:2rem 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.condition_save_list > li {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem 3rem; font-size:1.5rem;}
.condition_save_list > li ~ li {margin-top:8px;}
.condition_save_list > li p {flex:1;}
.condition_save_list > li div span {letter-spacing:0; color:var(--fontcolor3); margin-right:1rem;}
.condition_save_list .nodata {min-height:15rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1rem; font-size:1.5rem; color:var(--fontcolor3); padding:2rem 0;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.condition_save_list > li {flex-direction:column; align-items:flex-start;}
	.condition_save_list > li ~ li {margin-top:1.5rem;}
	.condition_save_list > li div {width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem 3rem;}
}
@media screen and (max-width: 481px){
}

/* 고용24채용정보 리스트 */
.work_recruit_list {display:flex; flex-direction:column; gap:2rem;}
.work_recruit_list > li {display:flex; flex-direction:column; gap:1.5rem; padding:3rem; border-radius:5px; border:1px solid #ddd; background:var(--white); cursor:pointer; transition:all 0.3s;}
.work_recruit_list > li:hover {border-color:var(--fifthcolor);  box-shadow:0 0 5px rgba(0,0,0,0.1);}
.work_recruit_list > li.nodata {height:20rem; justify-content:center; align-items:center; font-size:1.6rem; color:var(--fontcolor3); text-align:center; border:none;}
.work_recruit_list > li.nodata:hover {cursor:initial; box-shadow:none;}

.work_recruit_list h4 {font-size:1.8rem; font-weight:500; color:var(--fontcolor1); white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.work_recruit_list .recruit_list_place {display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;}
.work_recruit_list .recruit_list_place p {display:flex; align-items:center; gap:5px; font-size:1.4rem;}
.work_recruit_list .recruit_list_place p.company {font-weight:500; color:var(--fontcolor1);}
.work_recruit_list .recruit_list_place p i {font-size:1.6rem;}
.work_recruit_list .recruit_list_place {display:flex; align-items:center; gap:1rem 2rem;}
.work_recruit_list .recruit_list_place p {font-size:1.4rem;}
.work_recruit_list .recruit_list_option {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem 4rem; margin-top:1.5rem;}
.work_recruit_list .recruit_list_option * {font-size:1.4rem;}
.work_recruit_list .recruit_list_option ul {display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem; color:var(--fontcolor3);}
.work_recruit_list .recruit_list_option p {letter-spacing:0;}

.work24_alert {display:flex; justify-content:center; align-items:center; gap:5px; font-size:1.4rem; color:var(--fontcolor1); text-align:center; word-break:keep-all; padding:5px 3rem; margin-top:6rem; background:#e7f5ff;}
.work24_alert img {height:6rem;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.work24_alert {padding:2rem;}
	.work24_alert img {display:none;}
}
@media screen and (max-width: 481px){
}

/* 워크넷 서비스>강소기업 탐방 상세 */
.detail_corp_info {margin-top:3rem;}
.detail_corp_info > div {display:flex; flex-direction:column; gap:1.5rem;}
.detail_corp_info > div ~ div {margin-top:4rem;}
.detail_corp_info > div h4 {font-size:1.6rem; font-weight:500; color:var(--fontcolor1);}
.detail_corp_info > div p {font-size:1.5rem; line-height:1.6;}


/* ########## 멘토링 ########## */
/* 멘토링>멘토링 신청 */
.mento_apply {display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem;}
.mento_apply li {padding:2rem 2.5rem; border:1px solid #ddd; background:var(--white); overflow:hidden; transition:all 0.3s; cursor:pointer;}
.mento_apply li:hover {border-color:var(--fifthcolor);}
.mento_apply li > h3 {font-size:1.8rem; font-weight:bold; text-align:center; color:var(--black); padding-bottom:1.5rem; margin-bottom:2.5rem; border-bottom:1px dashed #aaa;}
.mento_apply li > div {display:flex; flex-direction:column; gap:1.5rem; padding:2rem; background:#f7f8fc;}
.mento_apply li > div dl {display:flex; flex-direction:column; gap:5px;}
.mento_apply li > div dl * {word-break:keep-all;}
.mento_apply li > div dl dt {font-size:1.4rem; color:var(--fontcolor2);}
.mento_apply li > div dl dd {min-height:2.5rem; font-size:1.6rem; color:var(--fontcolor1);}
.mento_apply li > button {
	width:100%; height:4.5rem; display:flex; justify-content:center; align-items:center; font-size:1.6rem; font-weight:500; color:var(--white); text-align:center; 
	padding:8px 2rem; margin-top:2.5rem; border-radius:50em; background:var(--subcolor);
}

.mento_apply li.nodata {grid-column:span 3; min-height:15rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1rem; font-size:1.6rem; color:var(--fontcolor1); padding:2rem;}
.mento_apply li.nodata:hover {border-color:#ddd; cursor:initial}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.mento_apply {grid-template-columns:repeat(2, 1fr);}
	.mento_apply li.nodata {grid-column:span 2;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 581px){
	.mento_apply {grid-template-columns:1fr;}
	.mento_apply li.nodata {grid-column:span 1;}
}