@charset "UTF-8";

#wrap, main{height: 100%;}

/* 제목 영역 */
#titleWrap{position: relative; padding-top: 151px;}
#titleWrap .imgBox{position: relative; width: 1024px; height: 560px; margin: 0 auto;}
#titleWrap .imgBox img{display: block;}
#titleWrap .imgBox .img01{position: absolute; left:0; bottom: -16px; }
#titleWrap .imgBox .img02{position: absolute; left:-39px; bottom: 159px; }
#titleWrap .imgBox .img03{position: absolute; left:50%; bottom: 0; transform: translateX(-50%);}
#titleWrap .imgBox .img04{position: absolute; right:-27px; bottom: -79px;}
#titleWrap .imgBox .img05{position: absolute; left:57%; transform: translateX(-50%); bottom: 352px;}
#titleWrap .imgBox .img06{position: absolute; right:208px; bottom: 465px;}
#titleWrap .imgBox .img07{position: absolute; right:-35px; bottom: -27px;}
#titleWrap{position: relative;}
#titleWrap::after{content: ''; height: 680px; position: absolute; top:231px; left:0; right:0; background: url(../images/main/main_bg02.svg) no-repeat center; opacity: .6; z-index: -2; background-size: cover;}
#titleWrap::before{content: ''; height: 390px; position: absolute; left:0; right:0; bottom: 213px; background: url(../images/main/main_bg03.svg) no-repeat center; z-index: -1; background-size: cover;}
#titleWrap .titlebox{position: relative; text-align: center; z-index: 9;}
#titleWrap .titlebox span{margin-bottom: 15px; display: block; font-size: 32px; font-weight: 700; color: #333236;} 
#titleWrap .titlebox h2{margin-bottom: 10px; font-size: 72px; font-weight: 800; color: #111;} 
#titleWrap .titlebox em{display: block; font-size: 48px; font-weight: 800;}
#titleWrap .infoBox{margin-bottom: 40px; position: relative; margin-bottom: 30px; z-index: 9;} 
#titleWrap .infoBox .infoList{padding: 0; display: flex; justify-content: center; align-items: center; gap: 0 12px; }
#titleWrap .infoBox .infoList li{display: flex; flex-direction: column; align-items: center; justify-content: center; width: 384px; height: 134px; border: 1px solid #5A56F3; border-radius: 18px; background-color: #fff; box-shadow: 30px -50px 30px rgba(255, 255, 255, .9);}
#titleWrap .infoBox .infoList li span{display: block; margin-bottom: 10px; font-weight: 600; color: #424242; font-size: 18px;}
#titleWrap .infoBox .infoList li h3{font-weight: 800; color: #524DFC; font-size: 25px;}
#titleWrap .button{width: 374px; padding: 20px 17px; font-size: 24px;}
#titleWrap .btnBox{display: flex; justify-content: center;}

@media (max-width: 1199px){

  #titleWrap::after{height: 593px;}
  #titleWrap .titlebox span{font-size: 28px;}
  #titleWrap .titlebox h2{font-size: 62px;}
  #titleWrap .titlebox em{font-size: 40px;}

  #titleWrap .imgBox{width: 874px; height: 478px;}
  #titleWrap .imgBox .img01{width: 280px; bottom: -16px;}
  #titleWrap .imgBox .img02{width: 140px; left:-38px; bottom: 132px;}
  #titleWrap .imgBox .img03{width: 380px;}
  #titleWrap .imgBox .img04{width: 290px; bottom: -60px;}
  #titleWrap .imgBox .img05{width: 210px; left:56%; bottom: 312px;}
  #titleWrap .imgBox .img06{right: 169px; bottom: 387px;}
  #titleWrap .imgBox .img07{width: 130px; right:-18px; bottom: -2px;}

  #titleWrap .infoBox .infoList li{ height: 118px;}
  #titleWrap .infoBox .infoList li span{margin-bottom: 5px; font-size: 16px;}
  #titleWrap .infoBox .infoList li h3{font-size: 22px;}
  #titleWrap .button{font-size: 22px;}

}

@media (max-width: 1024px){

  #titleWrap .imgBox{width: 900px; height: 342px;}
  #titleWrap .titlebox span{font-size: 22px;}
  #titleWrap .titlebox h2{font-size: 50px;}
  #titleWrap .titlebox em{font-size: 34px;}
  #titleWrap .imgBox{width: 652px;}
  #titleWrap .imgBox .img01{width: 210px; bottom: -16px;}
  #titleWrap .imgBox .img02{width: 90px; left: -16px; bottom: 100px;}
  #titleWrap .imgBox .img03{width: 280px;}
  #titleWrap .imgBox .img04{width: 220px; right:-20px; bottom: -46px;}
  #titleWrap .imgBox .img05{left: 59%; width: 160px; bottom: 222px;}
  #titleWrap .imgBox .img06{width: 85px; right: 130px; bottom: 279px;}
  #titleWrap .imgBox .img07{width: 95px; right: -10px; bottom: 0;}

  #titleWrap .infoBox .infoList{position: relative; flex-direction: column; gap: 10px 0; box-shadow: 0 -50px 30px rgba(255, 255, 255, .9); border-radius: 15px;}
  #titleWrap .infoBox .infoList li{width: 100%; height: 102px; border-radius: 15px; box-shadow: none;} 
  #titleWrap .infoBox .infoList li h3{font-size: 18px;}

  #titleWrap .button{width: 276px; font-size: 18px;}

}

@media (max-width: 767px){

  #titleWrap{padding-top: 130px;}
  #titleWrap .titlebox span{font-size: 20px;}
  #titleWrap .titlebox h2{font-size: 42px;}
  #titleWrap .titlebox em{font-size: 26px;}
  
  #titleWrap .infoBox{margin-bottom: 14px;}
  #titleWrap .btnBox{padding: 0 20px;}
  #titleWrap .button{width: 100%; padding: 15px 17px;}

  #titleWrap::before{bottom: 0; height: 600px;}

}

@media (max-width: 690px){

  #titleWrap .titlebox span{margin-bottom: 8px; font-size: 18px;}
  #titleWrap .titlebox h2{margin-bottom: 5px; font-size: 36px;}
  #titleWrap .titlebox em{font-size: 24px;}
  #titleWrap .imgBox{width: 500px; height: 276px;}
  #titleWrap .imgBox .img01{width: 170px; bottom: -16px;}
  #titleWrap .imgBox .img02{left:0; width: 57px; bottom: 83px;}
  #titleWrap .imgBox .img03{width: 196px;}
  #titleWrap .imgBox .img04{width: 180px; right:-10px; bottom: -51px;}
  #titleWrap .imgBox .img05{left: 58%; width: 120px; bottom: 153px;}
  #titleWrap .imgBox .img06{width: 64px; right: 106px; bottom: 199px;}
  #titleWrap .imgBox .img07{width: 69px; bottom: -7px; right: 7px;}

}

@media (max-width: 500px){

  #titleWrap .imgBox{width: 350px; height: 270px; left: -13px;}
  #titleWrap .imgBox .img01{width: 142px; bottom: 17px; left: 23px;}
  #titleWrap .imgBox .img02{left:37px; width: 38px; bottom: 94px;}
  #titleWrap .imgBox .img03{width: 190px; z-index: 9;}
  #titleWrap .imgBox .img04{width: 155px; right:-11px; bottom: 0;}
  #titleWrap .imgBox .img05{left:55%; width: 105px; bottom: 160px;}
  #titleWrap .imgBox .img06{width: 38px; right: 46px; bottom: 238px;}
  #titleWrap .imgBox .img07{width: 51px; bottom: 56px; right: 20px;}
  #titleWrap .infoBox .infoList{gap: 8px 0;}

}

@media (max-width: 360px){

  #titleWrap{padding-top: 93px;}
  #titleWrap::after{height: 553px;}
  
  #titleWrap .titlebox span{margin-bottom: 6px; font-size: 16px;}
  #titleWrap .titlebox h2{margin-bottom: 4px; font-size: 34px;}
  #titleWrap .titlebox em{font-size: 24px;}

  #titleWrap .infoBox .infoList li{height: 78px; border-radius: 10px;}
  #titleWrap .infoBox .infoList li span{font-size: 13px;}
  #titleWrap .infoBox .infoList li h3{font-size: 14px;}
  
  
}

