@charset "utf-8";


/* 경기대학교 산학협력 사업단 메인 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
 /* 메인레이어팝업 */
.main_layer_popup {position:absolute; z-index:50;}
.main_layer_popup > div {width:100%; font-size:1.6rem; padding:1rem; 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:5.5rem; 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:1.3rem; letter-spacing:-1px; text-align:center; border-radius:5px;}
.main_layer_popup > span button.close_today {color:var(--black); letter-spacing:0; padding-left:5px; background:#eee;}
.main_layer_popup > span button.close_pop {color:var(--white); background:var(--darkblue);}

@media screen 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:95% !important;}
	.main_layer_popup > * {width:95% !important;}
}
@media screen and (max-width: 769px){
}
@media screen and (max-width: 481px){
	.main_layer_popup {height:auto !important;}
	.main_layer_popup > div {height:auto !important;}
}

/* 메인-공통레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main_wrap {position:relative; width:100%;}
.inner_wrap {width:100%; max-width:1620px; height:100%; margin:0 auto; padding:0 5rem;}

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


/* ########## 상단콘텐츠 ########## */
/* 메인히어로 */
.main_hero {
	width:100%; padding-top:8rem; margin-top:-8rem; 
	background:url('../images/main/bg_main_hero.png') top center no-repeat, linear-gradient(20deg, var(--maincolor3), var(--maincolor1), var(--maincolor2), var(--maincolor4)); 
	background-size:cover;
}
.main_hero .inner_wrap {display:grid; grid-template-columns:repeat(6, 1fr); gap:5rem; padding:15rem 5rem;}
.main_hero .hero_left {grid-column:span 2;}
.main_hero .hero_mid {grid-column:span 2;}
.main_hero .hero_right {grid-column:span 2;}

@media screen and (max-width: 1420px){
	.main_hero .inner_wrap {gap:3rem;}
}
@media screen and (max-width: 1280px){
	.main_hero .inner_wrap {padding:10rem 5rem;}
	.main_hero .hero_left {grid-column:span 6;}
	.main_hero .hero_mid {grid-column:span 3;}
	.main_hero .hero_right {grid-column:span 3;}
}
@media screen and (max-width: 1280px){
	.main_hero .inner_wrap {padding:8rem 3rem;}
}
@media screen and (max-width: 1025px) {
	.main_hero .inner_wrap {padding:6rem 2rem;}
}
@media screen and (max-width: 769px){
	.main_hero .hero_mid {grid-column:span 6;}
	.main_hero .hero_right {grid-column:span 6;}
}
@media screen and (max-width: 481px){
}

/* intro */
.main_intro {display:flex; flex-direction:column; justify-content:space-between; gap:3.6rem;}

/* slogan */
.main_slogan {display:flex; flex-direction:column; gap:1.6rem; font-family:var(--fontPre); letter-spacing:0.02em; color:var(--white);}
.main_slogan h2 {font-size:5.2rem; line-height:1.4;}
.main_slogan h2 strong {display:block; font-weight:700;}
.main_slogan p {font-size:1.8rem; font-weight:400; line-height:1.6; opacity:0.6;}

/* quick */
.main_quick {display:flex; flex-direction:column; gap:1.5rem;}
.main_quick a {display:flex; justify-content:space-between; align-items:center; gap:2.5rem; padding:2.4rem 2.4rem 2.4rem 3rem; border-radius:8px; background:rgba(255,255,255,0.1);}
.main_quick a:hover {background:rgba(255,255,255,0.2); box-shadow:0 0 10px rgba(0,0,0,0.1);}
.main_quick .quick_icon {width:5rem;}
.main_quick .quick_desc {flex:1; display:flex; flex-direction:column; gap:4px; color:var(--white);}
.main_quick .quick_desc strong {font-size:1.8rem; font-weight:500;}
.main_quick .quick_desc span {font-size:1.5rem; opacity:0.6;}
.main_quick .quick_arrow {width:2rem; height:2rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; background:rgba(255,255,255,0.8);}
.main_quick .quick_arrow i {font-size:2rem; color:var(--maincolor1); margin-left:2px;}

