/* =========================
   common
========================= */
:root {
    --key-color: #31EE52;
 }
.live-wrap {overflow-x: hidden;}
.live-wrap img {width:100%;}
.live-wrap .inner {padding: 0 4%;box-sizing:border-box;}
h3 {line-height:0}

.quick{width: calc(660vw/7.2); margin: 0 auto;display: block;}
/* =========================
    Visual
========================= */
.visual-wrap {position:relative;}
.visual-wrap .v-tit {position:absolute;top:50vw;left:9.8vw;width:calc(382vw / 7.2);}
.visual-wrap .v-obj {position:absolute;top:39vw;left:23vw;width:calc(131vw / 7.2);animation: visualFloat 1s ease-in-out infinite;}
@keyframes visualFloat {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-10px);
  }
  100% {
      transform: translateY(0);
  }
}

/* =========================
   Contents
========================= */
/* cont01 */
.cont01 {background-color:#F7F8FD;}
.cont01 h3 {position:relative;}
.cont01 h3 img {position:relative;z-index:1;}
.cont01.on h3::before {content: '';position: absolute;top: 35.5vw;left: 31.4vw;width: 0;height: calc(57vw / 7.2);background-color: var(--key-color); animation: highlight 1s ease forwards;--target-width: calc(117vw / 7.2);}
.cont01 .graph {position:relative;}
.cont01 .graph *[class^="arrow"] {position:absolute;top:54vw;left:50%;margin-left:calc(-111vw / 7.2 / 2);opacity: 0;width:calc(111vw / 7.2);}
.cont01 .graph .arrow02 {top:75vw;}
.cont01.on .graph *[class^="arrow"] {animation: fadeSlideLeft 2s .5s forwards;}
.cont01.on .graph .arrow02 {animation: fadeSlideRight 2s .5s forwards;}
@keyframes highlight {
    0% {
      width: 0;
    }
    100% {
       width: var(--target-width);
    }
  }
 
@keyframes fadeSlideLeft {
    0% {
      opacity: 0;
      transform: translateX(20px); /* �����ʿ��� ��� */
    }
    100% {
      opacity: 1;
      transform: translateX(0); /* ���ڸ� */
    }
  }
  @keyframes fadeSlideRight {
    0% {
      opacity: 0;
      transform: translateX(-20px); /* ���ʿ��� ��� */
    }
    100% {
      opacity: 1;
      transform: translateX(0); /* ���ڸ� */
    }
  }
/* cont02 */
.live-wrap .cont02 {background-color:#EBEFF8;}
.cont02 h3 {position:relative;}
.cont02.on h3::before {content: '';position: absolute;top: 17.5vw;left: 53.8vw;width: 0;height:  calc(61vw / 7.2);background-color: var(--key-color); animation: highlight 1s ease forwards;--target-width: calc(264vw / 7.2);}
.cont02.on h3::after {content: '';position: absolute;top: 27.5vw;left: 61.5vw;width: 0;height:  calc(61vw / 7.2);background-color: var(--key-color); animation: highlight 1s .5s ease forwards;--target-width: calc(249vw / 7.2);}
.cont02.on h3 img {position:relative;z-index: 1;}
.cont02.on .emphasize {animation: emphasize 1s 1s ease-in-out both;}
@keyframes emphasize {
   0%, 100% {
       transform: scale(1);
   }
   50% {
       transform: scale(1.1);
   }
}
.cont02 .detail-list {position:relative;z-index:1;}

/* cont03 */
.cont03 {background-color:#2F23D9;}


.cont03 .tab-wrap .tab-btn.active {position:fixed;top:100px;left:0;width:100%;z-index: 3;}


.cont03 .tab-wrap {background-color:#F3F6FB;padding-bottom:65px;position:relative;padding-top:55px;}
.cont03 .tab-wrap .tab-btn {display:flex;background-color:#2F23D9;position:absolute;top:0;left:0;width:100%;}
.cont03 .tab-wrap .tab-btn a {display:block;width:100%;margin-left:2px;background-color:#645AF3;height:55px;display:flex;align-items:center;justify-content:center;color:rgb(255, 255, 255, .5);font-size:18px;font-weight:900;border-radius:15px 15px 0 0;}
.cont03 .tab-wrap .tab-btn a:first-child {margin-left:0;}
.cont03 .tab-wrap .tab-btn a.on {background-color:#F3F6FB;color:#2F23D9;}
.cont03 .tab-wrap .tab-cont {display:none;}
.cont03 .tab-wrap .tab-cont.on {display:block;}
.cont03 .tab-wrap .tab-cont *[class^="swiper-container"] {background-color:#F3F6FB;padding-top:40px;}
.cont03 *[class^="swiper-container"] .swiper-slide {padding:0 45px 26px;box-sizing:border-box;}
.cont03 *[class^="swiper-container"] .swiper-slide div img {border-radius:7.5vw;}
.cont03 .lesson-slide03 .swiper-slide div img {border-radius:0;}
.cont03 *[class^="swiper-container"] .swiper-slide ul {margin-top:20px;}
.cont03 *[class^="swiper-container"] .swiper-slide ul li {font-size:15px;color:#555;position:relative;padding-left:10px;}
.cont03 *[class^="swiper-container"] .swiper-slide ul li strong {color:#222;font-weight:bold;}
.cont03 *[class^="swiper-container"] .swiper-slide ul li:before {content:"";width:3px;height:3px;background-color:#555;position:absolute;top:10px;left:0;border-radius:50%;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:0;}
.cont03 *[class^="swiper-container"].swiper-container-horizontal>.swiper-pagination-bullets {background-color:#D3D8E2;height:5px;border-radius:100px;margin: 0 45px;width:calc(100% - 90px);left: 0;}
.cont03 *[class^="swiper-container"].swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 0 14px;width:calc(100% / 3);border-radius:100px;background-color:transparent;height:5px}
.cont03 .lesson-slide03.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {width:calc(100% / 8)}
.cont03 *[class^="swiper-container"].swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:#4E2BF4}
.cont03 .l-txt {padding:30px 45px 0;font-size:17px;color:#555;letter-spacing:-1px;}
.cont03 .l-txt strong {font-weight:bold;color:#222;}
.cont03 .r-txt {padding:0 45px;text-align:right;color:#aaa;font-size:11px;margin-top:25px;}

/* cont04 */

.live-wrap .cont04 {background: linear-gradient(180deg, #FFF 10.76%, #E2EBFF 104.17%); padding-bottom: calc(130vw/7.2);}
.cont04 .stu-slide {padding:20px 15px 25px;margin-top:-20px;box-sizing:border-box;}
.cont04 .stu-slide .swiper-slide {background-color:#fff;border-radius:15px;box-shadow: 3px 3px 14px 0px rgba(0, 0, 0, 0.10);padding:29px 25px;box-sizing:border-box;height:auto;cursor: pointer;letter-spacing:-1px;}
.cont04 .stu-slide .swiper-slide > div {display:flex;align-items:center;text-align:left;border-bottom:1px solid #e8e8e8;padding-bottom:16px;}
.cont04 .stu-slide .swiper-slide > div div {width:55px}
.cont04 .stu-slide .swiper-slide div dl {margin-left:16px;}
.cont04 .stu-slide .swiper-slide div dl dt strong {color:#555;font-weight:bold;font-size:15px;}
.cont04 .stu-slide .swiper-slide div dl dt span {margin-left:8px;font-size:13px;color:#555;font-weight:500;}
.cont04 .stu-slide .swiper-slide div dl dd {margin-top:3px;font-weight:900;font-size:17px;color:#111;}
.cont04 .stu-slide .swiper-slide p {margin-top:15px;font-size:15px;color:#555;text-align:left;line-height:1.5;}
.cont04 .stu-slide .swiper-slide p strong {color:#222;font-weight:bold;}
.cont04 *[class^="swiper-container"].swiper-container-horizontal>.swiper-pagination-bullets {background-color:#D3D8E2;height:5px;border-radius:100px;margin: 0 15px;width:calc(100% - 30px);left: 0;}
.cont04 *[class^="swiper-container"].swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin:0 0 14px;width:10%;border-radius:100px;background-color:transparent;height:5px}
.cont04 *[class^="swiper-container"].swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color:#4E2BF4}

/* cont05 */
.cont05 {background-color:#EBEFF8;padding-bottom:65px;}
.cont05 .cps-list {margin:0 15px;background-color:#fff;border-radius:20px;overflow:hidden;}
.cont05 .cps-list .campus-list {padding:0 15px 35px;display:flex;flex-wrap:wrap;}
.cont05 .cps-list .campus-list li {display:flex;align-items:flex-end;border: 1px solid #E6E9F2;background: #F7F8FD;border-radius: 6px;width:calc(50% - 5px);box-sizing:border-box;letter-spacing:-1px;line-height:1.7;justify-content:space-between;}
.cont05 .cps-list .campus-list li:nth-child(even) {margin-left:10px;}
.cont05 .cps-list .campus-list li:nth-child(n+3) {margin-top:12px;}
.cont05 .cps-list .campus-list li > a {font-size:15px;color:#3b3a3a;padding:10px 0 10px 13px;}
.cont05 .cps-list .campus-list li > a strong {color:#222;font-weight:bold;}
.cont05 .cps-list .campus-list li div {padding:10px 13px 16px 0;}
.cont05 .cps-list .campus-list li div a {width:21px;display:block;}