@charset "utf-8";


/* 남서울대학교 대학일자리플러스센터 메인페이지 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
 /* 메인-레이어팝업 */
.main_layer_popup {position:absolute; z-index:90;}
.main_layer_popup > div {width:100%; font-size:16px; padding:10px; margin:0 auto; overflow:auto; border-radius:5px 5px 0 0; border:1px solid #ccc; border-bottom:none; background:var(--white);}
.main_layer_popup > span {
	width:100%; height:55px; display:grid; grid-template-columns:repeat(2, 1fr); align-items:center; gap:1rem; 
	padding:10px; margin:0 auto; border-radius:0 0 5px 5px; border:1px solid #ccc; border-top:none; background:var(--white); overflow:hidden;
}
.main_layer_popup > span button {height:100%; display:flex; justify-content:center; align-items:center; font-size:12px; letter-spacing:-1px; text-align:center; border-radius:5px;}
.main_layer_popup > span button.close_today {letter-spacing:0; color:var(--black); padding-left:5px; background:#eee;}
.main_layer_popup > span button.close {color:var(--white); background:var(--subcolor);}

@media all and (max-width: 1200px){
	.main_layer_popup {min-width:250px; left:50% !important; transform:translateX(-50%);}
	.main_layer_popup > * {min-width:250px;}
}
@media screen and (max-width: 1025px) {
	.main_layer_popup {width:80% !important;}
	.main_layer_popup > * {width:80% !important;}
}


/* 메인-공통레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 영역별 레이아웃 */
.main_sect_top {position:relative; padding-top:5rem; background:#ecfbff;} /* 메인상단 : 퀵메뉴, 배너, 비주얼, 로그인 */
.main_sect_top::before {content:""; display:block; position:absolute; left:0; bottom:0; width:100%; height:22.5rem; background:var(--white);}
.main_sect_top .wrapper {display:flex; flex-direction:column; gap:4rem;}

.main_sect_mid {padding:6rem 0; background:var(--white);} /* 메인중간 : 커뮤니티 */
.main_sect_btm {padding:6rem 0; background:#f1f8ff;} /* 메인하단 : 프로그램 */

.main_top_cont {position:relative; display:grid; grid-template-columns:1fr 1fr 38rem; gap:4rem;} /* 메인상단 내부콘텐츠 : 배너, 비주얼, 로그인 */

@media screen and (max-width: 1200px){
	.main_sect_top .wrapper {gap:3rem;}
	.main_top_cont {grid-template-columns:repeat(2, 1fr); gap:3rem;}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.main_sect_top .wrapper {gap:4rem;}
	.main_top_cont {grid-template-columns:1fr; gap:3rem;}
}
@media screen and (max-width: 481px){
}

/* 타이틀 */
.main_head {display:flex; flex-direction:column; gap:3rem; margin-bottom:3rem;}
.main_head > h3 {font-size:3.6rem; font-weight:bold; letter-spacing:-0.02em; color:var(--black);}
.main_head > div {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem 5rem;}
.main_head > div > div {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem 1rem;}

/* 리스트탭 */
.main_tab {display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;}
.main_tab li button {
	min-width:10rem; height:4.5rem; display:flex; justify-content:center; align-items:center; font-size:1.5rem; font-weight:bold; 
	color:#6b7383; text-align:center; word-break:keep-all; padding:1rem 2rem; border-radius:3px; border:2px solid #ddd; background:var(--white);
}
.main_tab li button.on {color:var(--fourthcolor); border-color:var(--fourthcolor);}

/* 더보기 */
.main_more {width:4.5rem; height:4.5rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; border:1px solid; box-shadow:0 0 20px rgba(0,0,0,0.1);}
.main_more.light {color:var(--fifthcolor); border-color:#ddd; background:var(--white);}
.main_more.dark {color:var(--white); border-color:var(--fifthcolor); background:var(--fifthcolor);}

/* 이전-다음 슬라이드 이동 */
.pn_btns {
	width:4.5rem; height:4.5rem; display:flex !important; justify-content:center; align-items:center; color:var(--fifthcolor); text-align:center; 
	border-radius:50%; border:1px solid #ddd; background:var(--white); box-shadow:0 0 20px rgba(0,0,0,0.1);
}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.main_head > h3 {font-size:3rem;}
}
@media screen and (max-width: 769px){
	.main_head {gap:1.5rem;}
	.main_head > div {flex-direction:column-reverse; align-items:flex-start;}
	.main_head > div > div {align-self:flex-end;}
	
	.main_tab {width:100%;}
	.main_tab li {flex:1;}
	.main_tab li button {min-width:100%; height:6rem;}
	.main_more {align-self:flex-end;}
}
@media screen and (max-width: 481px){
}


/* 메인콘텐츠 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 메인퀵메뉴 */
.main_quick {display:grid; grid-template-columns:repeat(4, 1fr); border-radius:1rem; border:1px solid #ddd; background:var(--white);}
.main_quick * {word-break:keep-all;}
.main_quick a {display:flex; flex-direction:column; gap:1rem; padding:2rem 3rem 3rem; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.main_quick a:nth-child(4n) {border-right:none;}
.main_quick a:nth-child(n+5) {border-bottom:none;}

.main_quick .quick_icon {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem 4rem;}
.main_quick .quick_icon img {width:6rem;}
.main_quick .quick_icon span {width:2rem; height:2rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; background:var(--black); transition:all 0.3s;}
.main_quick .quick_icon span i {font-size:1.2rem; color:var(--white);}

.main_quick .quick_info {display:flex; flex-direction:column; gap:1.5rem;}
.main_quick .quick_info strong {font-size:1.8rem; font-weight:500; color:var(--fontcolor1); transition:all 0.3s;}
.main_quick .quick_info strong br {display:none;}
.main_quick .quick_info span {font-size:1.5rem; color:var(--fontcolor3);}

.main_quick a:hover .quick_icon span {background:var(--subcolor);}

@media screen and (max-width: 1280px){
	.main_quick .quick_info span br {display:none;}
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.main_quick {grid-template-columns:repeat(2, 1fr);}
	.main_quick a {padding:1rem 2rem 2rem;}
	.main_quick a:nth-child(2n) {border-right:none;}
	.main_quick a:nth-child(n+5) {border-bottom:1px solid #ddd;}
	.main_quick a:nth-last-child(1), .main_quick a:nth-last-child(2) {border-bottom:none;}
	
	.main_quick .quick_info {gap:5px;}
}
@media screen and (max-width: 769px){
	.main_quick {grid-template-columns:repeat(4, 1fr); gap:3rem; border:none; background:transparent;}
	.main_quick a {align-items:center; gap:2rem; padding:0; border:none !important;}
	
	.main_quick .quick_icon {width:8rem; height:8rem; justify-content:center; text-align:center; border-radius:2rem; border:1px solid #ddd; background:var(--white);}
	.main_quick .quick_icon span {display:none;}
	
	.main_quick .quick_info strong {font-size:1.6rem; text-align:center;}
	.main_quick .quick_info strong br {display:block;}
	.main_quick .quick_info span {display:none;}
}
@media screen and (max-width: 481px){
	.main_quick {grid-template-columns:repeat(3, 1fr);}
}

/* 메인배너 */
.main_banner {height:45rem; border-radius:1rem; background:var(--gray); overflow:hidden;}
.main_banner .swiper-wrapper {width:100%; height:100%;}
.main_banner .swiper-slide, .main_banner .swiper-slide * {width:100%; height:100%;}
.main_banner .swiper-slide a {display:block;}
.main_banner .swiper-slide img {border-radius:1rem; object-fit:fill;}

@media screen and (max-width: 1200px){
	.main_banner {order:2;}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.main_banner {height:auto; max-height:45rem; order:3;}
}
@media screen and (max-width: 481px){
}

/* 메인비주얼 */
.main_visual {height:45rem; border-radius:1rem; background:var(--white); overflow:hidden;}
.main_visual .swiper-wrapper {width:100%; height:100%;}
.main_visual .swiper-slide {width:100%; height:100%;}
.main_visual .swiper-slide * {width:100%;}
.main_visual .swiper-slide a {height:100%; display:block; border-radius:1rem; overflow:hidden;}
.main_visual .swiper-slide img {height:100%; border-radius:1rem; object-fit:cover;}

.visual_symbol {position:relative; width:100%; height:100%; padding:5rem 4rem; background:linear-gradient(-120deg, #002749, #006699);} /* 대표슬라이드 */
.visual_symbol::before {content:""; display:block; position:absolute; right:0; bottom:0; width:320px; height:242px; background:url('../images/main/main_visual_bg.png') no-repeat; background-size:contain;}
.visual_symbol h2 {position:relative; font-family:var(--fontPre); font-size:3rem; font-weight:900; color:var(--white);}
.visual_symbol h2 span br {display:none;}
.visual_symbol p {position:relative; font-size:1.6rem; color:var(--white); word-break:keep-all; margin-top:2rem; opacity:0.8;}

@media screen and (max-width: 1280px){
	.visual_symbol h2 span br {display:block;}
	.visual_symbol p br {display:none;}
}
@media screen and (max-width: 1200px){
	.main_visual {order:3;}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.main_visual {height:auto; min-height:35rem; max-height:35rem; order:2;}
	
	.visual_symbol::before {width:245px; height:185px;}
	.visual_symbol p {display:none;}
}
@media screen and (max-width: 481px){
}

/* ##### 메인로그인 ##### */
.main_login {height:45rem; border-radius:1rem; border:1px solid #ddd; background:var(--white); overflow:hidden;}
.main_login form, .main_login fieldset {height:100%;}
.main_login .login_box {height:100%; display:flex; flex-direction:column; gap:3rem; padding:2rem 4rem 4rem;}

.main_login .login_tab {display:grid; grid-template-columns:1fr 1fr 8rem; border-bottom:1px solid #ddd;}
.main_login .login_tab li button {position:relative; width:100%; height:5rem; display:flex; justify-content:center; align-items:center; font-size:1.5rem; font-weight:500; color:#a0a3af; text-align:center; padding:5px;}
.main_login .login_tab li button::after {content:""; display:block; position:absolute; left:0; bottom:0; width:0; height:2px; border-radius:5em; background:var(--fontcolor1);}
.main_login .login_tab li button.on::after {width:100%;}
.main_login .login_tab li button.on {color:var(--fontcolor1);}
.main_login .login_tab li button:hover {color:var(--fontcolor1);}

.main_login .login_cont {flex:1; flex-direction:column; justify-content:space-between; align-items:center; gap:2.5rem; text-align:center;}
.main_login .login_cont > * {width:100%;}
.main_login .login_cont dl {display:flex; flex-direction:column; gap:1rem;}
.main_login .login_cont dl dt {font-size:2.2rem; font-weight:500; color:var(--fontcolor1);}
.main_login .login_cont dl dd {font-size:1.5rem; color:var(--fontcolor3); word-break:keep-all;}
.main_login .login_cont a,
.main_login .login_cont button {
	height:5rem; display:flex; justify-content:center; align-items:center; text-align:center; 
	font-size:1.6rem; font-weight:500; color:var(--white); padding:5px 1rem; border-radius:3px; background:var(--fifthcolor);
}

@media screen and (max-width: 1200px){
	.main_login {order:1; grid-column:span 2;}
	.main_login .login_tab {grid-template-columns:repeat(3, 1fr);}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.main_login {grid-column:span 1;}
	.main_login .login_box {padding:2rem 3rem 3rem;}
}
@media screen and (max-width: 481px){
	.main_login .login_tab {grid-template-columns:1fr 1fr 8rem;}
}

/* 로그인 전 */
.main_login .login_form {display:flex; flex-direction:column; gap:1rem;}
.main_login .login_form label {margin:0;}
.main_login .login_form input {width:100%; height:5rem; padding:0 1.5rem; border-radius:3px;}
.main_login .login_form div {display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; margin-top:1rem;}
.main_login .login_form .join_btn {background:var(--subcolor);}
.main_login .login_form .login_btn {background:var(--fifthcolor);}

.login_box_before .login_cont {display:none;} /* 유저타입별 노출되는 로그인영역 */
.login_box_before .login_cont.on {display:flex;} /* 해당 유저타입탭 클릭할 경우 노출 */

.login_box_before .login_cont.login_univ dl {flex:1; justify-content:center;}

/* 로그인 후 */
.login_box_after .login_info {width:100%; height:5rem; display:flex; align-items:center; gap:5px; font-size:1.5rem; font-weight:500; color:#a0a3af; border-bottom:1px solid #ddd;}
.login_box_after .login_info b {color:var(--fontcolor1);}
.login_box_after .login_cont {display:flex;}
.login_box_after .login_cont dl {flex:1; justify-content:center;}

/* ##### 커뮤니티, 프로그램 ##### */
.main_board_list {display:none;}
.main_board_list.on {display:block;}
.main_board_list .no_board {
	min-height:32rem; display:flex; justify-content:center; align-items:center; font-size:1.8rem; color:var(--black); text-align:center; 
	padding:4rem 3rem; border:1px solid #ddd; border-radius:1rem; background:var(--white); overflow:hidden;
} /* 내용이 없는 경우 */

.main_board_slide {margin:0 2px; overflow:hidden;}
.main_board_slide li {
	min-height:32rem; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:4rem 3rem; 
	border-radius:1rem; border:1px solid #ddd; background:var(--white); overflow:hidden; transition:all 0.3s; cursor:pointer;
}
.main_board_slide li:hover {border-color:var(--maincolor);}
.main_board_slide li > span {font-size:1.5rem; font-weight:bold;}
.main_board_slide li > span.notice {color:var(--fourthcolor);}
.main_board_slide li > span.jobnoti {color:var(--thirdcolor);}
.main_board_slide li > span.job {color:var(--fourthcolor);}
.main_board_slide li > span.startup {color:var(--thirdcolor);}
.main_board_slide li > dl {flex:1; display:flex; flex-direction:column; gap:2rem;}
.main_board_slide li > dl dt {
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; font-size:1.8rem; font-weight:bold; color:var(--black); 
	text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-binding:url(ellipsis.xml#ellipsis); overflow:hidden;
}
.main_board_slide li > dl dd {
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; white-space:normal; font-size:1.5rem; color:var(--fontcolor3); 
	text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-binding:url(ellipsis.xml#ellipsis); overflow:hidden;
}
.main_board_slide li > div {display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem;}
.main_board_slide li > div b {width:6rem; height:2.5rem; display:flex; justify-content:center; align-items:center; font-size:1.3rem; font-weight:normal; color:var(--white); text-align:center; border-radius:2px; background:var(--fifthcolor);}
.main_board_slide li > div span {font-size:1.5rem; letter-spacing:0; color:var(--fontcolor3);}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 581px){
	.main_board_slide li {padding:3rem;}
	.main_board_slide li > dl {gap:1rem;}
}