@charset="euc-kr";


/* °øÅë */
#wrapper{overflow:hidden; min-width:1300px; width:auto; margin:0 auto; text-align:center;}
#wrapper * { font-family: "Pretendard"; }
#wrapper > div > img{position:relative; left:50%; transform:translateX(-50%); display:block;}
#wrapper > div > .inner{width:1200px; margin:0 auto; display: flex; flex-direction: column; align-items: center;}
#wrapper .mask { width:1300px; position:relative; margin:0 auto; min-height:50px; text-align:center; }
#wrapper .mask .thumb { position:relative; left:50%; transform:translateX(-50%); }


/* floating */
.floatingUi{position:fixed;top: 50%;right: 20px; z-index:100;transform: translate(0, -50%);}
.floatingUi ul{ margin-bottom: 10px; padding-top: 108px;background: url(img/floating.png) no-repeat 0 0;}
.floatingUi ul li a{width: 206px;height: 111px;background: url(img/floating.png) no-repeat;display: block;font-size: 0;}
.floatingUi ul li:nth-of-type(1) a {background-position: 0 -108px;}
.floatingUi ul li:nth-of-type(2) a {background-position: 0 -219px;}
.floatingUi ul li:nth-of-type(3) a {background-position: 0 -330px;}
.floatingUi ul li:nth-of-type(4) a {background-position: 0 -441px;}
.floatingUi ul li:nth-of-type(5) a {background-position: 0 -552px;height: 119px;}
.floatingUi .top_btn {background: url(img/floating.png) no-repeat center -681px;display: block;width: 101px;height: 40px;margin: 0 auto;font-size: 0;}


