@charset "utf-8";

/* ===================================================
   (재)헬스케어스파산업진흥원 스파·헬스케어 프로그램
   리뉴얼 메인페이지 CSS - mainCon.css
   =================================================== */

body img {
    position: relative;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.wrap {
    padding: 0px;
    margin: 0px;
    position: relative;
}

i.icon:before {
    display: block;
}

body {
    margin: 0rem;
    line-height: 160%;
    color: #444;
}
body h1 {
    font-size: 3.6rem;
    letter-spacing: -0.15rem;
    line-height: 130%;
}
body h2 {
    font-size: 3rem;
    letter-spacing: -0.1rem;
    line-height: 135%;
}
body h3 {
    font-size: 2.4rem;
    letter-spacing: -0.05rem;
    line-height: 140%;
}
body h4 {
    font-size: 2rem;
    letter-spacing: -0.05rem;
}
body h5 {
    font-size: 1.8rem;
    letter-spacing: -0.03rem;
}
body h6 {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 150%;
}
body p,
body li,
body dd,
body dt,
body a {
    font-size: 1.7rem;
    font-weight: 400;
    color: #555;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: #222;
}
/* 전체 hover 밑줄 제거 - 제목만 허용 */
a:hover {
    text-decoration: none;
}
.noticeTit:hover,
.noticeList li a:hover {
    text-decoration: underline;
}

.blockCenter { margin: 0rem auto; }
.greenTxt { color: #167a68 !important; }
.brownTxt { color: #846335 !important; }
.lightBrownTxt { color: #af8d5d !important; }
.redTxt { color: #e65100 !important; }
.blueTxt { color: #2d6a4f !important; }


/* ===================================================
   TOPZONE CSS
   =================================================== */
#header {
    position: relative;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 0.2rem 1rem rgba(0, 0, 0, 0.06);
}
.topZone {
    max-width: 138rem;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden;
    background-color: #FFF;
}
.topZone .logo {
    position: absolute;
    display: block;
    left: calc(50% - 14.85rem);
    top: 3.5rem;
    background-image: url(../../main/images/spaEdu_logo_20260204.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100%;
    display: block;
    height: 6.7rem;
    width: 29.7rem;
    line-height: 100%;
    overflow: hidden;
}
.topZone .topMenu {
    float: right;
    list-style-type: none;
    margin: 5rem 0rem;
    line-height: 3.5rem;
}
.topZone .topMenu li {
    display: inline-block;
    margin: 0px 1rem;
}
.topZone .topMenu li a {
    color: #777;
    font-size: 1.6rem;
    font-weight: 400;
    transition: color 0.3s ease;
}
.topZone .topMenu li a:hover {
    color: #2d6a4f;
}


/* ===================================================
   MENU CSS
   =================================================== */
.menuZone {
    width: 100%;
    margin: 0px auto;
    background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%);
}
.mainMenu {
    max-width: 122rem;
    margin: 0px auto;
}
.mainMenu ul {
    overflow: hidden;
}
.mainMenu ul li {
    float: left;
}
.mainMenu li a {
    display: block;
    color: #fff;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 5.4rem;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s ease;
}
.mainMenu li a:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}
.mainMenu.three li,
.mainSub.three ul {
    width: calc(100% / 3);
}
.mainMenu.four li,
.mainSub.four ul {
    width: calc(100% / 4);
}
.mainMenu.five li,
.mainSub.five ul {
    width: calc(100% / 5);
}
.mainMenu.six li,
.mainSub.six ul {
    width: calc(100% / 6);
}
.mainMenu.seven li,
.mainSub.seven ul {
    width: calc(100% / 7);
}
.fulldownWrap {
    position: absolute;
    padding: 0;
    width: 100%;
    margin: 0 auto;
    height: 0.1rem;
    z-index: 20;
}
.fulldownMenu {
    position: relative;
    padding: 0;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.08);
}
.fulldownWrap .fulldownMenu div {
    max-width: 122rem;
    width: 100%;
    margin: 0px auto;
}
.fulldownWrap .fulldownMenu div .mainSub {
    overflow: hidden;
    width: 100%;
}
.mainSub ul {
    float: left;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 27.5rem;
}
.mainSub ul:hover {
    background-color: #f4f4f4;
}
.mainSub ul li:hover {
    background-color: #2d6a4f;
}
.mainSub ul li:hover a {
    color: #fff;
}
.mainSub ul:last-child {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.mainSub ul li {
    line-height: 2.4rem;
    padding: 5px 0px;
    margin-bottom: 5px;
    transition: background-color 0.3s ease;
}
.mainSub ul li a {
    font-size: 1.7rem;
    color: #444;
    display: block;
    padding-left: 2rem;
    padding-right: 1rem;
    font-weight: 400;
    white-space: normal;
    word-break: keep-all;
    line-height: 2.4rem;
}
.mainSub ul ul {
    float: none;
}


/* ===================================================
   퀵메뉴 CSS
   =================================================== */
#quickMenu {
    position: relative;
    z-index: 10;
    padding: 6rem 0;
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 40%, #40916c 100%);
}
.quickList {
    justify-content: center !important;
    gap: 2.5rem;
    background-color: transparent;
}
.quickItem {
    display: block;
    width: calc(25% - 2rem);
    max-width: 30rem;
    text-align: center;
    padding: 4rem 2rem 3.5rem;
    background-color: #fff;
    border-radius: 1.4rem;
    transition: all 0.35s ease;
}
.quickItem:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 0.8rem 3rem rgba(45, 106, 79, 0.18);
}
.quickItem .quickIcon {
    width: 7rem;
    height: 7rem;
    margin: 0 auto 2rem;
    border-radius: 50%;
    background-color: #e0f2f1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.quickItem .quickIcon .material-symbols-outlined {
    font-size: 3.4rem;
    color: #2d6a4f;
    transition: color 0.3s ease;
}
.quickItem:hover .quickIcon {
    background: linear-gradient(135deg, #40916c 0%, #2d6a4f 100%);
}
.quickItem:hover .quickIcon .material-symbols-outlined {
    color: #fff;
}
.quickItem strong {
    display: block;
    font-size: 2rem;
    color: #222;
    margin-bottom: 0.6rem;
}
.quickItem span {
    display: block;
    font-size: 1.5rem;
    color: #888;
    line-height: 160%;
    font-weight: 400;
}


/* ===================================================
   공지사항 + 배너 슬라이드 CSS
   =================================================== */
#mainBody {
    padding: 8rem 0 6rem;
    background-color: #f0f8f8;
}
#mainBody > .inner2.flex {
    align-items: stretch;
    gap: 3rem;
}
.noticeWrap {
    width: calc(35% - 1.5rem);
}
.noticeWrap .notice {
    position: relative;
    height: 100%;
    border: none;
    border-radius: 1.2rem;
    padding: 4rem 4.5rem;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}
.noticeWrap .notice:hover {
    box-shadow: 0 0.4rem 2.5rem rgba(0, 0, 0, 0.1);
}
.noticeWrap .notice .noticeHead {
    align-items: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #2d6a4f;
}
.noticeWrap .notice .noticeHead h3 {
    font-size: 2.6rem;
}
.noticeWrap .notice .noticeHead .more {
    display: inline-block;
}
.noticeWrap .notice .noticeHead .more span {
    font-size: 1.6rem;
    color: #2d6a4f;
    font-weight: 500;
    transition: color 0.3s ease;
}
.noticeWrap .notice .noticeHead .more:hover span {
    color: #006064;
}
.noticeWrap .notice .noticeTit {
    width: 100%;
    color: #222;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 150%;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: block;
    margin-bottom: 0.8rem;
    transition: color 0.3s ease;
}
.noticeWrap .notice .noticeTit:hover {
    color: #2d6a4f;
}
.noticeWrap .notice .noticeCon {
    flex: 1;
    width: 100%;
    color: #666;
    font-size: 1.6rem;
    line-height: 2.6rem;
    font-weight: 400;
    word-break: keep-all;
    margin-top: 1.5rem;
}
.noticeWrap .notice .dateTxt {
    display: block;
    font-size: 1.5rem;
    font-weight: 400;
    color: #bbb;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.noticeWrap .notice hr {
    margin: 2rem 0;
}

.noticeWrap .notice .noticeList {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.noticeWrap .notice .noticeList li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    line-height: 150%;
    margin: 1.2rem 0rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.noticeWrap .notice .noticeList li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.noticeWrap .notice .noticeList li a {
    width: calc(100% - 10rem);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.7rem;
    color: #555;
    transition: color 0.3s ease;
}
.noticeWrap .notice .noticeList li a:hover {
    color: #2d6a4f;
}
.noticeWrap .notice .noticeList li .dateTxt {
    width: 10rem;
    color: #bbb;
    margin-bottom: 0rem;
    margin-top: 0;
    text-align: right;
    font-size: 1.5rem;
}

/* 공지사항 하단 연락처 정보 */
.noticeInfo {
    margin-top: auto;
    padding-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.noticeInfo .infoItem {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 2.5rem;
    background: linear-gradient(135deg, #e0f4f5 0%, #f0fafb 100%);
    border-radius: 1.2rem;
}
.noticeInfo .infoItem .material-symbols-outlined {
    font-size: 3.6rem;
    color: #2d6a4f;
    flex-shrink: 0;
    background: #fff;
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0.2rem 0.8rem rgba(45, 106, 79, 0.15);
}
.noticeInfo .infoItem strong {
    display: block;
    font-size: 1.5rem;
    color: #2d6a4f;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05rem;
}
.noticeInfo .infoItem p {
    font-size: 2.2rem;
    color: #222;
    font-weight: 800;
    margin: 0;
    line-height: 130%;
    letter-spacing: -0.03rem;
}


/* ===================================================
   배너 슬라이드 CSS
   =================================================== */
.bannerSlide {
    position: relative;
    width: calc(65% - 1.5rem);
    aspect-ratio: 1 / 1;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 0.2rem 1.5rem rgba(0, 0, 0, 0.06);
}
.bannerSlide .swiper-wrapper {
    width: 100%;
    height: 100%;
}
.bannerSlide .swiper-slide {
    height: 100%;
}
.bannerSlide .swiper-slide .img,
.bannerSlide .swiper-slide .img a,
.bannerSlide .swiper-slide .img img {
    width: 100%;
    height: 100%;
    display: block;
}
.bannerSlide .swiper-slide .img img {
    object-fit: cover;
}

.bannerSlideCon {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    overflow: hidden;
    bottom: 2rem;
    right: 2rem;
    width: auto;
    border-radius: 2.1rem;
    padding: 0rem 1.2rem;
    height: 4.2rem;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}
.bannerSlideCon .swiper-button-next,
.bannerSlideCon .swiper-button-prev,
.bannerSlideCon .swiper-pagination,
.bannerSlideCon #bannerStopBtn,
.bannerSlideCon #bannerStartBtn {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.bannerSlideCon .swiper-button-next,
.bannerSlideCon .swiper-button-prev {
    width: 3rem;
}
.bannerSlideCon .swiper-button-next:after {
    font-family: 'Material Symbols Outlined';
    content: '\e5cc';
    font-size: 2.4rem;
    color: rgba(255, 255, 255, 0.9);
    font-variation-settings: 'wght' 300;
}
.bannerSlideCon .swiper-button-prev:after {
    font-family: 'Material Symbols Outlined';
    content: '\e5cb';
    font-size: 2.4rem;
    color: rgba(255, 255, 255, 0.9);
    font-variation-settings: 'wght' 300;
}
.bannerSlideCon .swiper-pagination {
    width: auto;
    min-width: 4rem;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 4rem;
    text-align: center;
}
.bannerSlideCon #bannerStopBtn,
.bannerSlideCon #bannerStartBtn {
    width: 3rem;
    font-size: 0;
}
.bannerSlideCon #bannerStopBtn:after {
    font-family: 'Material Symbols Outlined';
    content: '\e034';
    font-size: 2.4rem;
    color: rgba(255, 255, 255, 0.9);
    font-variation-settings: 'wght' 300;
}
.bannerSlideCon #bannerStartBtn:after {
    font-family: 'Material Symbols Outlined';
    content: '\e037';
    font-size: 2.4rem;
    color: rgba(255, 255, 255, 0.9);
    font-variation-settings: 'wght' 300;
}


/* ===================================================
   온천건강프로그램 수강목록 CSS
   =================================================== */
#lectureWrap {
    background-color: #e8f5f3;
    padding: 8rem 0;
}
#lectureWrap .titZone {
    text-align: center;
    margin-bottom: 4rem;
}
#lectureWrap .titZone .titSub {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d6a4f;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}
#lectureWrap .titZone h1 {
    margin-bottom: 0.8rem;
}
#lectureWrap .titZone p {
    margin-top: 0.5rem;
    font-size: 1.7rem;
    color: #888;
}
#lectureWrap .tabZone {
    margin-bottom: 5rem;
    display: flex;
    border-bottom: 2px solid #dde3ea;
}
/* 메뉴 1개일 때 탭 숨김 */
#lectureWrap .tabZone.one {
    display: none;
}
/* 메뉴 개수별 균일 폭 */
#lectureWrap .tabZone.two a { width: calc(100% / 2); }
#lectureWrap .tabZone.three a { width: calc(100% / 3); }
#lectureWrap .tabZone.four a { width: calc(100% / 4); }
#lectureWrap .tabZone.five a { width: calc(100% / 5); }
#lectureWrap .tabZone.six a { width: calc(100% / 6); }

