@charset "utf-8";

 /* 메인-레이어팝업 */
.main_layer_popup {position:absolute; z-index:12;}
.main_layer_popup > div {width:100%; font-size:15px; padding:10px; margin:0 auto; overflow:auto; border-radius:5px 5px 0 0; border:1px solid #ccc; border-bottom:none; background:#fff;}
.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:#fff; 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 {color:#1f1f1f; letter-spacing:0; padding-left:5px; background:#eee;}
.main_layer_popup > span button.close {color:#fff; background:#3a7ecd;}

@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:95% !important; height:auto !important;}
	.main_layer_popup > * {width:95% !important;}
	.main_layer_popup > div {height:auto !important;}
	.main_layer_popup img {width:100% !important; height:auto !important;}
}



/* 메인공통레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.main_wrap {position:relative; width:100%; overflow:hidden;}
.main_container {margin:6rem auto;}
.main_container article ~ article {margin-top:6rem;}
.main_container article .inner {display:flex; row-gap:3rem;}

@media screen and (max-width: 1200px){
	.main_container {margin:4rem auto 0;}
	.main_container article ~ article {margin-top:4rem;}
}

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

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

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


/* 타이틀영역 */
.main_title_wrap {display:flex; justify-content:space-between; align-items:flex-end; gap:4rem;}
.main_title_wrap.row {flex-direction:column; justify-content:flex-start; align-items:flex-start;}

