@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 {margin:6rem 0;}

/* 영역별 레이아웃 */
.main_sect_top .wrapper {display:grid; grid-template-columns:1fr 42rem; gap:4rem;} /* 메인상단 : 비주얼, 배너, 퀵메뉴 */
.main_info_box {display:flex; flex-direction:column; gap:2rem; overflow:hidden;}

.main_sect_btm .wrapper {display:grid; grid-template-columns:1fr 42rem; gap:4rem;} /* 메인하단 : 공지사항, 포토갤러리 */

@media screen and (max-width: 1200px){
	.main_sect {margin:4rem 0;}
	
	.main_sect_top .wrapper {grid-template-columns:1fr;}
	.main_info_box {display:grid; grid-template-columns:42rem 1fr;}
	
	.main_sect_btm .wrapper {gap:2rem;}
}
@media screen and (max-width: 1025px){
	.main_sect_btm .wrapper {grid-template-columns:1fr;}
}
@media screen and (max-width: 769px){
	.main_info_box {grid-template-columns:1fr;}
}
@media screen and (max-width: 481px){
}

/* 타이틀, 버튼 */
.sect_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem 5rem; margin-bottom:3rem;}
.sect_head .title {font-size:2.8rem; font-weight:700; color:var(--fontcolor1);}
.sect_head .title.big {font-size:3.2rem;}
.sect_head .desc {font-size:1.6rem; font-weight:400; color:var(--fontcolor3); word-break:keep-all;}

.sect_head .main_title {flex:1; display:flex; flex-direction:column; gap:8px;} /* 타이틀영역 */
.sect_head .main_btns {display:flex; align-items:center; gap:1rem;} /* 타이틀 버튼영역 */