#lectureWrap .tabZone a {
    display: block;
    float: none;
    flex: none;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 0 1rem;
    line-height: 5rem;
    font-size: 1.8rem;
    font-weight: 500;
    color: #888;
    background-color: #fff;
    text-align: center;
    transition: all 0.25s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: -2px;
}
#lectureWrap .tabZone a:last-child {
    border-right: none;
}
#lectureWrap .tabZone a:hover {
    color: #2d6a4f;
    background-color: transparent;
    border-bottom-color: #2d6a4f;
}
#lectureWrap .tabZone a.on {
    background-color: #fff;
    border-bottom: 3px solid #2d6a4f;
    color: #2d6a4f;
    font-weight: 700;
}
#lectureWrap .lectureList.flex {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 3rem;
}
/* 카드 아이템 */
#lectureWrap .lectureList .item {
    display: flex;
    flex-direction: column;
    width: calc((100% - 6rem) / 3);
    min-width: 0;
    border-radius: 1.2rem;
    background-color: #fff;
    padding: 2.5rem 3rem 3rem;
    transition: all 0.35s ease;
    box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    border: 1px solid #eee;
    cursor: default;
}
#lectureWrap .lectureEmpty {
    display: none;
    text-align: center;
    padding: 8rem 2rem;
    color: #aaa;
}
#lectureWrap .lectureEmpty .material-symbols-outlined {
    font-size: 6rem;
    color: #ccc;
    margin-bottom: 2rem;
    display: block;
}
#lectureWrap .lectureEmpty p {
    font-size: 1.8rem;
    color: #999;
}
#lectureWrap .lectureList .item:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 0.6rem 2rem rgba(45, 106, 79, 0.12);
    border-color: #b2dfdb;
}

