@charset "UTF-8";

#topvisual{min-width:1100px; overflow:hidden; position: relative;}
#topvisual .swiper-container-topvisual .swiper-slide{height:550px; text-align:center;}
#topvisual .swiper-container-topvisual .swiper-slide a{display: flex; align-items: center; justify-content: flex-start; width: 1100px; height: 100%; margin: 0 auto;}
#topvisual .swiper-container-topvisual .swiper-pagination{position:absolute; bottom:60px; left: calc(50% - 550px); width: auto;}
#topvisual .swiper-container-topvisual .swiper-pagination-bullet{width:8px; height:8px; opacity:1; background:#fff;}
#topvisual .swiper-container-topvisual .swiper-pagination-bullet-active{width: 32px; background:var(--yellow-1); border-radius: 12px;}

.guidewrap{padding: 32px 0;}
.guidewrap .inner{display: flex; justify-content: space-between;}
.guidewrap h1{margin-right: 24px; padding:8px 16px; color: #fff; font-size:16px; font-weight:700; background-color: var(--yellow-1); letter-spacing: -0.02em; line-height: 100%; border-radius: 32px;}
.guidewrap .monthclass{display: flex; align-items: center; font-size:18px;}
.guidewrap .monthclass p{font-size: 22px; font-weight:700;}
.guidewrap .monthclass p strong{color:var(--yellow-1); margin-right:12px; font-size: 16px; font-weight:700;}
.guidewrap .monthclass .bar{display: block; width: 1px; height: 16px; background-color: #EAEAEA; margin: 0 16px;}
.guidewrap .classSearch .SearchArea{position:relative; width:470px; margin-top: 16px;}
.guidewrap .classSearch .SearchArea input[type="text"]{width: 100%; height: 50px; padding-left: 20px; border: 2px solid var(--yellow-1); border-radius: 8px; box-sizing: border-box;}
.guidewrap .classSearch .SearchArea input[type="image"]{position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
.guidewrap .link-box{display: flex; gap: 18px;}
.guidewrap .link-box li{width: 188px; height: 100px; border: 1px solid #D6D6D6; border-radius: 12px; box-sizing: border-box; transition: border-color 0.4s;}
.guidewrap .link-box li:hover{border-color: var(--yellow-1);}
.guidewrap .link-box li a{display: flex; align-items: center; justify-content: flex-start; height: 100%; padding-left: 20px;}
.guidewrap .link-box li a p{margin-left: 19px; font-weight: 700; font-size: 16px;}


/* 공통 */
.main-tit-area{display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;}
.main-tit-area h1{font-size: 32px; font-weight: bold; color: #333; text-align: left;}
.main-tit-area h1 > em{font-size: 32px; font-weight: bold; color: #fff; text-align: left;}
.main-tit-area .btn_more{font-size: 16px; font-weight: bold; color: #999; text-align: left; display: inline-flex; align-items: center; padding-right: 5px;}
.main-tit-area .btn_more::after{content: ''; display: block; width: 14px; height: 14px; margin-left: 5px; background: url('../images/common/icon_arrow.svg') no-repeat center / cover; opacity: 0.6; transition: transform 0.3s;}
.main-tit-area .btn_more:hover::after{transform: translateX(5px);}
.main-bg{background-color: #f2f2f2;}
.navi.navi-round{display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: rgba(51,51,51,.8); border-radius: 50%; transition: background-color 0.3s;}
.navi.navi-round:hover{background: rgba(51,51,51,1);}
.navi.navi-round.swiper-button-prev img{transform: rotate(180deg);}


/* 국비지원과정 */
.curriculum .lec-bnr-wrap .bnr-box{display: flex; justify-content: space-between; align-items: flex-end; height: 226px; padding: 40px; color: #fff; background: url('../images/main/bg_lec_bnr_01.png'); border-radius: 20px; box-sizing: border-box;}
.curriculum .lec-bnr-wrap .bnr-box:not(:first-child){margin-top: 20px;}
.curriculum .lec-bnr-wrap .bnr-box:last-child{margin-bottom: 100px;}
.curriculum .lec-bnr-wrap .bnr-box .tags{display: flex; gap: 7px;}
.curriculum .lec-bnr-wrap .bnr-box .tags span{display: block; margin-bottom: 20px; padding: 7px 15px; font-size: 14px; font-weight: 600; border: 1px solid #6AE9AE; border-radius: 32px; }
.curriculum .lec-bnr-wrap .bnr-box .tags span.type1{color: #6AE9AE;}
.curriculum .lec-bnr-wrap .bnr-box .tags span.type2{color: #333; background-color: #6AE9AE;}
.curriculum .lec-bnr-wrap .bnr-box .tit{font-size: 28px; font-weight: 700; margin-bottom: 16px;}
.curriculum .lec-bnr-wrap .bnr-box .desc{font-size: 16px; line-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.curriculum .lec-bnr-wrap .bnr-box .btns{flex-shrink: 0;}
.curriculum .lec-bnr-wrap .bnr-box .btns .btn{
	display: flex; align-items: center; height: 40px; padding: 0 22px;
	color: #333; font-size: 14px; font-weight: 600; background-color: #fff; border-radius: 32px;
}
.curriculum .lec-bnr-wrap .bnr-box .btns .btn .ico{width: 14px; height: 14px; margin-left: 10px; transition: transform 0.3s;}
.curriculum .lec-bnr-wrap .bnr-box .btns .btn:hover .ico{transform: translateX(5px);}
.curriculum .currSlide{position: relative;}
.curriculum .currSlide .swiper-container-curriculum{overflow: hidden;}
.curriculum .currSlide .swiper-slide{overflow: hidden; border-radius: 20px; box-shadow: 0 16px 20px rgba(0,0,0,0.05);}
.curriculum .currSlide .swiper-slide .frame {height: 174px;}
.curriculum .currSlide .swiper-slide .frame img{display: block; width: 100%; height: 100%; object-fit: cover;}
.curriculum .currSlide .swiper-slide .txt-box {padding: 30px; background-color: #fff; box-sizing: border-box;}
.curriculum .currSlide .swiper-slide .txt-box .cate {display: block; color: var(--yellow-1); font-size: 16px; font-weight: 700; margin-bottom: 5px;}
.curriculum .currSlide .swiper-slide .txt-box h5{font-size: 18px; font-weight: 700; line-height: 1.3em; margin-bottom: 25px;}
.curriculum .currSlide .swiper-slide .txt-box .btn{
	display: block; width: 100%; height: 46px; margin-top: 8px; 
	font-size: 16px; text-align: center; font-weight: 600; border: 1px solid; border-radius: 6px; box-sizing: border-box; transition: color 0.4s, background-color 0.4s;
}
.curriculum .currSlide .swiper-slide .txt-box .btn.type1{border-color: #E6E6E6;}
.curriculum .currSlide .swiper-slide .txt-box .btn.type2{background-color: var(--yellow-1); border-color: var(--yellow-1);}
.curriculum .currSlide .swiper-slide .txt-box .btn.type1:hover{background-color: #F2F2F2;}
.curriculum .currSlide .swiper-slide .txt-box .btn.type2:hover{color: var(--yellow-1); background-color: #fff;}
.curriculum .currSlide .navi.swiper-button-prev{left: -72px;}
.curriculum .currSlide .navi.swiper-button-next{right: -72px;}


/* 소식 */
.news-wrap .cards{display: flex; justify-content: space-between;}
.news-wrap .cards li{width: 350px;}
.news-wrap .cards li .frame{overflow: hidden; height: 255px; margin-bottom: 20px; border-radius: 16px;}
.news-wrap .cards li .frame img{display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s;}
.news-wrap .cards li:hover .frame img{transform: scale(1.03);}
.news-wrap .cards li .tag{display: inline-block; padding: 0 15px; color: var(--yellow-1); font-size: 14px; line-height: 26px; font-weight: 600; margin-bottom: 5px; border: 1px solid var(--yellow-1); border-radius: 16px;}
.news-wrap .cards li .tit{font-size: 18px; font-weight: 700; line-height: 1.3em; word-break: keep-all; margin-bottom: 10px;}
.news-wrap .cards li .txt{color: #707070; font-size: 14px; line-height: 1.4em;}
.news-wrap .cards li .date{color: #ADADAD; font-size: 14px; margin-top: 15px;}


/* 수강후기 */
.review_course{position: relative; overflow: hidden;}
.review_course .swiper-container-review{position: relative;}
.review_course .swiper-slide{opacity: 0.5; pointer-events: none;}
.review_course .swiper-slide.swiper-slide-active,.review_course .swiper-slide.swiper-slide-next{opacity: 1; pointer-events: auto;}
.review_course .swiper-slide .review_cnt{display: flex; position: relative; background-color: #fff; border-radius: 16px; padding: 30px; text-align: left; box-sizing: border-box;}
.review_course .swiper-slide .review_cnt .frame{width: 200px; height: 200px; margin-right: 22px; overflow: hidden; border-radius: 16px; flex-shrink:0; background-color: #eee;}
.review_course .swiper-slide .review_cnt .frame img{display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px;}
.review_course .swiper-slide .review_cnt .courseName{color: var(--yellow-1); font-size: 16px; font-weight: bold; margin-bottom: 6px;}
.review_course .swiper-slide .review_cnt .courseTitle{font-size: 18px; font-weight: bold; line-height: 1.3em; height: 46px; margin-bottom: 10px; word-break: keep-all;}
.review_course .swiper-slide .review_cnt .courseUser{font-size: 16px; font-weight: 600; margin-bottom: 10px;}
.review_course .swiper-slide .review_cnt .courseCnt{color: #707070; font-size: 14px; line-height: 1.4em; word-break: keep-all;}
.review_course .swiper-slide .review_cnt .courseMore{display: inline-flex; align-items: center; position: absolute; right: 30px; bottom: 30px; color: #707070; font-size: 14px;}
.review_course .swiper-slide .review_cnt .courseMore::after{display: block; width: 12px; height: 12px; margin-left: 5px; background: url('../images/common/icon_arrow.svg') no-repeat center / cover; opacity: 0.56; content: ''; transition: transform 0.3s;}
.review_course .swiper-slide .review_cnt:hover .courseMore::after{transform: translateX(5px);}
.review_course .review-navi{display: flex; gap: 5px;}
.review_course .review-navi .navi{padding: 5px; cursor: pointer; opacity: 0.4; transition: opacity 0.4s;}
.review_course .review-navi .navi:hover{opacity: 1;}
.review_course .review-navi .navi-prev img{transform: rotate(180deg);}


/* 취업현황 */
.EmploymentWrap{overflow: hidden; background: linear-gradient(170deg,rgba(255, 195, 83, 1) 20%, rgba(255, 171, 21, 1) 100%);}
.EmploymentWrap .swiper-container-Employment{margin: 20px 0;}
.EmploymentWrap .swiper-container-Employment .swiper-wrapper{transition-timing-function:linear}
.EmploymentWrap .swiper-container-Employment .swiper-slide{width: fit-content;}
.EmploymentWrap .swiper-container-Employment .card{padding: 20px 32px; text-align: left; background-color: #fff; border-radius: 16px; box-sizing: border-box;}
.EmploymentWrap .swiper-container-Employment .card .EmploymentCompany{color: var(--yellow-1); font-size: 18px; font-weight: 700;}
.EmploymentWrap .swiper-container-Employment .card .details{display: flex; align-items: center; gap: 24px; margin-top: 5px;}
.EmploymentWrap .swiper-container-Employment .card .details .mid{width: 1px; height: 16px; background-color: #EAEAEA;}
.EmploymentWrap .swiper-container-Employment .card .EmploymentCourse{font-size: 16px; font-weight: bold; color: #333; text-align: left;}
.EmploymentWrap .swiper-container-Employment .card .EmploymentUser{font-size: 16px; color: #333; text-align: center;}
.EmploymentWrap .btns{display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 40px;}
.EmploymentWrap .btns a.btn{display: flex; align-items: center; justify-content: center; width: 538px; height: 56px; color: #fff; font-weight: 600; font-size: 16px; background-color: #333; border-radius: 48px;}
.EmploymentWrap .btns a.btn:nth-child(1) strong{color: var(--yellow-1); font-weight: inherit;}
.EmploymentWrap .btns a.btn:nth-child(2) strong{color: #6AE9AE; font-weight: inherit;}
.EmploymentWrap .btns a.btn::after{display: block; width: 14px; height: 14px; margin-left: 10px; background: url('../images/common/icon_arrow_w.svg') no-repeat center / cover; transition: transform 0.3s; content: '';}
.EmploymentWrap .btns a.btn:hover::after{transform: translateX(5px);}


/* 포트폴리오 */
.Portfolio .Portfolio-wrap{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px;}
.Portfolio .Portfolio-wrap .card{width: 350px; border-radius: 16px;}
.Portfolio .Portfolio-wrap .card:nth-child(1){background: url('../images/main/bg_Porfol_01.png') no-repeat center / cover;}
.Portfolio .Portfolio-wrap .card:nth-child(2){background: url('../images/main/bg_Porfol_02.png') no-repeat center / cover;}
.Portfolio .Portfolio-wrap .card:nth-child(3){background: url('../images/main/bg_Porfol_03.png') no-repeat center / cover;}
.Portfolio .Portfolio-wrap .card a{display: block; position: relative; width: 100%; height: 200px; padding: 30px; color: #fff; box-sizing: border-box;}
.Portfolio .Portfolio-wrap .card .subtit{font-size: 16px; margin-bottom: 10px; word-break: keep-all;}
.Portfolio .Portfolio-wrap .card .tit{font-size: 24px; font-weight: 700; word-break: keep-all;}
.Portfolio .Portfolio-wrap .card .more{display: inline-flex; align-items: center; position: absolute; bottom: 30px; right: 30px; color: #fff; font-size: 14px;}
.Portfolio .Portfolio-wrap .card .more::after{display: block; width: 12px; height: 12px; margin-left: 5px; background: url('../images/common/icon_arrow_w.svg') no-repeat center / cover; content: ''; transition: transform 0.3s;}
.Portfolio .Portfolio-wrap .card:hover .more::after{transform: translateX(5px);}


/* 시설안내 */
.facilitySlide{display: flex;}
.facilitySlide .swiper{width: 968px; height: 460px;}
.facilitySlide .swiper img{display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px;}
.facilitySlide .group{display: flex; gap: 28px; height: 100%;}
.facilitySlide .group .cut{position: relative;}
.facilitySlide .group .cut .sub{position: absolute; bottom: -32px; left: 0; width: 100%; text-align: center; font-size: 16px; font-weight: 500;}
.facilitySlide .side-navi{margin-left: 32px;} 
.facilitySlide .side-navi li{
	display: block; width: unset; height: unset; background: none; border-radius: unset; opacity: 1;
	margin-bottom: 20px;
}
.facilitySlide .side-navi li span{display: inline-block; padding: 8px 16px; font-size: 16px; font-weight: 700; line-height: 100%; border-radius: 16px;} 
.facilitySlide .side-navi li.swiper-pagination-bullet-active span{background-color: var(--yellow-1); color: #fff;}


/*! Gray v1.6.0 (https://github.com/karlhorky/gray) | MIT */
.grayscale{filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");-webkit-filter:grayscale(1);filter:grayscale(1);filter:gray}.grayscale.grayscale-fade{transition:filter .5s}@media screen and (-webkit-min-device-pixel-ratio:0){.grayscale.grayscale-fade{-webkit-transition:-webkit-filter .5s;transition:-webkit-filter .5s}}.grayscale.grayscale-fade:hover,.grayscale.grayscale-off{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale.grayscale-replaced{-webkit-filter:none;filter:none}.grayscale.grayscale-replaced>svg{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.grayscale.grayscale-replaced.grayscale-fade:hover>svg,.grayscale.grayscale-replaced.grayscale-off>svg{opacity:0}