@charset "EUC-KR";

/* webfont */
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Pretendard-Bold";
    src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff")
      format("woff");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-3Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "SCoreDream";
    font-weight: 900;
    font-display: swap;
    src: local("SCDream9"), url("https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/fonts/woff2/SCDream9.woff2") format("woff2"),
      url("https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/fonts/woff/SCDream9.woff") format("woff");
}
@font-face {
    font-family: 'S-CoreDream-9Black';
    src: url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-9Black.eot');
    src:url('https://cdn.jsdelivr.net/gh/wizfile/font/S-CoreDream-9Black.woff') format('woff');
    font-style: normal;
}

/* font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

/* =========================================================
   °øÅë (¸ð¹ÙÀÏ, ±âÁØ ºäÆ÷Æ® 360~480px / vw ±â¹Ý À¯µ¿ ·¹À̾ƿô)
   ========================================================= */
*{-webkit-box-sizing:border-box; -moz-box-size:border-box; box-sizing:border-box;}
html{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust:100%; scrollbar-gutter:stable;}
body{margin:0; font-family:"Pretendard", sans-serif; -webkit-font-smoothing:antialiased;}
img[usemap]{border:none; height:auto; max-width:100%;}
img{width:100%; vertical-align:top;}
button{font-family:"Pretendard", sans-serif; -webkit-tap-highlight-color:transparent;}
#wrapper{position:relative; width:100%; margin:0 auto; padding:0 0 40px !important; overflow:hidden; background:#fff; text-align:center; word-break: keep-all;}
#wrapper > section > .inner{position:relative; width:100%; margin:0 auto; padding:0 20px; text-align:center; box-sizing:border-box;}
body.no-scroll{overflow:hidden;}

[data-aos=fade-up] {transform: translate3d(0,30px,0);}

/* =========================================================
   visual
   ========================================================= */