/* 상태 뱃지 */
#lectureWrap .lectureList .item .state {
    display: inline-block;
    align-self: flex-start;
    width: fit-content;
    font-size: 1.5rem;
    line-height: 3.2rem;
    padding: 0 1.8rem;
    height: 3.2rem;
    border-radius: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    font-weight: 600;
}
#lectureWrap .lectureList .item.end .state {
    color: #787878;
    background-color: #e7e7e7;
}
#lectureWrap .lectureList .item.ing .state {
    color: #fff;
    background: linear-gradient(135deg, #26a69a 0%, #2d6a4f 100%);
}
#lectureWrap .lectureList .item.wait .state {
    color: #fff;
    background-color: #90a4ae;
}
#lectureWrap .lectureList .item.done .state {
    color: #fff;
    background-color: #b0bec5;
}
#lectureWrap .lectureList .item.done {
    opacity: 0.65;
    position: relative;
}
#lectureWrap .lectureList .item.done:hover {
    opacity: 0.85;
}

/* 마감 버튼 */
#lectureWrap .lectureList .item .itemBtn a.disabled {
    background: #cfd8dc;
    color: #fff;
    cursor: default;
    pointer-events: none;
}

/* 카드 헤더 (과목명, 참가비) */
#lectureWrap .lectureList .item .itemHead {
    padding-bottom: 1.8rem;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 1.8rem;
}
#lectureWrap .lectureList .item .itemHead .label {
    display: block;
    font-size: 1.4rem;
    color: #aaa;
    margin-bottom: 0.4rem;
    font-weight: 400;
}
#lectureWrap .lectureList .item .tit {
    display: block;
    width: 100%;
    color: #333;
    font-size: 2rem;
    line-height: 2.8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    text-underline-offset: 0.3rem;
    text-decoration-color: #ccc;
    margin-bottom: 0.6rem;
}
#lectureWrap .lectureList .item .fee {
    display: block;
    font-size: 1.5rem;
    color: #2d6a4f;
    font-weight: 400;
}
#lectureWrap .lectureList .item .fee b {
    font-weight: 700;
}