/* visual */
.visual{position:relative;background: #070146;}
.visual .inner{position:absolute; top:0; left:50%; transform:translateX(-50%); height:100%;}
.visual .tit {position:absolute;top: 89px;left: 50%; margin-left: -293px; opacity:0; }
.visual .btn {position:absolute;top: 486px;left: 0;right: 0;margin: 0 auto;opacity:0;background: url(img/visual_btn.png) no-repeat 0 0/contain;display: block;width: 470px;height: 91px;font-size: 0;}
.visual .badge_ {position:absolute;top: 142px;left: 50%;margin-left: -491px; opacity:0;transition:all 0.7s 0.6s ease;}
.visual .obj1 {position:absolute;top: 480px;left: 50%;m;margin-left: -736px; animation: floatUp 4s ease-in-out infinite; opacity:0; margin-top:-70px; transition:all 1s 0.7s ease;}
.visual .obj2 {position:absolute;top: 596px;left: 50%;margin-left: -538px; animation: floatDown 3.8s ease-in-out infinite; opacity:0; margin-top:-70px; transition:all 1s 0.7s ease;}
.visual .obj3 {position:absolute;top: 519px;left: 50%;margin-left: -362px; animation: floatUp 4.1s ease-in-out infinite; opacity:0; margin-top:-70px; transition:all 1s 0.7s ease;}
.visual .obj4 {position:absolute;top: 615px;left: 50%;margin-left: -213px;z-index: 1; animation: bounce_ani2 1.2s ease infinite; opacity:0; margin-top:-70px; transition:all 1s 0.7s ease;}
.visual .obj5 {position:absolute;top: 630px;left: 50%;margin-left: -148px; animation: bounce_ani2 1.1s 0.7s ease infinite; opacity:0; margin-top:-70px; transition:all 1s 0.7s ease;}
.visual .obj6 {position:absolute;top: 629px;left: 50%;margin-left: 226px; animation: bounce_ani2 1.3s ease infinite; opacity:0; margin-top:-70px; transition:all 1s 0.7s ease;}
.visual .obj7 {position:absolute;top: 550px;left: 50%;margin-left: 445px;animation: floatDown 3.9s ease-in-out infinite;opacity:0;margin-top:-70px;transition:all 1s 0.7s ease;z-index: 1;}
.visual .obj8 {position:absolute;top: 415px;left: 50%;margin-left: 497px;animation: floatUp 4.2s ease-in-out infinite;opacity:0;margin-top:-70px;transition:all 1s 0.7s ease;z-index: 1;}
.visual .obj9 {position:absolute;top: 285px;left: 50%;margin-left: 563px;animation: floatDown 3.7s ease-in-out infinite;opacity:0;margin-top:-70px;transition:all 1s 0.7s ease;z-index: 1;}
.visual .obj10 {position:absolute;top: 109px;left: 50%;margin-left: 345px;animation: floatUp 4s ease-in-out infinite;opacity:0;margin-top:-70px;transition:all 1s 0.7s ease;z-index: 1;}
.visual .p1 {position:absolute;top: 327px;left: 50%;margin-left: -525px; animation: bounce_ani 1.3s ease infinite; opacity:0; margin-top:-70px; transition:all 1s 0.7s ease;}
.visual .p2 {position:absolute;top: 277px;left: 50%;margin-left: 302px;animation: bounce_ani 1.3s 0.6s ease infinite;opacity:0;margin-top:-70px;transition:all 1s 0.7s ease;z-index: 1;}	
.visual .arrow_wrap {position:absolute;top: -59px;left: 50%;margin-left: 338px;height: 709px;overflow:hidden;width: 300px;}
.visual .arrow_wrap .arrow {position:absolute;left:0;bottom:0;width:100%;height:0;overflow:hidden;transition: height 1.2s 1.5s cubic-bezier(0.22, 1, 0.36, 1);-webkit-mask-image:linear-gradient(to top, #000 0%, #000 82%, transparent 100%);mask-image:linear-gradient(to top, #000 0%, #000 82%, transparent 100%);}
.visual .arrow_wrap .arrow img {position:absolute;left:0;bottom:0;}

.visual.on .tit { animation: titShow 0.5s cubic-bezier(0, 0.23, 0.41, 1) forwards; }
.visual.on .btn { animation: titShow2 0.5s .3s cubic-bezier(0, 0.23, 0.41, 1) forwards; }
.visual.on .badge_ { opacity:1; }
.visual.on .obj1 { opacity:1; margin-top:0; }
.visual.on .obj2 { opacity:1; margin-top:0; }
.visual.on .obj3 { opacity:1; margin-top:0; }
.visual.on .obj4 { opacity:1; margin-top:0; }
.visual.on .obj5 { opacity:1; margin-top:0; }
.visual.on .obj6 { opacity:1; margin-top:0; }
.visual.on .obj7 { opacity:1; margin-top:0; }
.visual.on .obj8 { opacity:1; margin-top:0; }
.visual.on .obj9 { opacity:1; margin-top:0; }
.visual.on .obj10 { opacity:1; margin-top:0; }
.visual.on .p1 { opacity:1; margin-top:0; }
.visual.on .p2 { opacity:1; margin-top:0; }
.visual.on .arrow_wrap .arrow {height:100%;}

@keyframes titShow {
	0% { opacity:0; transform:translateY(80px) scale(.9); }
	60% { opacity:1; transform:translateY(-12px) scale(1.02); }
	100% { opacity:1; transform:translateY(0) scale(1); }
}	
@keyframes titShow2 {
	0% { opacity:0; transform:translateY(20px) scale(.9); }
	60% { opacity:1; transform:translateY(-3px) scale(1.02); }
	100% { opacity:1; transform:translateY(0) scale(1); }
}	
@keyframes floatUp {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes floatDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
}
@keyframes bounce_ani {
	0%,20%,53%,80%,100% {transition-timing-function:cubic-bezier(0.215,0.610,0.355,1.000);transform:translate3d(0,0,0)}
	40%,43% {transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transform: translate3d(0,-10px,0);}
	70% {transition-timing-function:cubic-bezier(0.755,0.050,0.855,0.060);transform: translate3d(0,-5px,0);}
	90% {transform: translate3d(0,-2px,0);}
}	
@keyframes bounce_ani2 {
	0%   { transform: scale(1, 1) translateY(0); }
	10%  { transform: scale(1.1, 0.9) translateY(0); }
	30%  {transform: scale(0.9, 1.1)   translateY(-20px);}
	50%  { transform: scale(1.05, 0.95) translateY(0); }
	58%  {transform: scale(1, 1) translateY(-3px);}
	100% {transform: scale(1, 1) translateY(-3px);}
}


/* powerup */
.powerup { background: url(img/powerup_bg.png) repeat center center;padding: 90px 0 100px;}
.powerup .inner {  }
.powerup .inner .tit {  }
.powerup .inner .con {margin-top: 80px;position: relative;}
.powerup .inner .con .chart { position: absolute; top: 443px; right: 130px; z-index: 2; width: 279px; height: 314px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.powerup .inner .con .chart img { width: 355px; display: none;}
.powerup.on .inner .con .chart img { display: block;}
.powerup .arrow {display:flex;align-items:center;position: absolute;top: 407px;left: 492px;z-index: 2;}
.powerup .arrow img {opacity:0;animation:arrowBlink 1.2s infinite; }
.powerup .arrow img:nth-child(1) {animation-delay:0s;}
.powerup .arrow img:nth-child(2) {animation-delay:0.2s;}
.powerup .arrow img:nth-child(3) {animation-delay:0.4s;}
.powerup .bar1 { position: absolute; top: 252px; left: 226px; animation:batteryBlink 2s ease-in-out infinite;}
.powerup .bar2 { position: absolute; top: 199px; left: 927px;}
.powerup .bar2 .bar_ { overflow: hidden;}
.powerup .bar2 .bar_ img { transform: translate(-100%, 0); }
.powerup.on .bar2 .bar_ img { animation:barAni 3.95s ease infinite;}
.powerup .bar2 .heart { position: absolute; top: -6px; left: -22px;}

@keyframes arrowBlink {
	0%, 100% {opacity:0;}
	30%, 60% {opacity:1;}
}
@keyframes batteryBlink {
	0%,10% {opacity:1;}
	15%,25% {opacity:.2;}
	30%,40% {opacity:1;}
	45%,55% {opacity:.2;}
	60%,70% {opacity:1;}
	75%,85% {opacity:.2;}
	90%,100% {opacity:1;}
}
@keyframes barAni {
	0%  {transform: translate(-100%, 0); opacity:1;}
	1%  {transform: translate(-100%, 0);}
	30% {transform: translate(0, 0);}
	85% {transform: translate(0, 0);opacity: 1;}
	100%  {transform: translate(0, 0);opacity:0;}
}


/* unlock */
.unlock { position: relative;background: #86ff94 url(img/unlock.png) repeat-x center center;padding: 90px 0 100px;}
.unlock .inner {}
.unlock .inner .tit {  }
.unlock .inner .con {margin-top: 40px;position: relative;}
.unlock .arrow_group { position: absolute; inset: 0; }
.unlock .arrow {display:flex;align-items:center;position: absolute;left: 426px;z-index: 2;}
.unlock .arrow_group.selected .arrow {display:none;}
.unlock .arrow_group.selected .arrow.on {display:block;}
.unlock .arrow1 {top: 189px;}
.unlock .arrow2 {top: 337px;}
.unlock .arrow3 {top: 487px;}
.unlock .arrow4 {top: 637px;}
.unlock .arrow5 {top: 787px;}
.unlock .arrow6 {top: 937px;}
.unlock .arrow img {opacity:0;animation:arrowBlink 1.2s infinite;margin-left: -2px;}
.unlock .arrow img:nth-child(1) {animation-delay:0s;}
.unlock .arrow img:nth-child(2) {animation-delay:0.2s;}
.unlock .arrow img:nth-child(3) {animation-delay:0.4s;}
.unlock .lock { position: absolute; top: 329px; right: 90px; width: 397px; height: 371px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.unlock .lock img { width: 682px;}
.unlock .tab_wrap { position: absolute; inset: 0;}
.unlock .tab_menu {display:flex;flex-direction: column;gap: 7px;padding: 138px 65px 0 46px;position: absolute;top: 0;left: 0;}
.unlock .tab_menu button { cursor: pointer; width: 499px;height: 143px;opacity: 0;}
.unlock .tab_menu button + button {border-left:0;}
.unlock .tab_menu button.on {background:#111;color:#fff;}
.unlock .tab_panel {}
.unlock .tab_cont {display:none; }
.unlock .tab_cont.on {display:block;}
.unlock .tab_cont a {position: absolute;right: 60px;display: flex;width: 471px;height: 101px;bottom: 99px;justify-content: center;align-items: center;padding-bottom: 8px;}
.unlock .tab_cont a img { animation: arrowBlink 1.4s ease infinite; }
.unlock .obj1 {position: absolute;left:50%;margin-left: -1076px;top: 469px; opacity:.35; animation:starBlink 1.8s ease-in-out infinite;}
.unlock .obj2 {position: absolute;left:50%;margin-left: -720px;top: 615px;opacity:.35;animation:starBlink 1.8s ease-in-out infinite;animation-delay: .3s;}
.unlock .obj3 {position: absolute;left:50%;margin-left: -1008px;top: 713px; animation:heartFloat 3s ease-in-out infinite;}
.unlock .obj4 {position: absolute;left:50%;margin-left: -1198px;top: 869px;opacity:.35;animation:starBlink 1.8s ease-in-out infinite;animation-delay: .1s;}
.unlock .obj5 {position: absolute;left:50%;margin-left: -752px;top: 891px;animation:heartFloat 3s ease-in-out infinite;animation-delay: .5s;}
.unlock .obj6 {position: absolute;left:50%;margin-left: -925px;top: 970px;opacity:.35;animation:starBlink 1.8s ease-in-out infinite;animation-delay: .4s;}
.unlock .obj7 {position: absolute;left:50%;margin-left: 864px;top: 470px; opacity:.35; animation:starBlink 1.8s ease-in-out infinite;}
.unlock .obj8 {position: absolute;left:50%;margin-left: 1045px;top: 628px; opacity:.35; animation:starBlink 1.8s ease-in-out infinite; animation-delay: .3s;}
.unlock .obj9 {position: absolute;left:50%;margin-left: 684px;t;top: 699px; animation:heartFloat 3s ease-in-out infinite;}
.unlock .obj10 {position: absolute;left:50%;margin-left: 741px;t;top: 889px; opacity:.35; animation:starBlink 1.8s ease-in-out infinite;animation-delay: .1s;}
.unlock .obj11 {position: absolute;left:50%;margin-left: 1013px;top: 850px; animation:heartFloat 3s ease-in-out infinite;animation-delay: .5s;}
.unlock .obj12 {position: absolute;left:50%;margin-left: 960px;top: 1015px; opacity:.35; animation:starBlink 1.8s ease-in-out infinite;animation-delay: .4s;}

@keyframes heartFloat {
	0% {transform:translateY(0) scale(1);}
	15% {transform:translateY(-6px) scale(1.04);}
	25% {transform:translateY(-10px) scale(.99);}
	35% {transform:translateY(-14px) scale(1.03);}
	50% {transform:translateY(-18px) scale(1);}
	65% {transform:translateY(-14px) scale(1);}
	80% {transform:translateY(-8px) scale(1.02);}
	90% {transform:translateY(-4px) scale(.995);}
	100% {transform:translateY(0) scale(1);}
}
@keyframes starBlink {
	0%,100% {opacity:.35;transform:scale(.9);}
	20% {opacity:1;transform:scale(1.08);}
	40% {opacity:.5;transform:scale(.95);}
	60% {opacity:.9;transform:scale(1.03);}
	80% {opacity:.4;transform:scale(.92);}
}


/* allclear */
.allclear { position: relative;background: #74daff url(img/allclear_bg.png) repeat-x center bottom; padding: 90px 0 100px;}
.allclear .inner { }
.allclear .inner .tit {  }
.allclear .inner .con {margin-top: 40px;position: relative; z-index:1; }
.allclear .tab_wrap { position: relative;}
.allclear .tab_menu { position: absolute; display: flex; gap: 10px; top: 0; left: 0; right: 0;}
.allclear .tab_menu button { flex: 1; height: 130px; opacity: 0;}
.allclear .tab_menu .tab_panel {}
.allclear .tab_cont {display:none;}
.allclear .tab_cont.on {display:block;}
.allclear .tab_cont a { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 59px; display: flex; width: 471px; height: 100px; justify-content: center; align-items: center; padding: 0 0 8px 4px;}
.allclear .tab_cont a img { animation: arrowBlink 1.4s ease infinite; }
.allclear .obj1 {position: absolute;left:50%;margin-left: -1395px;top: 244px;animation: cloudUp 3.2s ease-in-out infinite;}
.allclear .obj2 {position: absolute;left:50%;margin-left: -1104px;top: 774px;animation: cloudtDown 4.5s 0.8s ease-in-out infinite;}
.allclear .obj3 {position: absolute;left:50%;margin-left: 850px;top: 118px;animation: cloudUp 3.7s ease-in-out infinite;}
.allclear .obj4 {position: absolute;left:50%;margin-left: 632px;top: 756px;animation: cloudUp 4s 1s  ease-in-out infinite;}
.allclear .obj5 {position: absolute;left:50%;margin-left: 944px;top: 821px;animation: cloudUp 5s ease-in-out infinite;}
	
@keyframes cloudUp {
    0%, 100% { transform: translateY(0); }
    50% {transform: translateY(-27px);}
}
@keyframes cloudtDown {
    0%, 100% { transform: translateY(0); }
    50% {transform: translateY(27px);}
}

				
/* newclass */
.newclass {position: relative;background: #E0CAFF;padding: 78px 0 79px;}
.newclass .inner {}
.newclass .inner .tit {  }
.newclass .inner .con {margin-top: 30px;}
.newclass_slide {width: 2560px;overflow: visible;transform: translate(-23px, 0);}
.newclass_slide .swiper-slide {width: 434px;transform: translateX(-21px) scale(.9);transition:.5s;}
.newclass_slide .swiper-slide-prev {transform: translateX(-21px) scale(.9);}
.newclass_slide .swiper-slide-active {transform:translateX(0) scale(1);}
.newclass_slide .swiper-slide-next {transform: translateX(21px) scale(.9);}
.newclass_slide .swiper-slide-next ~ .swiper-slide {transform: translateX(21px) scale(.9);}


/* apply_banner */
.apply_banner {position: relative;background: #FFE1A9;padding: 92px 0;}
.apply_banner .btn {position: relative;overflow: hidden;border-radius: 25px;}
.apply_banner .btn a {background: url(img/apply_banner_btn.png) no-repeat;width: 1040px;height: 117px;display: block;font-size: 0;}


/* notice_wrap */
.notice_wrap{z-index:1; position:relative; width:1200px; margin:0 auto;}
.notice_wrap > .tit{display:block; height:70px; background-color:#111; border-radius:40px; font-family:"GmarketSansBold" !important; font-size:28px; color:#fff; line-height:74px; text-align:center;}
.notice_wrap > .tit span{position:relative; padding-right:30px;}
.notice_wrap > .tit span:before{content:""; display:block; position:absolute; top:8px; right:0; width:20px; height:13px; background:url(img/notice_arr.png) 0 0 no-repeat; transition:transform .5s;}
.notice_wrap > .tit.on span:before{transform:rotate(180deg);}
.notice_wrap .con{display:none; padding:50px; background-color:#F4F4F4; border-radius:40px; text-align:left; letter-spacing:-1px;}
.notice_wrap .con .tit{margin-bottom:10px; padding-left:10px; font-weight:900; font-size:20px; color:#333;}
.notice_wrap .con ul+p{margin-top:25px;}
.notice_wrap .con ul li{position:relative; padding-left:20px; font-size:16px; text-indent:-10px; color:#666;}
.notice_wrap .con ul li:not(:first-child){margin-top:4px;}
.notice_wrap .con ul li .bullet{width:5px; height:5px; display:block; background:#666; border-radius:50%; flex-shrink:0; margin:11px 8px 0 0;}
.notice_wrap .con ul li .bold{color:#333;}
.notice_wrap .con ul li.red{color:#F20000;}
.notice_wrap .con ul li a{font-weight:500;}


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





/* ------------------------------ 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;
------------------------------------------------------------------------------------------ */

/* Ä«µå Èçµé¸®´Â ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes tiltShake {
	0%   { transform: rotateZ(0deg); }
	15%  { transform: rotateZ(-2deg); }
	30%  { transform: rotateZ(2deg); }
	45%  { transform: rotateZ(-1deg); }
	60%  { transform: rotateZ(1deg); }
	75%  { transform: rotateZ(-1deg); }
	100% { transform: rotateZ(0deg); }
}

/* ÇÑÂÊÀ¸·Î È帣´Â ¾Ö´Ï¸ÞÀ̼Ç(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 rollingLeft1 {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100%);
    }
    50.01% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes rollingLeft2 {
    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;}
}