@media (max-width: 350px){

  #titleWrap .titlebox span{margin-bottom: 0; font-size: 14px;}
  #titleWrap .titlebox h2{margin-bottom: 0; font-size: 22px;}
  #titleWrap .titlebox em{font-size: 16px;}
  #titleWrap::after{height: 442px;}

  #titleWrap .imgBox{width: 280px; height: 197px; left: -8px;}
  #titleWrap .imgBox .img01{width: 100px; bottom: 14px; left: 29px;}
  #titleWrap .imgBox .img02{left:37px; width: 28px; bottom: 68px;}
  #titleWrap .imgBox .img03{width: 140px; z-index: 9;}
  #titleWrap .imgBox .img04{width: 105px; right:9px; bottom: 8px;}
  #titleWrap .imgBox .img05{width: 70px; bottom: 122px;}
  #titleWrap .imgBox .img06{width: 38px; right: 36px; bottom: 170px;}
  #titleWrap .imgBox .img07{width: 40px; bottom: 40px; right: 20px;}

}

@media (max-width: 320px){

  #titleWrap{padding-top: 78px;}
  #titleWrap::after{height: 427px;}

}

/* 화상수업 영역 */
#videoClassWrap{padding: 250px 0 130px;}
#videoClassWrap .titleBox{margin-bottom: 96px; text-align: center;}
#videoClassWrap .titleBox span{margin-bottom: 10px; display: block; text-align: center; font-weight: 700; color: #333236; font-size: 36px;}
#videoClassWrap .titleBox h2{font-size: 72px; color: #333236;} 
#videoClassWrap .videoClassList{padding: 0; display: flex; justify-content: center; gap: 0 24px;}
#videoClassWrap .videoClassList li{position: relative; padding: 35px 0 0; width: 384px; height: 420px; border-radius: 24px; z-index: 1; overflow: hidden;}
#videoClassWrap .videoClassList li::after{content: ''; position: absolute; bottom: -460px; left:50%; transform: translateX(-50%); width: 626px; height: 626px; border-radius: 50%; z-index: -1;}
#videoClassWrap .videoClassList li::before{content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;}
#videoClassWrap .videoClassList li:nth-child(1):before{width: 280px; height: 310px; background: url(../images/main/phone01.svg)no-repeat center; background-size: contain;}
#videoClassWrap .videoClassList li:nth-child(2):before{width: 292px; height: 313px; background: url(../images/main/phone02.svg)no-repeat center; background-size: contain;}
#videoClassWrap .videoClassList li:nth-child(3):before{width: 305px; height: 260px; background: url(../images/main/illustration01.svg)no-repeat center; background-size: contain;}
#videoClassWrap .videoClassList li:nth-child(1):after{background-color: #C3DAED;}
#videoClassWrap .videoClassList li:nth-child(2):after{background-color: #C9CAF5;}
#videoClassWrap .videoClassList li:nth-child(3):after{background-color: #C9B0E7;}
#videoClassWrap .videoClassList li span{width: 64px; margin:0 auto 16px; display: block; width: 64px; height: 28px; line-height: 28px; text-align: center; color: #fff; font-size: 14px; font-weight: 600; border-radius: 50px;}
#videoClassWrap .videoClassList li h3{font-size: 32px; font-weight: 800; color: #333236; text-align: center;}
#videoClassWrap .videoClassList li:nth-child(1){background-color: #DFEFFD;}
#videoClassWrap .videoClassList li:nth-child(2){background-color: #E9EBFF;}
#videoClassWrap .videoClassList li:nth-child(3){background-color: #F1E6FD;}

@media (max-width: 1199px){
  
  #videoClassWrap{padding: 170px 0 130px;}
  #videoClassWrap .titleBox{margin-bottom: 70px;}
  #videoClassWrap .titleBox span{font-size: 30px;}
  #videoClassWrap .titleBox h2{font-size: 66px;}
  #videoClassWrap .videoClassList li h3{font-size: 26px;}
  
}

@media (max-width: 1024px){
  
  #videoClassWrap{padding: 100px 0;}
  #videoClassWrap .titleBox{margin-bottom: 50px;}
  #videoClassWrap .titleBox span{font-size: 22px;}
  #videoClassWrap .titleBox h2{font-size: 46px;}
  #videoClassWrap .videoClassList{gap: 0 15px;}
  #videoClassWrap .videoClassList li h3{font-size: 25px;}
  #videoClassWrap .videoClassList li{height: 296px; border-radius: 15px;}
  #videoClassWrap .videoClassList li::after{bottom: -515px;}
  #videoClassWrap .videoClassList li:nth-child(1):before{width: 170px; height: 189px;}
  #videoClassWrap .videoClassList li:nth-child(2):before{width: 192px; height: 190px;}
  #videoClassWrap .videoClassList li:nth-child(3):before{width: 205px; height: 160px;}
  
}

@media (max-width: 767px){

  #videoClassWrap .titleBox{margin-bottom: 40px;}
  #videoClassWrap .titleBox span{font-size: 16px;}
  #videoClassWrap .titleBox h2{font-size: 38px;}

  #videoClassWrap .videoClassList{flex-direction: column; gap: 19px 0;}
  #videoClassWrap .videoClassList li{width: 100%;}

}

@media (max-width: 480px){

  #videoClassWrap{padding: 100px 0 55px;}

}

@media (max-width: 414px){

  #videoClassWrap .titleBox span{font-size: 16px;}
  #videoClassWrap .titleBox h2{font-size: 34px;}

}

@media (max-width: 360px){

  #videoClassWrap .videoClassList li{height: 282px; padding: 27px 0 0;}
  #videoClassWrap .videoClassList li span{margin: 0 auto 13px; width: 51px; height: 22px; line-height: 24px; font-size: 11px;}

}

/* 라이브클래스 영역 */
#liveClassWrap{padding: 130px 0 75px; overflow: hidden;}
#liveClassWrap .titleBox{margin-bottom: 69px; text-align: center;}
#liveClassWrap .titleBox span{display: block; font-size: 72px; font-weight: 700;}
#liveClassWrap .titleBox h2{font-size: 72px; font-weight: 700;}
#liveClassWrap .textBox{text-align: center;}
#liveClassWrap .textBox span{margin-bottom: 20px; display: block; font-size: 44px; font-weight: 700; color: #333236;}
#liveClassWrap .swiper-wrapper{align-items: center;}
#liveClassWrap .liveClassSlideBox .slide .imgBox{position: absolute; top:0; left:0; right:0; bottom: 0; border-radius: 20px; overflow: hidden;}
#liveClassWrap .liveClassSlideBox .slide .imgBox img{display: block; width: 100%; height: 100%; object-fit: cover;}
#liveClassWrap .liveClassSlideBox .swiper-slide{width: 340px !important; height: 340px; margin: 0 12px;}
#liveClassWrap .liveClassSlideBox .swiper-slide .slide{ width: 100%; height: 100%;}
#liveClassWrap .liveClassSlideBox .swiper-slide-active{margin: 0 65px; transform: scale(1.32);
  z-index: 999;  transition: all 0.5s; }
#liveClassWrap .swiper-slide-prev{margin: 0 32px!important; transform: scale(1.12); z-index: 1;}
#liveClassWrap .swiper-slide-next{margin: 0 32px!important; transform: scale(1.12); z-index: 1;}#liveClassWrap .textBox{height: 100%; padding: 45px 20px; position: relative;}
#liveClassWrap .textBox h3{font-size: 41px; color: #fff; text-align: center; font-weight: 600;}
#liveClassWrap .textBox p{font-size: 20px; color: #fff;}

@media (max-width: 1199px){

  #liveClassWrap .titleBox{margin-bottom: 23px;}
  #liveClassWrap .titleBox span,
  #liveClassWrap .titleBox h2{font-size: 66px;}
  #liveClassWrap .textBox span{font-size: 36px;}

}

@media (max-width: 1024px){

  #liveClassWrap{padding: 65px 0;}
  #liveClassWrap .titleBox{margin-bottom: 0;}
  #liveClassWrap .titleBox span,
  #liveClassWrap .titleBox h2{font-size: 46px;}
  #liveClassWrap .textBox{margin-bottom: 70px;}
  #liveClassWrap .textBox h3{font-size: 32px;}
  #liveClassWrap .textBox p{font-size: 18px;}
  #liveClassWrap .liveClassSlideBox .swiper-slide{width: 300px!important; height: 300px!important; margin: 0 45px!important;}
  
}