/* 카드 본문 (itemCon) */
#lectureWrap .lectureList .item .itemCon {
    margin: 0;
    flex: 1;
    list-style: none;
    padding: 0;
}
#lectureWrap .lectureList .item .itemCon li {
    position: relative;
    padding-left: 10rem;
    font-size: 1.6rem;
    line-height: 2.8rem;
    font-weight: 400;
    color: #444;
    word-break: keep-all;
}
#lectureWrap .lectureList .item .itemCon li b {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    font-weight: 500;
    color: #999;
    font-size: 1.5rem;
}
#lectureWrap .lectureList .item .itemCon li span {
    font-weight: 600;
    color: #333;
}
#lectureWrap .lectureList .item .itemCon li em {
    font-style: normal;
    font-weight: 700;
}

/* 날짜 그룹 */
#lectureWrap .lectureList .item .itemCon li.dateGroup {
    padding-left: 0;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #f0f0f0;
}
#lectureWrap .lectureList .item .itemCon li.dateGroup .dateRow {
    display: flex;
    align-items: baseline;
    line-height: 2.4rem;
}
#lectureWrap .lectureList .item .itemCon li.dateGroup .dateRow .label {
    display: inline-block;
    font-size: 1.4rem;
    color: #aaa;
    font-weight: 400;
    min-width: 6.5rem;
    flex-shrink: 0;
}
#lectureWrap .lectureList .item .itemCon li.dateGroup .dateRow .dateVal {
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
}

