@charset="euc-kr";

/* common */
html{scrollbar-gutter:stable;}
#wrapper{overflow:hidden; min-width:1300px; width:auto; margin:0 auto; text-align:center; font-family: "Pretendard"; word-break: keep-all;}
#wrapper > section > .inner{position:relative; text-align:center; margin:0 auto; width:1300px;}
#wrapper .thumb{position:relative; left:50%; transform:translateX(-50%); display:block;}
[data-aos=fade-up] {transform: translate3d(0,30px,0);}

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

/* visual */
.visual{position:relative; background:#00000b; overflow:hidden; transition:opacity 1s ease;}
.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;}
.visual .inner{position:absolute !important; left:50%; top:0; transform:translateX(-50%); height:100%; display: flex; align-items: center; justify-content: center; align-items: center;}
.visual .tit{position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items: center; justify-content: center; z-index:2;}
.visual .tit .copy{position:relative; text-align:left; display:flex; flex-direction:column; gap:30px; 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:60px; font-weight:800; letter-spacing:-0.02em; line-height:1; color:#fff; width:900px;}
.visual .tit .line2{margin:0; display:flex; align-items:baseline; gap:3.5px; font-size:70px; font-weight:900; letter-spacing:-0.02em; line-height:1; color:#fff; white-space:nowrap;}
.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;
}
.visual .hand{position: absolute; right: -475px; bottom: -332px;}
.visual .tit .slot{position:relative; display:inline-flex; align-items:center; height:20px; min-width:140px; 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:30px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:15px; transition:opacity .35s ease, transform .35s ease; margin:-10px 0 0 0;}
.visual .tit .dots i{display:block; width:15px; height:15px; 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(-9px); background:#367CFF; }
}
.visual .tit .word-loading{position:absolute; left:0; top:50%; transform:translateY(-50%) translateY(6px); opacity:0; white-space:nowrap; transition:opacity .35s ease, transform .35s ease; margin:-20px 0 0 15px;}
.visual .tit .slot.reveal .dots{opacity:0; transform:translateY(-50%) translateY(-6px); pointer-events:none;}
.visual .tit .slot.reveal .word-loading{opacity:1; transform:translateY(-50%) translateY(0);}

/* hero */
.hero{background:#EEEEF3 url(img/hero_bg.png) no-repeat center bottom; padding:100px 0 0; display:none; opacity:0; transition:opacity 1s ease; height:920px;}
.hero.show{display:block; opacity:1;}
.hero > .inner{display: flex; flex-direction: column; align-items: center;}
.hero .btn{margin:35px 0 30px; cursor:pointer;}
.hero .tablet-wrap{position:relative; opacity:0; transform:translateY(-40px); margin:0 0 0;}
.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(-40px); opacity:0; }
	55%{ transform:translateY(20px); opacity:1; }
	78%{ transform:translateY(-6px); 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: 28px;width: 705px;height: 500px;border-radius:10px;display:flex;justify-content: center;align-items: center;overflow:hidden;transform: translateX(-50%);}
.hero .video video{position:Absolute;left: 50%;top: 50%;width: 130%;transform:translate(-50%, -50%);}
.hero .video:fullscreen{border-radius:0;}
.hero .video:fullscreen video{width:auto; height:100%;}
.hero .video .video-controls{position:absolute; left:0; right:0; bottom:5px; z-index:2; display:flex; flex-direction:column; gap:8px; padding:12px 16px 14px; background:linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.35) 65%, rgba(0,0,0,0)); opacity:0; transition:opacity .25s ease;}
.hero .video:hover .video-controls, .hero .video:focus-within .video-controls{opacity:1;}
@media (hover:none){.hero .video .video-controls{opacity:1;}}
.hero .video .seek-bar{position:relative; width:100%; height:6px; border-radius:4px; background:rgba(255,255,255,.3); cursor:pointer; touch-action:none; user-select:none;}
.hero .video .seek-buffered{position:absolute; left:0; top:0; height:100%; width:0; border-radius:4px; background:rgba(255,255,255,.45);}
.hero .video .seek-played{position:absolute; left:0; top:0; height:100%; width:0; border-radius:4px; background:#e6e6e6;}
.hero .video .seek-thumb{position:absolute; top:50%; left:0; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.25); transform:translate(-50%,-50%); pointer-events:none;}
.hero .video .time{flex:0 0 auto; font-size:13px; font-weight:600; color:#fff; letter-spacing:0; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.4);}
.hero .video .buttons-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.hero .video .btns{display:flex; align-items:center; gap:10px;}
.hero .video .ctrl-btn{width:42px; height:42px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.25); box-shadow:0 1px 4px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease;}
.hero .video .ctrl-btn:hover{background:rgba(255,255,255,.45);}
.hero .video .ctrl-btn svg{width:22px; height:22px; fill:#fff; display:none;}
.hero .video .ctrl-btn-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:84px; height:84px; z-index:3; background:rgba(0,0,0,.4); opacity:0; transition:opacity .25s ease, background .2s ease;}
.hero .video .ctrl-btn-center:hover{background:rgba(0,0,0,.55);}
.hero .video .ctrl-btn-center svg{width:40px; height:40px;}
.hero .video:hover .ctrl-btn-center, .hero .video:focus-within .ctrl-btn-center{opacity:1;}
@media (hover:none){.hero .video .ctrl-btn-center{opacity:1;}}
.hero .video .ctrl-btn.state-playing .icon-pause,
.hero .video .ctrl-btn.state-paused .icon-play,
.hero .video .ctrl-btn.state-muted .icon-mute,
.hero .video .ctrl-btn.state-unmuted .icon-sound,
.hero .video .ctrl-btn.state-full .icon-collapse,
.hero .video .ctrl-btn.state-normal .icon-expand{display:block;}

