﻿@charset "utf-8";
/* 레이어팝업 */
.layerPopup {position:absolute; background:#fff; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);}
.layerPopup > div {width:100%; overflow:hidden;}
.layerPopup > .popup-bottom {display:flex; justify-content:space-between; padding:12px; background:#f8fafd; border-top:1px solid #ddd;}
.layerPopup > .popup-bottom > a {font-size:1.4rem; font-weight:500;}

@media screen and (max-width: 1200px){
	.layerPopup {width:80% !important; min-width:auto; left:50% !important; transform:translateX(-50%); z-index:9 !important;}
	.layerPopup div {width:100% !important; height:auto !important;}
	.layerPopup img {width:100% !important; height:auto !important;}
	
	#layer_0 {top:110px !important; left:15% !important; transform:translate(-15%);}
	#layer_1 {top:150px !important;}
	#layer_2 {top:170px !important; left:40% !important; transform:translate(-40%);}
	#layer_3 {top:190px !important; left:25% !important; transform:translate(-25%);}
	#layer_4 {top:210px !important; left:60% !important; transform:translate(-60%);}
}

/* 명지대 반도체특성화대학사업단 - 메인  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 공통 */
.main-wrap > section ~ section {padding:5rem 0;}
.main-wrap section {--contBottomHeight:22rem; --contTitleHeight:8rem; --contNameHeight:4rem; --contInforHeight:calc(100% - 12rem); --contListHeight:calc(100% - 8rem);}
.main-wrap .mn-title {display:flex; align-items:center; justify-content:space-between; height:var(--contTitleHeight); padding:0 4rem;}
.main-wrap .mn-title h3 {font-size:2.2rem; font-weight:700;}
.main-wrap .mn-btns {display:flex; gap:1.5rem;}
.main-wrap .mn-btn {position:relative; width:3rem; height:3rem; border-radius:0.5rem; overflow:hidden; font-size:1.8rem;}
.main-wrap .mn-btn::before {content:""; position:absolute; width:100%; height:100%; transition:all 0.3s;}
.main-wrap .mn-btn a {position:relative; display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.main-wrap .mn-btn.mn-more::before {background:#fff; opacity:0.2;}
.main-wrap .mn-btn.mn-more a {color:#fff; opacity:0.6;}
.main-wrap .mn-btn.mn-more:hover::before {opacity:0.5;}
.main-wrap .mn-btn.mn-more:hover a {opacity:1;}
.main-wrap .mn-none {display:flex; justify-content:center; align-items:center; padding:0 3rem; font-size:1.8rem; text-align:center; word-break:keep-all;}

/* ## 메인비주얼 ## */
.mn-visual {
	position:relative; height:550px; overflow:hidden; word-break:keep-all;
	background:url('/static_root/images/main/visualBG.jpg') center 25% no-repeat; background-size:cover;
}
.mn-visual::before {
	content:""; position:absolute; top:0; left:0; width:100%; height:100%;
	background: url("/static_root/images/main/gradientBG.png"); background-size:cover; z-index:1;
}
.mn-visual::after {
	content:""; position:absolute; top:0; right:0; width:42%; height:100%;
	background: rgba(0,46,102,0.5);
}
.mn-visual .innerUser {position:relative; height:100%; display:flex; justify-content:space-between; align-items:center; gap:50px; z-index:2;}
.mn-visual .mn-slogun * {color:#fff;}
.mn-visual .mn-slogun p {font-size:2.4rem; font-weight:400;}
.mn-visual .mn-slogun p:last-child {font-size:2rem;}
.mn-visual .mn-slogun p em {font-weight:700;}
.mn-visual .mn-slogun h2 {font-size:5rem; font-weight:400; margin:2.2rem 0;}
.mn-visual .mn-slogun h2 em {font-weight:800;}
.mn-visual .mn-quick ul {display:flex; flex-direction:column; gap:3.5rem; }
.mn-visual .mn-quick ul li a {display:flex; align-items:center; gap:3.5rem; width:40rem; height:10rem; padding:0 4rem; background:#fff; border-radius:0.5rem;}
.mn-visual .mn-quick ul li a > img {width:3.3rem;}
.mn-visual .mn-quick ul li a > span {font-size:1.8rem; font-weight:700; margin-right:auto;}
.mn-visual .mn-quick ul li a > i {color:#005aa0; font-size:1.6rem;}
.mn-visual .mn-quick ul li a:hover {background:#005aa0;}
.mn-visual .mn-quick ul li a:hover * {color:#fff;}


/* ## 특강 및 세미나 ## */
.mn-prog .prog-infor {display:flex; justify-content:space-between; align-items:center; margin-bottom:4rem;}
.mn-prog .prog-title h3 {font-size:3rem; font-weight:800; word-break:keep-all;}
.mn-prog .prog-title p {margin-top:1rem; color:#767676; font-size:1.8rem; word-break:keep-all;}
.mn-prog .mn-btn {width:4rem; height:4rem; font-size:2rem;}
.mn-prog .prog-btns .prog-prev,
.mn-prog .prog-btns .prog-next {border:1px solid #e4e4e4; transition:all 0.3s;}
.mn-prog .prog-btns .prog-prev:hover,
.mn-prog .prog-btns .prog-next:hover {background:#f5f5f5;}
.mn-prog .prog-btns .prog-more::before {background:#008fd5; opacity:1;}
.mn-prog .prog-btns .prog-more a {color:#fff; opacity:1;}
.mn-prog .prog-btns .mn-btn:hover::before {opacity:0.6;}
.mn-prog .slick-slide {margin:0 10px; box-sizing:content-box;}
.mn-prog .slick-list {position:relative; overflow:unset;}
.mn-prog .slick-list::after {content:""; position:absolute; top:0; left:100%; width:100vw; height:100%; background:#fff; z-index:10;}
.mn-prog .slick-list::before {content:""; position:absolute; top:0; right:100%; width:100vw; height:100%; background:#fff; z-index:10;}

.mn-prog .prog-wrap {margin:0 -10px;}
.mn-prog .prog-wrap .slick-track {margin:unset;} /* 프로그램이 5개 미만일 때 왼쪽 정렬 */
.mn-prog .prog-wrap .prog-card {position:relative; border:1px solid #e4e4e4; border-radius:0.5rem; overflow:hidden; transition:all 0.3s;}
.mn-prog .prog-wrap .prog-card:hover {box-shadow:0 0 10px 1px rgba(0,0,0,0.15);}
.mn-prog .prog-wrap .prog-card .prog-top {display:flex; flex-direction:column; justify-content:center; gap:0.5rem; height:6.5rem; padding-left:1.5rem; color:#fff; font-size:1.8rem; font-weight:900;}
.mn-prog .prog-wrap .prog-card .prog-top .prog-year {font-size:1.4rem; font-weight:600;}
.mn-prog .prog-wrap .prog-card .prog-top em {padding:0.3rem 0.8rem; margin-right:0.6rem; background:#fff; border-radius:5rem; font-size:1.4rem;}
.mn-prog .prog-wrap .prog-card .prog-prop {display:flex; flex-direction:column; gap:2rem; padding:1.5rem;}
.mn-prog .prog-wrap .prog-card .prog-prop .prog-intro {display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; font-size:1.3rem;}
.mn-prog .prog-wrap .prog-card .prog-name {color:#222; font-size:1.7rem; font-weight:800;}
.mn-prog .prog-wrap .prog-card .prog-stat {padding:0.3rem 0.8rem; border-radius:5rem; color:#fff; font-weight:500;}
.mn-prog .prog-wrap .prog-card .prog-stat.prog-end-stat {background:#777;}
.mn-prog .prog-wrap .prog-card .prog-detail {display:flex; flex-direction:column; gap:0.7rem; font-size:1.4rem;}
.mn-prog .prog-wrap .prog-card .prog-detail li {display:flex; flex-wrap:wrap; gap:1px 5px; color:#666;}
.mn-prog .prog-wrap .prog-card .prog-detail li b {font-weight:600; color:#232323;}

/* 프로그램 카테고리 별 레이아웃 */
.mn-prog .prog-wrap .field-card .prog-top {background:#6492de url("/static_root/images/common/prog_bg1.jpg") right center no-repeat; background-size:contain;}
.mn-prog .prog-wrap .field-card .prog-top em {color:#3f73bc;}
.mn-prog .prog-wrap .field-card .prog-stat,
.mn-prog .prog-wrap .field-card .prog-hover-more {background:#3f73bc;}
.mn-prog .prog-wrap .semina-card .prog-top {background:#ffb400 url("/static_root/images/common/prog_bg2.jpg") right center no-repeat; background-size:contain;}
.mn-prog .prog-wrap .semina-card .prog-top em {color:#ce8b00;}
.mn-prog .prog-wrap .semina-card .prog-stat,
.mn-prog .prog-wrap .semina-card .prog-hover-more {background:#ce8b00;}
.mn-prog .prog-wrap .academy-card .prog-top {background:#a3cb6d url("/static_root/images/common/prog_bg3.jpg") right center no-repeat; background-size:contain;}
.mn-prog .prog-wrap .academy-card .prog-top em {color:#79a146;}
.mn-prog .prog-wrap .academy-card .prog-stat,
.mn-prog .prog-wrap .academy-card .prog-hover-more {background:#79a146;}
.mn-prog .prog-wrap .etc-card .prog-top {background:#9d87de url("/static_root/images/common/prog_bg4.jpg") right center no-repeat; background-size:contain;}
.mn-prog .prog-wrap .etc-card .prog-top em {color:#7c68bb;}
.mn-prog .prog-wrap .etc-card .prog-stat,
.mn-prog .prog-wrap .etc-card .prog-hover-more {background:#7c68bb;}
.mn-prog .prog-none {
	display:flex; justify-content:center; align-items:center; height:15rem; padding:2rem;
 	border:2px solid #e6e6e6; border-radius:0.5rem; word-break:keep-all; text-align:center;
}
 
.mn-prog .prog-wrap .prog-hover {
	position:absolute; top:0; left:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2rem;
	width:100%; height:100%; padding:2rem; background:rgba(0,0,0,0.7); border-radius:5px; opacity:0; color:#fff;
}
.mn-prog .prog-wrap .prog-hover .prog-hover-stat em {padding:0.3rem 0.8rem; background:#fff; border-radius:5rem; color:#1f1f1f; font-size:1.4rem; font-weight:900;}
.mn-prog .prog-wrap .prog-hover .prog-hover-stat {display:flex; align-items:center; gap:0.6rem; font-size:1.4rem;}
.mn-prog .prog-wrap .prog-hover .prog-hover-title {font-size:1.6rem; font-weight:700; margin-bottom:4rem;}
.mn-prog .prog-wrap .prog-hover .prog-hover-more {position:absolute; bottom:0; left:0; width:100%; padding:8px; font-weight:700; text-align:center;}
.mn-prog .prog-wrap .prog-card:hover {border-color:#ddd !important;}
.mn-prog .prog-wrap .prog-card:hover .prog-hover {opacity:1; transition:all 0.2s;}


/* ####==== 메인 기타 컨텐츠 ====#### */
.mn-cont-wrap {position:relative; background:#f8fafb; overflow:hidden;}
.mn-cont-wrap::before,
.mn-cont-wrap::after {
	content:""; position:absolute; width:415px; height:544px; 
	background:url("/static_root/images/main/bgPattern.png") 0 0 no-repeat; background-size:cover; z-index:0;
}
.mn-cont-wrap::before {top:25px; left:-25px; transform:rotate(180deg);}
.mn-cont-wrap::after {bottom:50px; right:-50px;}
.mn-cont-wrap .innerUser {display:grid; grid-template-columns:40rem 1fr; gap:2rem;}
.mn-cont-wrap .innerUser section {border-radius:0.5rem; z-index:1;}
.mn-cont-wrap .innerUser:last-child {grid-template-columns:1fr 1fr;}
.mn-cont-wrap .card-name {
	position:relative; display:flex; justify-content:space-between; align-items:center;
	height:var(--contNameHeight); padding:0 5rem; background:rgba(0,0,0,0.1); font-size:1.6rem;
}
.mn-cont-wrap .card-name::after {content:""; position:absolute; top:50%; left:4rem; transform:translateY(-50%); width:2px; height:15px; background:#fff;}
.mn-cont-wrap .card-infor {display:flex; align-items:center; height:var(--contInforHeight); padding:0 4rem; font-size:1.6rem;}
.mn-cont-wrap .card-infor p {line-height:1.4;}

/* ## 일정 안내 ## */
.mn-plan {position:relative; background:#fff; border:1px solid #ddd;}
.mn-plan .plan-title {background:#f7f8fc; border-radius:5px 5px 0 0;}
.mn-plan .plan-btns .plan-more a {color:#fff;}
.mn-plan .plan-btns .plan-more::before {background:#008fd5; opacity:1;}
.mn-plan .plan-btns .plan-more:hover::before {opacity:0.6;}
.mn-plan .plan-wrap {display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem; padding:2rem 3rem; height:var(--contListHeight);}
.mn-plan .planner table {width:100%;}
.mn-plan .planner table thead th {height:3.3rem; text-align:center; color:#999; vertical-align:top;}
.mn-plan .planner table tbody td {height:3.5rem; text-align:center;}
.mn-plan .planner table tbody td.today {border-radius:5px; background:#0186d1; color:#fff;}
.mn-plan .planner table tbody td a {position:relative; display:flex; justify-content:center; align-items:center; height:100%; text-decoration:none;}
.mn-plan .planner table tbody td.today a {color:#fff;} 
.mn-plan .planner table tbody td:nth-child(1),
.mn-plan .planner table tbody td:nth-child(1) a {color:#0374b2;}
.mn-plan .planner table tbody td:nth-child(7),
.mn-plan .planner table tbody td:nth-child(7) a {color:#e95d59;}
.mn-plan .planner table tbody td a::before {content:""; position:absolute; top:2px; left:50%; display:inline-block; width:4px; height:4px; border-radius:50%; background:#0186d1; transform:translateX(-50%);}
.mn-plan .plan-infor {padding:1rem 1.2rem; border-radius:5px; background:#f7f8fc;}
.mn-plan .plan-infor p {position:relative; font-size:1.4rem; padding-left:1rem; word-break:keep-all;}
.mn-plan .plan-infor p::after {content:""; position:absolute; top:6px; left:0; width:4px; height:4px; border-radius:50%; background:#0186d1;}

.mn-plan .plan-pop {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:80%; height:80%; background:#fff; border:1px solid #ddd; border-radius:0.5rem;}
.mn-plan .plan-pop .mn-title {height:6rem; padding:0 2rem; background:#f7f8fc;}
.mn-plan .plan-pop .mn-title h3 {font-size:1.6rem;}
.mn-plan .plan-pop ul {height:calc(100% - 6rem); padding:3rem; overflow-x:hidden; overflow-y:auto;}
.mn-plan .plan-pop ul li {position:relative; padding:0 0 2rem 2rem; font-size:1.4rem; word-break:keep-all;}
.mn-plan .plan-pop ul li::before {content:""; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%; background:#008fd5;}
.mn-plan .plan-pop ul li::after {content:""; position:absolute; left:2px; top:12px; height:100%; border:1px dashed #e4e4e4;}
.mn-plan .plan-pop ul li:last-child {padding-bottom:0;}
.mn-plan .plan-pop ul li:last-child::after {display:none;} 

/* ## 새로운 소식 ## */
.mn-news {background:#fff; border:1px solid #ddd; z-index:1;}
.mn-news .news-more::before {background:#f0f0f0; opacity:1;}
.mn-news .news-more a {color:#808080; opacity:1;}
.mn-news .news-more:hover::before {background:#e6e6e6;}
.mn-news .news-more:hover a {color:#505050;}
.mn-news .card-list {height:var(--contListHeight); padding:0 3rem 2rem; word-break:keep-all;}
.mn-news .card-list ul {display:grid; grid-template-rows:repeat(5, 1fr); border-top:2px solid #000;}
.mn-news .card-list ul:has(li.news-none) {display:block; height:100%;}
.mn-news .card-list ul li a {display:grid; grid-template-columns:50px 1fr; align-items:center; gap:2rem; padding:1rem; border-bottom:1px solid #ccc;}
.mn-news .card-list ul li a:hover {background:#f9f9f9;}
.mn-news .card-list ul li a span {text-align:center; color:#999; font-size:1.3rem;}
.mn-news .card-list ul li a span b {display:block; color:#008fd5; font-size:1.8rem; font-weight:700;}
.mn-news .card-list ul li a strong {color:#333;}
.mn-news .card-list li.news-none {height:100%; min-height:10rem; border-bottom:1px solid #ddd;}

/* ## 기업 소개 ## */
.mn-comp {height:var(--contBottomHeight); background:#008fd5; color:#fff;}
.mn-comp .comp-logo {height:28px; object-fit:contain; filter:brightness(0) invert(1); opacity:0.3;}
.mn-comp .card-none {height:var(--contListHeight); background:rgba(0,0,0,0.1); border-radius:0 0 5px 5px;}

/* ## 채용 정보 ## */
.mn-job {height:var(--contBottomHeight); background:#005aa0; color:#fff;} 

@media screen and (max-width: 1400px){
	.mn-visual .mn-slogun h2 em {display:block;}
}
@media screen and (max-width: 1200px){
	.mn-visual .mn-quick ul li a {width:35rem; gap:2.5rem;}
}

@media screen and (max-width: 1025px){
	
	.mn-visual::after {width:100%;}
	.mn-visual .innerUser {flex-direction:column; justify-content:center; align-items:flex-start; gap:3rem;}
	.mn-visual .mn-slogun h2 {font-size:3.5rem; margin:1.2rem 0;}
	.mn-visual .mn-quick {width:100%;}
	.mn-visual .mn-quick ul {justify-content:space-between; gap:1.5rem;}
	.mn-visual .mn-quick ul li a {width:100%; height:7.5rem;}
	
	.mn-prog .prog-infor {flex-direction:row; justify-content:space-between; align-items:center; width:100%; margin-bottom:3rem;}
	.mn-prog .prog-btns .mn-btn {width:3rem; height:3rem; font-size:1.8rem;}
	
	.mn-cont-wrap {--contBottomHeight:20rem; --contTitleHeight:7rem; --contInforHeight:calc(100% - 11rem); --contListHeight:calc(100% - 7rem);}
	.mn-cont-wrap::before, .mn-cont-wrap::after {width:265px; height:394px; opacity:0.6;}
	.mn-cont-wrap .innerUser {grid-template-columns:1fr !important;}
	.mn-cont-wrap .mn-title {padding:0 2rem;}
	.mn-cont-wrap .card-infor {padding:0 2rem;}
	.mn-cont-wrap .card-name {padding:1rem 3rem;}
	.mn-cont-wrap .card-name::after {left:2rem;}
	
	.mn-plan .plan-wrap {padding:2rem;}
	.mn-plan .plan-pop ul {padding:3rem 2rem;}
	
	.mn-news .card-list {padding:0 2rem 2rem;}
	.mn-news .card-list ul {grid-template-rows:1fr;}
	.mn-news .card-list ul li a {grid-template-columns:50px 1fr; gap:1rem; padding:1rem 0.5rem;}
	
	.mn-prom .comp-logo {display:none;}
}

@media screen and (max-width: 769px){
	.main-wrap .mn-title h3 {font-size:1.9rem;}
	
	.mn-visual {height:450px;}
	.mn-visual .innerUser{gap:3rem;}
	.mn-visual .mn-slogun p {font-size:1.8rem;}
	.mn-visual .mn-slogun p:last-child {font-size:1.6rem;}
	.mn-visual .mn-quick ul li a {padding:0 2rem; height:6rem;}
	.mn-visual .mn-quick ul li a > img {display:none;}
	.mn-visual .mn-quick ul li a > span {font-size:1.6rem;}
	
	.mn-prog .prog-infor {align-items:flex-end; gap:2rem;}
	.mn-prog .prog-title h3 {margin:0; font-size:2.5rem;}
	.mn-prog .prog-title p {display:none;}
	.mn-prog .prog-btns {gap:1rem;}
	
	.mn-plan .plan-btns {gap:0.5rem;}
}