.btns_group {display:flex; justify-content:center; align-items:center; gap:1rem; text-align:center;} /* 슬라이드 prev-next */
.btns_group button {display:flex; justify-content:center; align-items:center; width:5rem; height:5rem; text-align:center; border-radius:50%; border:1px solid #ddd;}
.btns_group button i {color:var(--fontcolor2);}

.btns_group.program_btns button {background:#f2f3f8;} /* 프로그램 */
.btns_group.notice_btns button {background:var(--white);} /* 공지사항 */

.main_more {width:5rem; height:5rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; background:rgba(58,126,205,0.3);} /* 더보기 */
.main_more i {width:80%; height:80%; display:flex; justify-content:center; align-items:center; font-size:1.6rem; color:var(--white); text-align:center; border-radius:50%; background:#3a7ecd;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.sect_head .title {font-size:2.4rem;}
	.sect_head .title.big {font-size:2.8rem;}
	
	.sect_head .main_title {gap:5px;}
}
@media screen and (max-width: 769px){
	.sect_head {flex-direction:column; align-items:flex-start;}
	.sect_head .main_btns {align-self:flex-end;}
}
@media screen and (max-width: 481px){
}


/* 메인콘텐츠 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 메인비주얼 */
.main_visual {position:relative; height:75rem; border-radius:2rem; background:var(--white); overflow:hidden;}
.main_visual::after {content:""; display:block; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; background:linear-gradient(to bottom, transparent, var(--black));}
.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 img {height:100%; border-radius:2rem; object-fit:cover;}

.main_slogan {width:100%; height:100%; position:absolute; top:0; left:0; z-index:3; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:6rem;}
.main_slogan h2 {position:relative; font-size:4.2rem; font-weight:700; letter-spacing:0.02em; color:var(--white); word-break:keep-all;}
.main_slogan p {position:relative; font-size:1.8rem; color:var(--white); word-break:keep-all; opacity:0.6;}
.main_slogan button {
	width:12rem; height:5rem; display:flex; justify-content:center; align-items:center; font-size:1.5rem; letter-spacing:0.02em;
	color:rgba(255,255,255,0.8); text-align:center; margin-top:3rem; border-radius:3px; background:rgba(255,255,255,0.15);
}

.visual_pager {width:20rem !important; height:3px !important; position:absolute; right:16rem; bottom:8rem; left:auto !important; top:auto !important; z-index:5; background:rgba(255,255,255,0.3) !important;}
.visual_pager .swiper-pagination-progressbar-fill {background:var(--white) !important;}

.visual_btns {position:absolute; right:6rem; bottom:6rem; z-index:5;}
.visual_btns button {color:var(--white);}
.visual_btns button i {font-size:3.6rem;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.main_visual {height:60rem;}
	
	.main_slogan {padding:4rem;}
	.main_slogan h2 {font-size:3.2rem;}
	.main_slogan p {font-size:1.6rem;}
	
	.visual_pager {display:none;}
	.visual_btns {right:4rem; bottom:4rem;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* 배너 */
.main_banner {flex:1; display:flex; flex-direction:column; overflow:hidden;}
.banner_head {height:6.8rem; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:2rem 2rem 1rem 3rem; border-radius:2rem 2rem 0 0; background:#e8f5fd;}
.banner_head > h3 {font-size:1.8rem; font-weight:bold; color:var(--fontcolor1);}
.banner_head > div {display:flex; align-items:center; gap:1rem;}

.banner_visual {flex:1; padding:1rem; border:6px solid #e8f5fd; background:var(--white); overflow:hidden;}
.banner_slider {width:100%; height:43rem; overflow:hidden;}
.banner_slider img {width:100%; height:100%; object-fit:fill;}

.banner_btns {display:flex; align-items:center; gap:1rem;}
.banner_btns button {position:relative; line-height:0;}
.banner_btns button ~ button::after {content:""; position:absolute; left:-6px; top:9px; width:1px; height:12px; background:var(--fontcolor4);}
.banner_btns button i {font-size:3rem; color:var(--fontcolor3); opacity:0.8;}

.banner_pager {font-family:var(--fontPre); font-size:1.6rem; font-weight:600; color:var(--fontcolor1);}
.banner_pager .swiper-pagination-current {color:var(--fourthcolor); font-weight:700;}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.banner_slider {height:auto; min-height:43rem;}
}
@media screen and (max-width: 481px){
	.banner_slider {height:43rem; min-height:auto;}
}

/* 퀵메뉴 */
.main_quick {display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem;}
.main_quick a {height:20rem; position:relative; display:flex; flex-direction:column; gap:1rem; padding:2.5rem; border-radius:2rem;}
.main_quick a * {color:var(--white); word-break:keep-all;}
.main_quick a span {font-size:1.5rem; font-weight:600; opacity:0.6;}
.main_quick a strong {font-size:2.2rem; line-height:1.4;}
.main_quick a em {
	width:5rem; height:5rem; position:absolute; right:2rem; bottom:2.5rem; z-index:1; display:flex;  justify-content:center; align-items:center; 
	background:linear-gradient(90deg, black, #7b7b7b); mix-blend-mode:screen; border-radius:50%; border:none;
}
.main_quick a em::before {
	content:""; display:inline-block; width:calc(100% + 4px); height:calc(100% + 4px); position:absolute; z-index:-1;
    border-radius:50%; background:linear-gradient(270deg, #3f3f3f, #5d5d5d); mix-blend-mode:color;
}
.main_quick a em img {width:50%; object-fit:contain;}
.main_quick a.subject {background:#5da3d9;} /* 교과 */
.main_quick a.extra {background:#5d7dd9;} /* 비교과 */

@media screen and (max-width: 1200px){
	.main_quick {grid-template-columns:1fr;}
	.main_quick a {height:auto;}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
	.main_quick {grid-template-columns:repeat(2, 1fr);}
	.main_quick a strong {font-size:2rem;}
}
@media screen and (max-width: 481px){
	.main_quick {grid-template-columns:1fr;}
}

/* 프로그램 */
.program_slider {padding:5px 2px; overflow:hidden;}
.program_list {display:flex;}
.program_card {cursor:pointer; overflow:hidden;}
.program_card .card_head {position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; color:var(--white); padding:1.6rem 2rem 1.2rem; border-radius:1rem 1rem 0 0; background:#1e6290;}
.program_card .card_head::after {
	content:""; display:block; position:absolute; right:0; top:50%; z-index:-1; width:100%; height:100%; transform:translateY(-50%); 
	background:url('../images/common/univ_symbol_white.svg') right center no-repeat; background-size:contain; opacity:0.05;
}
.program_card .card_head .term_box {display:flex; align-items:center; gap:5px;}
.program_card .card_head .term_box span {font-size:1.4rem; font-weight:500; letter-spacing:0.05em;}
.program_card .card_head .dept {font-size:1.6rem; font-weight:600;}
.program_card .card_detail {display:flex; flex-direction:column; gap:2rem; padding:2rem; border-radius:0 0 1rem 1rem; border:1px solid #ccc; border-top:none; background:var(--white); transition:all 0.3s;}
.program_card .card_detail h3 {
	height:52px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; font-size:1.8rem; line-height:1.4; font-weight:600; 
	color:var(--fontcolor1); text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-binding:url(ellipsis.xml#ellipsis); overflow:hidden;
}
.program_card .period_box {display:flex; flex-direction:column; gap:1rem;}
.program_card .period_box dl {display:grid; grid-template-columns:6rem 1fr; gap:1rem; font-size:1.4rem;}
.program_card .period_box dl dt {font-weight:600; color:var(--fontcolor1);}
.program_card .period_box dl dd {font-family:var(--fontPre); line-height:1.4;}
.program_card .count_box {display:flex; justify-content:flex-end; align-items:center; gap:2.4rem;}
.program_card .count_box li {position:relative; display:flex; align-items:center; gap:1rem;}
.program_card .count_box li ~ li::after {content:""; display:block; position:absolute; left:-1.2rem; top:6px; width:1px; height:12px; background:var(--fontcolor4);}
.program_card .count_box li span {font-size:1.4rem; font-weight:500; color:var(--fontcolor1);}
.program_card .count_box li strong {font-size:1.8rem; font-weight:700; line-height:1.2; color:var(--subcolor);}

.program_card:hover {box-shadow:0 0 5px rgba(0,0,0,0.1);}
.program_card:hover .card_detail {border-color:var(--fifthcolor);}

.no_program {height:315px; display:flex; justify-content:center; align-items:center; font-size:1.8rem; font-weight:500; color:var(--fontcolor3); text-align:center; border:2px solid #ddd;}

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

/* 공지사항 */
.main_notice {padding:4rem; border-radius:1rem; background:#f2f3f8; overflow:hidden;}

.notice_slider {overflow:hidden;}
.notice_list {display:flex;}
.notice_card {
	min-height:30rem; display:flex !important; flex-direction:column; gap:2rem; padding:2.5rem; border-radius:1rem; border:1px solid var(--white); 
	background:var(--white); cursor:pointer; overflow:hidden; transition:all 0.3s;
}
.notice_card > div {display:flex; justify-content:space-between; align-items:center; padding-bottom:1.5rem; border-bottom:1px solid #ddd; overflow:hidden;}
.notice_card > div span {font-family:var(--fontPre); font-size:1.6rem; font-weight:700; color:var(--fontcolor1);}
.notice_card > div em {width:2rem; height:2rem; display:flex; justify-content:center; align-items:center; font-size:1rem; font-weight:600; line-height:1.2; color:var(--white); text-align:center; border-radius:50%; background:#3a7ecd;}
.notice_card > dl {display:flex; flex-direction:column; gap:1.5rem; overflow:hidden;}
.notice_card > dl dt {
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; font-size:1.8rem; line-height:1.4; font-weight:600; 
	color:var(--fontcolor1); text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-binding:url(ellipsis.xml#ellipsis); overflow:hidden;
}
.notice_card > dl dd {
	font-family:var(--fontPre); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; white-space:normal; font-size:1.6rem; line-height:1.4; color:var(--fontcolor3); 
	text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-binding:url(ellipsis.xml#ellipsis); overflow:hidden;
}
.notice_card:hover {border-color:var(--fourthcolor); box-shadow:0 0 5px rgba(0,0,0,0.1);}

.no_notice {height:30rem; display:flex; justify-content:center; align-items:center; font-size:1.8rem; font-weight:500; color:var(--fontcolor3); text-align:center;}

@media screen and (max-width: 1200px){
	.main_notice {padding:3rem;}
	.notice_card {min-height:32rem;}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}

/* 포토갤러리 */
.main_gallery {height:46rem; position:relative; border-radius:1rem; overflow:hidden;}
.gallery_slider {height:100%; border-radius:1rem; overflow:hidden;}
.gallery_card {position:relative;}
.gallery_card::after {content:""; display:block; position:absolute; left:0; top:0; z-index:1; width:100%; height:100%; border-radius:1rem; background:linear-gradient(to bottom, transparent, var(--black));}
.gallery_card .shortcut {width:100%; height:100%;}
.gallery_card .shortcut img {width:100%; height:100%; object-fit:cover;}
.gallery_card .gallery_info {position:absolute; left:0; bottom:0; z-index:3; width:100%; display:flex; flex-direction:column; gap:5px; color:var(--white); padding:3rem;}
.gallery_card .gallery_info span {font-size:1.4rem; opacity:0.7;}
.gallery_card .gallery_info h3 {font-size:2rem; font-weight:600;}
.gallery_card .gallery_info div {display:flex; justify-content:space-between; align-items:center; gap:2rem 3rem; margin-top:1.5rem;}
.gallery_card .gallery_info div em {font-family:var(--fontPre); font-size:1.5rem; opacity:0.7;}

.gallery_btns {
	position:absolute; left:3rem; top:3rem; z-index:4; width:14rem; height:3.6rem; display:flex; justify-content:center; align-items:center; gap:4px; 
	text-align:center; padding:4px 1.2rem; border-radius:50em; background:var(--white);
}
.gallery_btns button {line-height:0;}
.gallery_btns button i {color:var(--fontcolor4);}
.gallery_pager {flex:1; font-family:var(--fontPre); font-size:1.4rem; font-weight:600; line-height:1.2; color:var(--fontcolor1);}
.gallery_pager .swiper-pagination-current {color:var(--fourthcolor); font-weight:700;}

.main_gallery:has(.no_gallery) .gallery_btns {display:none;}
.no_gallery img {width:100%; height:100%; object-fit:cover; border-radius:1rem;}

@media screen and (max-width: 1200px){
	.main_gallery {margin-bottom:4rem;}
}
@media screen and (max-width: 1025px){
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
}