@media screen and (max-width: 1420px){
	.main_slogan h2 {font-size:4.8rem;}
}
@media screen and (max-width: 1280px){
	.main_quick {flex-direction:row; gap:3rem;}
	.main_quick a {flex:1;}
}
@media screen and (max-width: 1025px) {
}
@media screen and (max-width: 769px){
	.main_intro {gap:2.8rem;}
	
	.main_slogan h2 {font-size:3.6rem;}
	.main_slogan p {font-size:1.6rem;}
	
	.main_quick {gap:2rem;}
	.main_quick a {flex-direction:column; gap:1.6rem; padding:2.4rem;}
	.main_quick .quick_icon {width:4rem;}
	.main_quick .quick_desc strong {font-size:1.7rem;}
	.main_quick .quick_desc span {display:none;}
	.main_quick .quick_arrow {display:none;}
}
@media screen and (max-width: 481px){
}

/* banner */
.main_banner {border-radius:1.2rem; overflow:hidden;}
.main_banner ul, .main_banner li {height:100%;}

.banner_homepage {
	width:100%; height:100%; position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:4rem; padding:4rem; 
	background:url('../images/main/banner_homepage.jpg') center center no-repeat, var(--subcolor2); background-size:cover; overflow:hidden;
}
.banner_homepage * {position:relative; z-index:2;}
.banner_homepage::after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:1.2rem; background:rgba(31,31,31,0.7);}
.banner_homepage dl {display:flex; flex-direction:column; gap:1rem; color:var(--white);}
.banner_homepage dl dt {font-size:3.2rem; font-weight:bold;}
.banner_homepage dl dd {font-size:1.6rem; opacity:0.8;}
.banner_homepage a {
	width:20rem; height:5rem; display:flex; justify-content:center; align-items:center; gap:1.5rem; font-size:1.5rem; color:var(--white); 
	padding:1rem 2rem; border-radius:4px; border:1px solid rgba(255,255,255,0.8); background:transparent; overflow:hidden;
}
.banner_homepage a i {font-size:2rem; opacity:0.6;}

.banner_homepage a:hover {color:var(--white); background:rgba(255,255,255,0.1); box-shadow:0 0 10px rgba(0,0,0,0.1);}

@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1025px) {
	.banner_homepage {gap:3rem; padding:3rem;}
	.banner_homepage dl dt {font-size:2.8rem;}
}
@media screen and (max-width: 769px){
	.banner_homepage {padding:4rem 3rem;}
}
@media screen and (max-width: 481px){
}

/* notice */
.main_notice {display:flex; flex-direction:column; border-radius:1.2rem; background:var(--white); overflow:hidden;}
.main_notice .notice_head {
	width:100%; height:6rem; display:flex; align-items:center; font-family:var(--fontPre); font-size:2rem; font-weight:800; line-height:0; 
	color:var(--black); padding:2rem 3rem; border-bottom:1px solid #ddd;
}
.main_notice .notice_body {flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:3rem;}
.main_notice .has_notice {display:flex; flex-direction:column; gap:1.6rem;} /* 등록된 공지 있는 경우 */
.main_notice .empty_notice {flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.6rem; text-align:center;} /* 등록된 공지 없는 경우 */
.main_notice .empty_notice span {width:7rem; height:7rem; display:flex; justify-content:center; align-items:center; text-align:center; border-radius:50%; background:rgba(9,111,176,0.1);}
.main_notice .empty_notice span i {font-size:2.8rem; color:var(--maincolor1);}
.main_notice .empty_notice p {font-size:1.6rem; font-weight:500; color:var(--fontcolor3);}