@media (max-width: 767px){

  #liveClassWrap .titleBox span,
  #liveClassWrap .titleBox h2{font-size: 33px;}
  #liveClassWrap .textBox span{margin-bottom: 10px; font-size: 25px;}
  #liveClassWrap .liveClassSlideBox .swiper-slide{width: 280px!important; height: 280px!important; margin: 0 40px!important;}
  #liveClassWrap .liveClassSlideBox .slide .imgBox{border-radius: 16px;}
  #liveClassWrap .textBox h3{font-size: 26px;}
  #liveClassWrap .textBox p{font-size: 16px;}
  
}

@media (max-width: 480px){

  #liveClassWrap{padding: 55px 0 40px;}
  #liveClassWrap .liveClassSlideBox .swiper-slide{width: 240px!important; height: 240px!important; margin: 0 36px!important;}
  #liveClassWrap .textBox h3{font-size: 24px;}
  #liveClassWrap .textBox p{font-size: 12px;}
  #liveClassWrap .textBox{padding: 26px 20px 20px;}
  #liveClassWrap .liveClassSlideBox .slide .imgBox{border-radius: 12px;}
  
}

@media (max-width: 360px){

  #liveClassWrap{padding: 30px 0 40px;}
  #liveClassWrap .liveClassSlideBox .swiper-slide{width: 200px!important; height: 200px!important; margin: 0 30px!important;}

}

@media (max-width: 320px){

  #liveClassWrap .textBox{margin-bottom: 30px;}
  #liveClassWrap .titleBox span,
  #liveClassWrap .titleBox h2{font-size: 22px;}
  #liveClassWrap .textBox span{font-size: 18px;}
  #liveClassWrap .textBox h3{font-size: 18px;}


}

/* 돌핀코딩 리뷰 영억 */
#dolphincodingWrap{position: relative; padding: 150px 0 140px;  z-index: 1; overflow: hidden;}
#dolphincodingWrap::after{width: 656px; height: 1627px; content: ''; position: absolute; top:0; right:0; background: url(../images/main/bg01.svg)no-repeat center; background-size: contain; z-index: -1;}
#dolphincodingWrap::before{width: 445px; height: 1243px; content: ''; position: absolute; bottom:0; left:0; background: url(../images/main/bg02.svg)no-repeat center; background-size: contain; z-index: -1;}
#dolphincodingWrap .titleBox{margin-bottom: 50px; text-align: center;}
#dolphincodingWrap .titleBox span{ display: block; margin: 0 auto 35px; width: 349px; height: 58px; line-height: 56px; border-radius: 8px; font-size: 32px; font-weight: 800; border: 2px solid #4E4FFC;}
#dolphincodingWrap .titleBox h3{font-size: 72px; color: #333236; line-height: 1.2;}
#dolphincodingWrap .titleBox h3 .color{color: #CAD0D2;}
#dolphincodingWrap .reviewList{margin-bottom: 24px; display: flex; gap: 0 23px; justify-content: center; align-items: center;}
#dolphincodingWrap .reviewList li{padding:  36px 30px 40px; width: 320px; height: 350px; border-radius: 28px; background-color: rgba(255, 255, 255, 0.75); box-shadow: 3px 3px 14px rgba(0, 0, 0, .03);}
#dolphincodingWrap .reviewList li .text{display: inline-block; margin-bottom: 18px; padding: 0 10px; height: 34px; line-height: 34px; text-align: center; font-weight: 700; border-radius: 5px;}
#dolphincodingWrap .reviewList li .text.colorType01{background-color: #EAE9FD; color: #4F30E8;}
#dolphincodingWrap .reviewList li .text.colorType02{background-color: #E5DAFD; color: #7530E8;}
#dolphincodingWrap .reviewList li .text.colorType03{background-color: #E1EFFD; color: #0070F8;}
#dolphincodingWrap .reviewList li .text.colorType04{background-color: #EAE5FC; color: #9F1CE5;}
#dolphincodingWrap .reviewList li p{margin-bottom: 12px; font-size: 17px; color: #333236; font-weight: 500; line-height: 1.7;}
#dolphincodingWrap .reviewList li .infoBox{display: flex; align-items: center; gap: 0 5px;}
#dolphincodingWrap .reviewList li .infoBox .name{font-weight: 700; font-size: 15px; color: #6E6D72;}
#dolphincodingWrap .reviewList li .infoBox .date{color: #6E6D72; font-size: 15px; font-weight: 300;}
#dolphincodingWrap .textLayoutBox{padding: 0 20px; margin-bottom: 50px; display: flex; align-items: center; flex-direction: column;}
#dolphincodingWrap p.text01{margin-bottom: 15px; padding: 15px 20px; display: inline-block; border-radius: 50px; background-color: #fff; text-align: center; color: #424242; font-weight: 600; font-size: 22px; box-shadow: 3px 3px 14px rgba(0, 0, 0, .1);}
#dolphincodingWrap p.text02{margin-bottom: 15px; padding: 15px 20px; display: inline-block; border-radius: 50px; background-color: #fff; text-align: center; color: #424242; font-weight: 600; font-size: 22px; box-shadow: 3px 3px 14px rgba(0, 0, 0, .1);}
#dolphincodingWrap .marqueeContainer{display: flex; gap: 0 23px;}
#dolphincodingWrap .marqueeContainer.right .reviewList {animation: scroll-right 50s linear infinite;}

@keyframes scroll-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

#dolphincodingWrap .marqueeContainer.left .reviewList {animation: scroll-left 50s linear infinite;}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (max-width: 1199px){

  #dolphincodingWrap .titleBox h3{font-size: 66px;}
  #dolphincodingWrap .titleBox span{width: 340px; font-size: 28px;}
  #dolphincodingWrap p.text01,
  #dolphincodingWrap p.text02{font-size: 20px;}

}

@media (max-width: 1024px){

  #dolphincodingWrap .titleBox h3{font-size: 46px;}
  #dolphincodingWrap .titleBox span{width: 280px; height: 54px; line-height: 52px; font-size: 22px;}
  #dolphincodingWrap p.text01,
  #dolphincodingWrap p.text02{padding: 12px 20px; font-size: 18px;}
  #dolphincodingWrap .reviewList li{height: 310px; border-radius: 18px;}
  #dolphincodingWrap .reviewList li .text{margin-bottom: 13px; font-size: 15px;}
  #dolphincodingWrap .reviewList li p{font-size: 16px;}

  #dolphincodingWrap::after{width: 337px; height: 842px;}
  #dolphincodingWrap::before{width: 261px; height: 930px;}

}

@media (max-width: 767px){

  #dolphincodingWrap{padding: 150px 0 100px;}
  #dolphincodingWrap .textLayoutBox{margin-bottom: 40px;}
  #dolphincodingWrap .titleBox{margin-bottom:36px;}
  #dolphincodingWrap .titleBox h3{font-size: 34px;}
  #dolphincodingWrap .titleBox span{width: 230px; height: 50px; line-height: 48px; font-size: 18px;}

}

@media (max-width: 480px){

  #dolphincodingWrap{padding: 100px 0 80px;}
  #dolphincodingWrap .reviewList li{padding: 20px 20px 40px; width: 292px; height: 270px;}
  #dolphincodingWrap p.text01,
  #dolphincodingWrap p.text02,
  #dolphincodingWrap .reviewList li .text,
  #dolphincodingWrap .reviewList li .infoBox .name,
  #dolphincodingWrap .reviewList li .infoBox .date,
  #dolphincodingWrap .reviewList li p{font-size: 14px;}
  
}

@media (max-width: 360px){

  #dolphincodingWrap .titleBox{margin-bottom: 20px;}
  #dolphincodingWrap .titleBox span{margin: 0 auto 20px; width: 168px; height: 28px; line-height: 26px; border-radius: 4px; font-size: 15px;}

  #dolphincodingWrap .textLayoutBox{margin-bottom: 51px;}
  #dolphincodingWrap p.text01{margin-bottom: 7px;}
  #dolphincodingWrap p.text01,
  #dolphincodingWrap p.text02{padding: 10px 20px; font-size: 11px;}
  #dolphincodingWrap .reviewList li .text{height: 23px; line-height: 23px;}
  #dolphincodingWrap .reviewList li{width: 208px; height: 228px;}
  #dolphincodingWrap .reviewList li p,
  #dolphincodingWrap .reviewList li .text,
  #dolphincodingWrap .reviewList li .infoBox .name,
  #dolphincodingWrap .reviewList li .infoBox .date{font-size: 11px;}
  #dolphincodingWrap .reviewList{margin-bottom: 16px; gap: 0 12px;}
  #dolphincodingWrap .marqueeContainer{gap: 12px;}

}