/* 신청하기 버튼 */
#lectureWrap .lectureList .item .itemBtn {
    margin-top: 2rem;
    text-align: right;
}
#lectureWrap .lectureList .item .itemBtn a {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #26a69a 0%, #2d6a4f 100%);
    border-radius: 0.6rem;
    transition: all 0.3s ease;
}
#lectureWrap .lectureList .item .itemBtn a:hover {
    background: linear-gradient(135deg, #2d6a4f 0%, #005f6b 100%);
    box-shadow: 0 0.3rem 1rem rgba(45, 106, 79, 0.3);
}

/* 상태별 카드 스타일 차이 */
#lectureWrap .lectureList .item.wait .tit {
    color: #999;
    text-decoration-color: #ddd;
}
#lectureWrap .lectureList .item.wait .fee {
    color: #bbb;
}
#lectureWrap .lectureList .item.wait .itemCon li span,
#lectureWrap .lectureList .item.wait .itemCon li.dateGroup .dateRow .dateVal {
    color: #999;
    font-weight: 500;
}
#lectureWrap .lectureList .item.wait .itemBtn a {
    background: #bbb;
}
#lectureWrap .lectureList .item.wait .itemBtn a:hover {
    background: #999;
    box-shadow: none;
}
#lectureWrap .lectureList .item.end .tit {
    color: #bbb;
    text-decoration-color: #e5e5e5;
}
#lectureWrap .lectureList .item.end .fee {
    color: #ccc;
}
#lectureWrap .lectureList .item.end .itemCon li,
#lectureWrap .lectureList .item.end .itemCon li span,
#lectureWrap .lectureList .item.end .itemCon li.dateGroup .dateRow .dateVal {
    color: #ccc;
}
#lectureWrap .lectureList .item.end .itemBtn a {
    background: #ddd;
    cursor: default;
}

/* blueTxt, redTxt */
#lectureWrap .lectureList .item.end .redTxt,
#lectureWrap .lectureList .item.end .blueTxt,
#lectureWrap .lectureList .item.wait .redTxt,
#lectureWrap .lectureList .item.wait .blueTxt {
    color: #999 !important;
}



/* ===================================================
   TOP 버튼 CSS
   =================================================== */
#topBtn {
    position: fixed;
    bottom: 4rem;
    right: 3rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #2d6a4f;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0.3rem 1rem rgba(45, 106, 79, 0.35);
}
#topBtn.show {
    opacity: 1;
    visibility: visible;
}
#topBtn span {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05rem;
}
#topBtn:hover {
    background-color: #006064;
    transform: translateY(-0.3rem);
}


/* ===================================================
   FOOTER CSS
   =================================================== */
footer {
    padding: 2rem 0 4rem 0;
    background-color: #111;
    color: #ccc;
}
footer .inner2 {
    overflow: visible;
}
footer hr {
    border-top: 1px solid #59605E;
    margin-bottom: 3rem;
}
.footerMenu {
    margin-bottom: 2rem;
}
.footerMenu li {
    display: inline-block;
}
.footerMenu li:last-child {
    margin-right: 0px;
}
.footerMenu li a {
    font-size: 1.6rem;
    line-height: 140%;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 2rem;
    transition: color 0.3s ease;
}
.footerMenu li a:hover {
    border-bottom: 1px dotted #969696;
    color: #fff;
}
.footerMenu li a strong {
    color: #fff;
}
.copyInfo {
    background-image: url(../../main/images/bottom_logo.png);
    background-position: right 1rem top;
    background-repeat: no-repeat;
    padding: 2rem 0;
}
.copySpan {
    font-size: 1.5rem;
    line-height: 160%;
    display: block;
    font-weight: 300;
    padding-left: 2rem;
    color: rgba(255, 255, 255, 0.65);
}
.copySpan .nbsp {
    display: inline-block;
    margin: 0 1rem;
}
footer .ui.selection.dropdown {
    position: absolute;
    top: -0.7rem;
    right: 0;
    width: 23rem;
    background-color: #111;
    color: #fff;
    border-radius: 0;
    z-index: 5;
    border: none;
}
footer .ui.selection.dropdown>.dropdown.icon {
    color: #ffffff;
    width: 3.2rem;
    height: 3.2rem;
    line-height: 3.2rem;
    background-color: #999999;
    border-radius: 1.6rem;
    padding: 0;
    margin: 0;
    font-family: Icons;
    font-size: 1.6rem;
    top: 0.2rem;
    right: 1rem;
}
.ui.dropdown>.dropdown.icon:before {
    content: "\f078";
    display: block;
}
footer .ui.selection.dropdown:hover,
footer .ui.selection.dropdown:focus,
footer .ui.selection.dropdown:focus .menu,
footer .ui.selection.active.dropdown,
footer .ui.selection.active.dropdown .menu,
footer .ui.selection.active.dropdown:hover .menu {
    border: 1px solid #676767;
}
footer .ui.selection.active.dropdown:hover {
    border-color: #bababa;
}
footer .ui.default.dropdown:not(.button)>.text,
footer .ui.dropdown:not(.button)>.default.text {
    font-size: 1.6rem;
    color: rgba(256,256,256,0.87);
}
.ui.selection.dropdown .menu>.item {
    font-size: 1.5rem;
    line-height: 140%;
    padding: 1rem !important;
}


