@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 {padding:6rem 0;}
.sect_part ~ .sect_part {margin-top:4rem;}

.main_sect_info {display:grid; grid-template-columns:1fr 40rem; gap:4rem 3rem;} /* 공지사항-센터안내 */

@media screen and (max-width: 1200px){
	.main_sect {padding:4rem 0;}
}
@media screen and (max-width: 1025px){
	.main_sect_info {grid-template-columns:1fr;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}


/* 메인콘텐츠 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 비주얼 */
.main_visual {position:relative; width:100%; height:65rem; background:var(--gray); overflow:hidden;}
.main_visual .swiper-wrapper {width:100%; height:100%;}
.main_visual .swiper-wrapper * {width:100%;height:100%;}
.main_visual .swiper-slide {position:relative;}
.main_visual .swiper-slide::after {content:""; display:block; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; background:linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);}
.main_visual .swiper-slide img {object-fit:cover; object-position:center center;}

.main_slogan {width:100%; position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-60%); display:flex; flex-direction:column; gap:1.5rem; color:var(--white);}
.main_slogan > span {font-size:1.6rem; font-weight:600; letter-spacing:0.02em; opacity:0.5;}
.main_slogan > h2 {font-size:5.6rem; font-weight:700; line-height:1.4; margin-top:1rem;}
.main_slogan > h2 span {display:block;}
.main_slogan > p {font-size:1.8rem; word-break:keep-all; opacity:0.6;}

.visual_btns {width:100%; position:absolute; left:0; top:50%; z-index:3; transform:translateY(-50%); display:flex; justify-content:space-between; align-items:center;}
.visual_btns button {width:6rem; height:6rem; display:flex; justify-content:center; align-items:center; text-align:center; background:rgba(255,255,255,0.15);}
.visual_btns button.visual_prev {border-radius:0 5px 5px 0;}
.visual_btns button.visual_next {border-radius:5px 0 0 5px;}
.visual_btns button i {color:var(--white);}

.visual_pager {width:100%; position:absolute; left:50% !important; bottom:20% !important; top:auto !Important; z-index:2; transform:translate(-50%, -50%);}
.custom_pager {display:inline-flex; align-items:center; gap:3rem;}
.pager_bar {width:20rem !important; height:3px !important; background:rgba(255,255,255,0.3) !important;}
.pager_bar .pager_fill {height:100%; background:var(--white);}
.pager_fraction {font-family:var(--fontPre); font-size:1.6rem; font-weight:600; color:var(--white);}

@media screen and (max-width: 1200px){
	.main_visual {height:55rem;}
	
	.main_slogan > span {font-size:1.6rem;}
	.main_slogan > h2 {font-size:4.8rem;}
	.main_slogan > p {font-size:1.6rem;}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.main_visual {height:45rem;}
	
	.main_slogan {transform:translate(-50%,-50%); gap:1rem;}
	.main_slogan > span {font-size:1.4rem;}
	.main_slogan > h2 {font-size:3.6rem; margin-top:0;}
	
	.visual_pager {display:none;}
}
@media screen and (max-width: 481px){
	.main_slogan > p br {display:none;}
}