/* 코딩 교육 영역 */
#codingEducationWrap{position: relative; padding: 174px 0 155px; background-color: #080811; z-index: 1;}
#codingEducationWrap::after{content: ''; width: 1132px; height: 756px; position: absolute; bottom:109px; right:0; background: url(../images/main/bg04.png) no-repeat center; background-size: contain; z-index: -1;}
#codingEducationWrap .title{margin-bottom: 85px; font-size: 64px; font-weight: 700;}
#codingEducationWrap .title span{  background: linear-gradient(to right, #576275, #FDFDFD);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#codingEducationWrap .title .gradient-text{background: linear-gradient(to right, #6E88FF, #6126B9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#codingEducationWrap .codingEducationList{position: relative; height: 443px; margin-bottom: 33px;}
#codingEducationWrap .codingEducationList::before{content: ''; position: absolute; top:0; left:0; bottom: 0; width: 5px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.1);}
#codingEducationWrap .codingEducationList li{padding-left: 41px; position: relative; margin-bottom: 46px;}
#codingEducationWrap .codingEducationList li.active span{color: #91A2FF;}
#codingEducationWrap .codingEducationList li.active p{color: #fff;}
#codingEducationWrap .codingEducationList li.active::before{content: ''; position: absolute; top:0; left:0; width: 5px; height: 100%; background-color: #fff; border-radius: 10px;}
#codingEducationWrap .codingEducationList li:last-child{margin-bottom: 0;}
#codingEducationWrap .codingEducationList li span{display: block; color: rgba(255, 255, 255, 0.3);  margin-bottom: 8px; font-size: 20px; font-weight: 800; }
#codingEducationWrap .codingEducationList li p{color: rgba(255, 255, 255, 0.3); font-size: 32px; font-weight: 700;}
#codingEducationWrap .infoText{display: block; font-weight: 500; color: #9D9DA0;}

@media (max-width: 1199px){

  #codingEducationWrap .title{font-size: 60px;}
  #codingEducationWrap .codingEducationList li span{font-size: 18px;}
  #codingEducationWrap .codingEducationList li p{font-size: 28px;}
  #codingEducationWrap::after{width: 858px; height: 586px;}

}

@media (max-width: 1024px){

  #codingEducationWrap{padding: 100px 0;}
  #codingEducationWrap .title{margin-bottom: 54px; font-size: 48px;}

  #codingEducationWrap .codingEducationList{height: 372px;}
  #codingEducationWrap .codingEducationList li span{font-size: 16px;}
  #codingEducationWrap .codingEducationList li p{font-size: 22px;}
  #codingEducationWrap::after{width: 758px; height: 586px;}  

}

@media (max-width: 767px){

  #codingEducationWrap .title{margin-bottom: 46px; font-size: 40px;}

  #codingEducationWrap .codingEducationList{height: 350px;}
  #codingEducationWrap .codingEducationList li p{font-size: 20px;}
  #codingEducationWrap::after{ width: 523px; height: 573px;}  

}

@media (max-width: 576px){

  #codingEducationWrap{padding: 80px 0 417px;}
  #codingEducationWrap::after{width: 100%; height: 480px; right: auto; bottom: 0;}

}

@media (max-width: 414px){

  #codingEducationWrap{padding: 80px 0 277px;}
  #codingEducationWrap::after{height: 306px;}
  #codingEducationWrap .title{font-size: 36px;}
  #codingEducationWrap .codingEducationList li p{font-size: 18px;}
  
}

@media (max-width: 360px){

  #codingEducationWrap{padding: 74px 0 277px;}
  #codingEducationWrap .title{margin-bottom: 20px; font-size: 34px;}
  #codingEducationWrap .codingEducationList{height: 274px;}
  #codingEducationWrap .codingEducationList::before{width: 3px;}
  #codingEducationWrap .codingEducationList li.active::before{width: 3px;}
  #codingEducationWrap .codingEducationList li{margin-bottom: 29px; padding-left: 25px;}
  #codingEducationWrap .codingEducationList li span{font-size: 12px;}
  #codingEducationWrap .infoText{font-size: 11px;}

}

/* 선생님 영역 */
#teacherWrap{position: relative; padding: 150px 0 165px; z-index: 1; overflow: hidden;}
#teacherWrap::after{content: ''; width: 1542px; height: 621px; position: absolute; top:234px; right:0; background: url(../images/main/bg05.svg) no-repeat center; background-size: contain; z-index: -1;}
#teacherWrap .titleBox{margin-bottom: 76px; text-align: center;}
#teacherWrap .titleBox .title{color: #111; font-size: 72px; font-weight: 700;}
#teacherWrap .teacherList li{position: relative; width: 340px; margin-bottom: 60px; padding-top: 38px;}
#teacherWrap .teacherList li:last-child{margin-bottom: 0;}
#teacherWrap .teacherList li::before{content: ''; height: 1px; position: absolute; top:0; left:0; right:0; background-color: #D9D9D9;}
#teacherWrap .teacherList li::after{content: ''; position: absolute; top:-1px; left:0; width: 70px; height: 4px; background-color: #4060F2; border-radius: 10px;}
#teacherWrap .teacherList li span{display: block; margin-bottom: 10px; font-size: 18px; font-weight: 800; color: #A7ADC1;}
#teacherWrap .teacherList li p{font-size: 30px; font-weight: 700; color: #111}
#teacherWrap .teacherList li p strong{color: #445DF1;}
#teacherWrap .layoutBox{display: flex; justify-content: space-between; gap: 0 133px;}
#teacherWrap .teacherImgBox{ margin-top: 150px;}
#teacherWrap .teacherImgBox img{display: block; max-width: 100%;}

@media (max-width: 1199px){

  #teacherWrap{padding: 150px 0 111px;}
  #teacherWrap .layoutBox{gap: 0 50px;}
  #teacherWrap .titleBox .title{font-size: 66px;}
  #teacherWrap .teacherList li span{font-size: 16px;}
  #teacherWrap .teacherList li p{font-size: 28px;}

}

@media (max-width: 1024px){

  #teacherWrap{padding: 150px 0 50px;}
  #teacherWrap::after{left: 50%; transform: translateX(-56%); top:0; height: 513px;}
  #teacherWrap .titleBox{margin-bottom: 50px;}
  #teacherWrap .titleBox .title{font-size: 46px;}
  #teacherWrap .teacherImgBox{margin: 0 0 30px;}
  #teacherWrap .teacherImgBox img{margin: 0 auto;}
  #teacherWrap .teacherList li{margin: 0; padding: 32px 0 45px; width: 100%; text-align: center;}
  #teacherWrap .teacherList li p{font-size: 24px;}
  #teacherWrap .layoutBox{flex-direction: column-reverse;}
  #teacherWrap .teacherList li::after{display: none;}


}

@media (max-width: 767px){

  #teacherWrap{padding: 90px 0 100px;}
  #teacherWrap::after{height: 446px;}
  #teacherWrap .titleBox .title{font-size: 42px;}

}

@media (max-width: 480px){

  #teacherWrap{padding: 80px 0 50px;}
  #teacherWrap::after{width: 759px;}
  #teacherWrap .teacherList li{padding: 28px 0;}
  #teacherWrap .titleBox .title{font-size: 38px;}
  #teacherWrap .teacherList li p{font-size: 20px;}

}

@media (max-width: 360px){

  #teacherWrap{padding: 70px 0 35px;}
  #teacherWrap::after{width: 670px;}
  #teacherWrap .teacherList li{padding: 21px 0;}
  #teacherWrap .teacherList li span{font-size: 11px;}
  #teacherWrap .teacherList li p{font-size: 20px;}

}