.heroStage{position:relative; display:grid; align-items:start;}
.heroStage > .visual,
.heroStage > .hero{grid-area:1 / 1;}
.visual{position:relative; background:#00000b; overflow:hidden; transition:opacity 1s ease; aspect-ratio: 750 / 1000;}
.visual.hide{opacity:0;}
.visual .thumb{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.visual .bg{position:absolute; left:0; top:0; width:100%; height:100%; content:''; background: radial-gradient(61.5% 61.5% at 50% 56.4%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%); background-blend-mode: multiply;}
.heroStage > .visual > .inner{position:absolute !important; left:0; top:0; width:100%; height:100%; padding:0;}
.visual .hand{position:absolute; right:-55%; bottom:-34%; width:95%;}
.visual .tit{position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; z-index:2; padding:0 24px; margin:-7dvw 0 0;}
.visual .tit .copy{position:relative; text-align:center; display:flex; flex-direction:column; gap:5vw; filter:blur(10px); align-items:center; transition:all .5s .1s ease;}
.visual .tit.aos-animate .copy{opacity:1; filter:blur(0);}
.visual .tit .line1{margin:0; font-size:29px; font-weight:800; letter-spacing:-0.02em; line-height:1.35; color:#fff;}
.visual .tit .line2{margin:0 0 -5vw; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:2px; font-size:31px; font-weight:900; letter-spacing:-0.02em; line-height:1.35; color:#fff;}
.visual .tit .quote,
.visual .tit .study-word,
.visual .tit .word-loading{
	background:linear-gradient(90deg,#8C5BFF 0%,#367CFF 100%);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
#typeTail{font-size:31px; font-weight:800; letter-spacing:-0.02em; line-height:1.35; color:#fff;}
.visual .tit .slot{position:relative; display:inline-flex; align-items:center; height:16px; min-width:60px; opacity:0; transform:scale(.85); transition:opacity .3s ease, transform .3s ease;}
.visual .tit .slot.show{opacity:1; transform:scale(1);}
.visual .tit .dots{position:absolute; left:14px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:8px; transition:opacity .35s ease, transform .35s ease; margin:-6px 0 0 0;}
.visual .tit .dots i{display:block; width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); animation:dot-jump 1.05s ease-in-out infinite;}
.visual .tit .dots i:nth-child(1){animation-delay:0s;}
.visual .tit .dots i:nth-child(2){animation-delay:.15s;}
.visual .tit .dots i:nth-child(3){animation-delay:.3s;}
@keyframes dot-jump{
	0%, 60%, 100%{ transform:translateY(0); background:rgba(255,255,255,.5); }
	30%{ transform:translateY(-5px); background:#367CFF; }
}
.visual .tit .word-loading{position:absolute; left:0; top:50%; transform:translateY(-50%) translateY(4px); opacity:0; white-space:nowrap; transition:opacity .35s ease, transform .35s ease; margin:-3px 0 0 8px;}
.visual .tit .slot.reveal .dots{opacity:0; transform:translateY(-50%) translateY(-4px); pointer-events:none;}
.visual .tit .slot.reveal .word-loading{opacity:1; transform:translateY(-50%) translateY(0);}


/* =========================================================
   hero
   ========================================================= */
.hero{background:#fff url(img/hero_bg.png) no-repeat center bottom;background-size:cover;padding:15% 0 0;display:none;opacity:0;transition:opacity 1s ease; aspect-ratio:750/1000; overflow:hidden;}
.hero.show{display:block; opacity:1;}
.hero > .inner{display:flex; flex-direction:column; align-items:center; padding:0 10vw;}
/* .hero .tit{width:82%;} */
.hero .btn{width:35%; margin:30px 0 16px; cursor:pointer;}
.hero .tablet-wrap{position:relative; width:100%; margin:14% 0 0; overflow: hidden;}
.hero .tablet-wrap.play{animation:hero-tablet-spring .9s cubic-bezier(.22,.61,.36,1) forwards;}
.hero .tablet{display:block;}
@keyframes hero-tablet-spring{
	0%{ transform:translateY(24px); opacity:0; }
	55%{ transform:translateY(-12px); opacity:1; }
	78%{ transform:translateY(4px); opacity:1; }
	100%{ transform:translateY(0); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
	.hero .tablet-wrap{opacity:1; transform:none;}
}
.hero .video{position:Absolute;left: 50%;top: 4%;width: 94%;height: 92%;border-radius: 10px;display:flex;justify-content: center;align-items: center;overflow:hidden;transform: translateX(-50%);}
.hero .video video{position:Absolute;left: 50%;top: 0;width:132%;transform: translateX(-50%);width: 150%;height: 100%;}

.hero .video .video-progress{position:absolute;left:8px;right:8px;bottom:48px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;z-index:2;touch-action:none;}
.hero .video .video-progress-fill{width:0%;height:100%;border-radius:2px;background:#fff;pointer-events:none;}
.hero .video .video-controls{position:absolute;left:8px;right:8px;bottom:15px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2;}
.hero .video .video-controls .time{color:#fff;font-family:"Pretendard";font-size:11px;font-weight:500;line-height:1;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.6);}
.hero .video .v-btns{display:flex;gap:8px;}
.hero .video .v-btn{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.hero .video .v-btn svg{width:15px;height:15px;}
.hero .video .v-btn svg path{fill:#fff;}

.hero .video .v-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;z-index:2;transition:opacity .3s ease;}
.hero .video .v-play.hide{opacity:0;}
.hero .video .v-play svg{width:28px;height:28px;}

.hero .video .v-play .ico-play{display:none;}
.hero .video.is-paused .v-play .ico-pause{display:none;}
.hero .video.is-paused .v-play .ico-play{display:block;}

.hero .video .v-mute .ico-unmute{display:none;}
.hero .video:not(.is-muted) .v-mute .ico-mute{display:none;}
.hero .video:not(.is-muted) .v-mute .ico-unmute{display:block;}

.hero .video .v-fullscreen .ico-collapse{display:none;}
.hero .video.is-fullscreen .v-fullscreen .ico-expand{display:none;}
.hero .video.is-fullscreen .v-fullscreen .ico-collapse{display:block;}

/* =========================================================
   learning_intro  (Figma con1_tab: ÇнÀ ½ÃÀÛ / ÇнÀ Áß / ÇнÀ ÈÄ)
   ========================================================= */
.learning_intro{position:relative; background:#fff; padding:15% 0 0;}
.learning_intro .tit{width:80%; margin:0 auto;}
.learning_intro .tab{display:flex; justify-content:center; align-items:center; gap:8px; margin:28px auto 0; height:38px;}
.learning_intro .tab .tab-btn{flex:1 1 0; max-width:110px; height:100%; border-radius:999px; border:1px solid rgba(70,4,83,.3); background:transparent; color:#460453; font-family:"Pretendard"; font-size:14px; font-weight:500; letter-spacing:-0.03em; line-height:1; cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;}
.learning_intro .tab .tab-btn.is-active{background:#120453; border-color:#120453; color:#fff; font-weight:800;}
.learning_intro .tab .tab-btn:nth-child(2).is-active{background:#370C53; border-color:#370C53;}
.learning_intro .tab .tab-btn:nth-child(3).is-active{background:#390945; border-color:#390945;}
.learning_intro .learning-copy{position:relative; min-height:40px; margin:16px auto 0;}
.learning_intro .learning-copy .copy-item{position:absolute; left:0; top:0; width:100%; margin:0; color:#555; font-size:13px; line-height:1.5; opacity:0; transition:opacity .3s ease;}
.learning_intro .learning-copy .copy-item.is-active{opacity:1; position:relative;}
.learning_intro .learningSwiper{width:100%; margin:25px auto 0;}
.learning_intro .learningSwiper .swiper-slide img{display:block;}
.learning_intro .learningSwiper .slider-img{width:110%; margin:-10% 0 0 -5%;}
.learning_intro .learningSwiper .tit{position:relative; width:100%; z-index:2;}

/* =========================================================
   appIntro
   ========================================================= */
.appIntro{position:relative; background:#EEEEF3; padding:15% 0 0;}
.appIntro .tit{width:80%; margin:0 auto;}
.appIntro .appIntroSwiper{width:100%; margin:24px auto 0; overflow:hidden;}
.appIntro .appIntroSwiper .swiper-slide{width:100%; flex-shrink:0; display:flex; justify-content:center;}
.appIntro .appIntroSwiper .swiper-slide img{display:block; width:90%;}
.appIntro .appIntroSwiper .swiper-slide-active img{animation:appIntroShake .3s ease-in-out .3s;}
.appIntro .swiper-pagination{position:static; display:flex; justify-content:center; align-items:center; gap:8px; width:max-content; margin:70px auto 0; padding:10px 16px; background:#DCDCE5; border-radius:999px;}
.appIntro .swiper-pagination-bullet{width:6px; height:6px; border-radius:999px; background:#fff; opacity:1; margin:0 !important; transition:width .3s ease, background .3s ease;}
.appIntro .swiper-pagination-bullet-active{width:28px;}
.appIntro .appIntroSwiper .swiper-slide .txt{position:absolute; left:50%; bottom:-8vw; transform:translateX(-50%); text-align:center; width:100%; font-size:5vw; line-height:1.3;}
.appIntro .appIntroSwiper .swiper-slide .txt .tit{}
.appIntro .appIntroSwiper .swiper-slide .txt .dec{font-weight:800;}

@keyframes appIntroShake{
	0%, 100%{ transform: translateX(0); }
	25%{ transform: translateX(-10px); }
	75%{ transform: translateX(10px); }
}


/* =========================================================
   smartNote
   ========================================================= */
.smartNote{position:relative; background:#EEEEF3; padding:15% 0;}
.smartNote .tit{position:relative; z-index:2; width:100%; margin:0 auto;}
.smartNote .smartNote_tablet{position:relative; margin-top:24px;}
.smartNote .smartNote_tablet .tablet{position:relative; z-index:2;}
.smartNote .smartNote_tablet:after{position:absolute; left:50%; top:-14%; transform:translateX(-50%); width:160%; aspect-ratio: 1709 / 790; content:''; background:url(img/smartNote_pen_bg.png) no-repeat center/contain; z-index:1;}
.smartNote .smartNote_tablet .mov{position:absolute; left: 50.5%; top: 7.5vw; width: 93%; transform:translateX(-50%); z-index:2;}
.smartNote .dec{width:90%; margin:5% 0 0;}
.smartNote .book{position:absolute; right:-5%; bottom:-8%; width:33%; z-index:2;}

/* =========================================================
   lectureFeature  (Figma con3_tab: ¼±»ý´Ô 6ÀÎ °¡·Î ½ºÅ©·Ñ ÅÇ)
   ========================================================= */
.lectureFeature{position:relative; background:#fff; padding:15% 0;}
.lectureFeature .tit{width:85%; margin:0 auto;}
.lectureFeature .teachers{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;margin:60px 0 0;transform: scale(.8);transform-origin: center top;/* width: 100%; */}
.lectureFeature .teacher{position:relative;display:block;width:260px;height:300px;border:1px solid red;overflow:hidden;margin: 0 -43px;padding:0;border:0;background:none;cursor:pointer;transition:transform .25s ease, z-index 0s;}
.lectureFeature .teacher img{position:absolute; left:50%; top:0; transform:translateX(-50%); display:block; width:90%; object-fit:cover; object-position:top center; pointer-events:none;}
.lectureFeature .teacher:nth-of-type(1){z-index:6;}
.lectureFeature .teacher:nth-of-type(2){z-index:5;}
.lectureFeature .teacher:nth-of-type(3){z-index:4;/* margin: 0px -43px 0; */}
.lectureFeature .teacher:nth-of-type(3) img{width:108%;margin: -6px 0 0;}
.lectureFeature .teacher:nth-of-type(4){z-index:3;}
.lectureFeature .teacher:nth-of-type(4) img{width:100%;margin: -3px 0 0;}
.lectureFeature .teacher:nth-of-type(5){z-index:2;}
.lectureFeature .teacher:nth-of-type(5) img{width:90%; margin:0 0 0;}
.lectureFeature .teacher:nth-of-type(6){z-index:1;}
.lectureFeature .teacher:nth-of-type(6) img{width:80%; margin:0 0 0;}
.lectureFeature .teacher:hover,
.lectureFeature .teacher.is-active{z-index:7; transform:translateY(-10px);}
.lectureFeature .tabs{position:relative;z-index:2;display:flex;justify-content:center;gap: 5px;margin: -57% 0 0;transform: scale(.8);}
.lectureFeature .tabs .tab{position:relative;min-width: 19%;height: 80px;padding:0;border:.5px solid #fff;border-radius: 20px;background:rgb(203 203 203 / 55%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;cursor:pointer;transition:background .25s ease, color .25s ease;}
.lectureFeature .tabs .tab .subject{font-size: 14px;color:#111;font-weight:500;}
.lectureFeature .tabs .tab .name{font-size: 20px;color:#111;font-weight:700;}
.lectureFeature .tabs .tab.is-active{background:#fff; border:.5px solid #000;}
.lectureFeature .tabs .tab.is-active::after{content:''; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); width:28px; height:28px; border-radius:50%; background:url(img/lectureFeature_arrow_down.png) center/cover no-repeat;}
.lectureFeature .tablet{position:relative; width:100%; margin: 1% 0 0; z-index:2;}
.lectureFeature .tablet .swiper-slide{padding: 0 10px;}
.lectureFeature .tablet .swiper-slide > img.tablet{display:block; width:100%; pointer-events:none;}
.lectureFeature .video{position:absolute;right: 8%;top: 13%;width: 43%;height: 40%;cursor:none;border-radius: 5px;/* overflow: hidden; */}
.lectureFeature .video .gif-mask{position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;}
.lectureFeature .video .gif{position:absolute; right:0; top:0; width:100%; height:100%; object-fit:cover; transform-origin:top right; transition:transform .05s linear; z-index:2;}
.lectureFeature .video.dragging .gif{transition:none;}
.lectureFeature .video .hand{position:absolute;left:0;top:100%;width: 20%;height:auto;transform: translate(-46%,-57%);pointer-events:none;opacity:1;z-index:5;}
.lectureFeature .inner{ padding:0 !important;}






/* =========================================================
   aiCoach  (Figma con4_tab: ¸ÞŸÄÚĪ 3ÅÇ)
   ========================================================= */
.aiCoach{position:relative; background:#eeeef3; padding:56px 0 40px;}
.aiCoach .tit{width:90%; margin:0 auto;}
.aiCoach .con{position:relative; margin:24px auto 0;}
.aiCoach .tab{display:flex; justify-content:center; gap:8px;}
.aiCoach .tab-btn{position:relative; flex:1 1 0; height:145px; padding:0; margin:0; border:0; border-radius:16px; cursor:pointer; background: center/100% no-repeat; overflow:hidden;}
.aiCoach .tab-btn::after{content:''; position:absolute; inset:0; background:center/100% no-repeat; opacity:0; transition:opacity .3s ease;}
.aiCoach .tab-btn.is-active::after{opacity:1;}
.aiCoach .tab-btn:nth-child(1){background-image:url(img/aiCoach_tab_1.png);}
.aiCoach .tab-btn:nth-child(1)::after{background-image:url(img/aiCoach_tab_1_on.png);}
.aiCoach .tab-btn:nth-child(2){background-image:url(img/aiCoach_tab_2.png);}
.aiCoach .tab-btn:nth-child(2)::after{background-image:url(img/aiCoach_tab_2_on.png);}
.aiCoach .tab-btn:nth-child(3){background-image:url(img/aiCoach_tab_3.png);}
.aiCoach .tab-btn:nth-child(3)::after{background-image:url(img/aiCoach_tab_3_on.png);}
.aiCoach .ai-copy{position:relative; min-height:44px; margin:16px 0 0;}
.aiCoach .ai-copy .copy-item{position:absolute; left:0; top:0; display:block; width:100%; margin:0; color:#333; font-size:13px; font-weight:500; line-height:1.5; opacity:0; transition:opacity .3s ease;}
.aiCoach .ai-copy .copy-item.is-active{opacity:1; position:relative;}
.aiCoach .aiCoachSwiper{position:relative; width:100%; margin:12px 0 0; overflow:hidden;}
.aiCoach .aiCoachSwiper .swiper-slide img{display:block; width:100%; height:auto; object-fit:cover;}
.aiCoach .aiCoach-slide3{position:relative;}
.aiCoach .aiCoach-slide3 img{position:absolute; left:0; top:0; opacity:0; transition:opacity .6s ease;}
.aiCoach .aiCoach-slide3 .c1{opacity:1;}
.aiCoach .aiCoach-slide3.show-2 .c1{opacity:0;}
.aiCoach .aiCoach-slide3.show-2 .c2{opacity:1;}

/* =========================================================
   studyAchievement
   ========================================================= */
.studyAchievement{position:relative; background:#eeeef3 url(img/studyAchievement_bg.png) no-repeat center top; background-size:cover; padding:12dvw 0 5dvw}
.studyAchievement .tit{width:80%; margin:0 auto;}
.studyAchievement .con{position:relative; width:100%; aspect-ratio:1236/720; margin:24px auto 0;}
.studyAchievement .circle{position:absolute; left:0; top:13vw; width:100%; animation:studyAchievementSpin 3s linear infinite;}
.studyAchievement .thumb{position:relative; z-index:2;}
@keyframes studyAchievementSpin{
	from{transform:rotate(0deg);} 
	to{transform:rotate(360deg);}
}
.studyAchievement .combo .shot{display:none;}
.studyAchievement .combo{position:absolute;left: 48%;top:4%;height:22%;z-index:3;}
.studyAchievement .combo .fire-badge{position:absolute;left: -16vw;top: 1vw;width: 21vw; border-radius:50%;background:#fff;border:2px solid #E92828;display:flex; justify-content:center;aspect-ratio: 1/1;}
.studyAchievement .combo .fire-badge .fire{width: 50px;margin-top:10px;pointer-events:none;}
.studyAchievement .combo .fire-badge .num{position:absolute;left: 14vw;top:0;margin:0;display:flex;align-items:center;font-family:"Pretendard";font-size: 4vw;font-weight:800;color:#fff;line-height: 1;background:#E92828;border-radius:36px;padding: 1.5vw 1vw;white-space:nowrap;}
.studyAchievement .combo .fire-badge .num .plus{margin: 0vw 0 0 1vw;}
.studyAchievement .combo .fire-badge .num .num-count-wrap{position:relative;display:inline-block;overflow:hidden;width: 7vw;height: 5vw; line-height: 1.2;}
.studyAchievement .combo .fire-badge .num .num-count{position:absolute; left:0; top:0; display:inline-block; width:100%; text-align:center;}
.studyAchievement .combo .fire-badge .num .num-count.enter{animation:studyAchievementComboEnter .35s ease forwards;}
.studyAchievement .combo .fire-badge .num .num-count.leave{animation:studyAchievementComboLeave .35s ease forwards;}
@keyframes studyAchievementComboEnter{
	0%{transform:translateY(10px); opacity:0;}
	100%{transform:translateY(0); opacity:1;}
}
@keyframes studyAchievementComboLeave{
	0%{transform:translateY(0); opacity:1;}
	100%{transform:translateY(-10px); opacity:0;}
}
.studyAchievement .combo .tag{position:absolute;left: -14vw;top: 18vw;margin:0;padding:5px 9px 3px;border-radius:999px;background:#E92828;color:#fff;font-family:"Pretendard";font-size: 3.5vw;font-weight:700;line-height: 1;white-space:nowrap;}
.studyAchievement .circle-rotation{position:absolute; z-index:1; left:52%; top:16%; width:100%; height:98%; transform:translateX(-50%); pointer-events:none;}
.studyAchievement .circle-rotation img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; opacity:0; animation:studyAchievementOrbit 1s linear infinite;}
.studyAchievement .circle-rotation img:nth-child(1){animation-delay:0s;}
.studyAchievement .circle-rotation img:nth-child(2){animation-delay:-0.75s;}
.studyAchievement .circle-rotation img:nth-child(3){animation-delay:-0.5s;}
.studyAchievement .circle-rotation img:nth-child(4){animation-delay:-0.25s;}
@keyframes studyAchievementOrbit{
	0%{opacity:0;}
	4%{opacity:1;}
	21%{opacity:1;}
	25%{opacity:0;}
	100%{opacity:0;}
}
@media (prefers-reduced-motion:reduce){.studyAchievement .circle-rotation img{animation:none; opacity:0;}.studyAchievement .circle-rotation img:first-child{opacity:1;}}

/* =========================================================
   lessonLineup
   ========================================================= */
.lessonLineup{position:relative; padding:56px 0; background:#EEEEF3;}
.lessonLineup .tit{width:90%; margin:0 auto;}
.lessonLineup .tab{position:relative; display:flex; width:100%; padding:4px; border-radius:100px; background:#fff; margin:0 0 5px;}
.lessonLineup .tab .tab-indicator{position:absolute; left:0; top:0; width:calc((100% - 8px) / 3); height:100%; border-radius:100px; background:#12192c; transition:transform .4s cubic-bezier(.65,0,.35,1); z-index:0;}
.lessonLineup .tab .tab-btn{position:relative; z-index:1; flex:1 1 0; min-width:0; padding:12px 6px; margin:0; border:0; background:transparent; color:#111; font-family:"Pretendard"; font-size:16px; font-weight:600; letter-spacing:-0.02em; cursor:pointer; transition:color .25s ease;}
.lessonLineup .tab .tab-btn.is-active{color:#fff;}
.lessonLineup .tab-note{margin:25px 0 0; text-align:right; font-family:"Pretendard"; font-size:12px; font-weight:400; letter-spacing:-0.02em; color:#777;}
.lessonLineup .con{position:relative; margin:16px 0 0; display:flex; flex-direction:column; align-items:center;}
.lessonLineup .con .lessonLineupSwiper{width:100%;}
.lessonLineup .con .lessonLineupSwiper .swiper-slide .sub-tab{position:relative; display:flex; width:100%; padding:8px 6px; border-radius:16px; background:#e5e5ea;}
.lessonLineup .con .lessonLineupSwiper .swiper-slide .sub-tab .sub-tab-indicator{position:absolute; left:4px; top:4px; width:calc((100% - 8px) / 2); height:calc(100% - 8px); border-radius:100px; background:#12192c; transition:transform .4s cubic-bezier(.65,0,.35,1); z-index:0;}
.lessonLineup .con .lessonLineupSwiper .swiper-slide .sub-tab .sub-tab-btn{position:relative; z-index:1; flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 6px; margin:0; border:0; background:transparent; color:#555; font-family:"Pretendard"; font-size:15px; font-weight:700; letter-spacing:-0.03em; cursor:pointer; transition:color .25s ease;}
.lessonLineup .con .lessonLineupSwiper .swiper-slide .sub-tab .sub-tab-btn .badge{display:inline-flex; align-items:center; justify-content:center; padding:4px 8px; border-radius:999px; background:#b2b2be; color:#fff; font-size:11px; font-weight:600; letter-spacing:-0.02em; white-space:nowrap; transition:background .25s ease;}
.lessonLineup .con .lessonLineupSwiper .swiper-slide .sub-tab .sub-tab-btn.is-active{color:#fff;}
.lessonLineup .con .lessonLineupSwiper .swiper-slide .sub-tab .sub-tab-btn.is-active .badge{background:#5e6884;}
.lessonLineup .con .lessonLineupSwiper .swiper-slide .sub-content{position:relative; width:100%; margin:12px 0 0;}
.lessonLineup .con .lessonLineupSwiper .swiper-slide .sub-content .sub-img{display:none; width:100%; height:auto;}
.lessonLineup .con .lessonLineupSwiper .swiper-slide .sub-content .sub-img.is-active{display:block;}
.lessonLineup .con .lessonLineupSwiper{width:100%; border-radius:20px; overflow:hidden;}
.lessonLineup .con .lessonLineupSwiper img{display:block; width:100%; height:auto;}
.lessonLineup .con .btn{background:url(img/lessonLineup_btn.png) no-repeat center/contain; width:100%; aspect-ratio:599/90; text-indent:-9999em; border:0; cursor:pointer; margin:30px 0 0;}
.lessonLineup-popup{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;}
.lessonLineup-popup.is-active{display:flex;}
.lessonLineup-popup .lessonLineup-popup-dim{position:absolute; inset:0; background:rgba(0,0,0,.6); cursor:pointer;}
.lessonLineup-popup.is-active .lessonLineup-popup-dim{animation:lessonLineupFadeIn .25s ease both;}
.lessonLineup-popup .lessonLineup-popup-body{position:relative; z-index:1; width:92vw; max-width:420px; max-height:86vh; overflow:hidden; border-radius:20px; display:flex; flex-direction:column; background:#fff;}
.lessonLineup-popup.is-active .lessonLineup-popup-body{animation:lessonLineupFadeInUp .35s ease both;}
@keyframes lessonLineupFadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes lessonLineupFadeInUp{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);}}
.lessonLineup-popup .lessonLineup-popup-head{position:relative; display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; background:#f9f9fa;}
.lessonLineup-popup .lessonLineup-popup-head .tit{margin:0; color:#111; font-family:"Pretendard"; font-size:18px; font-weight:700; letter-spacing:-0.02em; text-align:left;}
.lessonLineup-popup .lessonLineup-popup-head .tit strong{background:linear-gradient(to left, #a20059 34.615%, #3601b2); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700;}
.lessonLineup-popup .lessonLineup-popup-scroll{flex:1 1 auto; min-height:0; overflow-y:auto;}
.lessonLineup-popup .lessonLineup-popup-scroll img{display:block; width:100%; height:auto;}
.lessonLineup-popup .lessonLineup-popup-close{position:relative; flex:0 0 auto; width:16px; height:16px; padding:0; margin:0; border:0; background:transparent; cursor:pointer;}
.lessonLineup-popup .lessonLineup-popup-close:before,.lessonLineup-popup .lessonLineup-popup-close:after{content:""; position:absolute; left:6.5px; top:-1px; width:3px; height:18px; border-radius:2px; background:#111; transform:rotate(45deg);}
.lessonLineup-popup .lessonLineup-popup-close:after{transform:rotate(-45deg);}
.lessonLineup-popup .pop-con{padding:20px 16px 28px;}
.lessonLineup-popup .step-tab{display:flex; gap:6px; margin:0 0 16px;}
.lessonLineup-popup .step-tab .step-tab-btn{flex:1 1 0; min-width:0; padding:8px 4px; border:0; border-radius:12px; background:#eee; color:#555; font-family:"Pretendard"; font-size:16px; font-weight:500; letter-spacing:-0.02em; cursor:pointer; transition:background .25s ease, color .25s ease;}
.lessonLineup-popup .step-tab .step-tab-btn.is-active{background:#111; color:#fff; font-weight:700;}
.lessonLineup-popup .lessonLineupPopSwiper{width:100%; overflow:hidden;}
.lessonLineup-popup .lessonLineupPopSwiper .thumb{}
.lessonLineup-popup .lessonLineupPopSwiper .thumb img{display:block; width:100%; height:auto;}
.lessonLineup-popup .lessonLineupPopSwiper .txt{margin:16px 0 0; color:#111; font-size:17px; line-height:1.5; letter-spacing:-0.02em; text-align:left;}
.lessonLineup-popup .lessonLineupPopSwiper .txt.sub{margin-top:10px;}
.lessonLineup-popup .lessonLineupPopSwiper .txt.point{margin-top:10px;}
.lessonLineup-popup .lessonLineupPopSwiper .txt.point li{background:linear-gradient(to left, #a20059 34.615%, #3601b2); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:13px; word-break: keep-all;}

/* =========================================================
   brandMessage
   ========================================================= */
.brandMessage{position:relative; padding:56px 0 0; background:#f6f2ff url(img/brandMessage_bg.png) no-repeat center top; background-size:100% auto;}
.brandMessage .inner{display:flex; flex-direction:column; align-items:center; overflow:hidden; padding:0 !important;}
.brandMessage .tit_1{width:75%;}
.brandMessage .tit_2{width:90%; margin:20px 0 0;}
.brandMessage .btn{position:relative; z-index:2; width:30%; cursor:pointer; margin:4% 0 0; z-index:2;}
.brandMessage .tablet{width:100%;}

/* =========================================================
   productList  (Figma con6_tab: Çгâ ÅÇ Áß1-2 / Áß2-2 / Áß3-2)
   ========================================================= */
.productList{position:relative; background:#fff; padding:56px 0 0;}
.productList .tit{width:75%; margin:0 auto;}

.productList .filter-container{width:100%; margin:32px auto 0; border:1px solid #d9d9d9; border-radius:16px; background-color:#fff;}
.productList .filter-row{display:flex; align-items:center; padding:10px 16px; gap:14px;}
.productList .filter-row:not(:last-child){border-bottom:1px solid #eee;}
.productList .filter-label{font-size:13px; font-weight:700; color:#111; min-width:30px; white-space:nowrap;}
.productList .filter-options{display:flex; flex-wrap:wrap; gap:6px;}
.productList .filter-btn{padding:2vw 4vw; border-radius:9999px; font-size:12px; font-weight:600; border:none; background-color:#f2f2f2; color:#666; cursor:pointer;}
.productList .filter-btn.active{background-color:#111; color:#fff;}


.productList .grade-tab{display:flex; gap:8px; margin:24px auto 0;}
.productList .grade-tab-btn{flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:56px; padding:0; border:1px solid #e5e7eb; border-radius:14px; background:#fff; cursor:pointer;}
.productList .grade-tab-btn em{font-style:normal; font-size:15px; font-weight:800; color:#111;}
.productList .grade-tab-btn span{font-size:10px; color:#999; font-weight:600;}
.productList .grade-tab-btn.is-active{background:#111; border-color:#111;}
.productList .grade-tab-btn.is-active em{color:#fff;}
.productList .grade-tab-btn.is-active span{color:rgba(255,255,255,.6);}

.productList .count{display:flex; justify-content:space-between; width:100%; margin:28px auto 0; text-align:left; gap:12px;}
.productList .count strong{flex:0 0 auto; color:#111; font-size:12px; font-weight:600; line-height:1.3;}
.productList .count p{margin:0; background:linear-gradient(90deg,#a90056 0%,#2600bd 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:12px; line-height:1.3; text-align:right;}
.productList .count p span{color:#6200a0;}

.productList .list{width:100%; margin:16px auto 0; display:flex; flex-direction:column; gap:16px;}
.productList .item{box-sizing:border-box; display:flex; flex-direction:column; border:1px solid #d9d9d9; border-radius:20px; overflow:hidden; background:#fff;}
.productList .item .thumb_c{position:relative; width:100%; aspect-ratio:2/1; overflow:hidden; background:#f5f5f5;}
.productList .item .thumb_c .blet{position:absolute; left:4.5%; top:9%; width:22%; height:44%; overflow:hidden; border-radius:16px; border:1px solid #E4E4E4; background:#fff;}
.productList .item .thumb_c .group{position:relative; width:100%; height:100%;}
.productList .item .thumb_c .group .teacher{position:absolute; right:-11vw; top:6%; width:65vw; z-index:1;}
.productList .item .thumb_c .group .book{position:absolute; left:34%; bottom:0; width:23%; border:1px solid #D8D8D8; z-index:2; object-fit:cover;}
.productList .item .body{position:relative; display:flex; flex-direction:column; flex:1; min-width:0; padding:20px; text-align:left; background:#fff;}
.productList .item .info{order:1;}
.productList .item .info .subject{display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; padding:4px 8px; border-radius:6px; background:#35afe6; color:#fff; font-size:13px; font-weight:800; line-height:1.2;}
.productList .item .info .subject.math{background:#3BC27C;}
.productList .item .info .subject.sci{background:#3BB1E6;}
.productList .item .info .subject.soc{background:#C57CEA;}
.productList .item .info .subject.his{background:#D79665;}
.productList .item .info .name{display:block; margin:8px 0 0; color:#111; font-size:22px; font-weight:800; line-height:1.25; letter-spacing:-0.7px;}
.productList .item .info .meta{display:inline-block; margin:0; color:#111; font-size:13px; font-weight:400; line-height:1.4;}
.productList .item .info .meta:first-of-type{margin-top:8px;}
.productList .item .info .meta + .meta:before{content:"¡¤"; margin:0 6px; color:#999;}
.productList .item .info .meta b{color:#111; font-weight:800;}
.productList .item .price{order:2; text-align:right;}
.productList .item .price .flag{position:relative; display:flex; align-items:center; justify-content:center; width:fit-content; margin:0 0 8px auto; box-sizing:border-box; height:24px; padding:0 12px; border-radius:999px; background:#ee2a28; color:#fff; font-size:12px; font-weight:800; line-height:1; white-space:nowrap;}
.productList .item .price .flag:after{content:""; position:absolute; left:38%; bottom:-4px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #ee2a28;}
.productList .item .price .original{display:inline-flex; align-items:baseline; vertical-align:middle; color:#aaa; font-size:13px; line-height:1.3;}
.productList .item .price .original del{font-size:14px; font-weight:500; text-decoration:line-through; font-family:'Roboto'; margin:0 0 0 5px;}
.productList .item .price .sale{display:inline-flex; align-items:center; gap:8px; margin-left:10px; vertical-align:middle; font-family:'Roboto';}
.productList .item .price .sale .percent{box-sizing:border-box; padding:3px 6px; border-radius:6px; background:#ffedef; color:#ff3945; font-size:13px; font-weight:800; font-style:normal; line-height:1.3;}
.productList .item .price .sale .won{color:#111; font-size:24px; font-weight:900; font-style:normal; line-height:1.2; letter-spacing:-0.5px;}
.productList .item .actions{order:3; display:flex; align-items:center; gap:6px; margin-top:16px;}
.productList .item .actions button{box-sizing:border-box; flex:1 1 0; height:40px; padding:0; border-radius:999px; border:0; font-family:"Pretendard"; font-size:13px; font-weight:700; line-height:40px; cursor:pointer;}
.productList .item .actions .info-btn{background:#ebedff; color:#6c6cf4;}
.productList .item .actions .cart-btn{background:#fff; color:#111; border:1px solid #111;}
.productList .item .actions .buy-btn{background:#111; color:#fff;}

.productList .notice{box-sizing:border-box; width:100%; margin:24px auto 0; padding:20px; border-radius:16px; background:#f5f5f5; color:#555; text-align:left;}
.productList .notice .notice-title{display:block; margin:0 0 14px; color:#111; font-size:14px; font-weight:800; line-height:1.3;}
.productList .notice ul{margin:0; padding:0; list-style:none;}
.productList .notice li{position:relative; margin:0; padding-left:12px; font-size:12px; font-weight:400; line-height:1.5;}
.productList .notice li:not(:first-child){margin:5px 0 0;}
.productList .notice li:before{content:"¡¤"; position:absolute; left:0; top:0; color:#333; font-weight:800;}

/* productList popup (»óÇ° Á¤º¸) */
.productList-popup{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; font-family:"Pretendard";}
.productList-popup.is-active{display:flex;}
.productList-popup .productList-popup-dim{position:absolute; inset:0; background:rgba(0,0,0,.62); cursor:pointer;}
.productList-popup.is-active .productList-popup-dim{animation:productListFadeIn .25s ease both;}
.productList-popup .productList-popup-body{position:relative; z-index:1; display:flex; flex-direction:column; box-sizing:border-box; width:100%; max-width:420px; max-height:88vh; overflow:hidden; border:1px solid #eef2f5; border-radius:20px; background:#fff; box-shadow:0 20px 24px -4px rgba(10,13,18,.15);}
.productList-popup.is-active .productList-popup-body{animation:productListFadeInUp .35s ease both;}
@keyframes productListFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes productListFadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.productList-popup-header{position:relative; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between; padding:13px 16px; background:#f9f9fa;}
.productList-popup-header h2{margin:0; color:#111; font-size:16px; font-weight:800; text-align:left;}
.productList-popup-close{position:relative; width:16px; height:16px; padding:0; border:0; background:transparent; cursor:pointer;}
.productList-popup-close:before,.productList-popup-close:after{content:""; position:absolute; left:7px; top:-1px; width:2px; height:18px; border-radius:2px; background:#111; transform:rotate(45deg);}
.productList-popup-close:after{transform:rotate(-45deg);}
.productList-popup-main{display:flex; flex:1 1 auto; min-height:0; flex-direction:column; padding:20px 15px 0;}
.productList-popup-product{flex:0 0 auto; text-align:left; display:flex; align-items:flex-start; gap:10px;}
.productList-popup-product .subject{display:inline-flex; flex:0 0 auto; align-items:center; box-sizing:border-box; margin:3px 0 0; padding:4px 6px; border-radius:6px; background:#35afe6; color:#fff; font-size:12px; font-weight:800; white-space:nowrap;}
.productList-popup-product .subject.math{background:#3BC27C;}
.productList-popup-product .subject.sci{background:#3BB1E6;}
.productList-popup-product .subject.soc{background:#C57CEA;}
.productList-popup-product .subject.his{background:#D79665;}
.productList-popup-product strong{display:block; color:#111; font-size:22px; font-weight:900; line-height:1.2; letter-spacing:-0.6px;}
.productList-popup-tabs{display:flex; flex:0 0 auto; margin-top:20px; border-bottom:1px solid #a20059; border-radius:10px 10px 0 0; overflow:hidden; background:#f9f9fa;}
.productList-popup-tab{flex:1; padding:10px 8px; border:0; background:#f9f9fa; color:#777; font-family:"Pretendard"; font-size:13px; font-weight:500; cursor:pointer;}
.productList-popup-tab.is-active{background:#3601B2; color:#fff; font-weight:800;}
.productList-popup-tab:nth-child(2).is-active{background: #A20059;}
.productList-popup-scroll{flex:1 1 auto; min-height:60dvh; overflow-y:auto; overflow-x:hidden; padding:16px 15px 10dvh;}
.productList-popup-panel{display:none;}
.productList-popup-panel.is-active{display:block;}
.productList-popup-visual{position:relative; display:flex; width:100%; gap:6px;}
.productList-popup-visual .visual-card{position:relative; box-sizing:border-box; flex:1 1 0; aspect-ratio:186/223; overflow:hidden; border-radius:16px; background:#f0f4ff; text-align:center;}
.productList-popup-visual:before, .productList-popup-visual:after{content:""; position:absolute; z-index:5; top:44%; width:24px; height:24px; background:url(img/productList_pop_1_con_plus.png) no-repeat center/24px 24px;}
.productList-popup-visual:before{left:calc((100% - 12px)/3 - 9px);}
.productList-popup-visual:after{left:calc(((100% - 12px)/3)*2 - 3px);}
.productList-popup-visual .visual-title{position:relative; z-index:3; padding-top:10px; color:#3601b2; line-height:1.2;}
.productList-popup-visual .visual-title span{display:block; font-size:9px; font-weight:500; letter-spacing:-.3px;}
.productList-popup-visual .visual-title strong{display:block; margin-top:3px; color:#111; font-size:14px; font-weight:700; letter-spacing:-.5px; white-space:nowrap;}
.productList-popup-visual .visual-card img{position:absolute; z-index:2; display:block; max-width:none;}
.productList-popup-visual .visual-book .book{left:50%; top:auto; bottom:0; width:auto; height:56%; transform:translateX(-50%); object-fit:contain; box-shadow:4px 8px 8px rgba(0,0,0,.2);}
.productList-popup-visual .visual-teacher > img{left:50%; bottom:0; width:64%; height:auto; transform:translateX(-50%);}
.productList-popup-visual .visual-coach > img{left:50%; bottom:6%; width:82%; height:auto; transform:translateX(-50%);}
.productList-popup-visual .visual-coach .visual-title strong{font-size:13px;}
.productList-popup-visual small{position:absolute; right:0; bottom:-16px; color:#999; font-size:10px; line-height:1.3;}
.productList-popup-copy{margin-top:20px; color:#222; font-size:13px; line-height:1.65; text-align:left;}
.productList-popup-copy p{margin:0;}
.productList-popup-copy .copy-ready{margin-bottom:12px; color:#666; font-size:12px;}
.productList-popup-copy > strong{display:block; margin-bottom:4px; color:#3601b2; font-size:14px; font-weight:800;}
.productList-popup-copy > strong + p{margin-bottom:12px; color:#111; font-weight:800;}
.productList-popup-copy ul{margin:12px 0 0; padding:0; list-style:none;}
.productList-popup-copy li{position:relative; padding-left:20px;}
.productList-popup-copy li:before{content:"\2713"; position:absolute; left:0; top:4px; display:flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:4px; background:#888; color:#fff; font-size:10px; line-height:14px;}
.productList-popup-panel[hidden]{display:none!important;}
.curriculum-group + .curriculum-group{margin-top:8px;}
.curriculum-title{display:flex; align-items:center; gap:8px; box-sizing:border-box; padding:10px 15px; border-radius:10px; background:#eaeaee; color:#111; font-size:13px; font-weight:800;}
.book-icon{position:relative; box-sizing:border-box; width:14px; height:16px; border:1.5px solid #172033; border-radius:3px; flex:0 0 auto;}
.book-icon:before{content:""; position:absolute; left:3px; top:-2px; width:2px; height:16px; background:#172033;}
.book-icon:after{content:""; position:absolute; right:2px; top:3px; width:3px; height:2px; background:#172033; box-shadow:0 3px 0 #172033;}
.curriculum-group ol{margin:4px 0 0; padding:0; list-style:none;}
.curriculum-group li{box-sizing:border-box;margin-top:4px;padding: 10px 15px 10px 55px;border-radius:10px;background:#f9f9fa;color:#111;font-size:13px;line-height:1.4;text-align:left;overflow:hidden; text-indent: -15px;}
.productList-popup-footer{position:relative; display:flex; flex:0 0 auto; flex-direction:column; align-items:flex-end; gap:10px; box-sizing:border-box; padding:16px; background:#f9f9fa;}
.popup-price{position:relative; display:flex; align-items:baseline; gap:8px; white-space:nowrap;}
.popup-price .original{color:#aaa; font-size:11px;}.popup-price .original del{font-family:"Roboto"; font-size:12px; font-weight:500;}
.popup-price .percent{padding:3px 6px; border-radius:6px; background:#ffedef; color:#ff3945; font-family:"Roboto"; font-size:12px; font-weight:800;}
.popup-price strong{color:#111; font-family:"Roboto"; font-size:24px; font-weight:900; letter-spacing:-0.6px;}
.popup-price .flag{position:absolute; right:0; top:-24px; display:flex; align-items:center; justify-content:center; width:fit-content; height:22px; padding:0 12px; border-radius:999px; background:#ee2a28; color:#fff; font-size:11px; font-weight:800; white-space:nowrap;}
.popup-price .flag:after{content:""; position:absolute; left:38%; bottom:-4px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #ee2a28;}
.popup-actions{display:flex; gap:8px; width:100%;}
.popup-actions button{box-sizing:border-box; flex:1 1 0; height:44px; border-radius:999px; font-family:"Pretendard"; font-size:14px; font-weight:800; cursor:pointer;}
.popup-actions .cart-btn{border:1px solid #111; background:#fff; color:#111;}.popup-actions .buy-btn{border:1px solid #111; background:#111; color:#fff;}
.productList-popup-panel{position:relative;}
.productList-popup-panel .book{position:absolute; left:20px; top:70px; width:80px; height:108px; border:1px solid #a9a9a9; border-radius:4px; overflow:hidden;}