/* ===================================================
   반응형 CSS - 1399px 이하
   =================================================== */
@media (max-width: 1399px) {
    .inner1 {
        padding: 0rem 2rem;
    }
    #lectureWrap .tabZone {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    #lectureWrap .tabZone a {
        font-size: 1.5rem;
        flex: none;
        width: auto !important;
        padding: 0 2rem;
        line-height: 4.4rem;
    }
    #lectureWrap .lectureList.flex {
        gap: 3rem;
    }
    #lectureWrap .lectureList .item {
        width: calc((100% - 3rem) / 2);
        border-radius: 1.2rem;
        padding: 3rem;
    }
    .quickItem {
        width: calc(25% - 2.25rem);
    }
}

/* ===================================================
   반응형 CSS - 1199px 이하
   =================================================== */
@media (max-width: 1199px) {
    .menuZone,
    .fulldownWrap {
        display: none;
    }
    .topZone .logo {
        left: calc(50% - 14.85rem);
        top: 1.65rem;
        display: block;
        height: 6.7rem;
        width: 29.7rem;
    }
    .topZone .topMenu {
        margin: 3rem 0rem;
        line-height: 4rem;
        padding-right: 7rem;
    }
    .mLogo {
        display: block;
        background-color: #fff;
        height: 8.6rem;
        background-image: url(../../main/images/spaEdu_logo_20260204.png);
        background-size: 20rem;
        background-repeat: no-repeat;
        background-position: 2rem 2rem;
        margin-bottom: 2rem;
    }
    .quickItem {
        width: calc(50% - 1rem);
        padding: 3rem 1.5rem 2.5rem;
    }
    .quickItem .quickIcon {
        width: 6rem;
        height: 6rem;
    }
    .quickItem .quickIcon .material-symbols-outlined {
        font-size: 3rem;
    }
    .quickItem strong {
        font-size: 1.8rem;
    }
    #mainBody {
        padding: 5rem 0;
    }
    #mainBody > .inner2.flex {
        flex-direction: column;
        gap: 3rem;
    }
    .noticeWrap,
    .bannerSlide {
        width: 100%;
        max-width: 98rem;
        margin: 0 auto;
    }
    .bannerSlide {
        aspect-ratio: 1 / 1;
    }
    #lectureWrap {
        padding: 5rem 0;
    }
}

/* ===================================================
   반응형 CSS - 1023px 이하
   =================================================== */
@media (max-width: 1023px) {
    body h1 {
        font-size: 3.6rem;
        letter-spacing: -0.2rem;
    }
    body h2 {
        font-size: 3rem;
        letter-spacing: -0.1rem;
    }
    body h3 {
        font-size: 2.7rem;
        letter-spacing: -0.1rem;
    }
    body h4 {
        font-size: 2.4rem;
        letter-spacing: -0.1rem;
    }
    body h5 {
        font-size: 2.2rem;
        letter-spacing: -0.1rem;
    }
    body h6 {
        font-size: 2rem;
    }
    body p,
    body li,
    body dd,
    body dt,
    body a {
        font-size: 1.6rem;
    }

    .inner1 {
        padding: 0rem 1rem;
    }
    .quickItem {
        width: calc(50% - 1rem);
        padding: 2.5rem 1.5rem 2rem;
    }
    .quickItem .quickIcon {
        width: 5.5rem;
        height: 5.5rem;
    }
    .quickItem .quickIcon .material-symbols-outlined {
        font-size: 2.8rem;
    }

    .topZone {
        height: 11rem;
    }
    .topZone .logo {
        left: calc(50% - 12.65rem);
        top: 5rem;
        height: 5.7rem;
        width: 25.3rem;
    }
    .topZone .topMenu {
        margin: 1rem 0rem 0rem 0rem;
        line-height: 2.4rem;
        padding-right: 0rem;
    }
    .topZone .topMenu li a {
        font-size: 1.4rem;
    }
    .menu-btn {
        top: 5.7rem;
        right: 1rem;
    }

    #mainBody {
        padding: 3rem 0;
    }
    .noticeWrap .notice {
        border-radius: 0.8rem;
        padding: 3rem;
    }
    .bannerSlide {
        border-radius: 0.8rem;
        aspect-ratio: 1 / 1;
    }
    .tabZone {
        margin-bottom: 3rem;
    }
    #lectureWrap .titZone {
        margin-bottom: 2rem;
    }

    #lectureWrap .lectureList.flex {
        gap: 2rem;
    }
    #lectureWrap .lectureList .item {
        width: calc((100% - 2rem) / 2);
        border-radius: 0.8rem;
        padding: 3rem;
    }
    footer {
        padding-top: 6.2rem;
    }
    footer .ui.selection.dropdown {
        position: absolute;
        top: -6rem;
        right: 0;
        line-height: 150%;
        width: 100%;
        border-bottom: 1px solid rgba(256, 256, 256, 0.15);
    }
    footer .ui.selection.dropdown>.dropdown.icon {
        width: 2.8rem;
        height: 2.8rem;
        line-height: 2.8rem;
        top: 0.5rem;
    }
    .footerMenu li a {
        margin: 0 3rem 0 0;
    }
    .copyInfo {
        background-position: 1rem top;
        background-size: 24rem;
        padding: 7rem 0 0 0;
    }
    .copySpan {
        font-size: 1.5rem;
        padding-left: 1rem;
    }
}

