.main{}
.main section{}
.main h1.title{font-size: 6rem; font-weight: 700; line-height: 1.5; }
.main h1.title span{color: #00CB68;}
.main .sns-icon{position: fixed; width: 7rem; bottom: 16rem; z-index: 11; right: 5%;}
.main .sns-icon a{display: block; width: 100%;}
.main .sns-icon a img{display: block; width: 100%;}
@media screen and (max-width: 768px){
    .main h1.title{font-size: 30px;}
    .main .sns-icon{width: 40px; right: 20px;}
}
.main .visual{height: 100vh; background: url(../img/main-visual.png) no-repeat center / cover; display: flex; flex-direction: column; justify-content: center; text-align: center; color: #fff; padding: 0 20px; padding-top: 10rem;}
.main .visual h1{font-size: 7.5rem; font-weight: 700; margin-bottom: 17.5rem; line-height: 1.5; position: relative;}
.main .visual h1 span{color: #00CB68;}
.main .visual h1::after{content: ""; width: 1px; height: 5rem; background-color: #00CB68; position: absolute; left: 50%; transform: translateX(-50%); top: 120%;}
.main .visual p{font-weight: 300; line-height: 2;}
@media screen and (max-width: 1024px){
    
}
@media screen and (max-width: 768px){
    .main .visual h1{font-size: 40px; margin-bottom: 80px;}
    .main .visual h1::after{height: 30px;}
    .main .visual p{font-size: 12px;}
}
/*  */
.msec01{padding: 24rem 0 27rem; overflow: hidden;}
.msec01 .back-text,
.msec01 .back-circle{position: absolute;}
.msec01 .back-text{right: -10px; top: 0; width: 12rem;}
.msec01 .back-text img{width: 100%;}
.msec01 .back-circle{right: -10%; bottom: -40%; width: 100%; max-width: 1000px;}
.msec01 .back-circle img{width: 100%;}
.msec01 h1.title{margin-bottom: 12rem; text-align: center;}
.msec01 .cont-wrap{display: flex; gap: 9rem; justify-content: center; align-items: center; line-height: 2;}
.msec01 .cont-wrap .player{width: 55%; max-width: 580px; position: relative; border-radius: 10px; overflow: hidden;}
.msec01 .cont-wrap .player::after{content: ""; display: block; padding-bottom: 56%;}
.msec01 .cont-wrap .player iframe,
.msec01 .cont-wrap .player video {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
@media screen and (max-width: 1024px){
    
}
@media screen and (max-width: 768px){
    .msec01{padding: 92px 0;}
    .msec01 h1.title{margin-bottom: 45px;}
    .msec01 .back-text{width: 67px;}
    .msec01 .cont-wrap{flex-wrap: wrap; gap: 55px; flex-direction: column; text-align: center; line-height: 1.7;}
    .msec01 .cont-wrap .player,
    .msec01 .cont-wrap p{width: 100%; font-size: 14px;}
    .msec01 .back-circle{right: -30%; max-width: 800px; bottom: -30%;}
}
/* msec02 review */
.msec02{padding: 24rem 0; background-color: #EFF6F3;}
.msec02 .inner{width: auto; max-width: none;  display: flex; padding-right: 0; margin-left: 5%; }
.msec02 .inner .textbox{width: 64rem;}
.msec02 .inner h1.title{margin-bottom: 7rem; font-size: 7rem;}
.msec02 .inner p{line-height: 2; font-weight: 300;}
.msec02 .inner p span{font-weight: 500;}
.msec02 .sw-msec02{width: calc(100% - 64rem); padding-bottom: 8rem;}
.msec02 .sw-msec02 ul{}
.msec02 .sw-msec02 ul li{background-color: #fff; padding: 6rem; border-radius: 20px; font-size: 1.8rem; height: auto;}
.msec02 .sw-msec02 ul li h2{font-size: 3rem; font-weight: 700; line-height: 1.3;}
.msec02 .sw-msec02 ul li p{margin: 5rem 0; font-weight: 300; line-height: 1.6; }
.msec02 .sw-msec02 ul li h3{font-weight: 700; position: absolute; bottom: 6rem;}
.msec02 .sw-msec02 ul li h3 span{color: #00CB68; font-size: 2.5rem; display: inline-block; margin-left: 5px;}
.swiper-horizontal>.swiper-scrollbar, 
.swiper-scrollbar.swiper-scrollbar-horizontal{max-width: 715px; width: 100%; background-color: transparent; height: 6px; border-radius: 0;}
.swiper-scrollbar-drag{background-color: #3A3A3A; border-radius: 0;}
@media screen and (max-width: 1200px){
    /* .msec02 .sw-msec02{width: 53%;}
    .msec02 .sw-msec02 ul li{padding: 40px; padding-bottom: 60px;} */
    .msec02 .inner .textbox{width: 550px;}
    .msec02 .sw-msec02{width: calc(100% - 550px);}
}
@media screen and (max-width: 1024px){
    .msec02 .inner{margin-left: 0;}
    .msec02 .inner{flex-wrap: wrap;}
    .msec02 .inner .textbox,
    .msec02 .sw-msec02{width: 100%;}
    .msec02 .sw-msec02{margin-top: 60px;}
    .msec02 .sw-msec02 ul li{padding: 25px;}
    .msec02 .sw-msec02 ul li h3{bottom: 20px;}
    .swiper-horizontal>.swiper-scrollbar, 
    .swiper-scrollbar.swiper-scrollbar-horizontal{max-width: none; width: calc(100% - 40px); left: auto;}
}
@media screen and (max-width: 768px){
    .msec02{padding: 93px 0;}
    .msec02 .inner{padding-right: 20px;}
    .msec02 .inner h1.title{font-size: 35px; margin-bottom: 40px;}
    .msec02 .inner p{font-size: 14px;}
    .msec02 .sw-msec02 ul{padding-bottom: 20px;}
    .msec02 .sw-msec02 ul li{padding: 15px; padding-bottom: 35px;}
    .msec02 .sw-msec02 ul li h2{font-size: 16px;}
    .msec02 .sw-msec02 ul li p{overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; margin: 10px 0; font-size: 10px;}
    .msec02 .sw-msec02 ul li h3{bottom: 15px; font-size: 8px;}
    .msec02 .sw-msec02 ul li h3 span{font-size: 10px;}
}
/* msec03 teacher */
.msec03{height: 100vh;}
.msec03 .swiper{height: 100%;}
.msec03 ul{}
.msec03 ul li{}
.msec03 ul li.slide01{background: url(../img/msec03-bgi01.png) no-repeat center / cover;}
.msec03 ul li.slide02{background: url(../img/msec03-bgi02.png) no-repeat center / cover;}
.msec03 ul li.slide03{background: url(../img/msec03-bgi03.png) no-repeat center / cover;}
.msec03 .inner{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; color: #fff; text-align: center; }
.msec03 .inner .round-btn{height: 10rem; padding: 0 4rem;  font-size: 3rem; margin: 10rem 0; width: 40rem;}
.msec03 .inner .round-btn img{width: 1.2rem;}
.msec03 .controller{display: flex; align-items: center; justify-content: center; gap: 6rem;}
.msec03 .controller .swiper-nav{display: flex; align-items: center; gap: 3rem;}
.msec03 .controller .swiper-nav div{cursor: pointer;}
.msec03 .controller .progress{display: flex; align-items: center; gap: 1.5rem; position: relative; padding-right: 4rem;}
.msec03 .controller .sw-number{width: auto;}
.msec03 .controller .sw-number .swiper-pagination-total{position: absolute; right: 0;}
.msec03 .controller .sw-progress{position: relative; width: 135px; height: 5px; bottom: auto; border-radius: 10px; overflow: hidden;}
.msec03 .controller .swiper-pagination-progressbar{background-color: rgba(255, 255, 255, 0.3);}
.msec03 .controller .swiper-pagination-progressbar-fill{background: #fff;}
.msec03 .controller .btn-wrap{}
.msec03 .controller .btn-wrap img{cursor: pointer;}
.msec03 .controller .play-btn img:nth-child(1){display: none;}
.msec03 .controller .play-btn img:nth-child(2){display: block;}
.msec03 .controller .pause-btn img:nth-child(1){display: block;}
.msec03 .controller .pause-btn img:nth-child(2){display: none;}
@media screen and (max-width: 1024px){
    
}
@media screen and (max-width: 768px){
    .msec03 .inner .round-btn{width: 266px; font-size: 20px; height: 50px;padding:0 20px}
    .msec03 .controller{gap: 30px;}
    .msec03 .controller .progress{font-size: 12px;}
    .msec03 .controller .swiper-nav {gap: 15px;}
    .msec03 .controller .swiper-nav div{width: 6px;}
    .msec03 .controller .swiper-nav div img{width: 100%;}
}
/* msec04 result */
.msec04{padding: 16.6rem 0 13.5rem; overflow: hidden;}
.msec04 .inner{display: flex; justify-content: space-between; align-items: center; margin-bottom: 16rem;}
.msec04 .inner h1.title{line-height: 1.3; position: relative;}
.msec04 .inner h1.title img{position: absolute; top: -25rem; left: 8rem; z-index: -1; }
.msec04 .inner .text-wrap{font-weight: 700;}
.msec04 .inner .text:nth-child(1){margin-bottom: 9rem;}
.msec04 .inner .text p{color: #00CB68; margin-bottom: 2.6rem;}
.msec04 .inner .text h3{font-size: 5rem; position: relative; display: inline-block;}
.msec04 .inner .text:nth-child(2) h3::after{content: "+"; position: absolute; right: -30px; top: -30px;}
.msec04 .sw-msec04{}
.msec04 .sw-msec04 ul{transition-timing-function: linear;}
.msec04 .sw-msec04 ul li{border-radius: 20px; overflow: hidden; background-color: #EFF6F3; height: 360px;}
.msec04 .sw-msec04 ul li h1{padding: 3.83rem 4.63rem 3rem; background-color: #00CB68; color: #fff; font-size: 2.4rem; font-weight: 700;}
.msec04 .sw-msec04 ul li .btm{padding: 3rem 3rem 3rem 4rem; font-size: 1.8rem; font-weight: 300; line-height: 1.6; }
.msec04 .sw-msec04 ul li p{
    /* overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;  */
}
@media screen and (max-width: 1200px){
    .msec04 .sw-msec04 ul li{height: 330px;}
}
@media screen and (max-width: 1024px){
    .msec04 .sw-msec04 ul li{height: 300px;}
    
}
@media screen and (max-width: 768px){
    .msec04 .inner{flex-direction: column; margin-bottom: 66px;}
    .msec04 .inner h1.title,
    .msec04 .inner .text-wrap{width: 100%;}
    .msec04 .inner .text-wrap{display: flex; justify-content: space-between; padding-right: 20px;}
    .msec04 .inner .text:nth-child(1){margin-bottom: 0;}
    .msec04 .inner .text p{font-size: 14px;}
    .msec04 .inner .text h3{font-size: 30px;}
    .msec04 .inner h1.title{margin-bottom: 66px;}
    .msec04 .inner h1.title img{top: -170%; left: -10px; width: 400px;}
    .msec04 .sw-msec04 ul li{height: 200px;}
    .msec04 .sw-msec04 ul li h1{padding: 18px; font-size: 14px;}
    .msec04 .sw-msec04 ul li .btm{padding: 18px; font-size: 12px;}
}
@media screen and (max-width: 450px){
    .msec04 .sw-msec04 ul li{height: 260px;}
}
/* msec05 kakao */
.msec05{background-color: #000; padding-bottom: 20rem; height: calc(100vh + 20rem);}
.msec05 .inner{display: flex; justify-content: space-between; align-items: center; height: 100%;}
.msec05 .circle{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: 650px;}
.msec05 .circle img{width: 100%;}
.msec05 .kakao{position: relative; overflow: hidden; width: 100%; max-width: 400px; display: flex; height: 100%;}
.msec05 .kakao .swiper{width: 45%;}
.msec05 .kakao ul{transition-timing-function: linear}
.msec05 .kakao ul li{width: 100%;}
.msec05 .kakao ul li img{width: 100%; height: 100%;}
.msec05 .kakao-mobile{display: none;}
.msec05 .text-wrap{position: relative; color: #fff; text-align: right;}
.msec05 .text-wrap p{margin-bottom: 15rem; font-size: 2rem; font-weight: 300; line-height: 2; position: relative;}
.msec05 .text-wrap p::after{content: ""; width: 1px; height: 5rem; background-color: #00CB68; position: absolute; top: calc(100% + 5rem);}
@media screen and (max-width: 1024px){
    
}
@media screen and (max-width: 768px){
    .msec05{height: auto;}
    .msec05 .inner{display: block;}
    .msec05 .kakao{display: none;}
    .msec05 .kakao-mobile{display: block; position: relative; margin-left: -20px; width: 100%;}
    .msec05 .kakao-mobile img{width: 80%;}
    .msec05 .text-wrap{margin-bottom: 87px;}
    .msec05 .text-wrap p{font-size: 14px; margin-bottom: 90px;}
    .msec05 .text-wrap p::after{height: 30px;}
}
/* msec06 youtube */
.msec06{padding: 22rem 0 19rem; background-color: #00CB68;position: relative; margin-top: -20rem; border-top-left-radius: 20rem; color: #fff;}
.msec06 .inner{display: flex; justify-content: space-between; align-items: center;}
.msec06 .text-wrap{}
.msec06 .text-wrap h1.title{margin-bottom: 8rem;}
.msec06 .text-wrap .round-btn{color: #fff; width: 31rem; height: 8rem; padding: 0 3.7rem; border-color: #fff; font-size: 2.4rem;}
.msec06 .video-wrap{width: 50%; position: relative; border-radius: 10px; overflow: hidden; max-width: 560px;}
.msec06 .video-wrap .video{width: 100%; position: relative; border-radius: 15px; overflow: hidden;}
.msec06 .video-wrap .video:first-child{margin-bottom: 3.2rem;}
.msec06 .video-wrap .video::after{content: ""; display: block; padding-bottom: 56%;}
.msec06 .video-wrap .video iframe{width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
@media screen and (max-width: 1024px){
    
}
@media screen and (max-width: 768px){
    .msec06{padding: 90px 0; border-top-left-radius: 80px;}
    .msec06 .inner{flex-direction: column; gap: 30px;}
    .msec06 .text-wrap h1.title{margin-bottom: 30px;}
    .msec06 .text-wrap,
    .msec06 .video-wrap{width: 100%; max-width: none;}
    .msec06 .text-wrap .round-btn{font-size: 20px; width: 215px; height: 50px;}
    .msec06 .text-wrap .round-btn img{width: 15px;}
    .msec06 .video-wrap .video:first-child{margin-bottom: 10px;}
}
/* msec07 */
.msec07{padding: 24rem 0 21rem;}
.msec07 .inner{display: flex; justify-content: space-between;}
.msec07 .circle{position: absolute; bottom: -31rem; left: -15%;}
.msec07 ul{display: flex; flex-wrap: wrap; gap: 2rem; width: 75%;}
.msec07 ul li{width: calc((100% - 4rem) / 3); position: relative; background-color: #E4F9F0; transition: 0.3s;}
.msec07 ul li::after{content: ""; display: block; padding-bottom: 100%;}
.msec07 ul li a{position: absolute; width: 100%; height: 100%; padding: 3rem; font-weight: bold; font-size: 14px;}
.msec07 ul li a h1{display: inline-flex; height: 2.5rem; padding: 0 1.3rem; align-items: center; background-color: #00CB68; color: #fff; border-radius: 50px;}
.msec07 ul li a h2{margin: 2rem 0 2.4rem; font-size: 2.6rem; }
.msec07 ul li a p{font-weight: 400; line-height: 1.7;}
.msec07 ul li a .icon{position: absolute; bottom: 2rem; right: 3rem; width: 8rem; }
.msec07 ul li a .icon{position: absolute; bottom: 2rem; right: 3rem; width: 8rem; }
.msec07 ul li a .icon img{width: 100%;}
.msec07 ul li:hover{background-color: #00CB68; color: #fff;}
.msec07 ul li:hover a h1{background-color: #fff; color: #00CB68;}
@media screen and (max-width: 1024px){
    .msec07 .inner{flex-wrap: wrap;}
    .msec07 .inner h1.title{margin-bottom: 80px;}
    .msec07 .inner h1.title,
    .msec07 ul{width: 100%;}
}
@media screen and (max-width: 768px){
    .msec07{padding: 90px 0;}
    .msec07 .circle{left: 0; width: 50%; bottom: -20%;}
    .msec07 .circle img{width: 100%;}
    .msec07 ul{gap: 10px;}
    .msec07 ul li{width: calc((100% - 10px) / 2);}
    .msec07 ul li a{padding: 10px;}
    .msec07 ul li a h1{font-size: 10px;}
    .msec07 ul li a h2{font-size: 16px; margin: 8px 0;}
    .msec07 ul li a p{font-size: 12px;}
    .msec07 ul li a .icon{width: 40px;}
}
/* msec08 */
.msec08{padding: 17rem 0; background-color: #1C2722; position: relative; overflow: hidden;}
.msec08 .back{position: absolute; z-index: 0; mix-blend-mode: screen;}
.msec08 .back img{}
.msec08 .circle1{top: -35rem; right: -5%;}
.msec08 .circle2{left: -3%; bottom: 10%;}
.msec08 .text{bottom: -2rem; left: -2rem;}
.msec08 .inner h2{font-size: 3rem; text-align: center; color: #fff; margin-bottom: 8rem; line-height: 1.6;}
.msec08 .inner h2 b{font-weight: 700;}
.msec08 .btn-wrap{display: flex; justify-content: center; gap: 5rem;}
.msec08 .round-btn{width: calc(50% - 2.5rem); height: 10rem; font-size: 3rem; max-width: 450px; border-width: 2px; justify-content: center;}
.msec08 .down-btn{color: #000; background-color: #00CB68;}
.msec08 .test-btn{}
@media screen and (max-width: 1024px){
    
}
@media screen and (max-width: 768px){
    .msec08{padding: 120px 0;}
    .msec08 .inner h2{font-size: 20px; margin-bottom: 50px;}
    .msec08 .btn-wrap{flex-direction: column; align-items: center;}
    .msec08 .round-btn{font-size: 20px; width: 100%; max-width: 280px; height: 50px; gap: 20px;}
    .msec08 .circle1{right: -10%; top: -50%;}
    .msec08 .circle1 img{width: 140px;}
    .msec08 .circle2{left: -5%; bottom: 10%;}
    .msec08 .circle2 img{width: 100px;}
    .msec08 .text{bottom: -10px;}
    .msec08 .text img{height: 60px;}
}
.main .footer{background-color: #000000; color: #fff; border-top: none;}
.main .footer .go-top{background: url(../img/go-top-white.svg) no-repeat center / cover;}