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

/* 커뮤니티-배너 */
.main_info {display:grid; grid-template-columns:1fr 40rem; gap:4rem;}

/* 타이틀 */
.main_head .head {font-size:3.6rem; font-weight:700; line-height:1.3;}
.main_head .head.white {color:var(--white);}
.main_head .head.dark {color:var(--black);}

/* 버튼 */
.btns_wrap {display:flex; align-items:center; gap:1rem;}
.btns_wrap button {width:5rem; height:5rem; display:flex; justify-content:center; align-items:center; color:var(--white); text-align:center; border-radius:50%;}
.btns_slide {display:flex; align-items:center; gap:1rem;}

@media screen and (max-width: 1200px){
	.main_sect {padding:4rem 0;}
	.sect_part ~ .sect_part {margin-top:4rem;}
}
@media screen and (max-width: 1025px){
	.main_head .head {font-size:2.8rem;}
	
	.main_info {grid-template-columns:1fr;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
	.btns_wrap {align-self:flex-end;}
}


/* 메인콘텐츠 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 비주얼 */
.main_visual {position:relative; width:100%; height:60rem; 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.7) 0%, rgba(0,0,0,0.4) 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%,-70%); display:flex; flex-direction:column; gap:1.5rem; color:var(--white);}
.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.8; word-break:keep-all;}

.visual_btns {width:100%; position:absolute; left:50%; bottom:15%; z-index:3; transform:translate(-50%, -50%);; display:flex; align-items:center; gap:1rem;}
.visual_btns button {width:6rem; height:6rem; display:flex; justify-content:center; align-items:center; text-align:center; border:1px solid var(--white); border-radius:50%; background:transparent;}
.visual_btns button i {color:var(--white); opacity:0.8;}

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

