@charset "utf-8";



/* 메인  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 레이어팝업 - 메인 */
.layerPopup {position:absolute; background:#fff; z-index:999999;
    box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.30);
    -moz-box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.30);
    -webkit-box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.30);
}
.layerPopup > div.popupTitle {min-height:40px; color:#222; font-size:20px; font-weight:500; box-sizing:border-box; padding:8px 13px 2px 13px; background:#f7f8fc; border-bottom:1px solid #e1e1e1;}
.layerPopup > div.popCnt {width:100%; overflow:hidden; box-sizing:border-box; padding:20px 15px;}
.layerPopup > div.surveyBtn {text-align:center; padding-bottom:15px;}
.layerPopup > div.surveyBtn > a {display:inline-block; background:#f2f2f2; border-radius:20px; padding:5px 20px; text-align:center; color:#333; letter-spacing:-1px; font-weight:bold;}
.layerPopup > div.surveyBtn > a:hover {color:#2a659f;}
.layerPopup > dl {padding:5px 10px; font-size:12px; color:#fff; letter-spacing:-1px; background:#204372; overflow:hidden;}
.layerPopup > dl > dt {float:left; cursor:pointer;}
.layerPopup > dl > dd {float:right; cursor:pointer;}

@media all and (max-width: 1199px){
}

@media all and (max-width: 989px){
	.layerPopup {width:80% !important; height:auto !important; left:50% !important; transform:translate(-50%);}
	.layerPopup img {width:100% !important; height:auto !important;}
}

@media all and (max-width: 767px){
}

@media all and (max-width: 479px){
}






/* 콘텐츠영역 - 메인 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 공통영역 */
#mainCont {overflow:hidden;}
.main-cont {width:100%; background:#fff;}
.main-cont-wrap {width:1200px; margin:0 auto; box-sizing:border-box; padding:30px 0; overflow:hidden;}

.main-cont-title {margin-bottom:20px; overflow:hidden;}
.main-cont-title > h3 {float:left; font-size:22px; line-height:22px; font-weight:500; color:#222;}
.main-cont-title > a {float:right; display:inline-block; font-size:15px; line-height:22px; color:#003263;}
.main-cont-title > a > span {display:inline-block; margin-right:10px;}
.main-cont-title > a > img {margin-top:-5px;}

@media all and (max-width: 1199px){
	.main-cont-wrap {width:970px;}
}

@media all and (max-width: 989px){
	.main-cont-wrap {width:100%; padding:30px 20px;}
}

@media all and (max-width: 767px){
}

@media all and (max-width: 479px){
}


/* 메인 슬라이드 */
#mainVisual {position:relative; /* width:100%; height:300px; */ overflow:hidden;}
#mainVisual .slick-slide {position:relative; float:left; display:block; height:100%; /* height:300px; */ min-height:1px; margin:0 auto; margin:0 auto; background-size:cover !Important;}
#mainVisual .slick-slide:after {content:""; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.5);}
#mainVisual .slick-slide span {display:block; height:0; padding-bottom:25%; background-repeat:no-repeat !important; background-position:50% 50% !important; background-size:cover !Important;}
#mainVisual .slick-active:after {display:none;}

#mainVisual .slick-prev {position:absolute; bottom:42%; left:calc(50% - 685px); display:table; width:55px; height:55px; text-align:center; border-radius:50%; background:rgba(77,83,97,0.6); z-index:99; cursor:pointer;}
#mainVisual .slick-next {position:absolute; bottom:42%; right:calc(50% - 685px); display:table; width:55px; height:55px; text-align:center; border-radius:50%; background:rgba(77,83,97,0.6); z-index:99; cursor:pointer;}
#mainVisual .slick-prev span, #mainVisual .slick-next span {display:table-cell; vertical-align:middle;}

@media all and (max-width: 1400px){
	#mainVisual .slick-prev {left:calc(50% - 590px);}
	#mainVisual .slick-next {right:calc(50% - 590px);}
}
@media all and (max-width: 1199px){
	#mainVisual .slick-prev {left:calc(50% - 470px);}
	#mainVisual .slick-next {right:calc(50% - 470px);}
}

@media all and (max-width: 989px){
	/* #mainVisual {height:250px;}
	#mainVisual .slick-slide {height:250px;}
	#mainVisual .slick-prev {left:10px;}
	#mainVisual .slick-next {right:10px;} */
}

@media all and (max-width: 767px){
	/* #mainVisual {height:200px;}
	#mainVisual .slick-slide {height:200px;} */
}

@media all and (max-width: 479px){
}


/* 사용자 만족도 조사 */
.mainSvQ .main-cont-wrap {padding:30px 0 30px 2px;}
.mc-survey {float:left; width:33%; height:222px; margin-right:2%; box-sizing:border-box; padding:20px; border-radius:5px; background:#fff; box-shadow:1px 1px 8px rgba(113,113,121,0.15);}
.mc-survey > h2 {font-size:18px; color:#333; text-align:center;}
.mc-survey > h2 strong {display:inline-block; font-size:22px; color:#222; margin-right:3px;}
.mc-survey > p {margin:10px 0 15px 0; font-size:16px; color:#555; text-align:center;}
.mc-survey > ul {box-sizing:border-box; padding:10px 0; border-radius:5px; background:#f7f8fc; overflow:hidden;}
.mc-survey > ul > li {width:33.3333%; letter-spacing:-1.5px; box-sizing:border-box;}
.mc-survey > ul > li:nth-child(1) {float:left;}
.mc-survey > ul > li:nth-child(2) {float:left; border-left:1px dashed rgba(193,197,206,0.5); border-right:1px dashed rgba(193,197,206,0.5);}
.mc-survey > ul > li:nth-child(3) {float:right;}
.mc-survey > ul > li > a {display:block; text-align:center; box-sizing:border-box;}
.mc-survey > ul > li > a > strong {display:block; font-size:14px; line-height:20px; font-weight:500; color:#454f63; margin-bottom:5px;}
.mc-survey > ul > li > a > span {display:block; font-size:16px; color:#454f63;}
.mc-survey > ul > li > a > span > strong {display:inline-block; font-size:22px; line-height:22px; color:#f36666; margin-right:3px;}
.mc-survey > ul > li > a:hover > span > strong {text-decoration:dashed underline 1px #222;}
.mc-survey > span {display:block; width:100%; height:90px; background:url('../images/main/main_suv_img.png') center center no-repeat;}
/* .mc-survey > div {margin-top:10px;}
.mc-survey > div > a {display:block; font-size:16px; line-height:45px; font-weight:500; color:#fff; text-align:center; border-radius:3px; background:#003263;}
.mc-survey > div > a:hover {background:#00284f;}
.mc-survey > div > a > span {display:inline-block; margin-right:10px;}
.mc-survey > div > a > img {margin-top:-5px;} */

@media all and (max-width: 1199px){
}

@media all and (max-width: 989px){
	.mainSvQ .main-cont-wrap {padding:30px 20px;}
	.mc-survey {float:none; width:100%; margin:0 0 20px 0;}
}

@media all and (max-width: 767px){
}

@media all and (max-width: 479px){
	.mc-survey {padding:25px 15px;}
}


/* 바로가기 */
.mainQuick {float:right; width:65%; overflow:hidden;}
.mainQuick > #MCquick {height:222px; box-sizing:border-box; padding-top:20px; overflow:hidden;}
.mainQuick > #MCquick > li {position:relative; width:49%; height:202px; box-sizing:border-box; padding:20px; border-radius:5px 5px 0 0; transition:all 0.5s; cursor:pointer;}
.mainQuick > #MCquick > li > h3 {font-size:18px; color:#fff; font-weight:500; margin-bottom:10px;}
.mainQuick > #MCquick > li > p {font-size:15px; color:rgba(255,255,255,0.8); word-break:keep-all;}
.mainQuick > #MCquick > li > a {position:absolute; left:20px; bottom:20px; font-size:13px; color:#fff; box-sizing:border-box; padding:5px 10px; border-radius:5px; display:none;}
.mainQuick > #MCquick > li > a > span {display:inline-block; margin-right:10px;}
.mainQuick > #MCquick > li > a > img {margin-top:-5px;}
.mainQuick > #MCquick > li:hover {height:222px; transform:translateY(-20px);}
.mainQuick > #MCquick > li:hover > a {display:inline-block;}

.mainQuick > .mc-quick01 {float:left; width:49.5%;}
.mainQuick > .mc-quick02 {float:right; width:49.5%;}
.mainQuick > .mc-quick01 > li:nth-child(1) {float:left; background:url('../images/main/icn_quick01.png') right bottom no-repeat, #ffb251; margin-right:2%;}
.mainQuick > .mc-quick01 > li:nth-child(2) {float:right; background:url('../images/main/icn_quick04.png') right bottom no-repeat, #009ac4; margin-right:0;}
.mainQuick > .mc-quick02 > li:nth-child(1) {float:left; background:url('../images/main/icn_quick03.png') right bottom no-repeat, #ef5f76; margin-right:2%;}
.mainQuick > .mc-quick02 > li:nth-child(2) {float:right; background:url('../images/main/icn_quick02.png') right bottom no-repeat, #f47462; margin-right:0;}
.mainQuick > .mc-quick01 > li:nth-child(1) > a {background:#f5a037;}
.mainQuick > .mc-quick01 > li:nth-child(2) > a {background:#028fb5;}
.mainQuick > .mc-quick02 > li:nth-child(1) > a {background:#e74c65;}
.mainQuick > .mc-quick02 > li:nth-child(2) > a {background:#e75743;}

@media all and (max-width: 1199px){
	.mainQuick > #MCquick > li > h3 {font-size:17px; letter-spacing:-1.2px;}
	.mainQuick > #MCquick > li > p {font-size:14px;}
	.mainQuick > #MCquick > li > p br {display:none;}
}

@media all and (max-width: 989px){
	.mainQuick {float:none; width:100%;}
	.mainQuick > #MCquick > li > h3 {font-size:18px; letter-spacing:-1px;}
	.mainQuick > #MCquick > li > p {font-size:15px;}
}

@media all and (max-width: 767px){
	.mainQuick > .mc-quick01 {float:none; width:100%;}
	.mainQuick > .mc-quick02 {float:none; width:100%; margin-top:2%;}
}

@media all and (max-width: 479px){
	.mainQuick > #MCquick > li > h3 {font-size:16px; letter-spacing:-2px;}
	.mainQuick > #MCquick > li > p {font-size:13px; line-height:18px;}
	.mainQuick > #MCquick > li > p br {display:none;}
}


/* 공지사항 */
.mainNT {width:100%; background:url('../images/main/main_notice_bg.jpg') center center no-repeat; background-size:cover;}
.mc-notice {width:100%; box-sizing:border-box; border-top:2px solid #84b3eb;}
.mc-notice .list {width:100%; height:50px; display:flex; justify-content:space-between; align-items:center; gap:25px; box-sizing:border-box; padding:0 25px; border-bottom:1px solid #ddd; overflow:hidden; cursor:pointer;}
.mc-notice .list div {font-size:15px; line-height:50px; color:#999; letter-spacing:-0.5px; text-align:center;}
.mc-notice .list p {flex:1; font-size:15px; line-height:50px; color:#333; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.mc-notice .list:hover p {color:#187aba;}
.mc-notice .new {display:flex; justify-content:center; align-items:center; width:20px; height:20px; text-align:center; font-size:10px; color:#fff; border-radius:50%; background:#5898e3;}

.mc-notice .ntNew p {display:flex; align-items:center; gap:8px;}
.mc-notice .ntNew span {max-width:calc(100% - 30px); display:block; padding-right:2px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

@media all and (max-width: 1199px){
}

@media all and (max-width: 989px){
}

@media all and (max-width: 767px){
	.mc-notice .list {padding:0 10px;}
}

@media all and (max-width: 479px){
}


/* 비교과 프로그램 */
.mainExtp {width:100%; background:url('../images/main/main_extp_bg.jpg') center center no-repeat; background-size:cover;}
#UIcard {overflow:hidden;}
#UIcard li.slick-slide {float:left; width:23%; margin:0 1%;}

#CARDlist {position:relative; box-sizing:border-box; border-radius:5px; border:1px solid #eee; background:#fff;}
#CARDlist img {display:inline-block;}
#CARDlist > .card-info {box-sizing:border-box; border-bottom:1px solid #eee;}
#CARDlist > .card-info > .card-ui-img {position:relative; box-sizing:border-box; border-radius:5px 5px 0 0; border-bottom:1px solid #eee; overflow:hidden;}
#CARDlist > .card-info > .card-ui-img > span {position:absolute; top:5px; left:5px;}
#CARDlist > .card-info > .card-ui-img > img {width:100%; border-radius:5px 5px 0 0;}
#CARDlist > .card-info > .program-info {position:relative; box-sizing:border-box; padding:10px;}
#CARDlist > .card-info > .program-info > .prog-gubun {position:absolute; left:50%; top:-15px; display:table; width:90%; height:30px; border-radius:3px; background:linear-gradient(to right, #03a6cf 0%, #2c8ec4 50%, #3551a4 100%); transform:translateX(-50%); box-shadow:1px 1px 8px rgba(113,113,121,0.15);}
#CARDlist > .card-info > .program-info > .prog-gubun > div {display:table-cell; vertical-align:middle; text-align:center;}
#CARDlist > .card-info > .program-info > .prog-gubun > div img {display:none;}
#CARDlist > .card-info > .program-info > .prog-gubun > div span {display:block; font-size:13px; line-height:13px; color:#fff; letter-spacing:-0.5px;}
#CARDlist > .card-info > .program-info > .prog-dept-tit {margin-top:15px; text-align:center;}
#CARDlist > .card-info > .program-info > .prog-dept-tit > strong {display:inline-block; height:13px; font-size:13px; line-height:13px; font-weight:500; color:#07326c;}
#CARDlist > .card-info > .program-info > .prog-dept-tit > div {margin-top:5px; font-size:17px; line-height:20px; color:#222; font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#CARDlist > .card-info > .program-info > .prog-date {margin-top:15px;}
#CARDlist > .card-info > .program-info > .prog-date > dl {overflow:hidden;}
#CARDlist > .card-info > .program-info > .prog-date > dl.run {margin-top:3px;}
#CARDlist > .card-info > .program-info > .prog-date > dl dt {float:left; width:50px; font-size:12px; line-height:20px; color:#fff; text-align:center; margin-right:5px;}
#CARDlist > .card-info > .program-info > .prog-date > dl dd {float:right; width:calc(100% - 55px); width:-webkit-calc(100% - 55px); font-size:15px; letter-spacing:-0.8px; line-height:20px; color:#7d8ba7; word-break:keep-all;}
#CARDlist > .card-count-pick {width:100%; box-sizing:border-box; padding:10px; border-radius:0 0 5px 5px; overflow:hidden;}
#CARDlist > .card-count-pick > .prog-count {float:left; width:calc(100% - 26px); width:-webkit-calc(100% - 26px); overflow:hidden;}
#CARDlist > .card-count-pick > .prog-count > dl {float:left; overflow:hidden;}
#CARDlist > .card-count-pick > .prog-count > dl dt {display:inline-block; font-size:13px; line-height:20px; color:#7d8ba7; margin-right:5px;}
#CARDlist > .card-count-pick > .prog-count > dl dd {display:inline-block; font-size:13px; line-height:20px; color:#555; margin-right:2px;}
#CARDlist > .card-count-pick > .prog-count > dl dd strong {display:inline-block; color:#333;}
#CARDlist > .card-count-pick > .prog-pick {float:right; margin-left:10px;}
#CARDlist > .card-count-pick > .prog-pick > a {display:block; line-height:20px;}

#CARDlist > .card-hover {position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; box-sizing:border-box; padding:10px; border-radius:5px; background:#fff; display:none;}
#CARDlist > .card-hover > .card-ui-img {position:relative; box-sizing:border-box; border-radius:5px; border:1px solid #eee; overflow:hidden;}
#CARDlist > .card-hover > .card-ui-img > a {position:absolute; right:10px; top:5px; z-index:10; cursor:pointer;}
#CARDlist > .card-hover > .card-ui-img > img {width:100%; border-radius:5px;}
#CARDlist > .card-hover > .prog-dept-tit {margin-top:15px; text-align:center;}
#CARDlist > .card-hover > .prog-dept-tit > strong {display:block; height:13px; font-size:13px; font-weight:500; color:#07326c;}
#CARDlist > .card-hover > .prog-dept-tit > div {
	font-size:17px; font-weight:500; color:#222; margin-top:10px; display:block; display:-webkit-box; height:48px; line-height:24px; 
	white-space:normal; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
#CARDlist > .card-hover > .prog-dept-tit > span {position:absolute; left:50%; bottom:55px; transform:translate(-50%); display:inline-block; min-width:140px; font-size:16px; line-height:20px; font-weight:500; color:#fff; box-sizing:border-box; padding:7px 10px; border-radius:3px; background:#e10a8a;}
#CARDlist > .card-hover > .view-detail {position:absolute; left:0; bottom:0; width:100%; font-size:16px; font-weight:500; letter-spacing:-0.5px; color:#fff; text-align:center; box-sizing:border-box; padding:10px; border-radius:0 0 5px 5px; background:#0071bd; cursor:pointer;}
#CARDlist:hover > .card-hover {display:block;}

/* 메인영역 해당 CSS */
.mc-card-list > .card-info > .card-ui-img > img {width:268px; height:167px;}
.mc-card-list > .card-hover > .card-ui-img > img {width:252px; height:156px;}

/* 카드형UI - 진행상태 */
.stON_rct {background:#f36666;} /* 모집중 */
.stON_run {background:#03a6cf;} /* 운영중 */
.stBF {background:#7d8ba7;} /* 운영전, 모집전 */
.stOFF {background:#454f63;} /* 운영완료, 모집완료 */

@media all and (max-width: 1199px){
	#CARDlist > .card-info > .card-ui-img > img {width:100%; /* height:auto; */}
	#CARDlist > .card-hover > .card-ui-img > img {width:100%; /* height:auto; */}
}

@media all and (max-width: 989px){
}

@media all and (max-width: 767px){
}

@media all and (max-width: 480px){
	.mc-card-ui > li {float:none; width:100%; margin:0 auto 10px auto;}
}



/* SPEC-UP, RAPO 시스템 바로가기 */
.mainSite {position:relative; width:100%;}
.mainSite:before {content:""; display:block; position:absolute; left:0; top:0; z-index:0; width:50%; min-height:300px; background:url('../images/main/site_donga_bg01.jpg') no-repeat; background-size:cover;}
.mainSite:after {content:""; display:block; position:absolute; right:0; top:0; z-index:0; width:50%; min-height:300px; background:url('../images/main/site_donga_bg02.jpg') no-repeat; background-size:cover;}
.mainSite > ul {position:relative; z-index:1; width:1200px; margin:0 auto; overflow:hidden;}
.mainSite > ul > li {width:50%; box-sizing:border-box;}
.mainSite > ul > li.site-spec-up {float:left; padding:25px 30px 25px 0;}
.mainSite > ul > li.site-rapo {float:right; padding:25px 0 25px 30px;}
.mainSite > ul > li > div {font-size:22px; line-height:22px; color:#fff; font-weight:500; letter-spacing:-0.5px; margin-bottom:15px;}
.mainSite > ul > li > p {font-size:15px; color:rgba(255,255,255,0.8); word-break:keep-all;}
.mainSite > ul > li > a {display:inline-block; float:right; width:130px; height:40px; margin-top:10px; box-sizing:border-box; padding:0 15px; border-radius:50px; border:1px solid #fff; overflow:hidden; transition:all 0.5s;}
.mainSite > ul > li > a:hover {transform:translate(-3px, -3px);}
.mainSite > ul > li > a span {float:left; display:inline-block; font-size:15px; line-height:40px; font-weight:500; color:#fff;}
.mainSite > ul > li > a img {float:right; display:inline-block; margin-top:15px;}

@media all and (max-width: 1199px){
	.mainSite > ul {width:970px;}
}

@media all and (max-width: 989px){
	.mainSite > ul {width:100%;}
	.mainSite > ul > li.site-spec-up {padding:25px 20px;}
	.mainSite > ul > li.site-rapo {padding:25px 20px;}
}

@media all and (max-width: 834px){
	.mainSite > ul > li > p br {display:none;}
}

@media all and (max-width: 767px){
	.mainSite > ul > li {position:relative; width:100%; height:200px;}
	.mainSite:before {display:none;}
	.mainSite:after {display:none;}
	.mainSite > ul > li.site-spec-up {float:none; background:url('../images/main/site_donga_bg01.jpg') no-repeat; background-size:cover;}
	.mainSite > ul > li.site-rapo {float:none; background:url('../images/main/site_donga_bg02.jpg') no-repeat; background-size:cover;}
	.mainSite > ul > li > a {position:absolute; right:20px; bottom:25px;}
}

@media all and (max-width: 479px){
}