/* ===================================================
   반응형 CSS - 767px 이하
   =================================================== */
@media (max-width: 767px) {
    body h1 {
        font-size: 3.2rem;
        letter-spacing: -0.2rem;
    }
    body h2 {
        font-size: 2.8rem;
        letter-spacing: -0.1rem;
    }
    body h3 {
        font-size: 2.5rem;
        letter-spacing: -0.1rem;
    }
    body h4 {
        font-size: 2.3rem;
        letter-spacing: -0.1rem;
    }
    body h5 {
        font-size: 2rem;
        letter-spacing: -0.1rem;
    }
    body h6 {
        font-size: 1.8rem;
    }
    body p,
    body li,
    body dd,
    body dt,
    body a {
        font-size: 1.5rem;
    }

    .quickItem {
        width: calc(50% - 1rem);
        padding: 2rem 1rem 1.5rem;
    }
    .quickItem .quickIcon {
        width: 5rem;
        height: 5rem;
    }
    .quickItem .quickIcon .material-symbols-outlined {
        font-size: 2.6rem;
    }
    .quickItem strong {
        font-size: 1.6rem;
    }
    .quickItem span {
        font-size: 1.3rem;
    }

    #mainBody {
        padding: 2.5rem 0;
    }
    .noticeWrap .notice {
        padding: 2rem;
    }
    .noticeWrap .notice .noticeHead h3 {
        font-size: 2.4rem;
    }
    .noticeWrap .notice .noticeTit {
        font-size: 2rem;
    }
    .noticeWrap .notice hr {
        margin: 1.5rem 0;
    }
    .bannerSlide {
        aspect-ratio: 1 / 1;
    }

    #lectureWrap .tabZone a {
        line-height: 2.4rem;
        padding: 1rem 2rem;
    }
    #lectureWrap .lectureList.flex {
        gap: 2rem;
    }
    #lectureWrap .lectureList .item {
        width: 100%;
        border-radius: 0.8rem;
        padding: 2rem;
    }
    #lectureWrap .lectureList .item .itemCon li {
        padding-left: 9rem;
    }

    #topBtn {
        bottom: 2rem;
        right: 2rem;
        width: 4.4rem;
        height: 4.4rem;
    }
    #topBtn span {
        font-size: 1.2rem;
    }
}


/* ===================================================
   모바일 메뉴 (pushy) CSS
   =================================================== */
.menu-btn, .pushy.pushy-right {
    display: none;
}