/* 프로그램 */
.main_program {display:flex; align-items:center;}
.program_head {position:relative; width:40rem; height:40rem; padding:7rem 4rem; border-radius:2rem; background:linear-gradient(to top, #2ac6df, #09a8da); overflow:hidden;}
.program_head::after {content:""; display:block; position:absolute; top:-5px; right:-5px; width:25rem; height:25rem; background:url('../images/common/univ_symbol_white.svg') no-repeat; background-size:contain; opacity:0.08;}
.program_head .btns_wrap {position:absolute; left:5rem; bottom:7rem;}
.program_head .program_btns button {background:rgba(255,255,255,0.25);}
.program_head .program_more_page {
	width:12rem; height:4rem; display:flex; justify-content:space-between; align-items:center; font-size:1.6rem; font-weight:500; line-height:0; 
	color:var(--subcolor); padding:8px 2rem; margin-top:1.5rem; border-radius:50em; background:var(--white);
}
.program_head .program_more_page i {font-size:1.8rem;}
.program_head .program_more_page:hover {box-shadow:0 0 15px rgba(0,0,0,0.2);}

.program_slider {flex:1; position:relative; z-index:5; margin-left:-13rem; padding:2px; overflow:hidden;}
.program_list {display:flex; align-items:center;}
.program_card {display:flex !important; flex-direction:column; gap:2rem; padding:2rem; border-radius:2rem; border:1px solid #ddd; background:var(--white); cursor:pointer; transition:all 0.4s ease;}
.program_card:hover {border-color:var(--subcolor); box-shadow:0 0 10px rgba(0,0,0,0.1); transition:all 0.4s ease;}

.card_head {display:flex; justify-content:center; align-items:center; gap:3rem; padding-bottom:2rem; border-bottom:1px solid #ddd;}
.card_head .head_box {flex:1; display:flex; flex-direction:column; gap:5px; overflow:hidden;}
.card_head .head_box .dept {font-size:1.5rem; font-weight:600; color:var(--subcolor);}
.card_head .head_box h3 {
	height:48px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; font-family:var(--fontPre); 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;
}
.card_head .term_box {width:8rem; height:8rem; display:flex; justify-content:center; align-items:center; padding:5px; border-radius:50%; background:rgba(2,183,212,0.3);}
.card_head .term_box em {width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:50%; background:var(--thirdcolor);}
.card_head .term_box span {font-family:var(--fontPre); font-size:1.4rem; line-height:1.2; font-weight:600; color:var(--white);}

.card_detail {display:flex; flex-direction:column; gap:2rem;}
.card_detail .period_box {display:flex; flex-direction:column; gap:1rem;}
.card_detail .period_box dl {display:grid; grid-template-columns:8rem 1fr; gap:1rem; align-items:flex-start; font-size:1.4rem;}
.card_detail .period_box dl dt {display:flex; align-items:center; gap:8px; font-weight:600; color:var(--fontcolor1); margin-top:2px;}
.card_detail .period_box dl dt i {font-size:1.8rem; color:var(--fontcolor4);}
.card_detail .period_box dl dd {font-family:var(--fontPre); line-height:1.4;}
.card_detail .count_box {display:flex; justify-content:flex-end; align-items:center; gap:8px 2rem;}
.card_detail .count_box li {position:relative; display:flex; align-items:center; gap:6px;}
.card_detail .count_box li ~ li::after {content:""; display:block; position:absolute; left:-1rem; top:4px; width:1px; height:12px; background:var(--fontcolor4);}
.card_detail .count_box li span {font-size:1.3rem; font-weight:500; color:var(--fontcolor1);}
.card_detail .count_box li strong {font-size:1.4rem; font-weight:700; line-height:1.2; color:var(--subcolor);}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.main_program {display:block;}
	
	.program_head {width:100%; height:auto; padding:3rem;}
	.program_head::after {width:18rem; height:18rem;}
	.program_head h3 br {display:none;}
	.program_head .btns_wrap {left:auto; bottom:auto; right:3rem; top:50%; z-index:3; transform:translateY(-50%);}
	
	.program_slider {margin-left:0; margin-top:2rem;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
	.program_head {height:22rem;}
	.program_head::after {width:24rem; height:24rem;}
	.program_head .btns_wrap {bottom:3rem; top:auto; transform:inherit;}
	
	.card_detail .count_box {flex-direction:column; align-items:flex-start;}
	.card_detail .count_box li {gap:1rem;}
	.card_detail .count_box li ~ li::after {display:none;}
	.card_detail .count_box li span {font-size:1.4rem;}
	.card_detail .count_box li strong {font-size:1.6rem;}
}

/* 커뮤니티 */
.main_comm {flex:1; display:flex; flex-direction:column; overflow:hidden;}
.comm_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:2rem 3rem; border-radius:2rem 2rem 0 0; background:#e6eff8;}
.comm_head .comm_tab {display:flex; align-items:center; gap:4rem;}
.comm_head .comm_tab button {position:relative; font-size:2rem; font-weight:800; color:var(--black);}
.comm_head .comm_tab button ~ button::before {content:""; display:block; position:absolute; left:-2rem; top:12px; 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:4px; border-radius:2px; background:#3a7ecd;}
.comm_head .comm_tab button:hover {color:#3a7ecd;}
.comm_head .comm_more {width:4rem; height:4rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:8px; background:#94a3b8;}
.comm_head .comm_more i {color:var(--white);}

.comm_list_wrap {flex:1; display:none; border:6px solid #e6eff8; border-top:none;}
.comm_list_wrap.on {display:flex; flex-direction:column; gap:2.5rem; padding:4rem;}

.comm_ipt {display:grid; grid-template-columns:8rem 1fr; gap:2.5rem; align-items:center; padding-bottom:2rem; border-bottom:1px solid #e3e3eb;}
.comm_ipt .comm_date {
	width:8rem; height:8rem; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
	font-family:var(--fontPre); text-align:center; border-radius:1rem; border:1px solid #ddd; background:var(--white);
}
.comm_ipt .comm_date strong {font-size:2.4rem; line-height:1.2; font-weight:900; color:var(--fontcolor1);}
.comm_ipt .comm_date span {font-size:1.3rem; line-height:1.2; color:var(--fontcolor3);}
.comm_ipt .comm_info {display:flex; flex-direction:column; gap:1rem; overflow:hidden;}
.comm_ipt .comm_info .head {display:flex; align-items:center; gap:1rem;}
.comm_ipt .comm_info .head em {
	width:2rem; height:2rem; display:flex; justify-content:center; align-items:center; 
	font-size:1.2rem; line-height:1.2; font-weight:600; color:var(--white); border-radius:50%; background:var(--red);
}
.comm_ipt .comm_info .head strong {flex:1; font-size:2rem; font-weight:700; color:var(--black);}
.comm_ipt .comm_info .desc {font-family:var(--fontPre); font-size:1.6rem; font-weight:500; color:var(--fontcolor2);}

.comm_list {display:flex; flex-direction:column; gap:1.4rem;}
.comm_list li {position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:5px 1rem; padding-left:1.6rem; overflow:hidden;}
.comm_list li::after {content:""; display:block; position:absolute; left:0; top:10px; width:3px; height:3px; border-radius:50%; background:var(--fontcolor4);}
.comm_list li a {flex:1; font-family:var(--fontPre); font-size:1.6rem; font-weight:500; color:var(--fontcolor2);}
.comm_list li a:hover {color:var(--maincolor);}
.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){
	.comm_list_wrap.on {padding:3rem;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
	.comm_list_wrap.on {padding:2rem;}
	
	.comm_ipt {grid-template-columns:7rem 1fr; gap:1.5rem;}
	.comm_ipt .comm_date {width:7rem; height:7rem;}
	
	.comm_list li a {font-size:1.5rem;}
	.comm_list li span {font-size:1.5rem;}
}

/* 배너 */
.main_banner {display:flex; flex-direction:column; border-radius:2rem; border:1px solid #ddd; overflow:hidden;}

.banner_visual {flex:1; background:var(--white); overflow:hidden;}
.banner_slider {width:100%; height:36rem; overflow:hidden;}
.banner_slider img {width:100%; height:100%; object-fit:fill;}

.banner_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:2rem 2.5rem; border-radius:0 0 2rem 2rem; border-top:1px solid #ddd; background:var(--white);}
.banner_head > h3 {display:flex; align-items:center; gap:1rem; font-family:var(--fontPre); font-size:1.8rem; font-weight:bold; color:var(--fontcolor1);}
.banner_head > h3 i {font-size:2rem; color:var(--fourthcolor);}
.banner_head > div {display:flex; align-items:center; gap:1rem;}

.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:8px; width:1px; height:12px; background:var(--fontcolor4);}
.banner_btns button i {font-size:2.8rem; 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){
}
@media screen and (max-width: 481px){
	.banner_btns button ~ button::after {top:6px;}
}

/* 포토갤러리 */
.main_gallery {display:flex; flex-direction:column; gap:4rem;}
.gallery_head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2rem 5rem;}
.gallery_head .gallery_btns button {background:#ddd;}
.gallery_head .gallery_more {background:var(--subcolor);}

.gallery_slider {position:relative; overflow:hidden;}
.gallery_list {display:flex;}
.gallery_card {display:flex !important; flex-direction:column; gap:2rem; overflow:hidden; cursor:pointer;}
.gallery_card .shortcut {width:100%; height:22rem; border-radius:2rem; background:var(--gray); overflow:hidden;}
.gallery_card .shortcut img {width:100%; height:100%; object-fit:cover;}
.gallery_card .desc {display:flex; flex-direction:column; gap:1rem; font-family:var(--fontPre);}
.gallery_card .desc h3 {font-size:1.8rem; font-weight:700; color:var(--fontcolor1); transition:all 0.4s ease;}
.gallery_card .desc span {font-size:1.5rem; font-weight:500; color:var(--fontcolor4);}

.gallery_card:hover .desc h3 {color:var(--subcolor);}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px){
	.main_gallery {gap:3rem;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
	.gallery_head {flex-direction:column; align-items:flex-start;}
}