/* WHY 영역 */
#whyWrap{height: 860px; background: linear-gradient( to right, #B874F9 0%, #5E4FF9 60%, #6980F8 100%); overflow: hidden;}
#whyWrap .container{height: 100%;}
#whyWrap .whyBox{display: flex; align-items: center; position: relative; height: 100%; }
#whyWrap .titleBox{flex-shrink: 0;}
#whyWrap .titleBox span{display: block; margin-bottom: 8px; font-weight: 800; font-size: 28px; color: #91E0FF;}
#whyWrap .titleBox .title{ margin-bottom: 10px; background: linear-gradient(to right, #FEEAFF, #FEFEFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 64px; font-weight: 700;}
#whyWrap .titleBox .text{font-size: 24px; font-weight: 500; color: #D0D1FD; line-height: 1.6;}
#whyWrap .mList{display: none;}
#whyWrap .whyList li{position: relative; margin-bottom: 20px; padding: 30px 15px 0; width: 340px; height: 310px; border-radius: 20px; background-color: #fff;}
#whyWrap .whyList li span{display: block; width: 22px; height: 22px; line-height: 24px; margin: 0 auto 8px; background-color: #4768FF; text-align: center; border-radius: 50%; color: #fff;} 
#whyWrap .whyList li h3{margin-bottom: 10px; text-align: center; font-size: 24px; font-weight: 700; color: #333236;}
#whyWrap .whyList li p{text-align: center; font-size: 15px; color: rgba(66, 66, 66, 0.8); line-height: 1.6;}
#whyWrap .whyList li::after{content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; }
#whyWrap .whyList li.bg{background-color: #A89AFC;}
#whyWrap .whyList01 li.icon01::after{width: 196px; height: 146px; background: url(../images/main/why_img01.svg)no-repeat center;}
#whyWrap .whyList01 li.icon02::after{width: 273px; height: 142px; background: url(../images/main/why_img02.svg)no-repeat center;}
#whyWrap .whyList02 li.icon01::after{width: 196px; height: 146px; background: url(../images/main/why_img03.svg)no-repeat center;}
#whyWrap .whyList02 li.icon02::after{width: 181px; height: 155px; background: url(../images/main/why_img04.svg)no-repeat center;}
#whyWrap .whyList01{position: absolute; top:-254px; left:0;}
#whyWrap .whyList02{position: absolute; top:-142px; right:0;}
#whyWrap .layoutBox{width: 702px; height: 100%; position: absolute; top:0; right: 0; display: flex; gap: 0 24px;}

@media (max-width: 1199px){

  #whyWrap .titleBox span{font-size: 24px;}
  #whyWrap .titleBox .title{margin-bottom: 5px; font-size: 46px;}
  #whyWrap .titleBox .text{font-size: 18px;}

}

@media (max-width: 1024px){

  #whyWrap{padding: 100px 0; height: auto;}
  #whyWrap .pcList{display: none!important;}
  #whyWrap .titleBox{margin-bottom: 100px; text-align: center; width: 100%;}
  #whyWrap .layoutBox{display: block; width: 100%; position: static;}
  #whyWrap .whyBox{display: block;}
  #whyWrap .whyList{display: flex; flex-wrap: wrap; gap: 0 1.5%;}
  #whyWrap .whyList li{width: 49.2%; margin-bottom: 15px;}
  #whyWrap .whyList li.icon01::after{width: 196px; height: 146px; background: url(../images/main/why_img01.svg)no-repeat center; background-size: contain;}
  #whyWrap .whyList li.icon02::after{width: 273px; height: 142px; background: url(../images/main/why_img02.svg)no-repeat center; background-size: contain;}
  #whyWrap .whyList li.icon03::after{width: 196px; height: 146px; background: url(../images/main/why_img03.svg)no-repeat center; background-size: contain;}
  #whyWrap .whyList li.icon04::after{width: 181px; height: 155px; background: url(../images/main/why_img04.svg)no-repeat center; background-size: contain;}

}

@media (max-width: 767px){

  #whyWrap .titleBox{margin-bottom: 65px;}
  #whyWrap .titleBox .title{font-size: 36px;}
  #whyWrap .whyList li{height: 272px; border-radius: 18px;}
  #whyWrap .whyList li.icon01::after{width: 146px; height: 96px;}
  #whyWrap .whyList li.icon02::after{width: 223px; height: 92px; }
  #whyWrap .whyList li.icon03::after{width: 146px; height: 96px;}
  #whyWrap .whyList li.icon04::after{width: 131px; height: 105px;}
  
}

@media (max-width: 576px){

  #whyWrap .whyList li h3{font-size: 22px;}
  #whyWrap .whyList li{width: 100%;}

}

@media (max-width: 414px){

  #whyWrap .titleBox .title{font-size: 34px;}

}

@media (max-width: 360px){

  #whyWrap{padding: 60px 0 79px;}
  #whyWrap .titleBox{margin-bottom: 40px;}
  #whyWrap .titleBox .title{font-size: 32px;}
  #whyWrap .titleBox .text{font-size: 16px;}
  #whyWrap .whyList li{height: 245px;}
  #whyWrap .whyList li p{font-size: 13px;}
  #whyWrap .whyList li h3{margin-bottom:5px;}
  #whyWrap .whyList li span{width: 20px; height: 20px; line-height: 22px; font-size: 13px;}

}

@media (max-width: 340px){

  #whyWrap .whyList li{padding: 22px 15px 0;}
  #whyWrap .whyList li.icon04::after{width: 111px; height: 85px;}

}

/* ai 영역 */
#aiWrap{position: relative; height: 1292px; padding-top: 180px; background: url(../images/main/bg06.svg)no-repeat center; background-size: cover; overflow: hidden;}
#aiWrap .titleBox .title{text-align: center; color: #fff; font-size: 72px; font-weight: 700;}
#aiWrap .titleBox .title .gradient-text{background: linear-gradient(to right, #B769FF, #5ECAFF);  -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#aiWrap .imgBox{position: relative; width: 1199px; margin: 0 auto;}
#aiWrap .imgBox .img01{position: absolute; left: 50%; margin-left: -419px;  z-index: 99;}
#aiWrap .imgBox .img02{position: absolute; top: 152px; left:0; z-index: 1;}
#aiWrap .imgBox .img03{position: absolute; top: 339px; right:-69px; z-index: 99;}
#aiWrap .imgBox .img04{position: absolute; top: -22px; right:-77px; z-index: 99;}
#aiWrap .imgBox .textImg01{position: absolute; top: 256px; right: 77px; z-index: 99;}
#aiWrap .imgBox .textImg02{position: absolute; top: 426px; left: 56px; z-index: 99;}

@media (max-width: 1199px){

  #aiWrap{height: 1069px;}
  #aiWrap .titleBox .title{font-size: 50px;}
  #aiWrap .imgBox{width: 984px;}
  #aiWrap .imgBox .img01{width: 575px; margin-left: -288px;}
  #aiWrap .imgBox .img02{width: 200px; top: 117px; left: 124px;}
  #aiWrap .imgBox .img03{width: 344px; top: 239px; right: 86px;}
  #aiWrap .imgBox .img04{top: -10px; right: 14px; width: 204px;}
  
  #aiWrap .imgBox .textImg02,
  #aiWrap .imgBox .textImg01{width: 270px;}
  #aiWrap .imgBox .textImg01{top: 175px; right: 166px;}
  #aiWrap .imgBox .textImg02{top: 293px; left: 174px;}

}

@media (max-width: 1024px){

  #aiWrap{height: 100vh; padding: 150px 0 0;}
  #aiWrap .imgBox{width: 920px;}
  #aiWrap .titleBox .title{font-size: 38px;}

  #aiWrap .imgBox .img02{width: 200px; top: 103px; left: 70px;}
  #aiWrap .imgBox .img03{width: 316px; top: 244px; right: 80px;}
  #aiWrap .imgBox .img04{top: -28px; right: 23px; width: 189px;}
  #aiWrap .imgBox .textImg02,
  #aiWrap .imgBox .textImg01{width: 202px;}
  #aiWrap .imgBox .textImg01{ top: 173px; right: 180px;}
  #aiWrap .imgBox .textImg02{top: 295px; left: 153px;}

}    

@media (max-width: 960px){

  #aiWrap .imgBox {left: 50%; margin-left: -460px;}

}

@media (max-width: 767px){

  #aiWrap{height: 770px; padding: 111px 0 0;}
  #aiWrap .titleBox .title{font-size: 32px;}

}

@media (max-width: 576px){
  
  #aiWrap .imgBox{width: 727px; left: 50%; margin-left: -364px;}
  #aiWrap .titleBox .title{font-size: 38px;}
  #aiWrap .imgBox .img01{width: 450px; margin-left: -225px;}
  #aiWrap .imgBox .img02{width: 150px; left: 71px; top: 80px;}
  #aiWrap .imgBox .img03{width: 250px; top: 191px; right: 61px;}
  #aiWrap .imgBox .img04{width: 150px; top: -23px; right: -2px;}
  #aiWrap .imgBox .textImg02,
  #aiWrap .imgBox .textImg01{width: 150px;}
  #aiWrap .imgBox .textImg01{top: 137px; right: 150px;}
  #aiWrap .imgBox .textImg02{top: 228px; left: 127px;}

}