/* 바로가기 */
.main_quick {display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem 3rem;}
.main_quick dl {position:relative; height:18rem; display:flex; flex-direction:column; gap:1rem; color:var(--white); padding:3rem 4rem; border-radius:2rem; cursor:pointer; transition:all 0.4s ease;}
.main_quick dl:hover {transform:translate(-3px, -3px); box-shadow:4px 4px 12px rgba(0,0,0,0.2);}
.main_quick dl::after {content:""; display:block; position:absolute; right:3rem; bottom:3rem; width:6rem; height:6rem;}
.main_quick dl dt {font-size:2.4rem; font-weight:700;}
.main_quick dl dd {font-size:1.6rem; font-weight:500; word-break:keep-all; opacity:0.85;}
.main_quick dl.apply_test {background:linear-gradient(to bottom, #2ac6df, #09a8da);} /* 검사 신청 */
.main_quick dl.apply_test::after {background:url('../images/main/main_quick_icn01.png') no-repeat; background-size:contain;}
.main_quick dl.apply_consult {background:linear-gradient(to bottom, #45afeb, #378edd);} /* 상담 신청 */
.main_quick dl.apply_consult::after {background:url('../images/main/main_quick_icn02.png') no-repeat; background-size:contain;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.main_quick {grid-template-columns:1fr;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
	.main_quick dl {height:auto; padding:2.5rem 3rem;}
	.main_quick dl::after {bottom:inherit; top:50%; transform:translateY(-50%); width:4.5rem; height:4.5rem;}
	.main_quick dl dt {font-size:2rem;}
	.main_quick dl dd {display:none;}
}

/* 주요일정 */
.main_plan {display:flex; flex-direction:column; gap:4rem; padding:4rem; border-radius:2rem; border:1px solid #ddd;}

.plan_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem 4rem; padding-bottom:2.5rem; border-bottom:1px solid #ddd;}
.plan_head .title {display:flex; align-items:center; gap:1.5rem;}
.plan_head .title span {width:4rem; height:4rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; background:var(--subcolor);}
.plan_head .title span img {width:1.8rem;}
.plan_head .title h3 {flex:1; font-size:2.4rem; font-weight:800; color:var(--fontcolor1);}
.plan_head .info {display:flex; align-items:center; gap:1.5rem;}
.plan_head .info p {font-size:1.6rem; color:var(--fontcolor3);}
.plan_head .info em {font-weight:600; color:var(--red); padding-right:4px;}
.plan_head .info button {
	width:12rem; height:3.5rem; display:flex; justify-content:center; align-items:center; font-size:1.4rem; letter-spacing:0.02em; line-height:1; font-weight:500; 
	color:var(--white); text-align:center; border-radius:50em; background:var(--fifthcolor);
}

.plan_box {display:grid; grid-template-columns:38rem 1fr; gap:4rem;}
.calendar_box {width:100%;}
.calendar_box table {width:100%; table-layout:fixed; background:var(--white)}
.calendar_box table thead th {height:4rem; vertical-align:top; font-size:1.6rem; font-weight:500; color:var(--black); text-align:center; padding:4px 8px; border-bottom:1px solid var(--black);}
.calendar_box table thead th:nth-child(7n-6) {color:var(--red);}
.calendar_box table thead th:nth-child(7n) {color:var(--blue);}
.calendar_box table tbody td {height:6rem; font-family:var(--fontPre); font-size:1.4rem; color:var(--black); text-align:center; padding:4px 8px; border-bottom:1px solid #ddd;}
.calendar_box table tbody td:nth-child(7n-6) {color:var(--red);}
.calendar_box table tbody td:nth-child(7n) {color:var(--blue);}
.calendar_box table tbody td.today span {
	width:2.8rem; height:2.8rem; display:flex; justify-content:center; align-items:center; font-size:1.4rem; 
	color:var(--white); text-align:center; margin:0 auto; border-radius:50%; background:var(--thirdcolor);
} /* 오늘 */
.calendar_box table tbody td.plan {position:relative;}
.calendar_box table tbody td.plan::after {content:""; display:block; position:absolute; left:50%; top:8px; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#3785e2;} /* 일정등록 된 경우 */

.plan_list {display:flex; flex-direction:column; gap:3rem; padding:4rem; border-radius:1rem; background:#f2f3f8;}
.plan_move {display:flex; justify-content:center; align-items:center; text-align:center; gap:2rem;}
.plan_move h3 {font-family:var(--fontPre); font-size:2.2rem; font-weight:700; color:var(--fontcolor1);}
.plan_move button {width:3.5rem; height:3.5rem; border-radius:5px; border:1px solid #ddd; background:var(--white);}
.plan_move button i {font-size:2.2rem; line-height:1.4; color:var(--fontcolor1);}

.plan_detail_show {height:25rem; overflow:hidden; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--fontcolor2) var(--white);} /* Firefox용 스크롤바 스타일 */
.plan_detail_show::-webkit-scrollbar {width:8px; height:8px;} /* 스크롤바 스타일 (웹킷 브라우저용) */
.plan_detail_show::-webkit-scrollbar-track {border-radius:10px; background:var(--white);}
.plan_detail_show::-webkit-scrollbar-thumb {border-radius:10px; border:2px solid var(--white); background:var(--fontcolor2);}
.plan_detail_show::-webkit-scrollbar-thumb:hover {background:var(--fontcolor2);}

.plan_detail_show .no_plan {height:25rem; display:flex; justify-content:center; align-items:center; font-size:1.8rem; font-weight:500; color:var(--fontcolor3); text-align:center; overflow:hidden;} /* 일정이 없는 경우 */

.plan_detail {position:relative; display:flex; flex-direction:column; gap:2rem;}
.plan_detail::before {content:""; display:block; position:absolute; left:3px; top:0; width:1px; height:100%; background:#ccc;}
.plan_detail li {position:relative; display:grid; grid-template-columns:22rem 1fr; gap:5px 3rem; align-items:center; padding-left:2.5rem;}
.plan_detail li::before {content:""; display:block; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:#3785e2;}
.plan_detail li .date {display:flex; align-items:center; gap:1rem; color:var(--fontcolor4);}
.plan_detail li .date i {font-size:1.8rem;}
.plan_detail li .date em {font-family:var(--fontPre); font-size:1.5rem; font-weight:500;}
.plan_detail li .desc {font-family:var(--fontPre); font-size:1.6rem; font-weight:500; color:var(--fontcolor1);}

@media screen and (max-width: 1200px){
	.main_plan {padding:3rem;}
	.plan_box {grid-template-columns:1fr;}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.plan_head {flex-direction:column; align-items:flex-start;}
	.plan_head .title h3 {font-size:2.2rem;}
	.plan_head .info {width:100%; flex-direction:column; align-items:flex-start;}
	.plan_head .info button {align-self:flex-end;}
	
	.plan_move h3 {font-size:1.8rem;}
	.plan_list {padding:3rem;}
	.plan_detail li {grid-template-columns:1fr;}
}
@media screen and (max-width: 481px){
	.main_plan {padding:2.5rem;}
	.plan_list {padding:2rem;}
	.plan_detail li .date i {display:none;}
	.plan_detail li .date em {font-size:1.4rem;}
}

/* 공지사항 */
.main_comm {display:flex; flex-direction:column; gap:2.5rem; padding:4rem; border-radius:2rem; border:1px solid #ddd; background:var(--white);}
.comm_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem 4rem;}
.comm_head .comm_tab {display:flex; align-items:center; gap:4rem;}
.comm_head .comm_tab button {position:relative; font-size:2.4rem; font-weight:800; color:var(--black);}
.comm_head .comm_tab button ~ button::before {content:""; display:block; position:absolute; left:-2rem; top:14px; width:5px; height:5px; border-radius:50%; background:var(--fontcolor4);}
.comm_head .comm_tab button.on::after {content:""; display:block; position:absolute; left:0; bottom:-2.5rem; width:100%; height:5px; border-radius:2px; background:#3a7ecd;}
.comm_head .comm_tab button:hover {color:#3a7ecd;}
.comm_head .comm_view {display:flex; align-items:center; gap:1rem; font-size:1.6rem; font-weight:600; color:var(--fontcolor1);}
.comm_head .comm_view i {width:2rem; height:2rem; display:flex; justify-content:center; align-items:center; font-size:1.4rem; color:var(--white); text-align:center; border-radius:50%; background:var(--subcolor);}

.comm_list.on {display:grid;}
.comm_list {display:none; flex:1; grid-template-rows:repeat(4, 1fr); border-top:1px solid #ddd;}
.comm_list li {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:5px 4rem; padding:2rem 1rem; border-bottom:1px solid #ddd; overflow:hidden;}
.comm_list li a {flex:1; font-family:var(--fontPre); font-size:1.6rem; font-weight:600; color:var(--fontcolor1);}
.comm_list li span {font-family:var(--fontPre); font-size:1.6rem; font-weight:500; color:var(--fontcolor4); font-variant-numeric:tabular-nums;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.main_comm {padding:3rem;}
	.comm_head .comm_tab button {font-size:2.2rem;}
	.comm_head .comm_tab button ~ button::before {top:12px;}
}
@media screen and (max-width: 481px){
	.comm_head {flex-direction:column; align-items:flex-start;}
	.comm_head .comm_tab button.on::after {bottom:-1.5rem;}
	.comm_head .comm_view {align-self:flex-end; margin-top:1rem;}
	
	.comm_list li {flex-direction:column; align-items:flex-start;}
}

/* 센터 안내 */
.main_center_info {height:44rem; position:relative; display:flex; flex-direction:column; gap:2rem; color:var(--white); padding:4rem; border-radius:2rem; background:linear-gradient(to bottom, #25a5cc, #0d89c4);}
.main_center_info::after {content:""; display:block; position:absolute; right:4rem; bottom:3rem; width:215px; height:130px; background:url('../images/main/main_center_illust.png') no-repeat; background-size:contain;}
.main_center_info h3 {font-size:2.4rem; font-weight:700;}
.main_center_info strong {font-family:var(--fontPre); font-size:3.2rem; font-weight:900; line-height:1.2; letter-spacing:0.02em;}
.main_center_info dl {position:relative; display:grid; grid-template-columns:6rem 1fr; gap:1rem 2rem; font-size:1.5rem; font-weight:600; padding-left:1.5rem;}
.main_center_info dl::after {content:""; display:block; position:absolute; left:0; top:8px; width:3px; height:3px; border-radius:50%; background:var(--white);}
.main_center_info dl dd {opacity:0.8; word-break:keep-all;}
.main_center_info button {
	width:20rem; height:4rem; display:flex; justify-content:center; align-items:center; gap:8px; font-size:1.5rem; font-weight:500; color:var(--white); text-align:center; 
	padding:4px 1.5rem; margin-top:1rem; border-radius:50em; background:rgba(255,255,255,0.15); box-shadow:0 0 15px 2px rgba(0,0,0,0.05);
}
.main_center_info button img {width:2rem;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.main_center_info {height:30rem;}
}
@media screen and (max-width: 769px){
	.main_center_info {height:48rem;}
}
@media screen and (max-width: 481px){
	.main_center_info strong {font-size:2.8rem;}
}