@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;}

/*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{background:#010207;}
.visual .tit{position:absolute; left:365px; top:63px;}
.visual .object_1{position:absolute; left:26px; top:118px; z-index:2;
  opacity: 0;
  transform: translateX(-30px);
  animation: fadeInMoveRight 0.5s ease-out forwards, floatUpDown 2s ease-in-out infinite;
  animation-delay: 0.5s; /* 0.5ÃÊ ÈÄ¿¡ ³ªÅ¸³ª±â ½ÃÀÛ */

}
.visual .object_2{position:absolute; left:-149px; top:-312px; animation: revealMask 1s ease-out forwards; clip-path: inset(0 0 0 100%); animation-delay: .3s;}
.visual .object_3{position:absolute; left:1032px; top:160px;}
.visual .object_4{position:absolute; left:1012px; top:602px;}
.visual .object_ta{position:absolute; left:625px; top:193px;}
.visual .hu{position:absolute; left:325px; top:358px; width:270px; z-index:2;
  opacity: 0;
  transform: translateX(-30px);
  animation: fadeInMoveRight 0.5s ease-out forwards, floatUpDown 2s ease-in-out infinite;
  animation-delay: 0.5s; /* 0.5ÃÊ ÈÄ¿¡ ³ªÅ¸³ª±â ½ÃÀÛ */

}
.visual .star{position:absolute; left:0; top:0;}
.visual .star span{position:absolute; background:url(img/visual_star.png) no-repeat 0 0 / 100%; width:35px; aspect-ratio: 1 / 1;
  transform: scale(0);
  animation: starScale 0.6s ease-out forwards;
  animation-delay: 1s; /* ±âº» µô·¹ÀÌ */
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.visual .star span:nth-of-type(1){left:263px; top:323px; animation-delay: 0.4s;}
.visual .star span:nth-of-type(2){left:263px; top:571px; animation-delay: 0.3s;}
.visual .star span:nth-of-type(3){left:429px; top:264px; animation-delay: 0.6s;}
.visual .star span:nth-of-type(4){left:517px; top:424px; opacity:.8; animation-delay: 0.9s;}
.visual .star span:nth-of-type(5){left:609px; top:360px; opacity:.5; animation-delay: 1.2s;}

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

@keyframes starScale {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@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:100px 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%;}