@media (max-width: 480px){

  #aiWrap{height: 465px; padding: 55px 0 0;}
  #aiWrap .imgBox{width: 340px; margin-left: -170px;}
  #aiWrap .titleBox .title{font-size: 28px;}
  #aiWrap .imgBox .img01{width: 300px; margin-left: -150px;}
  #aiWrap .imgBox .img02{width: 108px; left: -37px; top: 72px;}
  #aiWrap .imgBox .img03{width: 250px; top: 129px; right: -35px;}
  #aiWrap .imgBox .textImg01{top: 56px; right: 40px;}
  #aiWrap .imgBox .textImg02{top: 224px; left: 97px;}
  #aiWrap .imgBox .img04{width: 150px; top: -26px; right: -119px;}

}

/* 시스템 영역 */
#systemWrap{padding: 114px 0 75px; position: relative; z-index: 1; overflow: hidden;}
#systemWrap::after{content: ''; width: 1573px; height: 860px; position: absolute; right:0; bottom: 0; background: url(../images/main/bg11.svg)no-repeat center; background-size: cover; z-index: -1;}
#systemWrap .systemBox{display: flex; gap: 0 223px; justify-content: center;}
#systemWrap .titleBox{padding-top: 63px; display: flex; flex-direction: column; align-self: flex-start; flex-shrink: 0; gap: 70px 0;}
#systemWrap .titleBox .title{font-size: 64px; color: #333236; font-weight: 700; word-break: keep-all;}
#systemWrap .titleBox::after{content: ''; width: 297px; height: 297px; background: url(../images/main/trophy.svg)no-repeat center; background-size: contain;}
#systemWrap .systemList{position: relative; display: flex; gap: 40px 6%; flex-wrap: wrap;}
#systemWrap .systemList li{position: relative; padding: 30px 20px 0 30px; width: 47%; height: 310px; background-color: #fff; border-radius: 28px;}
#systemWrap .systemList li::after{content: ''; position: absolute; right:0; bottom: 0;}
#systemWrap .systemList li:nth-child(1):after{width: 170px; height: 170px; right: 24px; bottom: 6px; background: url(../images/main/system01.svg)no-repeat center; background-size: contain;}
#systemWrap .systemList li:nth-child(2):after{width: 131px; height: 130px; right: 32px; bottom: 21px; background: url(../images/main/system02.svg)no-repeat center; background-size: contain;}
#systemWrap .systemList li:nth-child(3):after{width: 128px; height: 152px; right: 21px; bottom: 20px; background: url(../images/main/system03.svg)no-repeat center; background-size: contain;}
#systemWrap .systemList li:nth-child(4):after{width: 141px; height: 134px; right: 24px; bottom: 9px; background: url(../images/main/system04.svg)no-repeat center; background-size: contain;}
#systemWrap .systemList li span{display: block; margin-bottom: 12px; width: 64px; height: 28px; line-height: 30px; border-radius: 50px; text-align: center; color: #fff;}
#systemWrap .systemList li h2{font-size: 28px; color: #333236; font-weight: 700;}

@media (max-width: 1280px){

  #systemWrap .systemBox{gap: 0 150px;}

}

@media (max-width: 1199px){

  #systemWrap .systemBox{gap: 0 80px;}
  #systemWrap .titleBox .title{font-size: 55px;}
  #systemWrap .systemList li h2{font-size: 24px;}

}

@media (max-width: 1024px){

  #systemWrap .systemBox{flex-direction: column; gap: 50px 0;}
  #systemWrap .titleBox .title{font-size: 42px;}
  #systemWrap .titleBox::after{width: 200px; height: 200px; }
  #systemWrap .titleBox{padding-top: 0; gap: 36px 0; width: 100%; align-items: center; text-align: center;}
  #systemWrap .titleBox br{display: none;}
  #systemWrap .systemList li{width: 49%; border-radius: 20px;}
  #systemWrap .systemList{gap: 20px 2%}

}

@media (max-width: 767px){

  #systemWrap .titleBox .title{font-size: 30px;}
  #systemWrap .titleBox::after{width: 180px; height: 180px; }
  #systemWrap .titleBox{gap: 17px 0}
  #systemWrap .titleBox br{display: none;}
  #systemWrap .systemList li{width: 49%; border-radius: 20px;}
  #systemWrap .systemList{gap: 14px 2%}
  #systemWrap .systemList li{padding: 24px 20px 0 30px; height: 250px;}
  #systemWrap .systemList li h2{font-size: 22px;}
  #systemWrap .systemList li:nth-child(1):after{width: 140px; height: 140px; right: 24px; bottom: 0;}
  #systemWrap .systemList li:nth-child(2):after{width: 100px; height: 100px; right: 32px; bottom: 15px;}
  #systemWrap .systemList li:nth-child(3):after{width: 98px; height: 122px; right: 21px; bottom: 10px;}
  #systemWrap .systemList li:nth-child(4):after{width: 110px; height: 104px; right: 24px; bottom: 0;}
  #systemWrap .systemBox{gap: 33px 0;}

  #systemWrap::after{right: auto; left: 50%; transform: translateX(-50%);}

}

@media (max-width: 480px){

  #systemWrap .titleBox .title{font-size: 28px;}
  #systemWrap .systemList{gap: 14px 3%;}
  #systemWrap .systemList li{padding: 24px 20px 0 22px; width: 48.5%; height: 225px;}
  #systemWrap .systemList li span{margin-bottom: 8px; width: 57px; height: 26px; line-height: 28px; font-size: 14px;}
  #systemWrap .systemList li h2{font-size: 16px;}
  #systemWrap .systemList li:nth-child(1):after{width: 100px; height: 100px; right: 24px; bottom: 0;}
  #systemWrap .systemList li:nth-child(2):after{width: 80px; height: 80px; right: 32px; bottom: 7px;}
  #systemWrap .systemList li:nth-child(3):after{width: 88px; height: 112px; right: 21px; bottom: 5px;}
  #systemWrap .systemList li:nth-child(4):after{width: 100px; height: 94px; right: 24px; bottom: 0;}

}

@media (max-width: 414px){

  #systemWrap{padding: 90px 0 76px;}
  #systemWrap .systemList li{height: 155px; padding: 15px 20px 0 15px; border-radius: 14px;}
  #systemWrap .systemList li span{margin-bottom: 6px; width: 32px; height: 14px; line-height: 16px; font-size: 7px;}
  #systemWrap .systemList li h2{font-size: 14px;}
  #systemWrap .systemList li:nth-child(1):after{width: 80px; height: 80px; right: 8px; bottom: 0;}
  #systemWrap .systemList li:nth-child(2):after{width: 65px; height: 65px; right: 8px; bottom: 7px;}
  #systemWrap .systemList li:nth-child(3):after{width: 68px; height: 92px; right: 10px; bottom: 5px;}
  #systemWrap .systemList li:nth-child(4):after{width: 80px; height: 74px; right: 10px; bottom: 0;}

}

@media (max-width: 340px){

  #systemWrap{background: linear-gradient(to bottom,  #90CAFF66,#A6ABFF33,#CCA6FF66);}
  #systemWrap .systemList li{width: 100%;}
  #systemWrap::after{display: none;}

}

