@charset "euc-kr";

/* curriculum
---------------------------------------------------- */
.curriculum-wrap {overflow:hidden;background:#fff;color:#333;font-family:Pretendard,'Noto Sans KR',sans-serif;letter-spacing:0}
.curriculum-wrap * {box-sizing:border-box}
.curriculum-wrap button {border:0;background:none;font-family:inherit;cursor:pointer}
.curriculum-wrap a {color:inherit;text-decoration:none}
.curriculum-inner {position:relative;margin:0 auto;padding:0}
.curriculum-visual {position:relative;overflow:hidden;padding:80px 0 0;}
.curriculum-visual-bg {position:absolute;left:50%;transform: translateX(-50%);top:0;width:1200px;height:843px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 10%,#000 84%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,#000 10%,#000 84%,rgba(0,0,0,0) 100%)}
.curriculum-title {position:relative;text-align:center;white-space:nowrap}
.curriculum-title h2 {margin:0;color:#333;font-size:64px;font-weight:800;line-height:1.2;letter-spacing:-1.28px}
.curriculum-title p {margin:4px 0 0;background:linear-gradient(186deg,#2270f6 14%,#154fb4 82%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:84px;font-weight:800;line-height:1.2;letter-spacing:-1.68px}
.tip-section {position:relative;margin-top:38px;text-align:center}
.tip-section h3 {margin:0;color:#333;font-size:28px;font-weight:600;line-height:1.4;letter-spacing:-0.28px}
.tip-section .swiper {max-width:1260px;margin:0 auto}
.tip-section .swiper-wrapper {width:100%;height:100%;padding:38px 24px 80px}
.tip-section .swiper-wrapper .swiper-slide:first-of-type {padding:34px 24px}
.tip-section .swiper-wrapper .swiper-slide {display:flex;flex-shrink:0;flex-direction:column;gap:20px;width:clamp(300px, calc((100vw - 108px) / 3), 384px);height:384px;border-radius:20px;background:#fff;box-shadow:0 0 30px 0 rgba(0,0,0,0.06);padding:34px}
.tip-section .swiper-pagination {display:none}
.tip-section .swiper-pagination-bullets.swiper-pagination-horizontal {position:static;display:none;width:auto;margin:16px 0 0;transform:none}
.tip-section .swiper-pagination-bullet {display:block;flex:0 0 auto;width:8px;height:8px;margin:0 3px !important;border-radius:5px;background:rgba(0,0,0,0.2);opacity:1}
.tip-section .swiper-pagination-bullet-active {width:29px;border-radius:100px;background:#2c5bf6;opacity:1}
.tip-list-wrap {display: flex; margin-top:40px;}
.tip-list {display:flex;gap:24px;align-items:stretch;width:1200px}
.tip-card {display:flex;flex:1 1 0;min-width:0;min-height:240px;flex-direction:column;align-items:center;gap:28px;padding:34px 24px;background:#fff;border-radius:20px;box-shadow:0 0 15px rgba(0,0,0,0.06);text-align:left}
.tip-head {display:flex;width:100%;flex-direction:column;align-items:center;gap:8px;text-align:center}
.tip-no {display:flex;width:31px;height:31px;align-items:center;padding-top: 1px;justify-content:center;border-radius:999px;background:#2c5bf6;color:#fff;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:-0.16px}
.tip-head strong {display:block;color:#333;font-size:22px;font-weight:600;line-height:1.4;letter-spacing:-0.22px;white-space:nowrap}
.type-list {display:flex;width:100%;flex-direction:column;gap:10px}
.type-row {display:flex;width:100%;align-items:center;justify-content:center;gap:16px;padding:12px 18px;border-radius:6px;background:#f5f5f5;color:#333;font-size:16px;line-height:1.4;letter-spacing:-0.16px;white-space:nowrap}
.type-row span {display:flex;width:76px;align-items:center;justify-content:center;padding:2px 16px;border-radius:999px;background:#454655;color:#fff;font-size:14px;font-weight:400;line-height:1.5;letter-spacing:-0.14px}
.type-row em {display:block;width:106px;font-style:normal;text-align: left; font-weight:400}
.type-row strong {position:relative;display:block; width: 88px; font-weight:600;text-align: left;padding-left: 16px;}
.type-row strong:before {content:'';position:absolute;left:0px;top:50%;width:1px;height:14px;margin-top:-7px;background:#d9d9d9}
.check-list {display:flex;width:236px;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.check-list li {display:flex;align-items:center;gap:6px;color:#333;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-0.16px;white-space:nowrap}
.check-icon {display:block;flex:0 0 20px;width:20px;height:20px}
.check-icon svg {display:block;width:20px;height:20px}
.curriculum-content {position:relative;padding-bottom:60px;background:#fff}
.subject-tab {position:relative;display: flex;justify-content: center; padding-bottom:18px}
.subject-tab-arrow {display:none;position:absolute;top:0;width:40px;height:55px;align-items:center;justify-content:center;padding:0;border-bottom:0;background:#fff;z-index:3}
.subject-tab-arrow svg {position:relative;z-index:1}
.subject-tab-arrow.is-show {display:flex}
.subject-tab-arrow-prev {left:24px;right:auto}
.subject-tab-arrow-next {left:auto;right:24px}
.subject-tab-arrow-prev svg {transform:rotate(180deg)}
.subject-tab-scroll {display:flex;width:1200px;overflow:hidden;box-shadow:inset 0 -1px 0 #dbdee5}
.subject-tab-scroll button {position:relative;display:flex;flex:1 1 0;min-width:0;align-items:center;justify-content:center;padding:14px 20px;border-bottom:0;color:#555;font-size:18px;font-weight:500;line-height:1.5;letter-spacing:-0.36px;white-space:nowrap}
.subject-tab-scroll button.is-on {color:#2c5bf6;font-weight:700}
.subject-tab-scroll button.is-on:after {content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:#2c5bf6}
.subject-tab-edge-arrow {display:none;align-items:center;justify-content:center;background:#fff}
.filter-area {display:flex;max-width: 1200px;margin: 0 auto;flex-direction:column;padding-bottom:28px}
.filter-scroll {width:100%;max-width:1200px;overflow:hidden}
.filter-scroll .swiper-wrapper {align-items:center}.filter-scroll .swiper-slide {width:auto;flex-shrink:0}.filter-scroll button {display:flex;align-items:center;justify-content:center;padding:8px 16px;border:1px solid #dbdbdb;border-radius:999px;color:#777;font-size:16px;font-weight:500;line-height:1.1;letter-spacing:-0.32px;white-space:nowrap}
.filter-scroll .swiper-wrapper .swiper-slide {margin-bottom:18px}
.filter-scroll button.is-on {border-color:#2c5bf6;color:#2c5bf6;font-weight:600}

.teacher-scroll {width:100%;overflow:hidden;padding:0 16px;color:#777;font-size:16px;font-weight:500;line-height:1.1;letter-spacing:-0.4px;white-space:nowrap}
.teacher-scroll .swiper-wrapper {align-items:center}.teacher-scroll .swiper-slide {width:auto;flex-shrink:0}.teacher-scroll button {position:relative;color:#777;font-size:16px;font-weight:500;line-height:1.1;letter-spacing:-0.4px;white-space:nowrap}
.teacher-scroll .swiper-slide + .swiper-slide button:before {content:'';display:inline-block;width:1px;height:12px;margin:0 8px 0 0;background:#d9d9d9;vertical-align:-1px}
.teacher-scroll button.is-on {color:#1c61d8;font-weight:600}
.teacher-scroll span {display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center;margin-left:2px;border:1px solid #ebebeb;border-radius:50%;background:#fff;color:#fc4f3f;font-size:9px;font-weight:700;letter-spacing:-0.225px;vertical-align:2px}
.teacher-curriculum {position:relative;display:flex;max-width:1200px;align-items:flex-end;justify-content:center;gap:32px;overflow:hidden;margin:0 auto;background:#f8f8f8;border-radius:20px}
.new-badge {position:absolute;left:42px;top:42px;z-index:2;display:flex;width:80px;height:80px;align-items:center;justify-content:center;border-radius:999px;background:linear-gradient(100deg,#2c5bf6 11%,#1a3590 87%);color:#fff;font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-0.2px;text-align:center}
.teacher-photo {position:relative;flex:0 0 500px;width:500px;height:500px;overflow:hidden}
.teacher-photo img {display:block;width:100%;height:100%}
.teacher-photo .img-ta,.teacher-photo .img-mo,.video-preview .img-ta,.video-preview .img-mo,.curriculum-visual-bg .img-ta,.curriculum-visual-bg .img-mo {display:none}
.curriculum-visual-bg img {display:block;width:100%;height:100%;object-fit:cover}
.teacher-photo img {object-fit:cover}
.teacher-info {display:flex;flex:0 0 600px;flex-direction:column;gap:20px;align-items:flex-start;padding:34px 0}
.teacher-summary {display:flex;flex-direction:column;gap:6px;align-items:flex-start;white-space:nowrap}
.teacher-name {display:flex;gap:3px;align-items:flex-end;color:#2C5BF6}
.teacher-name strong {font-size:28px;font-weight:600;line-height:1.3;letter-spacing:-0.56px}
.teacher-name span {color:#555;font-size:18px;font-weight:400;line-height:1.4;letter-spacing:-0.18px}
.teacher-summary p {margin:0;color:#333;font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-0.48px}
.teacher-buttons {display:flex;gap:10px;align-items:flex-start}
.teacher-buttons a {display:flex;min-width:0;width:148px;align-items:center;justify-content:space-between;padding:10px 20px;border:1px solid #333;border-radius:6px;color:#333;font-size:16px;font-weight:400;letter-spacing:-0.16px;white-space:nowrap}
.video-preview {position:relative;display:block;width:600px;height:300px;overflow:hidden;border-radius:8px;background:#111;color:#f8f8f8;text-align:center}
.video-preview img {display:block;width:100%;height:100%}
.video-preview img {object-fit:cover;border-radius:8px}
.video-preview span {position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%); display:flex;flex-direction:column;align-items:center;gap:16px;width:200px;color:#f8f8f8;text-align:center;white-space:nowrap; z-index: 10;}
/* .video-preview::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);} */
.video-preview em {display:block;font-style:normal;font-size:24px;font-weight:400;line-height:1.3;letter-spacing:-0.24px}
.video-preview strong {display:block;margin-top:-16px;font-size:24px;font-weight:600;line-height:1.3;letter-spacing:-0.24px}
.video-preview svg {width: 32px;height: 37px;aspect-ratio: 32/37;}

/* .videoClip {position:relative;width:600px;aspect-ratio:16/9;height:auto} */
.videoClip {position: relative;width: 600px;height: 0;padding-bottom: 56.25%;   /* 9/16 */}
.videoClip .video-preview {position:absolute;inset:0;width:100%;height:100%;margin:0}
.videoClip #playerarea {display:none;position:absolute;inset:0;border-radius:8px;overflow:hidden;background:#000}
.videoClip #playFrame {display:block;width:100%;height:100%;border:0}

@media (max-width:1199px) {
    .videoClip {grid-column:1 / 3;grid-row:3;width:100%;height:auto;aspect-ratio:16/9}
	.teacher-photo .img-pc,.teacher-photo .img-mo,.video-preview .img-pc,.video-preview .img-mo,.curriculum-visual-bg .img-pc,.curriculum-visual-bg .img-mo {display:none}
	.teacher-photo .img-ta,.video-preview .img-ta,.curriculum-visual-bg .img-ta {display:block}
	.curriculum-inner {max-width:none;padding:0 24px}
	.curriculum-visual {padding:80px 0 50px}
	.curriculum-visual-bg {left:50%;top:0;width:calc(100% + 324px);height:100%;transform:translateX(-50%)}
	.curriculum-title h2 {font-size:64px;letter-spacing:-1.28px}
	.curriculum-title p {font-size:84px;letter-spacing:-1.68px}
	.tip-section {margin-top:38px}
	.tip-section .swiper {width:600px;max-width:600px;overflow:visible}
	.tip-section .swiper-wrapper {padding:38px 0 16px}
	.tip-section .swiper-wrapper .swiper-slide {width:292px;height:384px;padding:34px 28px;box-shadow:0 0 30px 0 rgba(0,0,0,0.06)}
	.tip-section .swiper-wrapper .swiper-slide:first-child {width:600px;height:384px;padding: 34px;}
	.tip-section .swiper-pagination,.tip-section .swiper-pagination-bullets.swiper-pagination-horizontal {display:flex;justify-content:center;gap:0}
	.teacher-summary {white-space:normal}
	.tip-list-wrap {max-width:600px;margin:38px auto 0;border-radius:20px;box-shadow:0 0 15px rgba(0,0,0,0.06)}
	.tip-list {width:100%;gap:0;overflow:visible}
	.tip-list::-webkit-scrollbar,.subject-tab-scroll::-webkit-scrollbar {display:none}
	.tip-slide {flex:0 0 100%;gap:16px}
	.tip-slide-1 .tip-card {flex:1 1 0;min-height:230px;padding:34px;gap: 20px;}
	.tip-slide-2 .tip-card {flex:1 1 0;min-height:384px;padding:34px 28px}
	.tip-slide-2 .check-list {width:236px; margin: 0 auto;}
	.tip-dots {position:static;display:flex;justify-content:center;gap:6px;width:auto;margin:16px 0 0;transform:none;text-align:left}
	.tip-dots .tip-dot {display:block;flex:0 0 auto;width:8px;height:8px;margin:0;border-radius:5px;background:rgba(0,0,0,0.2);opacity:1}
	.tip-dots .tip-dot.is-on {width:29px;border-radius:100px;background:#2c5bf6;opacity:1}
	.curriculum-content {padding-bottom:60px}
	.subject-tab {margin:0 -24px;padding-bottom:18px}
	.subject-tab-scroll {width:100%;overflow-x:auto;padding-left:0;padding-right:0;-webkit-overflow-scrolling:touch}
	.subject-tab-scroll button {flex:1 0 120px;min-width:120px;padding:14px 20px}
	.subject-tab .subject-tab-arrow {width:48px;height:54px;padding:0;border-bottom:0}
	.subject-tab .subject-tab-arrow-prev {left:0;right:auto;background:linear-gradient(90deg,#fff 0%,#fff 55%,rgba(255,255,255,0) 100%)}
	.subject-tab .subject-tab-arrow-next {left:auto;right:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,#fff 45%,#fff 100%)}
	.filter-area {margin:0 -24px;padding-bottom:28px}
	.filter-scroll {width:100%;padding:0 24px}
	.teacher-scroll {width:100%;padding:0 40px}
	.teacher-curriculum {display:grid;grid-template-columns:220px 1fr;gap:20px 24px;margin:0;background:#f8f8f8;padding:32px 42px 42px;border-radius:20px}
	.teacher-info {display:contents}
	.teacher-photo {grid-column:1;grid-row:1 / 3;flex:none;width:220px;height:220px;border-radius:999px;background:#ededed;padding-top:20px;}
	.teacher-photo .pic {object-position: center top;}
	.teacher-summary {grid-column:2;grid-row:1;align-self:end;justify-self:start}
	.teacher-buttons {grid-column:2;grid-row:2;align-self:start}
	.video-preview {grid-column:1 / 3;grid-row:3;width:100%;height: 41.53vw;aspect-ratio: 16/9;}
	.new-badge {left:18px;top:18px;width:80px;height:80px;font-size:20px;letter-spacing:-0.2px}
}

@media (max-width:767px) {
    .videoClip {width:100%;aspect-ratio:16/9}
	.teacher-photo .img-pc,.teacher-photo .img-ta,.video-preview .img-pc,.video-preview .img-ta,.curriculum-visual-bg .img-pc,.curriculum-visual-bg .img-ta {display:none}
	.teacher-photo .img-mo,.video-preview .img-mo,.curriculum-visual-bg .img-mo {display:block}
	.curriculum-title {width:100%;max-width:328px;margin:0 auto;white-space:normal}
	.curriculum-inner {width:100vw;max-width:none;margin:0;padding:0 16px}
	.curriculum-visual {padding:60px 0 40px;background:radial-gradient(circle at 22% 8%,rgba(247,250,227,0.58) 0,rgba(230,250,233,0.38) 30%,rgba(255,255,255,0) 62%),radial-gradient(circle at 104% 29%,rgba(212,245,251,0.62) 0,rgba(226,249,239,0.38) 33%,rgba(255,255,255,0) 66%),#fff}
	.curriculum-visual-bg {display:none}
	.curriculum-title h2 {font-size:38px;letter-spacing:-0.76px}
	.curriculum-title p {display:block;width:100%;height:auto;margin:4px auto 0;font-size:48px;letter-spacing:-0.76px;line-height:1.2;white-space:nowrap}
	.tip-section {margin-top:24px}
	.tip-section h3 {font-size:22px;letter-spacing:-0.22px}
	.tip-section .swiper {width:100%;max-width:none;margin-left:0;overflow:visible}
	.tip-section .swiper-wrapper {padding:22px 0 20px}
	.tip-section .swiper-wrapper .swiper-slide,.tip-section .swiper-wrapper .swiper-slide:first-child {width:100%;height:361px;padding:34px 24px;gap:20px}
	.tip-section .swiper-pagination-bullets.swiper-pagination-horizontal {margin-top:0}
	.tip-section .swiper-pagination-bullet {width:6px;height:6px;margin:0 3px !important}
	.tip-section .swiper-pagination-bullet-active {width:16px}
	.tip-list-wrap {max-width:none;margin-top:22px;box-shadow:none}
	.tip-list {width:100%;gap:0}
	.tip-slide {display:flex;flex-direction:column;gap:20px}
	.tip-card {flex:0 0 auto;width:100%;min-height:0;padding:34px 24px;border-radius:20px;gap:20px}
	.tip-slide .tip-card {flex:0 0 auto;width:100%}
	.tip-head strong {font-size:20px;letter-spacing:-0.2px}
	.tip-no {font-size:14px;letter-spacing:-0.14px}
	.type-row {gap:10px;padding:10px 0 10px 16px;font-size:14px;letter-spacing:-0.14px}
	.type-row:after {flex-basis:11px;width:11px}
	.type-row span {width:70px;font-size:13px;letter-spacing:-0.13px}
	.type-row em {width:96px}
	.type-row strong {width: 78.5px;text-align: left;padding-left: 10px;}
	.type-row strong:before {left:0px;height:14px}
	.check-list {width:236px;gap:12px; margin: 0 auto;}
	.check-list li {font-size:14px;letter-spacing:-0.14px}
	.tip-dots {margin-top:20px}
	.tip-dots .tip-dot {width:6px;height:6px}
	.tip-dots .tip-dot.is-on {width:16px}
	.curriculum-content {padding-bottom:40px}
	.subject-tab {margin:0 -16px;padding-bottom:14px}
	.subject-tab-scroll {width:100%;overflow-x:auto;padding-left:0;padding-right:0;-webkit-overflow-scrolling:touch}
	.subject-tab-scroll button {flex:1 0 auto;min-width:0;padding:10px 14px;font-size:16px;letter-spacing:-0.32px}
	.subject-tab .subject-tab-arrow {display: none;}
	.subject-tab .subject-tab-arrow-prev {left:0;right:auto}
	.subject-tab .subject-tab-arrow-next {left:auto;right:0}
	.subject-tab-edge-arrow {display:none}
	.filter-area {margin:0 -16px;padding-bottom:24px}
	.filter-scroll .swiper-wrapper .swiper-slide {margin-bottom:14px}
	.filter-scroll {padding:0 16px}
	.filter-scroll button {padding:8px 14px;font-size:14px;font-weight:400;letter-spacing:-0.35px}
	.filter-scroll button.is-on {font-weight:600}
	.teacher-scroll {padding:0 30px;font-size:14px;letter-spacing:-0.35px}
	.teacher-scroll button {font-size:14px;letter-spacing:-0.35px}
	.teacher-scroll span { vertical-align: 2px; } 
	.teacher-scroll .swiper-slide { min-height: 20px; display:flex; align-items:center; }
	.teacher-scroll .swiper-slide + .swiper-slide button:before {margin-right:12px}
	.teacher-curriculum {grid-template-columns:118px minmax(0,1fr);width:calc(100vw - 32px);gap:14px 16px;margin:0;padding:24px 16px 16px;border-radius:10px;overflow:hidden}
	.teacher-photo {grid-column:1;grid-row:1;width:110px;height:110px;border-radius:999px;margin-left: 8px;padding-top: 10px;}
	.teacher-summary {grid-column:2;grid-row:1;min-width:0;align-self:center;gap:6px;white-space:normal;padding-right: 8px;}
	.teacher-name strong {font-size:18px;letter-spacing:-0.36px}
	.teacher-name span {font-size:14px;letter-spacing:-0.14px}
	.teacher-summary p {font-size:15px;line-height:1.3;letter-spacing:-0.3px;word-break:keep-all}
	.teacher-buttons {grid-column:1 / 3;grid-row:2;min-width:0;width:100%;gap:10px}
	.teacher-buttons a {flex:0 0 calc((100vw - 64px - 10px) / 2);min-width:0;max-width:143px;width:auto;padding:6px 18px;font-size:14px;letter-spacing:-0.14px}
	.video-preview {width: 100%; height: 50.27vw; border-radius:6px}
	.video-preview img {border-radius:6px}
	.video-preview span {gap:16px;width:150px}
	.video-preview em {font-size:18px;letter-spacing:-0.18px}
	.video-preview strong {margin-top:-16px;font-size:18px;letter-spacing:-0.18px}
	.new-badge {left:8px;top:8px;width:50px;height:50px;font-size:13px;line-height:1.1;letter-spacing:-0.13px}
}