.notice_feature {display:flex; flex-direction:column; gap:1.6rem; padding-bottom:1.6rem; border-bottom:1px solid #ddd;}
.notice_feature .notice_mhead {display:grid; grid-template-columns:6.5rem 1fr; gap:2rem; align-items:center; overflow:hidden;}
.notice_feature .notice_mdate {
	width:100%; height:6.5rem; display:flex; flex-direction:column; gap:4px; font-family:var(--fontPre); display:flex; justify-content:center; align-items:center; 
	color:var(--maincolor2); text-align:center; padding:1.2rem; border-radius:8px; border:1px solid var(--maincolor2); background:var(--white);
}
.notice_feature .notice_mdate b {font-size:2.4rem; line-height:1; font-weight:800; padding-top:4px;}
.notice_feature .notice_mtitle {
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; font-size:1.8rem; line-height:1.4; font-weight:500; color:var(--fontcolor1); 
	text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; -moz-binding:url(ellipsis.xml#ellipsis); overflow:hidden;
}
.notice_feature .notice_mdate span {font-size:1.2rem; font-weight:500;}
.notice_feature .notice_mdesc {
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; font-size:1.5rem; 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;
}
.main_notice .notice_list {flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:6px; overflow:hidden;}
.main_notice .notice_list a {position:relative; display:flex; justify-content:space-between; align-items:center; gap:8px 2rem; padding-left:1.4rem;}
.main_notice .notice_list a::before {content:""; display:block; position:absolute; left:0; top:10px; width:4px; height:4px; border-radius:50em; background:var(--maincolor3);}
.main_notice .notice_list a span {flex:1; font-size:1.5rem; color:var(--fontcolor3);}
.main_notice .notice_list a time {font-size:1.5rem; color:var(--fontcolor4);}
.main_notice .notice_list a:hover span {color:var(--fontcolor1);}

.main_notice .notice_more {
	width:100%; height:5.5rem; display:flex; justify-content:center; align-items:center; font-size:1.6rem; font-weight:500; 
	color:var(--white); text-align:center; padding:1rem 2rem; border-radius:4px; background:var(--black);
}
.main_notice .notice_more:hover {background:var(--maincolor2);}

@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_equip {padding:10rem 0; background:var(--white);}
.equip_wrap {position:relative; display:flex; flex-direction:column; gap:6rem;}

.equip_tag {width:max-content; display:inline-flex; font-family:var(--fontPre); font-size:1.8rem; font-weight:700; color:var(--black); padding-bottom:1.2rem; border-bottom:4px solid var(--maincolor1);}

.equip_head {display:flex; justify-content:space-between; align-items:flex-end; gap:3rem 5rem;}
.equip_head .equip_title {display:flex; flex-direction:column; gap:2rem; font-family:var(--fontPre); padding-left:8rem;}
.equip_head .equip_title h3 {font-size:4.2rem; color:var(--black);}
.equip_head .equip_title b {color:var(--maincolor1);}
.equip_head .equip_title p {font-size:1.8rem; color:var(--fontcolor3);}

.equip_more {
	width:20rem; height:5.6rem; display:flex; justify-content:space-between; align-items:center; gap:2rem; font-size:1.6rem; font-weight:500;
	color:var(--fontcolor1); text-align:center; padding:1rem 2rem 1rem 3.2rem; border-radius:50em; background:#f2f3f8;
}
.equip_more i {opacity:0.8;}
.equip_more:hover {color:var(--white); background:var(--maincolor1);}

.equip_card_list {width:100%; padding:1rem; overflow:hidden;}
.equip_card_list .empty_equip {
	width:100%; min-height:45rem; display:flex; justify-content:center; align-items:center; font-size:1.8rem;
	color:var(--fontcolor2); text-align:center; padding:1.5rem; border:2px solid #ddd; background:var(--white);
} /* 등록된 장비예약이 없는 경우 */

.equip_card {position:relative; display:flex !important; flex-direction:column; gap:2.5rem; padding:2.4rem; border:1px solid #ddd; background:var(--white); overflow:hidden;}
.equip_card .equip_thumb {position:relative; width:100%; height:0; display:block; padding-top:66%; border:1px solid #ddd; overflow:hidden;}
.equip_card .equip_thumb img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.equip_card .equip_body {display:flex; flex-direction:column; gap:1rem;}
.equip_card .equip_type {width:7rem; height:2.4rem; display:inline-flex; justify-content:center; align-items:center; font-size:1.2rem; color:var(--white); text-align:center; padding:4px 2rem; border-radius:50em;}
.equip_card .equip_type.available {background:var(--pointcolor1);}
.equip_card .equip_type.unavailable {background:var(--pointcolor3);}
.equip_card .equip_name {display:flex; flex-direction:column; gap:4px;}
.equip_card .equip_name h4 {font-size:2rem; font-weight:500; color:var(--black);}
.equip_card .equip_name p {font-family:var(--fontPre); font-size:1.5rem; font-weight:500; letter-spacing:0.02em; color:var(--fontcolor4);}
.equip_card .equip_info {display:flex; flex-direction:column; gap:6px; margin-top:1rem;}
.equip_card .equip_info dl {display:grid; grid-template-columns:6rem 1fr; gap:2rem; font-size:1.5rem;}
.equip_card .equip_info dl dd {color:var(--fontcolor3);}

.equip_hover {display:none; transition:all 0.3s;}
.equip_card:hover .equip_hover {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:3rem; padding:4rem 2.4rem 2.4rem;}
.equip_card:hover .equip_hover::before {
	content:""; position:absolute; inset:0; background-image:var(--hover-img, none); background-size:cover; 
	background-position:center center; background-repeat:no-repeat; filter:grayscale(1);
}
.equip_card:hover .equip_hover::after {content:""; position:absolute; inset:0; background-image:linear-gradient(to bottom, rgba(9,111,176,0.9), rgba(34,34,34,0.9));}
.equip_card:hover .equip_hover > * {position:relative; z-index:1;}

.equip_hover .equip_name h4 {color:var(--white);}
.equip_hover .equip_name p {color:rgba(255,255,255,0.6);}
.equip_hover .equip_desc {flex:1; min-height:0; overflow:hidden;}
.equip_hover .equip_desc pre{
	font-family:var(--fontKor); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; 
	white-space:pre-wrap; font-size:1.5rem; line-height:1.6; color:rgba(255,255,255,0.8); 
	text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; overflow:hidden;
}
.equip_hover .btn_reserve {width:100%; height:5rem; display:flex; justify-content:center; align-items:center; font-size:1.6rem; color:var(--white); text-align:center; border-radius:4px; background:rgba(255,255,255,0.2);}

/* swiper slider buttons */
.slide_buttons {width:100%; position:absolute; top:65%; z-index:5; transform:translateY(-50%);}
.slide_buttons .pn_btns {
	position:absolute; width:6rem; height:6rem; display:flex; justify-content:center; align-items:center; 
	font-size:2.8rem; color:var(--black); text-align:center; border-radius:50%; border:1px solid #ddd; background:var(--white);
}
.slide_buttons .pn_btns.prev {left:-7rem;}
.slide_buttons .pn_btns.next {right:-7rem;}

@media screen and (max-width: 1680px){
	.slide_buttons .pn_btns.prev {left:-2rem;}
	.slide_buttons .pn_btns.next {right:-2rem;}
}
@media screen and (max-width: 1280px){
	.main_equip {padding:8rem 0;}
	.equip_head .equip_title {padding-left:6rem;}
}
@media screen and (max-width: 1200px){
	.equip_wrap {gap:4rem;}
	.equip_head .equip_title {padding-left:4rem;}
	.equip_head .equip_title h3 {font-size:3.6rem;}
}
@media screen and (max-width: 1025px) {
	.main_equip {padding:6rem 0;}
	
	.equip_tag {font-size:1.6rem;}
}
@media screen and (max-width: 769px){
	.equip_head {flex-direction:column; align-items:flex-start;}
	.equip_head .equip_title {gap:1.6rem; padding:0 2.4rem;}
	.equip_head .equip_title h3 {font-size:3.2rem; line-height:1.4;}
	.equip_head .equip_title p {font-size:1.7rem;}
	
	.equip_more {align-self:flex-end; margin-right:2.4rem;}
}
@media screen and (max-width: 481px){
}