/* 커리큘럼 영역 */
#curriculumWrap{padding: 180px 0 160px;}
#curriculumWrap .curriculumListWrap{position: relative;}
#curriculumWrap .curriculumListWrap .titBox{position: relative; display: flex; z-index: 9;}
#curriculumWrap .curriculumListWrap .titBox .tit{ display: flex; align-items: center; justify-content: center;  position: relative;}
#curriculumWrap .curriculumListWrap .titBox .tit h3{margin-bottom: -18px; width: 75px; height: 44px; line-height: 44px; border-radius: 50px; border: 1px solid #4B4B4B; color: #272727; font-size: 20px; font-weight: 700; text-align: center; background-color: #fff; z-index: 9;}
#curriculumWrap .curriculumListWrap .titBox .tit01{width: 380px; flex-shrink: 0;}
#curriculumWrap .curriculumListWrap .titBox .tit02,
#curriculumWrap .curriculumListWrap .titBox .tit03{width: 410px;}
#curriculumWrap .curriculumListWrap .titBox .tit .title01{margin-left: -10px; background-color: #2F2F2F; color: #fff;}
#curriculumWrap .curriculumListWrap .titBox .tit .title02{width: 109px;}
#curriculumWrap .curriculumListWrap .titBox .tit .title03{}
#curriculumWrap .titleBox{margin-bottom: 122px;}
#curriculumWrap .title{font-size: 72px; color: #111111; text-align: center; font-weight: 700;}
#curriculumWrap .curriculumList{width: 100%; display: flex; align-items: center;}
#curriculumWrap .curriculumList li{padding: 0 15px; position: relative; flex: 1; height: 120px; line-height: 120px; font-size: 30px; font-weight: 700; text-align: center;}
#curriculumWrap .curriculumList li br{display: none;}
#curriculumWrap .curriculumList li:nth-child(2){color: #333236;}
#curriculumWrap .curriculumListBox .box{flex-shrink: 0; padding-left: 34px; width: 380px; height: 120px; line-height: 120px; }
#curriculumWrap .curriculumListBox .box span{display: flex; align-items: center; gap: 0 26px; color: #fff; font-size: 32px; font-weight: 700;}
#curriculumWrap .curriculumListBox .curriculumList li:nth-child(1)::after{content: ''; width: 2px; height: 76px; position: absolute; top: 50%; transform: translateY(-50%); left: 100%; background: url(../images/main/line.svg)no-repeat center;}
#curriculumWrap .curriculumList{position: relative;}
#curriculumWrap .curriculumListBox .box span::before{width: 64px; height: 64px;}
#curriculumWrap .curriculumListBox01 .curriculumList li:nth-child(1){color: #008DEC;}
#curriculumWrap .curriculumListBox02 .curriculumList li:nth-child(1){color: #2440CF;}
#curriculumWrap .curriculumListBox03 .curriculumList li:nth-child(1){color: #7C27DE;}
#curriculumWrap .curriculumListBox01 .box{background: url(../images/main/arrow_bg01.svg)no-repeat left center; background-size: cover;}
#curriculumWrap .curriculumListBox02 .box{background: url(../images/main/arrow_bg02.svg)no-repeat left center; background-size: cover;}
#curriculumWrap .curriculumListBox03 .box{background: url(../images/main/arrow_bg03.svg)no-repeat left center; background-size: cover;}
#curriculumWrap .curriculumListBox01 .box span::before{content: '';  background: url(../images/main/curriculum01.svg)no-repeat center; background-size: contain;}
#curriculumWrap .curriculumListBox02 .box span::before{content: ''; background: url(../images/main/curriculum02.svg)no-repeat center; background-size: contain;}
#curriculumWrap .curriculumListBox03 .box span::before{content: ''; background: url(../images/main/curriculum03.svg)no-repeat center; background-size: contain;}
#curriculumWrap .curriculumListBox{max-width: 1200px; margin: 0 auto; margin-bottom: 30px; display: flex; border-radius: 15px; overflow: hidden; background-color: #F4F6FD;}

@media (max-width: 1199px){

  #curriculumWrap .title{font-size: 66px;}
  #curriculumWrap .curriculumListBox .box{width: 330px; background-position-x:-49px;}

  #curriculumWrap .curriculumListWrap .titBox .tit01{width: 330px;}
  #curriculumWrap .curriculumListWrap .titBox .tit02,
  #curriculumWrap .curriculumListWrap .titBox .tit03{width: 415px;}
  
}

@media (max-width: 1024px){

  #curriculumWrap{padding: 120px 0 100px;}
  #curriculumWrap .title{font-size: 46px;}
  #curriculumWrap .curriculumListWrap .title03{right: 156px;}
  #curriculumWrap .curriculumList li,
  #curriculumWrap .curriculumListBox .box span{gap: 0 22px; font-size: 24px;}
  #curriculumWrap .curriculumListBox,
  #curriculumWrap .curriculumListBox .box{height: 100px; line-height: 100px;}
  #curriculumWrap .curriculumListBox .box{width: 318px; padding-left: 26px; background-position-x:0;}
  #curriculumWrap .curriculumListBox .box span::before{width: 50px; height: 50px;}

  #curriculumWrap .curriculumListWrap .titBox .tit h3{width: 60px; height: 35px; line-height: 35px; font-size: 15px;}
  #curriculumWrap .curriculumListWrap .titBox .tit .title02{width: 83px;}

  #curriculumWrap .curriculumListWrap .titBox .tit01{width: 318px;}
  #curriculumWrap .curriculumListWrap .titBox .tit02,
  #curriculumWrap .curriculumListWrap .titBox .tit03{width: 333px;}

}

@media (max-width: 960px){

  #curriculumWrap{padding: 110px 0 70px;}
  #curriculumWrap .titleBox{margin-bottom: 92px;}
  #curriculumWrap .title{font-size: 42px;}

  #curriculumWrap .curriculumList li br{display: block;}
  #curriculumWrap .curriculumList li{height: auto; line-height: 1.2;}
  #curriculumWrap .curriculumListBox .box{width: 251px;}
  #curriculumWrap .curriculumList li,
  #curriculumWrap .curriculumListBox .box span{font-size: 20px;}
  #curriculumWrap .curriculumListBox{margin-bottom: 20px;}
  #curriculumWrap .curriculumListBox .box{background-position-x:-65px;}

  #curriculumWrap .curriculumListWrap .titBox .tit01{width: 251px;}
  #curriculumWrap .curriculumListWrap .titBox .tit02,
  #curriculumWrap .curriculumListWrap .titBox .tit03{width: 335px;}
  #curriculumWrap .curriculumListWrap .titBox .tit .title02{margin-left: -15px;}
  #curriculumWrap .curriculumListWrap .titBox .tit h3{margin-bottom: -15px;}
  
}

@media (max-width: 576px){

  #curriculumWrap .curriculumListBox .box{padding-left: 22px; width: 188px; background-position-x: -128px;}
  #curriculumWrap .curriculumListBox .box span::before{width: 40px; height: 40px;}
  #curriculumWrap .curriculumList li,
  #curriculumWrap .curriculumListBox .box span{gap: 0 18px; font-size: 20px;}

  #curriculumWrap .curriculumListWrap .titBox .tit01{width: 188px;}
  #curriculumWrap .curriculumListWrap .titBox .tit02,
  #curriculumWrap .curriculumListWrap .titBox .tit03{width: 174px;}
  
}

@media (max-width: 480px){

  #curriculumWrap .title{font-size: 38px;}
  #curriculumWrap .curriculumListBox{border-radius: 10px;}
  #curriculumWrap .curriculumListBox .box span{margin-left: -14px; height: 100%; justify-content: center; flex-direction: column; gap: 5px 0;}
  #curriculumWrap .curriculumListBox,
  #curriculumWrap .curriculumListBox .box{padding-left: 0; height: 100px; line-height: normal;}
  #curriculumWrap .curriculumList li,
  #curriculumWrap .curriculumListBox .box span{gap: 10px 0; font-size: 16px;}
  #curriculumWrap .curriculumListBox .box span::before{width: 30px; height: 30px;}
  #curriculumWrap .curriculumListBox .box{width: 152px; background-position-x: -163px;}
  #curriculumWrap .curriculumListWrap .titBox .tit .title01{margin-left: -25px;}
  #curriculumWrap .curriculumListWrap .titBox .tit01{width: 152px;}
  #curriculumWrap .curriculumListWrap .titBox .tit02,
  #curriculumWrap .curriculumListWrap .titBox .tit03{width: 144px;}

}

@media (max-width: 414px){
  
  #curriculumWrap .curriculumListBox{margin-bottom: 15px;}
  #curriculumWrap{padding: 85px 0 66px;}
  #curriculumWrap .titleBox{margin-bottom: 50px;}
  #curriculumWrap .title{font-size: 32px;}
  #curriculumWrap .curriculumListBox,
  #curriculumWrap .curriculumListBox .box{height: 88px;}
  #curriculumWrap .curriculumList li,
  #curriculumWrap .curriculumListBox .box span{font-size: 14px;}
  #curriculumWrap .curriculumListBox .box{width: 126px;}
  #curriculumWrap .curriculumListBox .box{background-position-x: -151px;}
  #curriculumWrap .curriculumList{margin-left: -10px;}
  #curriculumWrap .curriculumListBox .curriculumList li:nth-child(1)::after{height: 62px;}

  #curriculumWrap .curriculumListWrap .titBox .tit01{width: 126px;}
  #curriculumWrap .curriculumListWrap .titBox .tit02,
  #curriculumWrap .curriculumListWrap .titBox .tit03{width: 129px;}
  #curriculumWrap .curriculumListWrap .titBox .tit h3{margin-bottom: -10px; width: 50px; height: 30px; line-height:30px; font-size: 13px;}
  #curriculumWrap .curriculumListWrap .titBox .tit .title02{margin-left: -26px; width: 70px;}

  

}