/* learning_intro */
.learning_intro{position:relative; background:#fff; padding:100px 0 0;}
.learning_intro .tab{display:flex; justify-content:center; align-items:center; gap:12px; margin:50px auto 0; height:45px;}
.learning_intro .tab .tab-btn{width:120px; height:100%; border-radius:999px; border:1px solid rgba(70,4,83,.3); background:transparent; color:#460453; font-family:"Pretendard"; font-size:18px; 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 .learningSwiper{width:1200px; margin:20px auto 0;}
.learning_intro .learningSwiper .swiper-slide img{display:block; width:100%;}


/* appIntro */
.appIntro{position:relative; background:#EEEEF3; padding:100px 0 0;}
.appIntro .appIntroSwiper{width:100%; margin:40px 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;}
.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:14px; width:max-content; margin:32px auto 0; padding:16px 24px; background:#DCDCE5; border-radius:999px;}
.appIntro .swiper-pagination-bullet{width:10px; height:10px; border-radius:999px; background:#fff; opacity:1; margin:0 !important; transition:width .3s ease, background .3s ease;}
.appIntro .swiper-pagination-bullet-active{width:60px;}
@keyframes appIntroShake{
	0%, 100%{ transform: translateX(0); }
	25%{ transform: translateX(-10px); }
	75%{ transform: translateX(10px); }
}

/* smartNote */
.smartNote{position:relative; background:#EEEEF3; padding:100px 0;}
.smartNote .tit{position:relative; z-index:2;}
.smartNote .smartNote_tablet{position:relative;}
.smartNote .smartNote_tablet .tablet{position:relative; z-index:2;}
.smartNote .smartNote_tablet:after{position:absolute; left:50%; top:-60px; transform:translateX(-50%); width:1709px; aspect-ratio: 1709 / 790; content:''; background:url(img/smartNote_pen_bg.png) no-repeat;  z-index:1;}
.smartNote .smartNote_tablet .mov{position:absolute;left: 191px;top: 80px;z-index:2;}
.smartNote .dec{margin:-140px 0 0 65px;}


/* lectureFeature */
.lectureFeature{position:relative; background:#fff; padding:100px 0;}
.lectureFeature .teachers{position:relative; z-index:1; display:flex; justify-content:center; align-items:flex-end; margin:60px 0 0;}
.lectureFeature .teacher{position:relative; display:block; width:260px; height:300px; border:1px solid red; overflow:hidden; margin:0 -67px; 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;}
.lectureFeature .teacher:nth-of-type(3) img{width:108%; margin:-10px 0 0;}
.lectureFeature .teacher:nth-of-type(4){z-index:3;}
.lectureFeature .teacher:nth-of-type(4) img{width:100%; margin:-10px 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:15px; margin:-120px 0 0;}
.lectureFeature .tabs .tab{position:relative; width:130px; height:88px; padding:0; border:.5px solid #fff;; border-radius:999px; 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:18px; color:#111; font-weight:500;}
.lectureFeature .tabs .tab .name{font-size:24px; 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; display:inline-block; margin:10px 0 0; z-index:2;}
.lectureFeature .tablet > img.tablet{display:block; width:100%; pointer-events:none;}
.lectureFeature .video{position:absolute; right:40px; top:92px; width:422px; height:267px;}
.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 1.2s ease-in-out; z-index:2; border-radius:10px;}
.lectureFeature .video .hand{position:absolute; left:0%; top:100%; width:64px; height:auto; transform:translate(-8%,-15%); pointer-events:none; opacity:1; z-index:5; transition:left 1.2s ease-in-out, top 1.2s ease-in-out;}


/* aiCoach */
.aiCoach{position:relative; background:#eeeef3; padding:100px 0 60px;}
.aiCoach .con{position:relative; width:1200px; height:620px; margin:60px auto 0;}
.aiCoach .tab{position:absolute; left:0; top:0; z-index:3; display:flex; flex-direction:column; gap:10px; width:290px;}
.aiCoach .tab-btn{position:relative; display:block; width:290px; height:200px; padding:0; margin:0; border:0; border-radius:40px; cursor:pointer; background:#fff center/cover no-repeat; overflow:hidden;}
.aiCoach .tab-btn::after{content:''; position:absolute; inset:0; background:center/cover 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 .sha{position:absolute; left:200px; top:0; z-index:2; width:230px; height:620px; background:linear-gradient(to right, #eeeef3 0%, #eeeef3 50%, rgba(238,238,243,0) 100%); pointer-events:none;}
.aiCoach .sha.is-dark{background:linear-gradient(270deg, rgba(45, 46, 50, 0) 0%, #2D2E32 50%);}
.aiCoach .aiCoachSwiper{position:absolute; left:200px; top:0; z-index:1; width:1000px; height:620px; border-radius:21px; overflow:hidden;}
.aiCoach .aiCoachSwiper .swiper-slide img{display:block; width:100%; height:100%; 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: url(img/studyAchievement_bg.png) no-repeat center top; padding:100px 0 84px;}
.studyAchievement .con{position:relative; width:1236px; height:720px; margin:50px auto 0;}
.studyAchievement .circle{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.studyAchievement .achievement-content{position:relative; z-index:2; display:block; width:1040px; height:720px; margin:0 auto;}
.studyAchievement .achievement-content .combo{position:absolute; left:390px; top:30px; height:160px;}
.studyAchievement .achievement-content .combo .fire-badge{position:absolute; left:20px; top:48px; width:91px; height:91px; border-radius:50%; background:#fff; border:2px solid #E92828; display:flex; align-items:center; justify-content:center;}
.studyAchievement .achievement-content .combo .fire-badge .fire{width:50px; margin-top:16px; pointer-events:none;}
.studyAchievement .achievement-content .combo .fire-badge .num{position:absolute;left: 87px;top: -5px;transform:translateX(-50%);margin:0;display:flex;align-items:center;font-family:"Pretendard";font-size:18px;font-weight:800;color:#fff;line-height:1;background: #E92828;border-radius: 36px;padding: 8px 11px;}
.studyAchievement .achievement-content .combo .fire-badge .num .num-count-wrap{position:relative; display:inline-block; overflow:hidden; width:23px; height:18px;}
.studyAchievement .achievement-content .combo .fire-badge .num .num-count{position:absolute; left:0; top:0; display:inline-block; width:100%; text-align:center;}
.studyAchievement .achievement-content .combo .fire-badge .num .num-count.enter{animation:studyAchievementComboEnter .35s ease forwards;}
.studyAchievement .achievement-content .combo .fire-badge .num .num-count.leave{animation:studyAchievementComboLeave .35s ease forwards;}

@keyframes studyAchievementComboEnter{
	0%{transform:translateY(16px); opacity:0;}
	100%{transform:translateY(0); opacity:1;}
}
@keyframes studyAchievementComboLeave{
	0%{transform:translateY(0); opacity:1;}
	100%{transform:translateY(-16px); opacity:0;}
}
.studyAchievement .achievement-content .combo .tag{position:absolute; left:27px; bottom:7px; margin:0; padding:6px 14px; border-radius:999px; background:#EE4130; color:#fff; font-family:"Pretendard"; font-size:15px; font-weight:700; line-height:1.2; white-space:nowrap;}
.studyAchievement .circle-rotation{position:absolute; z-index:1; left:52%; top:8px; width:1236px; height:704px; transform:translateX(-50%); pointer-events:none;}
.studyAchievement .circle-rotation img{position:absolute; inset:0; display:block; width:1236px; height:704px; 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:100px 0; background:#EEEEF3;}
.lessonLineup .con{position:relative; margin:50px 0 0; display:flex; gap:50px; flex-direction: column; align-items: center;}
.lessonLineup .con .btn{background: url(img/lessonLineup_btn.png) no-repeat; width:599px; height:88px; text-indent:-9999em;}
body.no-scroll{overflow:hidden;}
.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:860px; max-width:92vw; max-height:80vh; overflow:hidden; border-radius:24px; 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(30px);} to{opacity:1; transform:translateY(-30px);}}
.lessonLineup-popup .lessonLineup-popup-body > img{display:block; width:100%; height:auto; flex:0 0 auto;}
.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:absolute; right:3%; top:2.2%; width:5.8%; aspect-ratio:1/1; padding:0; margin:0; border:0; background:transparent; cursor:pointer;}

/* brandMessage */
.brandMessage{position:relative; padding:100px 0 0; background:url(img/brandMessage_bg.png) no-repeat center top; overflow:hidden;}
.brandMessage .inner{display:flex; flex-direction: column; align-items: center; overflow:hidden;}
.brandMessage .tit_2{margin:40px 0;}
.brandMessage .btn{position:relative; z-index:2; cursor:pointer;}
.brandMessage .tablet{position:relative; margin:-58px 0 0;}


/* productList */
.productList{position:relative; background:#fff; padding:100px 0 0;}
.productList .filter-container { width: 1200px; margin:50px auto 0; border: 1px solid #e5e7eb; border-radius: 16px; background-color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.productList .filter-row { display: flex; align-items: center; padding: 16px 24px; gap: 32px; }
.productList .filter-row:not(:last-child) { border-bottom: 1px solid #f0f0f0; }
.productList .filter-label { font-size: 20px; font-weight: 700; color: #111111; min-width: 40px; white-space: nowrap; }
.productList .filter-options { display: flex; flex-wrap: wrap; gap: 12px; }
.productList .filter-btn { padding: 9px 39px; border-radius: 9999px; font-size: 19px; font-weight: 600; border: none; background-color: #F2F2F2; color: #555555; cursor: pointer; }
.productList .filter-btn.active { background-color: #111; color: #fff; }

.productList .count{display:flex; align-items:center; justify-content:space-between; width:1200px; height:20px; margin:40px auto 0; text-align:left; padding:0 0 0 20px;}
.productList .count strong{color:#111; font-size:20px; font-weight:500; line-height:20px;}
.productList .count p{margin:0; background:linear-gradient(90deg,#a90056 0%,#2600bd 100%); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:16px; line-height:20px;}
.productList .count p span{color:#6200a0;}

.productList .list{width:1200px; margin:20px auto 0; display:flex; flex-direction:column; gap:20px;}
.productList .item{box-sizing:border-box; display:flex; height:280px; border:1px solid #d9d9d9; border-radius:20px; overflow:hidden; background:#fff;}
.productList .item .thumb_c{position:relative; flex:0 0 409px; display:flex; align-items:center; justify-content:center; background:#f5f5f5;}
.productList .item .thumb_c .blet{position:absolute; left:20px; top:20px; overflow:hidden; border-radius:26px; width:90px; height:90px; border:1px solid #E4E4E4;}
.productList .item .thumb_c .group{}
.productList .item .thumb_c .group .teacher{position:absolute; left:50%; top:35px; width:320px; transform:translateX(-55%); z-index:1;}
.productList .item .thumb_c .group .book{position:absolute; right:50px; bottom:0; width:120px; height:160px; border:1px solid #D8D8D8; z-index:2;}
.productList .item .body{position:relative; flex:1; min-width:0; padding:0; text-align:left; background:#fff;}
.productList .item .info{position:absolute; left:54px; top:34px;}
.productList .item .info .subject{display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:26px; padding:0 9px; border-radius:4px; background:#35afe6; color:#fff; font-size:18px; font-weight:800; line-height:26px;}
.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:12px 0 0; color:#111; font-size:34px; font-weight:800; line-height:1.3; letter-spacing:-1.2px; width: 480px; height:120px;}
.productList .item .info .meta{margin:0; color:#555; font-size:18px; line-height:22px;}
.productList .item .info .name + .meta{}
.productList .item .info .name + .meta + .meta{margin-top:15px;}
.productList .item .info .meta b{color:#111; font-weight:800;}
.productList .item .actions{position:absolute; right:43px; bottom:40px; display:flex; align-items:center; gap:8px;}
.productList .item .actions button{box-sizing:border-box; width:122px; height:52px; padding:0; border-radius:999px; border:0; font-family:"Pretendard"; font-size:19px; font-weight:700; line-height:44px; 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 .item .price{position:absolute; right:43px; top:40px; width:250px; text-align:right;}
.productList .item .price .flag{position:relative; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:38px; padding:0 15px; border-radius:20px; background:#ff3945; color:#fff; font-size:14px; font-weight:800; line-height:38px; white-space:nowrap;}
.productList .item .price .flag:after{content""; position:absolute; left:50%; bottom:-7px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #ff3945; transform:translateX(-50%);}
.productList .item .price .original{display:block; margin-top:10px; color:#aaa; font-size:16px; line-height:20px;}
.productList .item .price .original del{font-size:20px; font-weight:500; text-decoration:line-through; font-family: 'Roboto';}
.productList .item .price .sale{display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-top:6px; font-family: 'Roboto';}
.productList .item .price .sale .percent{box-sizing:border-box; padding:4px 7px; border-radius:8px; background:#ffedef; color:#ff3945; font-size:16px; font-weight:800; font-style:normal; line-height:20px; margin:10px 0 0;}
.productList .item .price .sale .won{color:#111; font-size:32px; font-weight:900; font-style:normal; line-height:38px; letter-spacing:-1px;}
.productList .notice{box-sizing:border-box; width:1200px; margin:40px auto 0; padding:37px 40px; border-radius:20px; background:#f7f7f7; color:#555; text-align:left;}
.productList .notice .notice-title{display:block; margin:0 0 24px; color:#111; font-size:24px; font-weight:800; line-height:26px;}
.productList .notice ul{margin:0; padding:0; list-style:none;}
.productList .notice li{position:relative; margin:0; padding-left:14px; font-size:18px; font-weight:400; line-height:22px;}
/* .productList .notice li + li{margin-top:8px; color:#EE2A28;} */
.productList .notice li:not(:first-child){margin:10px 0 0;}
.productList .notice li:before{content:"กค"; position:absolute; left:0; top:0; color:#333; font-weight:800;}
.productList .notice li strong a{color:#000;}

.productList-popup{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; 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:700px; max-width:92vw; height:min(1162px,80vh); overflow:hidden; border-radius:36px; background:#fff; box-shadow:0 22px 42px rgba(0,0,0,.35);}
.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(-30px);}}
.productList-popup-header{position:relative; flex:0 0 64px; box-sizing:border-box; padding:20px 28px 0; background:#f8f8fa;}
.productList-popup-header h2{margin:0; color:#111; font-size:22px; font-weight:700; line-height:26px; text-align:left;}
.productList-popup-close{position:absolute; right:28px; top:18px; width:26px; height:26px; padding:0; border:0; background:transparent; cursor:pointer;}
.productList-popup-close:before,.productList-popup-close:after{content:""; position:absolute; left:11px; top:0; width:4px; height:27px; 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:32px 32px 0;}
.productList-popup-product{flex:0 0 auto; text-align:left; display: flex; align-items: flex-start; gap: 14px;}
.productList-popup-product .subject{display:inline-flex; flex:0 0 auto; align-items:center; height:auto; margin:3px 0 0; padding:5px 8px; border-radius:5px; background:#35afe6; color:#fff; font-size:16px; font-weight:700; letter-spacing:-.4px; 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:28px; font-weight:800; line-height:34px; letter-spacing:-.6px;}
.productList-popup-tabs{display:flex; flex:0 0 52px; margin-top:16px; border-bottom:1px solid #67098b; border-radius:16px 16px 0 0; overflow:hidden; background:#f8f8f9;}
.productList-popup-tabs:has(.productList-popup-tab:nth-child(2).is-active){border-bottom-color:#b90067;}
.productList-popup-tab{flex:1; padding:0; border:0; background:#f8f8f9; color:#777; font-family:"Pretendard"; font-size:16px; font-weight:500; letter-spacing:-.32px; 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:0; overflow-y:auto; overflow-x:hidden; padding:32px 0 40px;}
.productList-popup-panel{display:none;}
.productList-popup-panel.is-active{display:block;}
.productList-popup-visual{position:relative; display:flex; width:635px; height:264px; gap:12px;}
.productList-popup-visual .visual-card{position:relative; box-sizing:border-box; flex:0 0 204px; height:244px; overflow:visible; border-radius:32px; background:#f0f3ff; text-align:center;}
.productList-popup-visual .visual-book{overflow:hidden;}
.productList-popup-visual .visual-card + .visual-card:before{content:""; position:absolute; z-index:5; left:-35px; top:101px; width:58px; height:58px; background:url(img/productList_pop_1_con_plus.png) no-repeat center/58px 58px;}
.productList-popup-visual .visual-title{position:relative; z-index:3; padding-top:24px; color:#3601b2; line-height:1.2;}
.productList-popup-visual .visual-title span{display:block; font-size:16px; font-weight:600; letter-spacing:-.32px;}
.productList-popup-visual .visual-title strong{display:block; margin-top:8px; color:#111; font-size:24px; font-weight:800; 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:143px; transform:translateX(-50%); object-fit:contain; box-shadow: 7.558px 15.116px 15.116px rgba(0, 0, 0, 0.2);}
.productList-popup-visual .visual-teacher > img{left:50%; bottom:0; width:130px; height:160px; transform:translateX(-50%);}
.productList-popup-visual .visual-coach > img{left:50%; bottom:11px; width:169px; height:148px; transform:translateX(-50%);}
.productList-popup-visual small{position:absolute; right:20px; bottom:0; color:#999; font-size:12px; line-height:14px;}
.productList-popup-copy{padding-top:32px; color:#222; font-size:15px; line-height:1.6; text-align:left;}
.productList-popup-copy p{margin:0;}
.productList-popup-copy .copy-ready{margin-bottom:22px; color:#666; font-size:14px; font-weight:500;}
.productList-popup-copy > strong{display:block; color:#3601b2; font-size:15px; font-weight:700;}
.productList-popup-copy > p:not(.copy-ready){font-weight:700; color:#111;}
.productList-popup-copy ul{margin:24px 0 0; padding:0; list-style:none;}
.productList-popup-copy li{position:relative; padding-left:22px; font-size:15px;}
.productList-popup-copy li:before{content:"\2713"; position:absolute; left:0; top:2px; display:flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:4px; background:#888; color:#fff; font-size:13px; line-height:17px;}
.productList-popup-panel[hidden]{display:none!important;}
.curriculum-group + .curriculum-group{margin-top:16px;}
.curriculum-title{display:flex; align-items:center; box-sizing:border-box; height:56px; padding:0 24px; border-radius:10px; background:#e9e9ee; color:#111; font-size:16px; font-weight:800;}
.book-icon{position:relative; box-sizing:border-box; width:18px; height:20px; margin-right:14px; border:2px solid #172033; border-radius:3px;}
.book-icon:before{content:""; position:absolute; left:4px; top:-2px; width:2px; height:20px; background:#172033;}
.book-icon:after{content:""; position:absolute; right:2px; top:4px; width:5px; height:2px; background:#172033; box-shadow:0 5px 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: 15px 60px 15px 80px;border-radius:10px;background:#f8f8f9;color:#222;font-size:15px;font-weight:500;line-height: 1.5;text-align:left;text-indent: -20px;}
.productList-popup-footer{position:relative; display:flex; flex:0 0 89px; align-items:center; justify-content:space-between; box-sizing:border-box; padding:0 40px; background:#fafafa;}
.popup-price{position:relative; display:flex; align-items: center; gap:12px; white-space:nowrap;}
.popup-price .original{color:rgba(119,119,119,.62); font-size:14px; font-weight:500;}
.popup-price .original del{font-family:"Roboto"; font-size:20px; font-weight:600;}
.popup-price .percent{padding:5px 8px; border-radius:6px; background:#ffedef; color:#ff3945; font-family:"Roboto"; font-size:18px; font-weight:600;}
.popup-price strong{color:#111; font-family:"Roboto"; font-size:34px; font-weight:900; letter-spacing:-.7px;}
.popup-price .flag{position:absolute; right:0; top:-39px; display:inline-flex; align-items:center; height:34px; padding:0 16px; border-radius:20px; background:#ee2a28; color:#fff; font-size:15px; font-weight:700;}
.popup-price .flag:after{content:""; position:absolute; left:50%; bottom:-7px; border-left:6px solid transparent; border-right:6px solid transparent; border-top:8px solid #ee2a28; transform:translateX(-50%);}
.popup-actions{display:flex; gap:8px;}.popup-actions button{box-sizing:border-box; width:106px; height:42px; border-radius:999px; font-family:"Pretendard"; font-size:16px; cursor:pointer;}
.popup-actions .cart-btn{border:1px solid #111; background:#fff; color:#111; font-weight:600;}.popup-actions .buy-btn{border:1px solid #111; background:#111; color:#fff; font-weight:700;}
.productList-popup-panel{position:relative;}
.productList-popup-panel .book{position:absolute; left:60px; top:125px; width:130px; height:175px; border: 1px solid #a9a9a9; border-radius:4px; overflow:hidden;}


/* lecture List */
#lectureList{margin:0 auto; width:1200px;}