@charset "utf-8";

.main-hero {position: relative; height: 640px; display: flex; align-items: center;}
.main-hero::before,
.main-hero::after {content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1;}
.main-hero::before {background-image: url('../img/main/main-hero01.webp'); /* animation: heroBg1 10s infinite;*/}
/* .main-hero::after {background-image: url('../img/main/main-hero02.webp'); animation: heroBg2 10s infinite;}
@keyframes heroBg1 {
    0%, 45% {
        opacity: 1;
    }
    50%, 95% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes heroBg2 {
    0%, 45% {
        opacity: 0;
    }
    50%, 95% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
} */
.main-hero .hero-text {max-width: 620px; margin-inline: auto; display: flex; flex-direction: column; align-items: center;}
.main-hero .hero-text .label {font-size: 17px; font-weight: 600; align-items: center; margin-bottom: 20px; padding: 6px 14px; border-color: #ffffff4d; background-color: #ffffff42; color: #091eff;}
.main-hero .hero-text h2 {text-align: center; font-family:'YeogiOttaeJalnanGothic'; font-size:64px; color:#091eff;}
.main-hero .hero-text h2 strong {font-family:'YeogiOttaeJalnanGothic'; display:block; color:#000;}
.main-hero .hero-text h2 [data-splitting] {display:inline-block; opacity:0; visibility:hidden;}
.main-hero .hero-text h2 [data-splitting].is-active {opacity:1; visibility:visible;}
.main-hero .hero-text h2 [data-splitting] .char {font-family:'YeogiOttaeJalnanGothic'; display:inline-block; opacity:0; transform:translateY(40px); transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .7s ease, filter .7s ease;}
.main-hero .hero-text h2 [data-splitting].is-active .char {opacity:1; transform:translateY(0);}
.main-hero .hero-text h2 [data-splitting] .char {transition-delay:calc(var(--char-index) * 0.05s);}
.main-hero .hero-text h2 [data-splitting] .whitespace {width:16px;}
.main-hero .hero-text h2 .txt1 {min-width: 272px;}
.main-hero .hero-text h2 .txt2 {min-width: 192px;}
.main-hero .hero-text .btn-wrap {margin-top: 30px;}

.main-notice {position: relative; background: #272525; background: linear-gradient(90deg, rgba(39, 37, 37, 1) 0%, rgba(72, 72, 72, 1) 100%);}
.main-notice::after,
.main-notice::before {position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 70px; content: ''; display: block; background-repeat: no-repeat; background-position: center center; background-size: cover;}
.main-notice::before {background-image: url(../img/lees-emblem-left.svg); left: 8px;}
.main-notice::after {background-image: url(../img/lees-emblem-right.svg); right: 8px;}
.main-notice .notice-list {width: calc(100% - 16px); max-width: 1274px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; padding: 21px 0;}
.main-notice .notice-list li {display: flex; align-items: center; font-size: 18px; font-weight: 600; color: #fff;}
.main-notice .notice-list li i {margin-right: 10PX;}
.main-notice .notice-list li span {font-size: 16px; font-weight: 400;}

.main-section {padding-block: 110px;}
.main-section .section-head {display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 50px;}
.main-section .section-head .label {margin-bottom: 16px; color: #5C5C58; background-color: #fff;}
.main-section .section-head h3 {word-break: keep-all; position: relative; overflow: hidden; font-family: 'YeogiOttaeJalnanGothic'; font-size: 48px; line-height: 1.22; color: #1A1919;}
.main-section .section-head h3 strong {font-family: 'YeogiOttaeJalnanGothic'; color: #FD9F4B;}
.main-section .section-head h3::after {content: ""; position: absolute; top: -30%; left: -120%; width: 60%; height: 160%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 35%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.15) 65%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: glass-shine 3s ease-in-out infinite; pointer-events: none;}
@keyframes glass-shine {0% {left: -120%;} 45% {left: 140%;} 100% {left: 140%;}}
.main-section .section-head p {margin-top: 16px; font-size: 17px; color: #777; word-break: keep-all;}
.main-section .section-head .emblem-btn {flex-shrink: 0;}

.course-section {background-image: url(../img/lees-bg.webp); background-repeat: no-repeat; background-position: center 100px; background-size: contain;}

.card-list {display: flex; flex-wrap: wrap; gap: 39px 23px;}
.card-list .info-card {width: calc(100% / 3 - (23px * 2) / 3); transition: box-shadow 0.2s; padding: clamp(20px, 3vw, 32px); border: 1px solid #FBFBFB; border-radius: 18px; background-color: #fff; box-shadow: 0 1px 10px 2px #ADADAD4D; display: flex; flex-direction: column; row-gap: 20px;}
.card-list .info-card.active {border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #FFB900 0%, #F2994A 100%) border-box;}
.card-list .info-card .card-title {display: block; margin-bottom: -10px; font-size: 22px; font-weight: 800; color: #1A1919;}
.card-list .info-card .card-desc {font-size: 16px; font-weight: 500; color: #5C5C58; word-break: keep-all;}
.card-list .info-card .tag-list {display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; height: 80px;}
.card-list .info-card .tag-list .label {padding: 6px 12px; box-shadow: 0 1px 10px 2px #ADADAD4D; background-color: #fff; color: #5C5C58;}
.card-list .info-card .round-btn {font-size: 14px;}

.book-list .info-card {row-gap: 30px;}
.book-list .info-card .top-wrap {display: flex; align-items: flex-start; column-gap: 20px;}
.book-list .info-card .top-wrap .ico-wrap {flex-shrink: 0; background: linear-gradient(180deg, #FEF3C7 0%, #FCE7F3 100%); width: 50px; height: 50px; border-radius: 8px; display: flex; align-items: center; justify-content: center;}
.book-list .info-card .txt-wrap .card-title {margin-bottom: 10px; font-weight: 600;}
.book-list .info-card .txt-wrap .card-desc {max-width: 235px; font-weight: 400; word-break: keep-all;}
.book-list .info-card .tag-list {row-gap: 0; height: unset;}

.book-section {padding-top: 40px;}
.book-section .book-list {grid-template-columns: repeat(3, 1fr);}

.result-section {background-color: #FDFCFA;}
.result-section .result-list {display: flex; border-radius: 18px; background-color: #fff;}
.result-section .result-list li {width: 25%; padding: 40px 30px; display: flex; flex-direction: column;}
.result-section .result-list li strong {display: block; font-family: 'YeogiOttaeJalnanGothic'; font-size: 48px; color: #1A1919; margin-bottom: 8px;}
.result-section .result-list li span {font-size: 20px; font-weight: 600; color: #262A31;}
.result-section .result-list li p {margin-top: 4px; font-size: 16px; color: #94A3B8;}
.result-section .review-swiper {margin-top: 24px; overflow: hidden;}
.result-section .review-list {display: flex; margin-top: 0; gap: 0;}
.result-section .review-list .review-card {height: auto; display: flex; flex-direction: column; row-gap: 16px; padding: 28px; border-radius: 12px; background-color: #fff; border: 1px solid #EFEFEF;}
.result-section .review-list .review-card .star,
.result-section .review-list .review-card .review-star-list {display: flex; align-items: center; column-gap: 4px;}
.result-section .review-list .review-card p,
.result-section .review-list .review-card .review-text {font-size: 16px; color: #222326; line-height: 1.6; min-height: calc(1.6em * 4); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.result-section .review-list .review-card .review-writer {display: flex; align-items: center; column-gap: 14px; margin-top: auto;}
.result-section .review-list .review-card .review-writer .review-avatar {width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; font-size: 14px; font-weight: 600; color: #fff; background: #1A1919; background: linear-gradient(180deg, rgba(26, 25, 25, 1) 0%, rgba(103, 113, 128, 1) 100%); display: flex; align-items: center; justify-content: center;}
.result-section .review-list .review-card .review-writer .review-writer-info {display: flex; flex-direction: column; row-gap: 2px;}
.result-section .review-list .review-card .review-writer .review-writer-info strong {font-size: 16px; font-weight: 700; color: #1A1919;}
.result-section .review-list .review-card .review-writer .review-writer-info span {font-size: 15px; color: #8C8C8C; font-style: normal;}

.live-section .section-head {margin-bottom: 30px;}
.live-section .live-wrap {display: flex; flex-direction: column; row-gap: 60px;}
.live-section .live-list {display: flex; flex-wrap: wrap; column-gap: 36px; row-gap: 20px;}
.live-section .live-list .info-card {width: calc(50% - 18px); display: flex; align-items: center; gap: 18px; padding: clamp(16px, 2.5vw, 24px); border-radius: 12px; border: 1px solid #ECEFF4; background-color: #fff;}
.live-section .live-list .info-card .ico-wrap {width: 50px; height: 50px; flex: 0 0 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid transparent;}
.live-section .live-list .info-card:nth-child(1) .ico-wrap {background: #EDE9FE; background: linear-gradient(135deg, rgba(237, 233, 254, 1) 0%, rgba(219, 234, 254, 1) 100%); border-color: #DCDCFA;}
.live-section .live-list .info-card:nth-child(2) .ico-wrap {background: #FCE7F3; background: linear-gradient(135deg, #FCE7F3 0%, #E0E7FF 100%); border-color: #F5DEFA;}
.live-section .live-list .info-card:nth-child(3) .ico-wrap {background: #D1FAE5; background: linear-gradient(135deg, #D1FAE5 0%, #DBEAFE 100%); border-color: #CAE7E9;}
.live-section .live-list .info-card:nth-child(4) .ico-wrap {background: #FEF3C7; background: linear-gradient(135deg, #FEF3C7 0%, #FCE7F3 100%); border-color: #F9EAC9;}
.live-section .live-list .info-card .ico-wrap svg {width: 30px; height: 30px;}
.live-section .live-list .info-card strong {display: block; margin-bottom: 6px; font-size: 18px; font-weight: 700; color: #222222;}
.live-section .live-list .info-card p {font-size: 16px; color: #737373; word-break: keep-all;}
.live-section .live-dashboard {display: flex; flex-direction: column; gap: 30px; padding: 20px; border-radius: 10px; background-color: #F9F9F9;}
.live-section .live-dashboard .dash-top {display: grid; grid-template-columns: 1fr 1.1fr; gap: 20px;}
.live-section .live-dashboard .dash-card {border-radius: 16px; background-color: #fff; box-shadow: 0 1px 10px 2px #ADADAD4D;}
.live-section .live-dashboard .dash-card > strong {display: block; font-size: 16px; font-weight: 500; color: #697483;}
.live-section .live-dashboard .attendance-card {padding: 20px 18px; display: flex; flex-direction: column; justify-content: center;}
.live-section .live-dashboard .attendance-week {display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: 16px; padding-bottom: 20px; border-bottom: 1px solid #EFEFEF;}
.live-section .live-dashboard .attendance-week li {text-align: center;}
.live-section .live-dashboard .attendance-week li span {display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; color: #222;}
.live-section .live-dashboard .attendance-week li em {width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; font-weight: 800; color: #888; font-style: normal;}
.live-section .live-dashboard .attendance-week li em.ok {background-color: #E7F4DA; color: #5D8B35;}
.live-section .live-dashboard .attendance-week li em.no {background-color: #FF6372; color: #fff;}
.live-section .live-dashboard .attendance-bottom {display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px;}
.live-section .live-dashboard .attendance-bottom p {font-size: 32px; font-weight: 600; color: #0B1F45;}
.live-section .live-dashboard .attendance-bottom span {display: block; margin-top: 4px; font-size: 14px; color: #000000;}
.live-section .live-dashboard .attendance-bottom div:nth-child(2) b {display: block; font-size: 14px; font-weight: 500; color: #3B6D11; text-align: right;}
.live-section .live-dashboard .attendance-bottom div:nth-child(2) {text-align: right;}
.live-section .live-dashboard .task-card {padding: 24px 24px 18px;}
.live-section .live-dashboard .task-list {margin-top: 14px;}
.live-section .live-dashboard .task-list li {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #EFEFEF;}
.live-section .live-dashboard .task-list li:first-child {padding-top: 0;}
.live-section .live-dashboard .task-list li:last-child {padding-bottom: 0; border-bottom: 0;}
.live-section .live-dashboard .task-list li b {display: block; margin-bottom: 1px; font-size: 16px; font-weight: 500; color: #000000;}
.live-section .live-dashboard .task-list li span {display: block; font-size: 14px; color: #707070;}
.live-section .live-dashboard .task-list li em {flex: 0 0 auto; padding: 4px 12px; border-radius: 100px; font-size: 14px; line-height: 1; font-weight: 500; font-style: normal;}
.live-section .live-dashboard .task-list li em.done {background-color: #EAF3DE; color: #3B6D11;}
.live-section .live-dashboard .task-list li em.wait {background-color: #FAEEDA; color: #854F0B;}
.live-section .live-dashboard .task-list li em.fail {background-color: #FCEBEB; color: #A32D2D;}
.live-section .live-dashboard .progress-card {padding: clamp(16px, 2.5vw, 24px);}
.live-section .live-dashboard .progress-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 36px; margin-top: 24px;}
.live-section .live-dashboard .progress-item {display: grid; grid-template-columns: 74px 1fr 42px; align-items: center; gap: 10px;}
.live-section .live-dashboard .progress-item span {font-size: 15px; font-weight: 400; color: #000000;}
.live-section .live-dashboard .progress-item div {height: 10px; overflow: hidden; border-radius: 100px; background-color: #EAEAEA;}
.live-section .live-dashboard .progress-item div em {display: block; height: 100%; border-radius: 100px;}
.live-section .live-dashboard .progress-item b {font-size: 15px; text-align: right;}
.live-section .live-dashboard .progress-item.blue em {background-color: #378ADD;}
.live-section .live-dashboard .progress-item.blue b {color: #185FA5;}
.live-section .live-dashboard .progress-item.purple em {background-color: #7F77DD;}
.live-section .live-dashboard .progress-item.purple b {color: #534AB7;}
.live-section .live-dashboard .progress-item.green em {background-color: #1D9E75;}
.live-section .live-dashboard .progress-item.green b {color: #0F6E56;}
.live-section .live-dashboard .progress-item.orange em {background-color: #EF9F27;}
.live-section .live-dashboard .progress-item.orange b {color: #BA7517;}
.live-section .live-dashboard .summary-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px;}
.live-section .live-dashboard .summary-list li {padding: 10px 12px; border-radius: 10px; background-color: #F9F7F5;}
.live-section .live-dashboard .summary-list li strong {display: block; margin-bottom: 4px; font-size: 24px; font-weight: 600; color: #000;}
.live-section .live-dashboard .summary-list li:nth-child(2) strong {color: #3B6D11;}
.live-section .live-dashboard .summary-list li:nth-child(3) strong {color: #A32D2D;}
.live-section .live-dashboard .summary-list li span {font-size: 14px; font-weight: 400; color: #000000;}


.step-section {background-color: #FDFCFA;}
.step-section .step-line {position: relative; width: 100%; height: 3px; border-radius: 2px; background: #FFB900; background: linear-gradient(90deg, #FFF4E5 0%, #FFE59F 50%, #FFB573 100%);}
.step-section .step-line svg {position: absolute; top: 50%; right: -1px; transform: translateY(-50%);}
.step-section .step-list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 50px;}
.step-section .step-list li {text-align: center;}
.step-section .step-list li span {width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; font-family: 'YeogiOttaeJalnanGothic';}
.step-section .step-list li:nth-child(1) span {background-color: #FEDCAC;}
.step-section .step-list li:nth-child(2) span {background-color: #FFD084;}
.step-section .step-list li:nth-child(3) span {background-color: #FD9F4B;}
.step-section .step-list li:nth-child(4) span {background-color: #FA8A25;}
.step-section .step-list li strong {display: block; margin-bottom: 10px; font-size: 20px; font-weight: 700; color: #0B1F3A;}
.step-section .step-list li p {word-break: keep-all; font-size: 15px; line-height: 22px; color: #475569;}

.teacher-section {overflow: hidden;}
.teacher-section .section-head {}
.teacher-section .section-head h3 {color: #1F1F1F;}
.teacher-section .section-head h3 strong {color: #FF9F2F;}
.teacher-section .teacher-swiper-wrap {width: 100%; overflow: visible;}
.teacher-section .teacher-swiper {overflow: visible; padding-left: calc((100vw - 1400px) / 2 + 20px); padding-right: 20px;}
.teacher-section .teacher-list {align-items: stretch;}
.teacher-section .teacher-card {width: 490px; height: auto; border-radius: 20px; overflow: hidden; border: 2px solid #fff; background-color: #fff;}
.teacher-section .teacher-card a {overflow: hidden; display: block; height: 100%; color: inherit; border-radius: 20px; border: 1px solid #ECEFF4;}
.teacher-section .teacher-thumb {height: 310px; overflow: hidden;}
.teacher-section .teacher-thumb img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.teacher-section .teacher-info {padding: 20px; background-color: #fff; display: flex; flex-direction: column;}
.teacher-section .teacher-info .info-top {display: flex; align-items: flex-start; justify-content: space-between;}
.teacher-section .teacher-info .info-top .label {flex-shrink: 0; padding: 4px 12px;}
.teacher-section .teacher-info .info-top .label span {font-size: 14px; font-weight: 600; color: #fff;}
.teacher-section .teacher-info .info-top .label.magic {background: linear-gradient(180deg, #FEF3C7 0%, #FCE7F3 100%); color: #0B1F3A;}
.teacher-section .teacher-info .info-top .label.magic span {background: linear-gradient(90deg, #4784D4 0%, #1462C8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
.teacher-section .teacher-info .info-top .label.korean {background-color:#1462C8;}
.teacher-section .teacher-info .info-top strong {display: block;font-size: 28px; font-weight: 700; color: #222326;}
.teacher-section .teacher-info .info-top p {margin-top: 8px; font-size: 16px; color: #7C7C7C; word-break: keep-all;}
.teacher-section .teacher-info .info-mid {margin-top: 4px; padding-block: 20px;}
.teacher-section .teacher-info .info-mid li + li {margin-top: 10px;}
.teacher-section .teacher-info .info-mid li {display: flex; align-items: center; column-gap: 14px;}
.teacher-section .teacher-info .info-mid li span {flex-shrink: 0; font-size: 15px; font-weight: 600; color: #888;}
.teacher-section .teacher-info .info-mid li p {word-break: keep-all; font-size: 15px; color: #7C7C7C;}
.teacher-section .teacher-info .info-bot {flex-wrap: wrap; margin-top: 4px; display: flex; align-items: center; gap: 10px;}
.teacher-section .teacher-info .info-bot li {padding: 6px 14px; border-radius: 999px; border: 1px solid #FED7AA; background-color: #FFF7ED; font-size: 15px; font-weight: 500; color: #EA580C;}

@media (hover: hover) {
    .card-list .info-card:hover {box-shadow: 0 0 0 1px #ADADAD4D;}
}
@media screen and (max-width: 1280px) {
    .main-section .section-head h3 {font-size: clamp(28px,3.7vw,48px);}
    .main-notice .notice-list {flex-wrap: wrap; column-gap: 24px;}
    .main-notice .notice-list li {font-size: 16px;}
    .main-notice .notice-list li i img {height: 30px;}
    .result-section .result-list li strong {font-size:clamp(32px,4vw,48px);}
    .main-hero .hero-text h2 {font-size:clamp(36px,5vw,64px);}
    .main-hero .hero-text h2 .txt1 {min-width:clamp(154px,21vw,272px);}
    .main-hero .hero-text h2 .txt2 {min-width:clamp(108px,15vw,192px);}
    .card-list .info-card {width: calc(50% - 24px / 2);}
    .card-list .info-card:nth-child(3):last-child {width: 100%;}
}
@media screen and (max-width: 1024px) {
    .main-notice .notice-list {width: calc(100% - 32px);}
    .main-notice .notice-list li,
    .main-notice .notice-list li span {font-size: 14px;}
    .main-notice .notice-list li i img {height: 24px;}
    .result-section .result-list {flex-wrap: wrap;}
    .result-section .result-list li {width: 50%; padding: 30px 20px;}
    .live-section .live-wrap {display: flex; flex-direction: column;}
    .live-section .live-list,
    .live-section .live-dashboard {width: 100%;}
    .live-section .live-list {flex-direction: unset; flex-wrap: wrap; gap: 30px 20px;}
    .live-section .live-list .info-card {width: calc(50% - 12px);}
}
@media screen and (max-width: 768px) {
    .main-hero {height: calc(100vh - 81px); min-height: 500px;}
    .main-notice .notice-list li,
    .main-notice .notice-list li span {font-size: 12px;}
    .card-list .info-card,.live-section .live-list .info-card {width: 100%;}
    .card-list .info-card .tag-list {height: unset;}
    .book-list .info-card .tag-list {margin-top: unset;}
    .live-section .live-dashboard .dash-top {display: flex; flex-direction: column;}
    .card-list .info-card .card-title {font-size: 20px;}
    .card-list .info-card .card-desc {font-size: 15px;}
}
@media screen and (max-width: 600px) {
    .live-section .live-dashboard .progress-list {display: flex; flex-direction: column;}
}
@media screen and (max-width: 500px) {
    .main-hero .hero-text .btn-wrap {flex-wrap: wrap; row-gap: 16px; justify-content: center;}
    .main-hero .hero-text h2 [data-splitting] .whitespace {width: 10px;}
    .main-notice .notice-list {row-gap: 4px; width: calc(100% - 50px); padding: 10px 0;}
    /* .main-notice .notice-list {width: 100%;}
    .main-notice::after, .main-notice::before {display: none;} */
    .main-notice .notice-list li {row-gap: 2px; flex-direction: column; padding-left: 30px; position: relative; align-items: flex-start;}
    .main-notice .notice-list li i {width: 24px;height: 24px; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
    .main-section .section-head{flex-direction: column;}
    .main-section .section-head > div:has(h3) {width: 100%;}
    .result-section .result-list li {padding: 24px 16px;}
    .live-section .live-dashboard .summary-list {grid-template-columns: repeat(1, 1fr);}
    .live-section .live-dashboard .attendance-card,
    .live-section .live-dashboard .task-card  {padding: clamp(16px, 2.5vw, 24px);}
    .step-section .step-line {display: none;}
    .step-section .step-list {display: flex; flex-direction: column; position: relative; z-index: 1;}
    .step-section .step-list::after {width: 3px; height: 100%; content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%) scaleY(0); transform-origin: top; background: linear-gradient(180deg, rgba(255,244,229,1) 0%, rgba(255,229,159,1) 50%, rgba(255,181,115,1) 100%); z-index: -1;}
    .step-section.is-active .step-list::after { animation: step-line-fill 1.4s ease-out forwards;}
    @keyframes step-line-fill { 0% {transform: translateX(-50%) scaleY(0);} 100% {transform: translateX(-50%) scaleY(1);}    }
    .step-section .step-list li {background-color: #FDFCFA; padding: 10px;}
    .teacher-section .teacher-card {width: 90vw;}
    .teacher-section .teacher-info .info-top {flex-direction: column-reverse; row-gap: 10px;}
    .card-list .info-card .card-title {font-size: 18px;}
    .card-list .info-card .card-desc {font-size: 14px;}
}

@media screen and (max-width: 375px) {
    .main-hero .hero-text h2 {font-size: clamp(26px, 5vw, 64px);}
    .main-hero .hero-text h2 .txt1 {min-width: clamp(120px, 21vw, 272px);}
    .main-hero .hero-text h2 .txt2 {min-width: clamp(90px, 15vw, 192px);}
    .main-hero .hero-text .btn-wrap {row-gap: 10px;}
    .main-hero .hero-text .label {display: none;}
    .book-list .info-card .top-wrap,
    .live-section .live-list .info-card {flex-direction: column; row-gap: 14px;}
    .live-section .live-list .info-card strong,
    .live-section .live-list .info-card p {text-align: center;}
    .live-section .live-dashboard .attendance-week {display: flex; flex-wrap: wrap; gap: 16px;}
    .live-section .live-dashboard .task-list li {flex-direction: column; row-gap: 14px; align-items: flex-start;}
    .main-notice::after, .main-notice::before {display: none;}
    .main-notice .notice-list {width: 100%;}
    .result-section .result-list li {width: 100%;}
    .teacher-section .teacher-info .info-mid li {align-items: flex-start; flex-direction: column; row-gap: 5px;}
}