@charset="euc-kr";

/* °øÅë */
#wrapper{overflow:hidden; min-width:1300px; width:auto; margin:0 auto; font-family:'Pretendard'; text-align:center;}
#wrapper > div > img{position:relative; left:50%; transform:translateX(-50%);}


.thumb {position:relative; left:50%; transform:translateX(-50%);}

.mask {width: 1200px; position: relative; margin: 0 auto; min-height: 50px;}
.mask .img {position:relative; left:50%; transform:translateX(-50%);}


/* visual */
.visual{background: #4fb4ff;}
.visual .tit{position: absolute;}
.visual .tit.sub_tit{top: 160px; left: 30px;}
.visual .tit.main_tit{top: 300px; left: 10px;}
.visual .tit.obj{top: 60px; right: 60px;}


/* cont1 */
.cont1{padding: 100px 0; background: #edf6fc url(img/cont1_bg.png) no-repeat center top;}
.cont1 .tit{margin-bottom: 20px;}
.cont1 .lineup1{}
.cont1 .lineup2{margin-top: -8%;}
.cont1 .lineup3{margin-top: -9%;}
.cont1 .reason{position: absolute; right: 100px; bottom: 0; transform: translateY(300%);}
.cont1 .slider{position: relative; margin-top: -17%;}
.cont1 .slider .swiper-button-prev{width: 30px; height: 49px; background: url(img/slider_arr_prev.png) no-repeat 0 0;}
.cont1 .slider .swiper-button-prev::after{display: none;}
.cont1 .slider .swiper-button-next{width: 30px; height: 49px; background: url(img/slider_arr_next.png) no-repeat 0 0;}
.cont1 .slider .swiper-button-next::after{display: none;}

/* cont2 */
.cont2{padding: 90px 0; background: #007cef url(img/cont2_bg.png) no-repeat center top;}
.cont2 .ticket_wrap{position: relative; margin: 40px 0 20px;}
.cont2 .ticket_wrap .img_wrap{overflow: hidden; position: absolute; top: 224px; left: 41px; border-radius: 20px;}
.cont2 .btn{display: inline-block; position: relative;}
.cont2 .btn::after{content: ''; position: absolute; bottom: -40px; right: -40px; width: 86px; height: 81px; background: url(img/cursor_ico.png) no-repeat 0 0;}

/* cont3 */
.cont3{background: #ffd452;}

/* cont4 */
.cont4{padding: 100px 0; background: #e4f2ff url(img/cont4_bg.png) no-repeat center top;}
.cont4 div[class^="box"]{padding: 70px 45px; margin-top: 50px; background: #fff; border-radius: 45px; box-shadow: 0 20px 40px #b8ddff;}
.cont4 div[class^="box"].box1{margin-top: 60px;}
.cont4 div[class^="box"].box2{padding: 70px 65px;}
.cont4 .box1{}
.cont4 .box1 .txt{}
.cont4 .box1 .con{margin-top: 45px;}
.cont4 .box2 .slider_wrap{display: grid; grid-template-columns: 1fr minmax(0, 673px); gap: 0 36px; margin-top: 50px;}
.cont4 .box2 .slider_wrap .thumb_slider{}
.cont4 .box2 .slider_wrap .thumb_slider .swiper-wrapper{display: grid; align-content: stretch; gap: 20px 0;}
.cont4 .box2 .slider_wrap .thumb_slider .swiper-slide{display: flex; flex-direction: column; justify-content: center; width: 100% !important; background: #dfdfdf; border-radius: 20px; cursor: pointer;}
.cont4 .box2 .slider_wrap .thumb_slider .swiper-slide p{color: #969696; font-size: 34px; font-weight: 800;}
.cont4 .box2 .slider_wrap .thumb_slider .swiper-slide span{color: #969696; font-size: 30px; font-weight: 600;}
.cont4 .box2 .slider_wrap .thumb_slider .swiper-slide.swiper-slide-thumb-active{background: #1d61ff;}
.cont4 .box2 .slider_wrap .thumb_slider .swiper-slide.swiper-slide-thumb-active p{color: #fff;}
.cont4 .box2 .slider_wrap .thumb_slider .swiper-slide.swiper-slide-thumb-active span{color: #fff;}
.cont4 .box2 .slider_wrap .main_slider{overflow: hidden; min-width: 0;}
.cont4 .box2 .slider_wrap .main_slider .swiper-slide{overflow: hidden; border-radius: 20px;}
.cont4 .box2 .refer_txt{margin-top: 35px; text-align: right;}
.cont4 .video{overflow: hidden; margin-top: 100px;}
.cont4 .video .slider{margin-top: 50px;}

/* cont5 */
.cont5{padding: 100px 0;}
.cont5 .tab{display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 60px;}
.cont5 .tab a{position: relative; padding: 40px 0; background: #dbdbdb; color: #9f9f9f; font-size: 35px; font-weight: 700; line-height: 1em;}
.cont5 .tab a.active{background: #ffb322; color: #fff;}
.cont5 .tab a:not(:first-child)::before{content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #fff;}
.cont5 .tab_cont {position: relative;}
.cont5 .tab_cont .item{display: none; width: 100%; padding: 65px 34px; margin-top: 1px; border: 1px solid #dbdbdb;}
.cont5 .tab_cont .item.active {display: block;}
.cont5 .tab_cont .slider{overflow: hidden; position: relative; width: 900px; height: 385px; margin: 25px auto;}
.cont5 .tab_cont .slider .swiper-wrapper{}
.cont5 .tab_cont .slider .swiper-slide{display: flex; align-items: center; justify-content: center;}
.cont5 .tab_cont .gif_wrap{position: relative;}
.cont5 .tab_cont .gif_wrap .gif{position: absolute; bottom: 47px; left: 420px;}
.cont5 .slider .swiper-button-prev{transform: translate(0, -50%); left: 0; width: 56px; height: 56px; margin-top: 0; background: url(img/cont5_arr_prev.png) no-repeat 0 0;}
.cont5 .slider .swiper-button-prev::after{display: none;}
.cont5 .slider .swiper-button-next{transform: translate(0, -50%); right: 0; width: 56px; height: 56px; margin-top: 0; background: url(img/cont5_arr_next.png) no-repeat 0 0;}
.cont5 .slider .swiper-button-next::after{display: none;}



#wrapper .learning_routine_event .mask,
#wrapper .best_routine .mask,
#wrapper .bonus_event .mask{width:1300px;}
.swiper-button-prev:after, .swiper-button-next:after{display: none;}


/* lectureList */
#lectureList{width:1200px; margin:0 auto;}

/* floating(remove: °­Á ¸®½ºÆ® µµ´Þ ½Ã »ç¶óÁü) */
/* 2025-12-31 
.floatingUi{position:fixed; top:8vw; right:1vw; z-index:100; display:flex; flex-direction: column; width:159px; height:628px; background: url(img/r_floating2.png) no-repeat; }
.floatingUi ul{padding-top: 0;}
.floatingUi a{display: block; width:100%; height: 85px; text-indent:-9999em;}
.floatingUi li:nth-of-type(1) a{margin-top: 0; background: url(img/r_floating2.png) no-repeat 0 0;}
.floatingUi li:nth-of-type(2) a{background: url(img/r_floating2.png) no-repeat 0 -85px;}
.floatingUi li:nth-of-type(3) a{background: url(img/r_floating2.png) no-repeat 0 -170px;}
.floatingUi li:nth-of-type(4) a{background: url(img/r_floating2.png) no-repeat 0 -255px;}
.floatingUi li:nth-of-type(5) a{background: url(img/r_floating2.png) no-repeat 0 -340px;}
.floatingUi li:nth-of-type(6) a{height: 152px; margin-top: 10px; background: url(img/r_floating2.png) no-repeat 0 -435px;}
.floatingUi a.top{height: 30px; margin-top: 10px; background: url(img/r_floating2.png) no-repeat 0 -597px;}
.floatingUi a.active{background:url(img/floatingUi_on.png) no-repeat; }
.floatingUi li.on a{background-position-x: -159px;}
.floating.remove{position:absolute; top:50%; right:1%;}
*/

.floatingUi{position:fixed; top:7vw; right:1vw; z-index:100; display:flex; flex-direction: column; width:159px; height:745px; background: url(img/r_floating3.png) no-repeat; }
.floatingUi ul{padding-top: 0;}
.floatingUi a{display: block; width:100%; height: 85px; text-indent:-9999em;}
.floatingUi li:nth-of-type(6){padding-top:18px;}
.floatingUi li:nth-of-type(8){margin-top:2px;}
.floatingUi li:nth-of-type(9){margin-top:2px;}
.floatingUi li:nth-of-type(1) a{margin-top: 92px; background: url(img/r_floating3.png) no-repeat 0 -92px;}
.floatingUi li:nth-of-type(2) a{background: url(img/r_floating3.png) no-repeat 0 -177px;}
.floatingUi li:nth-of-type(3) a{background: url(img/r_floating3.png) no-repeat 0 -262px;}
.floatingUi li:nth-of-type(4) a{background: url(img/r_floating3.png) no-repeat 0 -347px;}
.floatingUi li:nth-of-type(5) a{background: url(img/r_floating3.png) no-repeat 0 -432px;}
.floatingUi li:nth-of-type(6) a{height:73px;}
.floatingUi li:nth-of-type(7) a{height:28px;}
.floatingUi li:nth-of-type(8) a{height:28px;}
.floatingUi li:nth-of-type(9) a{height:28px;}
.floatingUi a.top{height: 30px; margin-top: 19px; /* background: url(img/r_floating3.png) no-repeat 0 -689px; */}
.floatingUi a.active{background:url(img/floatingUi_on.png) no-repeat; }
.floatingUi li.on a{background-position-x: -159px;}
.floating.remove{position:absolute; top:50%; right:1%;}


/* ------------------------------ animation css ¡é ---------------------------------------------
	animation:60s linear 0s infinite normal forwards running rollingTop1;
	animation:60s linear 0s infinite normal forwards running rollingTop2;
	animation:click 1s ease-in infinite alternate;
	animation:blinker 1s ease-in infinite alternate;
------------------------------------------------------------------------------------------ */

/* ÇÑÂÊÀ¸·Î È帣´Â ¾Ö´Ï¸ÞÀ̼Ç(top:À§·Î, right:¿À¸¥ÂÊÀ¸·Î) */
@keyframes rollingTop1 { 
    0% {transform: translateY(0);}
    50% {transform: translateY(-100%);}
    50.01%{transform: translateY(100%);}
    100%{transform: translateY(0);}
}

@keyframes rollingTop2 {
    0% {transform: translateY(0);}
    100% {transform: translateY(-200%);}
}

@keyframes rollingRight1 { 
	0% {transform: translateX(0);}
	50% {transform: translateX(100%);}
	50.01%{transform: translateX(-100%);}
	100%{transform: translateX(0);}
}

@keyframes rollingRight2 {
	0% {transform: translateX(-200%);}
	100% {transform: translateX(0);}
}

/* ¼Õ°¡¶ô Ŭ¸¯ À¯µµ ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes click{
	0% {transform:translate(0,0);}
	100% {transform:translate(10%,10%);}
}

/* ±ô¹Ú°Å¸®´Â ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes blinker {
	50%{opacity:0;}
}