@charset "utf-8";

/* main-visual */
.main-top{margin-bottom:20rem;}
.main-slide{position:relative;}
.main-visual{position:relative; z-index:2; width:calc(100% - 445rem); height: 344rem; position: relative;min-height: 100%; overflow:hidden; border-radius:10rem;}
.main-visual .swiper-wrapper{height: 100%!important; justify-content: space-between;}
.main-visual__item{ position: relative; height: 100% !important; overflow:hidden;}
.main-visual__item{background-position: 50% 50%; background-size: cover;  }
.main-visual__title{position: absolute; left:5%; top:25%; z-index:3;}
.main-visual__title > *{transition: all 1s ease; opacity: 0;transform: translateY(30rem);}
.main-visual__title h2{font-size:37rem; font-weight:700; line-height: 1.2em; color: #222;  word-break:keep-all;}
.main-visual__title > em{margin-bottom:15rem; display:inline-block; font-size:15rem; font-weight:400; color:#fff; line-height:1em; word-break:keep-all; padding:5rem 15rem; background:var(--color-point); border-radius:50rem; }
.main-visual__title > p{margin-top:10rem; display:block; font-size:16rem; font-weight:300; color:#888; line-height:1.6em; word-break:keep-all;}
.main-visual__title a{position:relative; display:flex; align-items:center; justify-content:center; margin:85rem 0 0; width:190rem; height:60rem; text-align:center; border:2rem solid #fff; box-sizing:border-box; border-radius:5rem; z-index:1;}
.main-visual__title a:before{content:''; position:absolute; top:0; left:0; width:0%; height:100%; background:var(--color-point);  z-index:-1; transition:all 0.3s ease;}
.main-visual__title a > span{font-size:16rem; font-weight:600; color:#fff; z-index:1;}
.main-visual__title a:hover{border-color:var(--color-point);}
.main-visual__title a:hover:before{width:100%;}

.btn_swiper{display:flex; justify-content: center; align-items: center; gap:12rem; margin-top:25rem;}
.btn_swiper > *{color:#fff; font-size:16rem; color:#fff;}
.main-visual .paging{position:static; height: 24rem; display: flex; justify-content: center; align-items: center; gap:3rem; margin-top:20rem; width:53rem; background:rgba(0,0,0,0.35); border-radius:50rem; z-index:50; font-size:12rem; font-weight:400; color:#fff;}
.main-visual .paging span{font-size:14rem; font-weight:500; color:#fff; line-height:1em;}
/*
.main-visual .paging span{position:relative; display:flex; justify-content: center; align-items: center; box-sizing:border-box; width:22rem; height:22rem; margin:0 5rem; border-radius:50rem; background:transparent; border:2px solid transparent; opacity:1; transition:all 1s; cursor:pointer;}
.main-visual .paging span:before{content:''; display:inline-block; width:6rem; height:6rem; background:#fff; border-radius:50rem; opacity:0.5;}
.main-visual .paging span.swiper-pagination-bullet-active{border-color:#fff;}
.main-visual .paging span.swiper-pagination-bullet-active:before{opacity:1;}
*/


.main-visual .swiper-slide-active .main-visual__title h2{opacity:1; transform:translateY(0); transition-delay:0.5s;}
.main-visual .swiper-slide-active .main-visual__title em{opacity:1; transform:translateY(0); transition-delay:0.6s;}
.main-visual .swiper-slide-active .main-visual__title p{opacity:1; transform:translateY(0); transition-delay:0.7s;}
.main-visual .swiper-slide-active .paging,
.main-visual .swiper-slide-active .btn_swiper{opacity:1; transform:translateY(0); transition-delay:0.7s;}
i.main-visual__bg{position:absolute;top:0;left:0;width:100%;height:100%;transition:all 5s ease;background-size: cover;background-repeat: no-repeat; background-position:50% 50%;}
.main-visual .swiper-slide.visual01 .main-visual__bg{background-image: url(../images/main/visual01.jpg);}
/*.swiper-slide-active i.main-visual__bg{transform:scale(1);}*/




@media (max-width:1024px){
	.main-top{gap:20rem;}
	.main-visual{width: calc(100% - 370rem);}

}

@media all and (max-width:900px){
	.main-top{flex-direction: column;}
	.main-visual{width:100%;}
}

@media all and (max-width:768px){
	.main-visual{height:280rem;}
	.main-visual__title > em{margin-bottom:12rem; font-size:14rem; padding:5rem 10rem;}
	.main-visual__title h2{font-size:28rem;}
	.main-visual__title > p{margin-top:8rem; line-height:1.5em;}
	.main-visual .paging{margin-top:15rem; height:20rem; width:45rem;}
	

}
@media all and (max-width:480px){
	.main-top{margin-bottom:15rem;}
	.main-visual{height:133rem;}
	.main-visual__title{top:10%;}
	.main-visual__title > em{font-size:10rem; padding:3rem 7rem; margin-bottom:7rem;}
	.main-visual .swiper-slide-active .main-visual__title h2{font-size:18rem;}
	.main-visual__title > p{margin-top:5rem; font-size:11rem; line-height:1.4em; letter-spacing:-0.5rem;}
	.main-visual .paging{margin-top:7rem; height:16rem; width:40rem; gap:2rem;}
	.main-visual .paging span{font-size:10rem;}

}
/*
@media all and (max-width:1600px){
	.main-visual__title{left:5%; width:90%; margin-left:0;}
}

@media all and (max-width:1300px){
	.main-visual__title h2{font-size:50rem;}
}
@media all and (max-width:1024px){
	.main-visual{border-radius:10rem; margin:0 14rem; height:600rem;}
	.main-visual__title{top:29%;}
	.main-visual__title h2{font-size:45rem;}
	.main-visual .paging span{width:20rem; height:20rem;}

}
@media all and (max-width:768px){
	.main-visual{height:500rem;}
	.main-visual__title > em{font-size:17rem;}
	.main-visual__title h2{font-size:35rem;}
}
@media all and (max-width:620px){
	.main-visual{height:400rem;}
	.main-visual__title > em{font-size:16rem;}
	.main-visual__title h2{font-size:30rem;}

}
@media all and (max-width:540px){
	.main-visual__title > em{font-size:15rem;}
	.main-visual__title h2{font-size:25rem;}
	.scroll_ani span{font-size:13rem;}
}
@media all and (max-width:480px){
	.main-visual{height:300rem; border-radius:7rem; margin:0 14rem;}
	.main-visual__title > em{font-size:12rem; margin-bottom:8rem;}
	.main-visual__title h2{font-size:17rem;}
	.main-visual .paging{margin-top:18rem;}
	.main-visual .paging span{width:15rem; height:15rem; border-width:1px;}
	.main-visual .paging span:before{width:4rem; height:4rem;}

	.scroll_ani span{font-size:11rem; padding-bottom:25rem;}
	.scroll_ani i{height:25rem;}
	.scroll_ani i::after{height:10rem;}
}
*/


/* 오프라인 교육 찾기 및 신청 */
.main-top{display:flex; gap:25rem;}
.main-calendar{width:420rem;}
.main-calendar .box-title > h3{font-size:18rem;}
.main-calendar .box-title > h3:before{top:-3rem;}
.main-calendar .datepicker{width:100%; height:312rem; border:1px solid #eee; box-sizing:border-box; border-radius:5rem; overflow:hidden;}
.main-calendar .datepicker-top{display: flex; justify-content: space-between; align-items: center; margin-bottom:0; padding:7rem; height:47rem; box-sizing:border-box;}
.main-calendar .datepicker-top .today{width:54rem; height:24rem; font-size:12rem; font-weight:400; color:#fff; line-height:1em; background:var(--color-point); border-radius:5rem; text-transform:uppercase;}
.main-calendar .datepicker-calendar{height:calc(100% - 47rem);}
.main-calendar .datepicker-calendar .days{background:#F3F6F9; width:100%; height:25rem;}
.main-calendar .datepicker-calendar .day{display: flex; justify-content: center; align-items: center; font-size:12rem; font-weight:600; color:#222; line-height:1em;}
.main-calendar .datepicker-calendar .dates{display: flex; flex-direction: column; width:100%; height:calc(100% - 25rem); }
.datepicker-calendar .dates .week {flex: 1; display: grid;  grid-template-columns: repeat(7, 1fr);}
.main-calendar .datepicker-calendar .date {display:block; padding:3rem; height: 100%; border-bottom: 1px solid #eee; border-right:1px solid #eee; background-color:#fff;width:100%;}
.main-calendar .datepicker-calendar .date:last-child{border-right:none;}
.datepicker-calendar .dates .week:last-child .date{border-bottom:none;}
.date-num{position:relative; display:flex; justify-content: flex-start; align-items: flex-start; width:19rem; height:19rem; font-size:12rem; font-weight:400; color:#222; line-height:1em; border-radius:50rem;}
.current-day .date-num{justify-content: center; align-items: center; background:var(--color-point); color:#fff;}

@media (max-width:1024px){
	.main-calendar{width: 350rem;}
}

@media all and (max-width:900px){
	.main-calendar{width:100%;}

}
@media all and (max-width:768px){
	.main-calendar .box-title > h3{font-size:16rem;}
}
@media all and (max-width:768px){
	.main-calendar .box-title{padding-bottom:0;}
	.main-calendar .box-title > h3:before{top:0;}
	.datepicker .month-name{font-size:14rem;}
	.datepicker .btn-arr{height:20rem;}
	.main-calendar .datepicker-top{height:35rem;}
	.datepicker .arrow{width:20rem; height:20rem;}
	.main-calendar .datepicker{height:285rem;}
	.main-calendar .datepicker-calendar .day{font-size:10rem;}
	.main-calendar .datepicker-top .today{width:45rem; height:20rem; font-size:10rem;}
	.main-calendar .datepicker-calendar{height:calc(100% - 35rem);}
	.main-calendar .datepicker-calendar .date{padding:2rem;}
	.date-num{width:17rem; height:17rem; font-size:10rem;}
}

/* 교육과정 바로가기 */
.main-program{}
.main-program .box-title{display:flex; justify-content: space-between; align-items: flex-end; margin-bottom:0;}
.main-program .box-title .swiper-arr{display:flex; gap:5rem;}
.main-program .box-title .swiper-arr > div{position:relative; top:unset; left:unset; right:unset; margin-top:0;  display: flex; justify-content: center; align-items: center; width:30rem; height:30rem; border:1px solid #e9e9e9; border-radius:5rem; background:#fff; box-sizing:border-box;}
.main-program .box-title .swiper-arr > div:before{content:''; width:6rem; height:12rem; background: #fff url(../images/main/ic-arr.svg) no-repeat center; background-size:contain;}
.main-program .box-title .swiper-arr .swiper-button-prev{transform:rotate(-180deg);}
.programSwiper{overflow:hidden; padding:15rem 0;}
/* .main-program__list{} */
.main-program__item{height:130rem; border:2px solid #f3f3f3; background:#fff; border-radius:20rem; box-sizing:border-box; box-shadow:0px 2px 10px 0.25px rgb(0 0 0 / 4%); transition:all 0.3s ease;}
.main-program__item:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; border:2px solid var(--color-point); border-radius:20rem; box-sizing:border-box; opacity:0; transition:all 0.3s ease;}
.main-program__item a{display:flex; justify-content: center; align-items: center; flex-direction: column; width:100%; height:100%; padding:10rem; box-sizing:border-box; text-align:center; }
.main-program__item a .icon{display: flex; justify-content: center; align-items: center; width:60rem; height:60rem; margin-bottom:10rem;}
.main-program__item a .icon img{height:auto; max-height:100%;}
.main-program__item a .txt{display:block; font-size:15rem; font-weight:500; color:#000; line-height:1.2em; letter-spacing:-1px; word-break:keep-all;}
.main-program__item a .txt i{font-weight:bold;}
.main-program__item:hover:before{opacity:0;}
.main-program__item:hover{border-color:transparent;}
.main-program__item:hover{border-color:var(--color-point);}

@media all and (max-width:768px){
	.main-program__item{height:115rem;}
	.main-program__item a .icon{width:55rem; height:55rem;}

}
@media all and (max-width:480px){
	.programSwiper{padding:10rem 0;}
	.main-program{margin-bottom:6rem;}
	.main-program .box-title .swiper-arr{gap:3rem; }
	.main-program .box-title .swiper-arr > div{width:20rem; height:20rem; border-radius:3rem;}
	.main-program__item{height:90rem; border-radius:10rem; border-width:1px; box-shadow:0px 2px 8px 0.25px rgb(0 0 0 / 3%);}
	.main-program__item:before{border-radius:5rem;}
	.main-program__item a .icon{width:40rem; height:40rem; margin-bottom:7rem;}
	.main-program__item a .txt{font-size:12rem;}

	.main-program .box-title .swiper-arr > div:before{width:4rem; height:12rem;}

}

/* 게시판 */
.main-board{display:flex; gap:15rem;}
.board{width:calc(100% - 658rem);border:1px solid #eee;box-sizing:border-box;border-radius:10rem;overflow: hidden;}
.board-top{display:flex;align-items: center;justify-content: space-between;padding: 0;height:46rem;border-bottom:1px solid #eee;box-sizing:border-box;overflow: hidden;}
.board-top .tabs{gap: 0;margin:0;height: 100%;}
.board-top .tabs li{border:none;padding: 10rem 25rem;font-size:16rem;font-weight:600;color:#999;line-height:1em;opacity: 1;height: 100%;border-right: 1px solid #eee;border-radius: 0;display: flex;align-items: center;}
.board-top .tabs li.active{opacity:1;background:transparent;background: var(--color-point);color: #fff; border-color:var(--color-point);}
.board-top .btn-plus{display:block;width:15rem;height:15rem;background:url(../images/main/ic-plus.svg)no-repeat center;background-size: 15rem auto;transition:all 0.3s ease;width: 50rem;height: 100%;border-left: 1px solid #eee;}
.board-top .btn-plus:hover{background:url(../images/main/ic-plus-color.svg)no-repeat center; }
.main-board .tab_content{padding:15rem 15rem; box-sizing:border-box; height:185rem;}
.board-list li{position:relative; padding-left:8rem;  margin-bottom:13rem; display:flex; justify-content: space-between; align-items: center;}
.board-list li:last-child{margin:0;}
.board-list li:before{content:''; position:absolute; top:7rem; left:0; width:2px; height:2px; background:#999; border-radius:50rem;}
.board-list li .subject{width:calc(100% - 120rem); font-size:15rem; font-weight:400; color:#333; line-height:1em; word-break:keep-all;   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.board-list li .date{font-size:14rem; font-weight:300; color:#999; line-height:1em; }

.main-info{display:flex; flex-direction: column; gap:13rem; width:643rem;}
.main-info .top{display:flex;  gap:15rem; height:140rem;}
.main-classroom{width:204rem; background:#1B98FF; border-radius:10rem; z-index:1;}
.main-classroom > a{position:relative; display:block; height:100%; padding:12rem 15rem; box-sizing:border-box;}
.main-classroom > a em{display:inline-block; margin-bottom:7rem; font-size:13rem; font-weight:500; color:#fff; line-height:1em; word-break:keep-all;}
.main-classroom > a h3{display:block; font-size:26rem; font-weight:700; color:#fff; line-height:1em;}
.main-classroom > a .btn-more{display:block; margin-top:5rem;}
.main-classroom > a .btn-more span{position:relative; font-size:14rem; padding-right:23rem; font-weight:400; color:#fff;}
.main-classroom > a .btn-more span:before{content:''; position:absolute; top:0; right:0; width:17rem; height:17rem; border-radius:50rem; background:#fff url(../images/main/ic-myclass-arr.svg)no-repeat center; background-size:10rem auto;}
.main-classroom > a .img{position:absolute; right:5rem; bottom:5rem; height:60rem; z-index:-1;}
.main-classroom > a .img img{height:100%;}

.main-cs{position:relative; width:calc(100% - 219rem); background:#FFB031; border-radius:10rem; padding:10rem 15rem; box-sizing:border-box;}
.main-cs .txt{z-index:1;}
.main-cs .txt em{display:inline-block; margin-bottom:5rem; font-size:13rem; font-weight:600; color:#fff; line-height:1em; word-break:keep-all;}
.main-cs .txt h3{display:block; font-size:35rem; font-weight:800; color:#fff; line-height:1em;}
.main-cs .txt .info-list{margin-top:10rem;}
.main-cs .txt .info-list > li{display:block; margin-bottom:5rem; font-size:14rem; font-weight:400; color:#fff; line-height:1em; word-break:keep-all;}
.main-cs .img{position:absolute; right:8rem; top:8rem; height:70rem; z-index:1;}
.main-cs .img img{height:100%;}
.bottom{border:1px solid #e9e9e9; box-sizing:border-box; border-radius:10rem; background:#F9F9F9;}
.main-info .bottom .list-link{display:grid; grid-template-columns: repeat(4, 1fr); }
.bottom .list-link > li{width:100%; height:38rem; border-bottom:1px solid #e9e9e9; border-right:1px solid #e9e9e9; box-sizing:border-box; text-align:center;}
.bottom .list-link > li:nth-child(4n){border-right:none; text-align:center;}
.bottom .list-link > li:nth-child(n + 5){border-bottom:none;}
.bottom .list-link > li a{display:flex; justify-content: center; align-items: center; width:100%; height:100%; padding:5rem;}
.bottom .list-link > li a span{font-size:14rem;}

@media all and (max-width:768px){
	.main-board{flex-direction: column; height:auto;}
	.board{width:100%;}
	.main-info{width:100%;}
}

@media all and (max-width:480px){
	.board{border-radius:5rem; min-height:162rem;}
	.board-top{height:35rem;}
	.board-top .tabs li{font-size:12rem; padding:10rem;}
	.main-board{gap:8rem;}
	.main-board .tab_content{padding:10rem;}
	.board-list li{padding-left:5rem; margin-bottom:8rem;}
	.board-list li:before{top:5rem;}
	.board-list li .subject{font-size:11rem; width: calc(100% - 75rem);}
	.board-list li .date{font-size:10rem;}
	.board-top .btn-plus{background-size:12rem auto; width:35rem;}
	.main-info{gap:8rem;}
	.main-info .top{flex-direction: column; height:auto; gap:8rem;}
	
	.main-classroom{width:100%; border-radius:7rem;}
	.main-classroom > a{display:flex; align-items: flex-start; flex-direction: column;; padding:15rem;}
	.main-classroom > a em{font-size:10rem;}
	.main-classroom > a h3{font-size:17rem;}
	.main-classroom > a .btn-more{margin-top:2rem;}
	.main-classroom > a .btn-more span{font-size:11rem; padding-right:18rem;}
	.main-classroom > a .btn-more span:before{width:14rem; height:14rem; background-size:8rem auto;}
	.main-classroom > a .img{height:50rem; top:50%; right:10rem; bottom:unset; transform:translateY(-50%);}

	.main-cs{width:100%; border-radius:7rem; padding:15rem;}
	.main-cs .txt em{font-size:11rem;}
	.main-cs .txt h3{font-size:25rem;}
	.main-cs .txt .info-list{margin-top:6rem;}
	.main-cs .txt .info-list > li{font-size:11rem; margin-bottom:4rem;}
	.main-cs .img{height:50rem;}
	


	.main-info .bottom .list-link{grid-template-columns: repeat(2, 1fr);}
	.bottom{border-radius:7rem;}
	.bottom .list-link > li:nth-child(2n){border-right:none;}
	.bottom .list-link > li:nth-child(5),
	.bottom .list-link > li:nth-child(6){border-bottom:1px solid #e9e9e9;}
	.bottom .list-link > li{height:32rem;}
	.bottom .list-link > li a span{font-size:11rem;}
}


/* 교육 */
.main-lecture{position:relative; margin-top:30rem;}
.main-lecture .title{margin-bottom:20rem;}
.swiper-wrap{position:relative;}
.swiper-wrap .swiper-arr > div{top:31%; margin-top:0; width:8rem; height:15rem; background:url(../images/main/ic-arr.svg)no-repeat center; background-size:100% auto;}
.swiper-wrap .swiper-arr .swiper-button-prev{left:-25rem;}
.swiper-wrap .swiper-arr .swiper-button-next{right:-25rem; transform:rotate(-180deg); }
.lectureSwiper{overflow:hidden;}
/* .main-lecture__item{} */
.main-lecture__item .img{display:block; width:100%; height:200rem; border-radius:10rem; overflow:hidden;}
.main-lecture__item .img a{display:block; width:100%; height:100%;}
.main-lecture__item .img img{width:100%; height:100%; transform:scale(1); transition:all 0.5s ease;}
.main-lecture__item .img a:hover img{transform:scale(1.05); }
.main-lecture__item .txt{margin-top:15rem;}
.main-lecture__item .txt .cate{display:inline-block; margin-bottom:5rem;}
.main-lecture__item .txt .cate a{display:inline-block; font-size:14rem; font-weight:400; color:var(--color-point); line-height:1em;}
.main-lecture__item .txt .title{margin-bottom:0; padding-bottom:0;}
.main-lecture__item .txt .title a{display:block; font-size:18rem; font-weight:600; color:#222; line-height:1.3em; word-break:keep-all;}

@media all and (max-width:1300px){
	.main-lecture__item .img{height:170rem;}

}
@media all and (max-width:1100px){
	.main-lecture .swiper-arr{position:absolute; top:-61rem; right:0; display: flex; flex-direction: row-reverse; gap: 5rem;}
	.main-lecture .swiper-wrap .swiper-arr > div{top:unset; left: unset; right:unset; position:relative; display: flex; justify-content: center; align-items: center; width: 30rem; height: 30rem; border: 1px solid #e9e9e9; border-radius: 5rem; background: #fff; box-sizing: border-box;}
	.main-lecture .swiper-wrap .swiper-arr > div:before{content:''; width:6rem; height:12rem; background: #fff url(../images/main/ic-arr.svg) no-repeat center; background-size:contain;}
	.main-lecture .swiper-wrap .swiper-arr .swiper-button-next{right:unset;}
	.swiper-button-next.swiper-button-disabled, 
	.swiper-button-prev.swiper-button-disabled{opacity:1;}
	.swiper-button-next.swiper-button-disabled:before, 
	.swiper-button-prev.swiper-button-disabled:before{opacity:0.3;}
	.main-lecture__item .img{height:190rem;}
}
@media all and (max-width:768px){
	.main-lecture__item .img{height:230rem;}
}	

@media all and (max-width:620px){
	.main-lecture{margin-top:30rem;}
	.main-lecture__item .img{height:180rem;}
	.main-lecture__item .txt{margin-top:10rem;}
	.main-lecture__item .txt .title a{font-size:16rem;}
}
@media all and (max-width:480px){
	.main-lecture{margin-top:20rem;}
	.main-lecture .title{margin-bottom:10rem;}
	.main-lecture .swiper-arr{gap:3rem; top:-37rem;}
	.main-lecture .swiper-wrap .swiper-arr > div{width:20rem; height:20rem; border-radius: 3rem;}
	.main-lecture .swiper-wrap .swiper-arr > div:before{width: 4rem; height: 12rem;}
	.main-lecture__item .img{height:107rem; border-radius:7rem;}
	.main-lecture__item .txt{margin-top:5rem;}
	.main-lecture__item .txt .cate{line-height:8rem; margin-bottom:3rem;}
	.main-lecture__item .txt .cate a{font-size:10rem;}
	.main-lecture__item .txt .title a{font-size:12rem;}
	

}

@media all and (max-width:768px){
	.main-popup-layer{width:350rem !important; margin-left:0 !important; top:0 !important; left:0 !important;}
	
}