@media (max-width: 360px){

  #curriculumWrap .curriculumListBox .box{background-position-x: -165px; width: 112px;}
  #curriculumWrap .curriculumListWrap .titBox .tit01{width: 112px;}
  #curriculumWrap .curriculumListWrap .titBox .tit02,
  #curriculumWrap .curriculumListWrap .titBox .tit03{width: 101px;}

}

@media (max-width: 320px){

  #curriculumWrap .curriculumListBox .box{background-position-x: -177px; width: 100px;}
  #curriculumWrap .curriculumList li, #curriculumWrap .curriculumListBox .box span{font-size: 12px;}
  #curriculumWrap .curriculumListWrap .titBox .tit01{width: 100px;}
  #curriculumWrap .curriculumListWrap .titBox .tit02,
  #curriculumWrap .curriculumListWrap .titBox .tit03{width: 94px;}

}



























/* 인기수업 영역 */
#popularWrap{padding: 180px 0 160px; background-color: #F8F8F8; overflow: hidden;}
#popularWrap .titleBox{margin-bottom: 74px;}
#popularWrap .title{text-align: center; font-size: 72px; color: #111; font-weight: 700;}
#popularWrap .popularListBox{margin-bottom: 72px; display: flex; gap: 0 24px; align-items: center; justify-content: center;}
#popularWrap .popularListBox .box{width: 384px; border-radius: 16px; overflow: hidden; border: 1px solid #DFDFDF; box-shadow: 0 10px 20px rgba(0,0,0,5%);}
#popularWrap .popularListBox .box .imgBox{height: 216px;}
#popularWrap .popularListBox .box .imgBox img{display: block; width: 100%; height: 100%; object-fit: cover;}
#popularWrap .popularListBox .box .textBox{padding: 28px 20px 38px 32px;}
#popularWrap .popularListBox .box .textBox h3{margin-bottom: 11px; font-size: 28px; color: #333236; font-weight: 700; line-height: 1.2;}
#popularWrap .popularListBox .box .textBox span{display: block; color: #7A7A7A; font-size: 15px; font-weight: 500;}
#popularWrap .btnBox{display: flex; justify-content: center;}
#popularWrap .btnBox .button{width: 384px; height: 72px; font-size: 24px;}

@media (max-width: 1199px){

  #popularWrap .title{font-size: 66px;}
  #popularWrap .popularListBox .box .textBox h3{font-size: 26px;}

}

@media (max-width: 1024px){

  #popularWrap{padding: 130px 0 100px;}
  #popularWrap .popularListBox{display: block; position: relative;}
  #popularWrap .slick-list{overflow: visible;}
  #popularWrap .title{font-size: 46px;}
  #popularWrap .popularListBox .box{margin-right: 15px;}
  #popularWrap .popularListBox .box .textBox h3{font-size: 22px;}
  #popularWrap .btnBox .button{width: 331px; font-size: 22px;}

}

@media (max-width: 767px){

  #popularWrap{padding: 100px 0 72px;}
  #popularWrap .title{font-size: 34px;}
  #popularWrap .titleBox{margin-bottom: 55px;}
  #popularWrap .popularListBox{margin-bottom: 60px;}
  #popularWrap .popularListBox .box .textBox{padding: 23px 20px 28px 26px;}
  #popularWrap .popularListBox .box .imgBox{height: 180px;}
  #popularWrap .popularListBox .box .textBox h3{font-size: 20px;}
  #popularWrap .popularListBox .box{width: 314px;}
  #popularWrap .btnBox .button{width: 200px; height: 50px; font-size: 18px;}

}

@media (max-width: 480px){

  #popularWrap .popularListBox{margin-bottom: 50px;}
  #popularWrap .popularListBox .box{width: 280px;}
  #popularWrap .btnBox .button{width: 100%; font-size: 16px;}

}

@media (max-width: 360px){

  #popularWrap{padding: 60px 0 72px;}
  #popularWrap .titleBox{margin-bottom: 39px;}
  #popularWrap .popularListBox{margin-bottom: 34px;}
  #popularWrap .popularListBox .box .textBox{padding: 21px 20px 20px 22px;}
  #popularWrap .popularListBox .box .imgBox{height: 159px;}
  #popularWrap .popularListBox .box{width: 280px;}

}

/* 신청하기 영역 */
#applicationWrap{padding: 160px 0 130px}
#applicationWrap form{max-width: 490px; margin: 0 auto;}
#applicationWrap h2{margin-bottom: 60px; text-align: center; font-size: 64px; color: #333236;}
#applicationWrap .formBox{margin-bottom: 26px;}
#applicationWrap .inputTextBox input{padding-left: 20px; width: 100%; height: 56px; border-radius: 8px; background-color: #F9F9F9; font-size: 16px; font-weight: 500; color: #000; border: 0;} 
#applicationWrap .inputTextBox input::placeholder{color: #969698;}
#applicationWrap .inputRadioWrap{display: flex; gap: 0 28px;}
#applicationWrap .inputRadioWrap .inputRadioBox{display: flex; align-items: center; gap: 0 8px;}
#applicationWrap .inputRadioWrap .inputRadioBox label{color: #99989A; cursor: pointer;}
#applicationWrap .radioFormBox span{margin-bottom: 13px;}
#applicationWrap span{display: block; margin-bottom: 5px; font-weight: 600; color: #333236;}
#applicationWrap .formChkBox{padding: 21px 24px; border: 1px solid #EFEFEF; border-radius: 8px;}
#applicationWrap .inputCheckBox{display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px;}
#applicationWrap .inputCheckBox:last-child{margin-bottom: 0;}
#applicationWrap .inputCheckBox label{padding-left: 33px; position: relative; font-weight: 600; color: #333236; cursor: pointer;}
#applicationWrap .inputCheckBox label::before{content: ''; width: 18px; height: 18px; position: absolute; top:0; left:0; background: url(../images/main/chk01.svg)no-repeat center;}
#applicationWrap .inputCheckBox input:checked + label::before{background: url(../images/main/chk02.svg)no-repeat center;}
#applicationWrap .inputCheckBox .viewMore{flex-shrink: 0; font-size: 14px; font-weight: 600; color: #149DFF; text-decoration: underline;}
/* #applicationWrap .btnBox::before{content: ''; width: 310px; height: 53px; top: -59px; position: absolute; left: 50%; transform: translateX(-50%); background: url(../images/main/payback.svg) no-repeat center; } */
#applicationWrap .btnBox{position: relative; margin-top: 107px; display: flex; justify-content: center;}
#applicationWrap .btnBox .button{padding: 22px 17px; width: 100%; font-size: 24px;}

@media (max-width: 1024px){

  #applicationWrap{padding: 100px 0;}
  #applicationWrap h2{font-size: 42px;}
  #applicationWrap form{max-width: none;}
  #applicationWrap .btnBox .button{padding: 17px; font-size: 20px;}

}

@media (max-width: 767px){

  #applicationWrap{padding: 60px 0;}
  #applicationWrap h2{font-size: 32px;}
  #applicationWrap .btnBox .button{padding: 17px; font-size: 18px;}

}

@media (max-width: 414px){

  #applicationWrap{padding: 60px 0;}
  #applicationWrap .inputRadioWrap{gap: 0 12px;}
  #applicationWrap .inputTextBox input{padding-left: 18px; height: 51px;}
  #applicationWrap .inputTextBox input::placeholder{font-size: 13px;}
  #applicationWrap .inputRadioWrap input{margin-top: -1px;}
  #applicationWrap .inputRadioWrap .inputRadioBox{gap: 0 6px;}
  #applicationWrap .inputRadioWrap .inputRadioBox label{font-size: 13px;}
  #applicationWrap h2{margin-bottom: 44px; font-size: 32px;}
  #applicationWrap span{font-size: 12px;}
  #applicationWrap .btnBox .button{font-size: 16px;}
  #applicationWrap .inputCheckBox label{padding-left: 30px; font-size: 13px;}
  #applicationWrap .inputCheckBox label::before{top: -1px;}
  #applicationWrap .inputCheckBox .viewMore{font-size: 12px;}
  #applicationWrap .btnBox{margin-top: 75px;}

}

@media (max-width: 320px){

  #applicationWrap .formChkBox{padding: 21px 10px;}
  #applicationWrap .inputCheckBox{gap:10px 0; flex-direction: column; align-items: flex-start;}
  #applicationWrap .inputCheckBox .viewMore{align-self: flex-end;}

}