@media (max-width: 1199px) {
    .menu-btn, .pushy.pushy-right {
        display: block;
    }
    .menu-btn {
        width: 4rem;
        color: #fff;
        text-align: center;
        cursor: pointer;
        position: absolute;
        top: 3rem;
        right: 2rem;
        font-weight: bold;
        background-color: #2d6a4f;
        line-height: 4rem;
    }
    .wrap #gnb {
        display: none;
    }
    .pushy {
        position: fixed;
        width: 30rem;
        height: 100%;
        top: 0;
        z-index: 9999;
        overflow: auto;
        visibility: hidden;
        -webkit-overflow-scrolling: touch;
        background-color: #2d6a4f;
    }
    .pushy a {
        font-size: 1.7rem;
        font-weight: 500;
        display: block;
        color: #ffff;
        padding: 1.5rem 3rem;
        text-decoration: none;
        outline: 0;
    }
    .pushy li li a {
        position: relative;
        font-size: 1.5rem;
        padding: 0.8rem 4rem;
    }
    .pushy .pushy-link a {
        font-size: 1.4rem;
    }
    .pushy .pushy-submenu .pushy-submenu ul {
        margin-bottom: 10px;
    }
    .pushy .pushy-submenu .pushy-submenu a {
        padding: 15px 30px 8px 30px;
    }
    .pushy .pushy-submenu .pushy-submenu .pushy-link a {
        font-size: 13px;
        font-weight: 400;
        color: #C7DAD2;
        padding: 8px 20px 8px 40px;
        background-image: url(../../main/images/dot.gif);
        background-repeat: no-repeat;
        background-position: 30px 14px;
    }
    .pushy a:hover {
        color: #FFF;
    }
    .pushy ul:first-child {
        margin-top: 10px;
    }
    .pushy.pushy-left {
        left: 0;
    }
    .pushy.pushy-right {
        right: 0;
    }

    /* Menu Movement */
    .pushy-left {
        -webkit-transform: translate3d(-30rem, 0, 0);
        -ms-transform: translate3d(-30rem, 0, 0);
        transform: translate3d(-30rem, 0, 0);
    }
    .pushy-open-left #container,
    .pushy-open-left .push {
        -webkit-transform: translate3d(30rem, 0, 0);
        -ms-transform: translate3d(30rem, 0, 0);
        transform: translate3d(30rem, 0, 0);
    }
    .pushy-right {
        -webkit-transform: translate3d(30rem, 0, 0);
        -ms-transform: translate3d(30rem, 0, 0);
        transform: translate3d(30rem, 0, 0);
    }
    .pushy-open-right #container,
    .pushy-open-right .push {
        -webkit-transform: translate3d(-30rem, 0, 0);
        -ms-transform: translate3d(-30rem, 0, 0);
        transform: translate3d(-30rem, 0, 0);
    }
    .pushy-open-left .pushy,
    .pushy-open-right .pushy {
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    /* Menu Transitions */
    #container,
    .pushy,
    .push {
        transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    }

    /* Site Overlay */
    .site-overlay {
        display: none;
    }
    .pushy-open-left .site-overlay,
    .pushy-open-right .site-overlay {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9998;
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-animation: fade 500ms;
        animation: fade 500ms;
    }

    /* Submenu Appearance */
    .pushy-submenu ul {
        padding-left: 15px;
        transition: max-height 0.2s ease-in-out;
    }
    .pushy-submenu ul .pushy-link {
        transition: opacity 0.2s ease-in-out;
    }
    .pushy-submenu > a {
        position: relative;
    }
    .pushy-submenu > a::after {
        content: '';
        display: block;
        height: 11px;
        width: 8px;
        position: absolute;
        top: 50%;
        right: 15px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        transition: transform 0.2s;
        background-image: url(../../main/images/arrow.svg);
        background-repeat: no-repeat;
    }

    /* Submenu Movement */
    .pushy-submenu-closed ul {
        max-height: 0;
        overflow: hidden;
    }
    .pushy-submenu-closed .pushy-link {
        opacity: 0;
    }
    .pushy-submenu-open ul {
        max-height: 1000px;
    }
    .pushy-submenu-open .pushy-link {
        opacity: 1;
    }
    .pushy-submenu-open a::after {
        -webkit-transform: translateY(-50%) rotate(90deg);
        -ms-transform: translateY(-50%) rotate(90deg);
        transform: translateY(-50%) rotate(90deg);
    }
    .no-csstransforms3d .pushy-submenu-closed ul {
        max-height: none;
        display: none;
    }

    .wrap nav .pushy-submenu a:before {
        position: absolute;
        right: 2.2rem;
        top: 2.3rem;
        display: block;
        width: 1rem;
        height: 0.2rem;
        background: #ffffff;
        content: "";
        -webkit-transition: all 0.1s ease-out;
        -moz-transition: all 0.1s ease-out;
        -ms-transition: all 0.1s ease-out;
        -o-transition: all 0.1s ease-out;
        transition: all 0.1s ease-out;
    }
    .wrap nav .pushy-submenu a:after {
        position: absolute;
        right: 2.6rem;
        top: 2.4rem;
        z-index: 5;
        display: block;
        height: 1rem;
        width: 0.2rem;
        background: #ffffff;
        content: "";
        -webkit-transition: all 0.1s ease-out;
        -moz-transition: all 0.1s ease-out;
        -ms-transition: all 0.1s ease-out;
        -o-transition: all 0.1s ease-out;
        transition: all 0.1s ease-out;
    }
    .wrap nav .pushy-submenu.pushy-submenu-open > a::before,
    .wrap nav .pushy-submenu.pushy-submenu-open > a::after {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .wrap nav .pushy-submenu li a:after {
        display: none;
    }
    .wrap nav .pushy-submenu li a:before {
        content: "";
        position: absolute;
        display: block;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        background-color: rgba(256, 256, 256, 0.5);
        top: 1.7rem;
        left: 3rem;
        right: auto;
    }
}

@keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@-webkit-keyframes fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}