@charset "euc-kr";

/* °øÅë */
#wrapper { overflow: hidden; min-width: 1200px; width: auto; margin: 0 auto; text-align: center; }
#wrapper .mask{ width:1200px; margin:0 auto; display:flex; flex-wrap: wrap; justify-content:center; position: relative;}
.mask .img {position:relative; left:50%; transform:translateX(-50%);}

/*fade in*/
.fade {	position:relative; transform:translate(0, 100px); opacity:0; transition-property:opacity, transform; transition-duration:1s; }
.fade.active { transform:translate(0, 0); opacity:1; }
.fade-1 { transition-delay:0s; } 
.fade-2 { transition-delay:.2s; } 
.fade-3 { transition-delay:.4s; } 
.fade-4 { transition-delay:.6s; } 
.fade-5 { transition-delay:.8s; } 
.fade-6 { transition-delay:1s; } 
.fade-7 { transition-delay:1.2s; } 
.fade-8 { transition-delay:1.4s; } 
.fade-9 { transition-delay:1.6s; } 
.fade-10 { transition-delay:1.8s; } 


/* visual */
.visual{overflow:hidden; background: linear-gradient(to bottom, #102ed6 0%, #081870 100%);}
.visual .tit_wrap{position:absolute; left: 0; top: 180px; z-index: 1;}
.visual .tit_wrap .tit_obj{position: absolute; top: 0; right: 0; opacity: 0;}
.visual .tit_wrap.aos-init .tit_obj{opacity: 1; animation: floatUpDown 2s 1s infinite; transition: opacity 0.4s 1s;}
.visual .top_light{position: absolute; top: 0; right: -80px;}
.visual .obj1{position: absolute; bottom: 0; right: -260px;}

/* keyframes */
@keyframes revealMask {
  from { clip-path: inset(0 0 0 100%); }  /* ¿À¸¥ÂÊ¿¡¼­ ½ÃÀÛ */
  to   { clip-path: inset(0 0 0 0); }     /* ÀüºÎ º¸¿©Áü */
}

@keyframes fadeInMoveRight {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* À§¾Æ·¡·Î µÕµÕ ¶°´Ù´Ï´Â È¿°ú */
@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}


/* analyze */
.analyze {padding:100px 0; background: #f3f7fc url(img/analyze_bg.png) no-repeat center bottom; background-blend-mode: darken;}
.analyze .tit{padding:0 0 50px;}
.analyze .txt {position: absolute;left: 0;right: 0;margin: 0 auto;text-align: center;font-size: 25px;color: #000;font-weight: 500;line-height: 1.7;letter-spacing: -1.5px;}
.analyze .txt1 {top: 423px;}
.analyze .txt2 {top: 740px;}
.analyze .txt3 {top: 1075px;}
.analyze .txt .line {padding: 0 8px 1px; transition-delay:.2s; font-weight: 700;padding: 0 5px;background-repeat: no-repeat;background-size: 0% 92%;transition: background-size 1.5s 0s;background-position: left bottom;background-image: linear-gradient(to right, #ffd850, #ffd850);}
.analyze .txt .line.active { animation: fadeUp .8s; animation-fill-mode: forwards; animation-delay: .2s; background-size: 100% 93%; transition: background-size 1.5s 0s; }
.analyze .txt .line.delay1 { transition-delay:.5s; }
.analyze .txt .line.delay2 { transition-delay:.8s; }
.analyze .txt .line.delay3 { transition-delay:0.9s; }
.analyze .txt .line.delay4 { transition-delay:1.1s; }

/* banner_disital */
.banner_disital {position:relative; background: #14008b;}
.banner_disital .bg{position:absolute; left:0; top:0; background:#0066e0; width:50%; height:100%;}
.banner_disital .obj {position: absolute;left: 50%;}
.banner_disital .chara {left: -131px;bottom: 0;}
.banner_disital .txt {top:50%; left: 0;right: 0;margin: -88px auto 0;}

/* offer */
.offer {position:relative; background: #fff; padding:100px 0; z-index:2;}
.offer .tit{padding:0 0 74px;}
.offer .line {position: absolute;top: 655px;left: 50%;width: 352px;height: 28px;border-radius: 14px;border: 1px solid #d1d1d1;background: #fff;transform: translate(-439px, 0);}
.offer .line span {display: block;height: 100%;background: #f20000;border-radius: 14px;width:0;transition:1s;}
.offer .line.active span {width:100%;}
.offer .circle {position: absolute;top: 555px;left: 50%; transform: translate(107px, 0);}
.offer .offer_txt {position: absolute;left: 50%;transform: translate(203px, 0);top: 676px;}

/* project */
.project {background: #f1effd; padding:100px 0;}
.project .tit{padding:0 0 60px;}
.project .tab_wrap { position:relative; margin:60px 0 0;}
.project .tab_wrap .tab_btn { position: absolute; top: 33px; left: 302px; right: 32px; display: flex; }
.project .tab_wrap .tab_btn button { height: 113px; width: 100%; opacity: 0; border:1px solid red;}
.project .tab_wrap .tab_btn button.on {}
.project .tab_con {}
.project .project_new{margin: 0 0 55px;}
.project_slide .swiper-slide {width:564px;}
.project_slide .swiper-slide img {width:auto;}

/* lecture_plan */
.lecture_plan {background: #f3f7fc; padding:100px 0;}
.lecture_plan .tit{padding:0 0 57px;}
.lecture_plan .tab_wrap {display: flex;justify-content: flex-start;width: 100%; }
.lecture_plan .tab_wrap .tab_btn { width: 315px; flex-shrink: 0; }
.lecture_plan .tab_wrap .tab_btn button {border: 1px solid #fff;height:70px;overflow: hidden;transition:.3s ease-out;width: 100%;border-radius: 12px;text-align: left;padding: 17px 33px;background: #fff url(img/lecture_plus.png) no-repeat calc(100% - 33px) 25px;margin-bottom: 17px;}
.lecture_plan .tab_wrap .tab_btn button strong {transition:.3s; color: #969696; font-size: 24px; font-weight: 600; letter-spacing: -1.2px; }
.lecture_plan .tab_wrap .tab_btn button p {transition:.3s; padding-top: 17px; font-size: 17px;color: #000;letter-spacing: -1px;}
.lecture_plan .tab_wrap .tab_btn button.on {background-image: url(img/lecture_plus2.png);height:178px;border: 1px solid #7ab0e2;padding: 17px 33px 30px;box-shadow: 0 2px 18px rgb(122 176 226 / 60%);border-radius: 18px;}
.lecture_plan .tab_wrap .tab_btn button.on strong { color: #000;}
.lecture_plan .tab_wrap .tab_btn button.on p { }
.lecture_plan .tab_wrap .tab_con {margin-left: 18px;flex-grow: 1;}

/* setting */
.setting {background: #33354b; padding:100px 0;}


/* banner2 */
.banner2 {background: #010728 url(img/banner2_bg_2.png) no-repeat center bottom; height:250px; background-attachment: fixed; background-blend-mode: difference;}
.banner2 .mask{align-items: center; height: 100%;}


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

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