.main_title {display:flex; flex-direction:column; gap:1rem;}
.main_title span {font-family:"Pretendard"; font-size:2rem; font-weight:500; color:#3a7ecd;}
.main_title h3 {font-size:4.2rem; color:#222; font-weight:500;}

@media screen and (max-width: 1200px){
	.main_title span {font-size:1.6rem;}
	.main_title h3 {font-size:3.2rem;}
}

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

@media screen and (max-width: 769px){
	.main_title_wrap.row {flex-direction:row; justify-content:space-between; align-items:flex-end;}
}

@media screen and (max-width: 481px){
	.main_title h3 {font-size:2.8rem;}
}


/* 자세히보기 */
.viewmore {width:14rem; height:4.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; text-align:center; padding:1rem 2rem; border-radius:50em; background:#222;}
.viewmore * {color:#fff;}
.viewmore span {font-family:"Pretendard"; font-size:1.4rem; line-height:100%; font-weight:500;}
.viewmore i {font-size:1.3rem; transform:rotate(-45deg); opacity:0.5;}




/* 메인콘텐츠 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 메인비주얼 */
.main_visual {width:100%; height:60rem; background:url('../images/main/main_illust_bg.jpg') center center no-repeat, #f1f1f1; background-size:cover;}

.slogan {width:100%; max-width:1500px; height:100%; display:flex; flex-direction:column; justify-content:center; gap:3rem; padding:8rem 5rem 0; margin:0 auto;}
.slogan h2 {font-size:6.4rem; font-weight:bold; color:#081638;}
.slogan p {font-family:"Pretendard"; font-size:2.8rem; letter-spacing:0.11em; font-weight:500; color:rgba(8,22,56,0.4);}

@media screen and (max-width: 1200px){
	.main_visual {height:40rem;}
	
	.slogan {padding:5.5rem 5rem 0 ; gap:2rem;}
	.slogan h2 {font-size:4.8rem;}
	.slogan p {font-size:2.4rem; letter-spacing:0.03em;}
}

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

@media screen and (max-width: 769px){
	.main_visual {height:30rem;}
	
	.slogan {padding:5.5rem 3rem 0;}
	.slogan h2 {font-size:3.6rem;}
	.slogan p {display:none;}
}

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


/* 프로그램 */
.main_program .inner {flex-direction:column;}
.main_program .buttons {display:flex; flex-wrap:wrap; align-items:center; gap:1rem;}
.main_program .buttons button {width:4.5rem; height:4.5rem; display:flex; justify-content:center; align-items:center; border-radius:50%; background:#ccc;}
.main_program .buttons button i {font-size:1.8rem; line-height:0; color:#fff;}

.no_program {font-size:2rem; font-weight:500; color:#555; text-align:center; padding:8rem 3rem; border-radius:1rem; border:1px solid #ddd; background:#fff;} /* 프로그램 존재하지 않을 때 */

#programCard.slick-slider, #programCard .slick-list {margin:0; padding:0;} /* slick slider 설정 변경 */
#programCard.slick-slider {margin:0 -1rem;}
#programCard .slick-track {margin:0;}
#programCard .slick-list {display:block;}
#programCard .slick-slide {display:flex; flex-direction:column; gap:2rem; margin:0 1rem;}
#programCard .slick-slide > div {display:flex; gap:2rem;}

.program_card {border-radius:5px; border:1px solid #ccc; background:#fff; transition:all 0.3s;}
.program_card:hover {border-color:#2460a4; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.program_card .thumbnail {width:100%; height:18rem; border-radius:5px 5px 0 0; background:#fff; overflow:hidden;}
.program_card .thumbnail img {width:100%; height:100%; object-fit:contain;}
.program_card .info {padding:2rem; border-top:1px solid #ccc;}
.program_card .info > p {display:flex; flex-wrap:wrap; align-items:center; gap:2rem;}
.program_card .info > p span {position:relative; font-size:1.4rem; color:#777;}
.program_card .info > p span ~ span::after {content:""; display:block; position:absolute; left:-1rem; top:3px; width:1px; height:1.2rem; background:#777; opacity:0.8;}
.program_card .info > div {display:grid; grid-template-columns:1fr 6rem; gap:3rem; margin:5px 0 2rem 0;}
.program_card .info > div h3 {height:50px; display:-webkit-box !important; font-size:1.8rem; line-height:1.4; font-weight:500; color:#222; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden;}
.program_card .info > div em {height:2.5rem; display:flex; justify-content:center; align-items:center; text-align:center; font-size:1.2rem; line-height:100%; color:#fff; border-radius:5em; background:#777;}
.program_card .info > ul {display:flex; flex-direction:column; gap:1rem;}
.program_card .info > ul li {display:grid; grid-template-columns:6rem 1fr; gap:1rem;}
.program_card .info > ul li * {font-size:1.4rem; color:#777; word-break:keep-all;}
.program_card .info > ul li b {font-weight:normal; color:#333;}
.program_card .info > ul li strong {color:#222; padding-right:3px;}

.program_card .info > p.wait span {color:#7b68ba;} /* 접수준비 */
.program_card .info > p.wait span ~ span::after {background:#7b68ba;}
.program_card .info > div em.wait {background:#7b68ba;}

.program_card .info > p.accept span {color:#e4a035;} /* 접수중 */
.program_card .info > p.accept span ~ span::after {background:#e4a035;}
.program_card .info > div em.accept {background:#e4a035;}

.program_card .info > p.start span {color:#01a8cd;} /* 진행중 */
.program_card .info > p.start span ~ span::after {background:#01a8cd;}
.program_card .info > div em.start {background:#01a8cd;}

.program_card .info > p.todo span {color:#199eff;} /* 진행예정 */
.program_card .info > p.todo span ~ span::after {background:#199eff;}
.program_card .info > div em.todo {background:#199eff;}

@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_program .buttons button {display:none !important;}
}


/* 공지사항 */
.main_news .news_wrap {padding:6rem 0; margin:0 10rem; border-radius:3rem; background:url('../images/main/main_news_bg.png') left -5rem top 15rem no-repeat, #f7f9ff;}
.main_news .inner {justify-content:space-between; column-gap:15rem;}
.main_news ul {flex:1; max-height:27rem; position:relative; display:grid; grid-template-rows:repeat(3, minmax(9rem, 1fr));}
.main_news ul::after {content:""; display:block; position:absolute; left:0; top:0; width:200%; height:1px; background:#222;}
.main_news ul li {display:flex; justify-content:space-between; align-items:center; gap:4rem; padding:0 3rem; border-bottom:1px solid #ccc; background:transparent; overflow:hidden;}
.main_news ul li > * {display:flex; flex-direction:column;}
.main_news ul li > div {font-family:"Pretendard"; justify-content:center; align-items:center; gap:5px;}
.main_news ul li > div b {font-size:2.8rem; font-weight:bold; color:#222;}
.main_news ul li > div span {font-size:1.4rem; font-weight:500; color:#999;}
.main_news ul li > dl {flex:1; gap:8px; overflow:hidden;}
.main_news ul li > dl * {white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.main_news ul li > dl dt {font-size:1.8rem; font-weight:500; color:#222;}
.main_news ul li > dl dd {font-size:1.5rem; color:#777;}
.main_news ul li > dl dd * {
	all:unset; font-family:"NotoSansKR" !important; font-size:1.5rem !important; font-weight:normal !important; line-height:1.2 !important; color:#777 !important; background:transparent !important;
} /* 에디터에서 등록한 내용-메인스타일대로 노출되게 css 설정변경 */
.main_news ul li > dl dd img {display:none;} /* 에디터에 등록한 내용이 이미지인 경우, 보이지 않게 처리 */

.main_news ul li:hover {background:#3a7ecd;}
.main_news ul li:hover * {color:rgba(255,255,255,0.8);}
.main_news ul li:hover > dl dt {color:#fff;}
.main_news ul li:hover > dl dd * {color:#fff !important;}

.main_news ul li.no_news {grid-row:span 3; justify-content:center; align-items:center; font-size:2rem; font-weight:500; color:#555; text-align:center;} /* 공지사항 존재하지 않을 때 */
.main_news ul li.no_news:hover {background:transparent;}

@media screen and (max-width: 1600px){
	.main_news .news_wrap {margin:0 5rem;}
}

@media screen and (max-width: 1200px){
	.main_news .inner {column-gap:6rem;}
	.main_news .news_wrap {margin:0; border-radius:0;}
}

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

@media screen and (max-width: 769px){
	.main_news .inner {flex-direction:column;}
	.main_news ul li {gap:3rem; padding:0 1.5rem;}
}

@media screen and (max-width: 481px){
	.main_news .main_title_wrap a {align-self:flex-end;}
	.main_news ul li > div {display:none;}
}