@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Yuji+Boku&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.cdnfonts.com/css/times-new-roman');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.cdnfonts.com/css/canela-text-trial');
@import url('https://fonts.cdnfonts.com/css/nanumsquare-neo');

html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html {
    height: 100%;
    margin: 0; 
    background-color: #ffffff !important;
    color-scheme: light;
}

body {
    height: 100%;
    margin: 0;
    min-height: 100vh;
    position: relative;
    font-family: "Pretendard Variable";
    color: #222222;
    word-break: keep-all;
    letter-spacing:-0.2px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff !important;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, p {
    margin-bottom: 0;
}

a {
    text-decoration:none;
    color:inherit;
}

.font-pretendard {
    font-family: "Pretendard Variable";
}

.font-neo {
    font-family: 'NanumSquare Neo', sans-serif;
}

.gray-01 {
    color:#7E848C
}

.gray-02 {
    color:#989EA6
}

.gray-03 {
    color:#B4B8BF
}

.gray-05 {
    color:#525252
}

.gray-04 {
    color:#2c2c2c
}

.form-select {
    font-size: 1rem;
    color: #2c2c2c;
    background-color: #fff !important;
    background-clip: padding-box;
    border: 1px solid #B9B9B9;
    appearance: none;
    border-radius: 4px;
    text-indent:4px;
}

.form-select:focus {
    color: #2c2c2c;
    background-color: #fff;
    border-color: #525252;
    outline: 0;
    box-shadow: unset;
}

main {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.main_fullscreen {
    max-width: unset;
    padding: 0;
}


.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    padding-right: calc(var(--bs-gutter-x)* 0.7);
    padding-left: calc(var(--bs-gutter-x)* 0.7);
    max-width:1200px;
}

@media (max-width: 575.98px) {
    .container.mobile-nogutter{
        padding-right: calc(var(--bs-gutter-x)* 0);
        padding-left: calc(var(--bs-gutter-x)* 0);
    }
    
}

.nav-link {
    color: #15171A;
    padding: 4px;
    margin: 0px 16px;
    font-size:16px;
    font-weight:500
}


@media (max-width: 1200px) {
    .nav-link {
        color: #15171A;
        font-weight: 500;
        padding: 4px;
        margin: 0px 8px;
        font-size:16px;
    }
}

.link-icon {
    color:#3561ff;
    display:block;
    font-size:15px;
    padding: 5px 0px 0px 12px !important
}


@media (min-width: 1200px) {
    .nav-link:hover {
        color: #0d6efd
    }
}


@media (min-width: 1200px) {
    .sub-link:hover {
        color: #0d6efd !important;
        font-weight:600 !important;
        text-decoration: underline;
    }
}

.submenu-sm-title {
    padding: 0px 12px;
    color: gray;
    font-size: 13px;
    font-weight: 600;
}

.nav-link.sub-link {
    color: #15171A;
    font-weight:600;
    font-size:17px;
    margin-left: 8px !important;
}

.sub-link-txt {
    padding: 0px 12px;
    font-size: 14px;
    color: #666e7d;
    font-weight: 500;
    text-wrap: wrap;
}

.submenu-btn {
    border: 1px solid #3561ff;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 21px;
    color: #3561ff;
}

.flex-1 {
    flex-grow: 1;
}

/*폰트 사이즈*/

.font-lora {
    font-family: 'Lora', serif; 
}

.logo-title {
    transform: translate(0px, 0px);
}

@media (min-width: 1200px) {
    .logo-title {
        transform: translate(0px, -1px);
    }
    
}

.display-about {
    font-size: calc(2.625rem + 4.5vw);
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .display-about {
        font-size: 8rem;
    }
}

.fs-base {
    font-size: 16px !important;
    line-height: 26px !important;
}

@media (min-width: 1024px) {
    .fs-base {
        font-size: 18px !important;
        line-height: 30px !important;
    }
}

.fs-book-title {
    color: #15171A;
    font-size: 24px;
    line-height: 34px;
    font-weight:600; 
}

@media (min-width: 1024px) {
    .fs-book-title {
        font-size: 32px;
    }
}

.fs-title {
    color: #15171A;
    font-size: 26px;
    line-height: 34px;
    font-weight:600;
}

@media (min-width: 1024px) {
    .fs-title {
        font-size: 36px;
        line-height: 50px
    }
}

.fs-sub-title {
    color: #15171A;
    font-size: 26px;
    line-height: 34px;
    font-weight:600;
}

@media (min-width: 1024px) {
    .fs-sub-title {
        font-size: 36px;
        line-height: 50px
    }
}

.fs-title-teacher {
    color: #15171A;
    font-size: 22px;
    line-height: 32px;
    font-weight:600;
}

@media (min-width: 1200px) {
    .fs-title-teacher {
        font-size: 40px;
        line-height: 54px
    }
}

.fs-semi-title {
    color: #15171A;
    font-size: 20px;
    line-height: 34px;
    font-weight:500;
}

@media (min-width: 1024px) {
    .fs-semi-title {
        color: #15171A;
        font-size: 24px;
    }
}

.fs-md-title {
    font-size:22px;
}

@media (min-width: 1024px) {
    .fs-md-title {
        font-size:28px;
    }
}

.fs-22px-18px {
    font-size:18px;
}

@media (min-width: 1024px) {
    .fs-22px-18px  {
        font-size:22px;
    }
}

.fs-24px-20px {
    font-size:20px;
}

@media (min-width: 1024px) {
    .fs-24px-20px {
        font-size:24px;
    }
}

.fs-22px {
    font-size:22px !important;
}

.fs-22px-20px {
    font-size:20px;
}

@media (min-width: 1024px) {
    .fs-22px-20px {
        font-size:22px;
    }
}


.fs-22px-18px {
    font-size:18px;
}

@media (min-width: 1024px) {
    .fs-22px-18px {
        font-size:22px;
    }
}

.fs-26px-20px {
    font-size:20px;
}

@media (min-width: 1024px) {
    .fs-26px-20px {
        font-size:26px;
    }
}

.fs-20px-18px{
    font-size:18px;
}

@media (min-width: 1200px) {
    .fs-20px-18px{
        font-size:20px;
    }
}

.fs-20px-19px{
    font-size:19px;
}

@media (min-width: 1200px) {
    .fs-20px-19px{
        font-size:20px;
    }
}

.fs-18px-16px{
    font-size:16px !important;
}

@media (min-width: 1200px) {
    .fs-18px-16px{
        font-size:18px !important;
    }
}

.fs-17px-16px{
    font-size:16px;
}

@media (min-width: 1200px) {
    .fs-17px-16px{
        font-size:17px;
    }
}

.fs-34px-22px{
    font-size:22px;
}

@media (min-width: 1200px) {
    .fs-34px-22px{
        font-size:34px;
    }
}

.fs-17px-15px{
    font-size:15px;
}

@media (min-width: 1200px) {
    .fs-17px-15px{
        font-size:17px;
    }
}

.fs-30px-22px{
    font-size:22px
}

@media (min-width: 1024px) {
    .fs-30px-22px{
        font-size:30px
    }
}

.fs-20px-17px{
    font-size:17px;
}

@media (min-width: 1200px) {
    .fs-20px-17px{
        font-size:20px;
    }
}

.fs-30px {
    font-size:30px;
}

.fs-38px {
    font-size: 38px;
}

.fs-20px-16px{
    font-size:16px !important
}

@media (min-width: 1200px) {
    .fs-20px-16px{
        font-size:20px !important
    }
}

.mb-24px {
    margin-bottom: 24px
}





@media (min-width: 575.98px) {
    .fs-about-top {
        font-size:20px;
    }
}

@media (min-width: 1024px) {
    .fs-about-top {
        font-size:22px;
    }
}

.py-100px-60px {
    padding-top: 60px; 
    padding-bottom: 60px;
}

@media (min-width: 1200px) {
    .py-100px-60px {
        padding-top: 100px; 
        padding-bottom: 100px;
    }
}


.me-6px {
    margin-right:6px;
}

.mb-40px {
    margin-bottom:40px;
}

.mb-12px {
    margin-bottom:12px;
}

.mb-10px {
    margin-bottom:10px;
}

.fs-18px {
    font-size:18px;
} 

.fs-17px {
    font-size:17px !important;
} 


.fs-20px {
    font-size:20px;
} 


.fs-16px {
    font-size:16px !important;
} 

.fs-15px {
    font-size:15px;
} 

.fs-14px {
    font-size:14px !important;
} 

.fs-13px {
    font-size:13px;
} 

.fs-12px {
    font-size:12px;
} 

.fs-13-14px {
    font-size:14px;
} 

@media (max-width: 575.98px) {
    .fs-13-14px {
        font-size: 13px;
    }
}

.mb-80-100px {
    margin-bottom:80px;
}

@media (min-width: 1200px) {
    .mb-80-100px {
        margin-bottom:100px;
    }
}

.fs-16px-14px {
    font-size:14px;
}

@media (min-width: 1200px) {
    .fs-16px-14px {
        font-size:16px;
    }
}

.fs-16px-15px {
    font-size:15px;
}

@media (min-width: 1200px) {
    .fs-16px-15px {
        font-size:16px;
    }
}

.fs-16px-14px {
    font-size:14px;
}

@media (min-width: 1200px) {
    .fs-16px-14px {
        font-size:16px;
    }
}

.fs-22px-19px {
    font-size:19px;
}

@media (min-width: 1200px) {
    .fs-22px-19px {
        font-size:22px;
    }
}

.fs-21px-18px {
    font-size:18px;
}

@media (min-width: 1200px) {
    .fs-21px-18px {
        font-size:21px;
    }
}

.fs-24px-18px {
    font-size:18px;
}

@media (min-width: 1200px) {
    .fs-24px-18px {
        font-size:24px;
    }
}

.my-80-100px {
    margin-bottom:80px;
    margin-top:80px;
}

@media (min-width: 1200px) {
    .my-80-100px {
        margin-bottom:100px;
        margin-top:100px;
    }
}

.mb-60-90px {
    margin-bottom:60px;
}

@media (min-width: 1200px) {
    .mb-60-90px {
        margin-bottom:90px;
    }
}

.mb-60px {
    margin-bottom:60px;
}

.mb-80px {
    margin-bottom:80px;
}

.fc-yellow {
    color: #ffea00
}

/* 헤더 */
.vertical-line::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: #6f6f6f;
    margin-right: 16px;
    vertical-align: middle;
}

.main-logo {
    width:170px;
}

@media (max-width: 1200px) {
    .main-logo {
        width:130px;
    }
}


.navbar .dropdown-toggle::after {
    display: none; /* 드롭다운 옆 삼각형 제거 */
}

.moving-subscribe {
    position: relative;
    z-index: 1;
}

@keyframes up-down {
    0%, 100% {
        transform: translateY(0); /* 처음과 끝 위치는 제자리 */
    }
    50% {
        transform: translateY(-5px); /* 중간에 위로 5px 이동 */
    }
}

.moving-subscribe span {
    position: absolute;
    text-wrap: nowrap;
    top: -15px;
    right: -55px;
    display: block;
    color: #FFF;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 4px;
    background: linear-gradient(93deg, #e70074 -50.00%, #fe73b8 30.00%, #ed1782 110.00%);
    border-radius: 3px;
    -webkit-animation: up-down 0.8s infinite linear;
    animation: up-down 0.8s infinite linear;
}

@media (max-width: 1200px) {
    .moving-subscribe span {
        top: 11px;
        right: 155px;
        font-size: 12px;
    }
}

.mo-login {
    padding: 0px 4px;
}

.offcanvas-header {
    height:64px;
}

.offcanvas-body img {
    width:30px;
}

.btn-close:focus{
    box-shadow:unset;
}
.dropdown-menu {
    position: absolute;
    display: none;
    padding: 0.75rem 0rem;
    margin: 0;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #f0f3f6;
    border-radius: 1.125rem;
    box-shadow:  0 0.4375rem 1.25rem rgba(208, 208, 196, 0.32);
}


.card {
    flex: 1;
    /* 카드가 같은 높이를 가지도록 설정 */
}

/* ----- 메인배너 시작----- */
.main-banner.pc {
    margin-bottom: 0px;
}

.main-banner.mobile {
    display: none;
    max-width: 1200px;
    margin: 0 auto 0px;
}

@media (max-width: 576px) {
    .main-banner.pc {
        display: none;
    }

    .main-banner.mobile {
        display: block;
    }
}

.main-banner-swiper .swiper-custom-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
}

.main-banner-swiper .swiper-button-prev {
    position: static;
    width: 45px;
    height: 45px;
    margin-top: unset;
    background-color: rgba(22, 22, 22, 0.6);
    background-image: url(../images/icon/chevron-left-white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.main-banner-swiper .swiper-button-prev::after {
    content: "";
}

.main-banner-swiper .swiper-button-next {
    position: static;
    width: 45px;
    height: 45px;
    margin-top: unset;
    background-color: rgba(22, 22, 22, 0.6);
    background-image: url(../images/icon/chevron-right-white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.main-banner-swiper .swiper-button-next::after {
    content: "";
}

.main-banner-swiper .swiper-pagination {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-banner-swiper .swiper-pagination-bullet {
    background: #fff; /* 페이지네이션 색상 */
    width: 10px; /* 점 크기 */
    height: 10px;
    opacity: 1;
    margin: 0 5px;
}

.main-banner-swiper .swiper-pagination-bullet-active {
    background: #b3b3b3; /* 활성화된 점 색상 */
    opacity: 1;
    width: 10px; /* 점 크기 */
    height: 10px;
}

.swiper-scale-effect .swiper-slide-cover {
    transition: 8.5s ease-out;
    transform: scale(1.1)
}

.swiper-scale-effect .swiper-slide.swiper-slide-active .swiper-slide-cover {
    transform: scale(1)
}
.swiper-slide-cover {

}


.main-banner-swiper .swiper-pagination .swiper-pagination-current {
    color: white;
    font-weight: 600;
}

.main-banner-swiper .swiper-pagination .swiper-pagination-total {
    color: white;
}

.main-banner-swiper.pc {
    height: 360px;
    display: flex; 
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
}

@media (min-width: 1024px) {
    .main-banner-swiper.pc {
        height: 580px;
    }
}

.main-banner-swiper.pc .swiper-slide a {
    height: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.main-banner-swiper.pc .swiper-slide a img {
    width: auto;
    max-width: 1170px;
    min-height: 100%;
}

.main-banner-swiper.pc .swiper-custom-btn {
    width: 1200px;
    height: 45px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.main-banner-swiper.mobile {
    max-width: 1120px;
    height: 430px;
    margin: auto;
}

.main-banner-swiper.mobile .swiper-slide a {
    position: relative;
    height: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
/*
.main-banner-swiper.mobile .swiper-slide a::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.2)));
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
*/
.main-banner-swiper.mobile .swiper-slide img {
    width: 100%;
    max-width: 576px;
}

.main-banner-swiper.mobile .swiper-slide:not(.swiper-slide-active) a:after {
    opacity: 1;
}

.main-banner-swiper.mobile .swiper-custom-btn {
    height: 32px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.main-banner-swiper.mobile .swiper-button-prev {
    width: 32px;
    height: 32px;
    background-position: -167px -150px;
}

.main-banner-swiper.mobile .swiper-button-next {
    width: 32px;
    height: 32px;
    background-position: -207px -150px;
}

.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width:100%;
}

/* ----- 메인배너 끝----- */


/*------- 각각의 강의 슬라이드 ---------*/

.main-sub-banner-1 {
    width: 100%;
    height: auto;
    position: relative;
}

.main-sub-banner-1 .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.main-sub-banner-1 .swiper-slide img {
    max-width: 100%;
    border-radius: 10px;
}

.main-sub-banner-1 .swiper-pagination {
    height: 20px;
    bottom: 12px;
    top: unset;
    left: unset;
    right: 12px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    color: white;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -0.03em;
    padding: 0 8px;
    background-color: rgba(22, 22, 22, 0.5);
    border-radius: 10px;
}

.main-sub-banner-1 .swiper-slide a .banner-badge {
    height: 26px;
    width: 60px;
    line-height: 26px;
    border-radius: 8px 0 8px 0;
}

.main-sub-banner-1 .swiper-slide a .banner-badge {
    position: absolute;
    top: 0;
    left: 0;
    color: white;
    font-size: 12px;
    font-weight: 600;
    background: rgba(22, 22, 22, 0.8);
}

@media (max-width: 576px) {
    .main-sub-banner-1 .swiper-slide a .banner-badge {
        height: 22px;
        line-height: 22px;
    }
}


.mobile-margin  {
    margin-top:0px;
}

/*------- 각각의 강의 슬라이드 끝 ----------*/

/* ---- 메인 게시판 ----- */

.main-notice-list {
    padding: 0px;
    background-color: #fff;
    border: 1px solid #c0c0c0; 
    border-radius: 10px;
}

.main-notice-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid #dcdcdc;
}

.main-notice-list li:nth-child(5) {
    border-bottom: none;
}

.main-notice-list li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #2c2c2c;
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden;
    text-decoration: none;
}

.main-notice-list li a:hover span {
    font-weight: 600;
}

.main-notice-list li a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-notice-list li .date {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    color: #727272;
    font-size: 13px;
    letter-spacing: -0.03em;
    padding-left: 8px;
}

/* ---- 메인 게시판 끝 ----- */


/* ---- 마이페이지 메인 ----- */
.mypage-icon {
    width: 30px;
}

@media (min-width: 1200px) {
    .col-xl-20percent {
        flex: 0 0 calc(20% - 1rem); /* 12칸을 5개로 나누기 위해 20%씩 배분 */
        max-width: calc(20% - 1rem);
    }
}

@media (min-width: 1200px) {
    .col-xl-20percent-nogap {
        flex: 0 0 calc(20%); /* 12칸을 5개로 나누기 위해 20%씩 배분 */
        max-width: calc(20%);
    }
}

/* 공통 스타일 */
.mypage-item {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    width: 100%;
    border: 1px solid #ddd;
    color:inherit;
    padding: 16px; /* a 태그와 동일한 padding */
    cursor: pointer; /* 버튼처럼 동작하도록 변경 */
    text-align: left; /* 텍스트 왼쪽 정렬 */
    background-color: #fff;
}

/* 텍스트 스타일 */
.mypage-text {
    flex: 1; 
    font-weight: 500;
    margin-right: 10px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* 아이콘 스타일 */
.mypage-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}


.swiper-slide-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.btn-gray {
    --bs-btn-color: #15171A;
    --bs-btn-bg: #F7F8FA;
    --bs-btn-border-color: #D0D4D9;
    --bs-btn-hover-color: #15171A;
    --bs-btn-hover-bg: #EDEFF2;
    --bs-btn-hover-border-color: #15171A;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color:#15171A;
    --bs-btn-active-bg: #EDEFF2;
    --bs-btn-active-border-color: #15171A;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #15171A;
    --bs-btn-disabled-bg: #F7F8FA;
    --bs-btn-disabled-border-color:#D0D4D9;
    --bs-gradient: none;
}


.zindex-2 {
    z-index: 2 !important;
}



.bg-position-top-center {
    background-position: top center !important;
}

.info-title {
    color: #7E848C;
    font-weight: 400;
    font-size: 14px;
    line-height: 23px;
}

@media (min-width: 1024px) {
    .info-title {
        font-weight: 500;
        font-size: 18px;
        line-height: 27px;
    }
}

.info-content {
    color: #000000;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
}

@media (min-width: 1024px) {
    .info-content {
        font-size: 36px;
        line-height: 50px;
    }
}

.overflow-switch {
    overflow: visible;
}

.swiper-buttons {
    display: flex;
    align-items: center;
}

.image-overlay {
    position: relative;
    width: 100%;
    height: 100%;
}

.testimony img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 div 영역을 꽉 채우도록 */
    z-index: 0; /* 이미지가 그라데이션 뒤에 위치하도록 */
}

.image-overlay:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25));
    z-index: 1; /* 그라데이션이 이미지 위에 위치하도록 */
}

.testimony .card-body {
    position: relative;
    z-index: 2; /* 텍스트가 그라데이션 위에 위치하도록 */
    color: white;
}

.video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9; /* 16:9 비율 유지 */
    position: relative;
}
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.five-system .card {
    width: 308px;
    background-color: #F5F9FC;
}

.five-system .h2 {
    color: #626262;
}

.five-system .h5 {
    border-bottom: 2px solid black;
}

.testimony .card{
    height: 300px;
}

@media (min-width: 1024px) {
    .testimony .card{
        height: 380px;
    }
}

.testimony .h4{
    line-height:1.5;
}

.fs-testimony {
    font-size: 18px;
    line-height: 28px;
    font-weight:500;
}

@media (min-width: 1024px) {
    .fs-testimony {
        font-size: 24px;
        line-height: 36px;
    }
}

@media (min-width: 1024px) {
    .line:before {
        content: '|';
        width: 1px;
        height: 14px;
        margin: 0 10px 0 4px;
    }
}

@media (max-width: 1023.98px) {
    .contact-item {
        width: 100%;
    }
}

/*----- 푸터 ----- */



/*
@media (max-width: 992px) {

    .navbar-collapse {
        position: fixed; 
        top: 0;
        left: 0;
        width: 100% !important; 
        background-color: white;
        z-index: 1050; 
        margin-top: 67px;
        padding: 20px; 
        transition:none; 
    }


    .navbar-collapse.collapse {
        display: none;
    }


    .navbar-collapse.collapse.show {
        display: block;
    }
*/
.navbar-toggler{
    border:none;
}

.navbar-toggler:focus{
    border:none;
    box-shadow:none;
}

/* ----- 백그라운드 이미지 ---- */
.bg-repeat-0 {
    background-repeat: no-repeat !important
}

.bg-size-cover {
    background-size: cover !important
}

.bg-position-center {
    background-position: center !important
}

.bg-size-contain {
    background-size: contain !important
}


/* ----- 소식 ------ */

article a {
    text-decoration: none;
}

.news-title {
    line-height:28px;
}

.news-title a {
    color: #15171A;
    text-decoration: none;
}

.news-title a:hover {
    color: #0C00FF;
}

.news-info{
    color: #7E848C;
    font-size:14px;
}

.max-text-3line {
    font-size:14px;
    line-height:22px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

@media (min-width: 1024px) {
    .max-text-3line {
        font-size:15px;
        line-height:26px;
    }
}

.profile-img-wrapper {
    width: 48px; /* 고정된 너비 */
    height: 48px; /* 고정된 높이 (정사각형) */
    border-radius: 50%; /* 완벽한 원으로 만듦 */
    overflow: hidden; /* 초과 이미지 잘라내기 */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0; /* 비어있는 배경색 (선택 사항) */
}

.profile-img-wrapper img {
    width: 100%; /* 이미지를 부모 너비에 맞춤 */
    height: 100%; /* 이미지를 부모 높이에 맞춤 */
    object-fit: cover; /* 정사각형에 맞추어 이미지 비율 유지 */
}

.comments-writebox{
    background:#fff;
    margin-top: 3rem; 
    padding-top:1.5rem;
    border-top:1px solid #d3d3d3;
}

.writebox-add {
    font-size: 16px;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

@media (min-width:575.98px) {
    .writebox-add {
        font-size:18px;
    }
}

.write-box-border {
    border: 1px solid #B9B9B9;
    border-radius:4px;
}


/* ----- 간증 ------ */

.testimony-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e3e9ef;
}

.testimony-card .card-body {
    flex: 1 1 auto;
    padding: 1.5rem 1rem;
}


@media (min-width: 1024px) {
    .testimony-card .card-body {
        flex: 1 1 auto;
        padding: 2.375rem 2.275rem;
    }
}

.testimony-card .card-footer {
    padding: 1rem 2.375rem;
    background-color: #fff;
    border-top: 1px solid #e3e9ef;
}

.testimony-card .card-header,
.testimony-card .card-footer {
    width: calc(100% - 2rem); 
    margin: auto;
    padding-right: 0;
    padding-left: 0
}

@media (min-width: 1024px) {
    .testimony-card .card-header,
    .testimony-card .card-footer {
        width: calc(100% - 4.75rem); 
        margin: auto;
        padding-right: 0;
        padding-left: 0
    }
}

.testimony-card-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e3e9ef;
}

.testimony-card-1 .card-body {
    padding: 0.75rem 1rem;
}


@media (min-width: 1024px) {
    .testimony-card-1 .card-body {
        
        padding: 0.75rem 1rem;
    }
}

.testimony-card-1 .card-footer {
    padding: 1rem 1rem;
    background-color: #fff;
    border-top: 1px solid #e3e9ef;
}

.testimony-card-1 .card-header,
.testimony-card-1 .card-footer {
    width: calc(100% - 2rem); 
    margin: auto;
    padding-right: 0;
    padding-left: 0
}

@media (min-width: 1024px) {
    .testimony-card-1 .card-header,
    .testimony-card-1 .card-footer {
        width: calc(100% - 2rem); 
        margin: auto;
        padding-right: 0;
        padding-left: 0
    }
}

.testimony-card-1 a{
    text-decoration: none;
    color: #15171A;
}

/* ----- 써머노트트 ------ */

.editor-content p{
    line-height:28px;
}

.editor-content img {
    border-radius: 0.25rem;
    width:100%;
}

/* ----- 로그인/회원가입 ------ */

.register-wrapper {
    min-height: calc(100vh - 97px);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    padding-left: 0;
    padding-right: 0;
    background: #f9f9f9
}

.register-wrapper.full-page {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 120px;
}

@media (max-width: 575.98px) {
    .register-wrapper.full-page {
        padding-bottom: 0px;
    }
}

.content-wrapper {
    display:flex;
    align-items:center;
    background: #f9f9f9;
    width: 100%;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.form-box{
    width:100%;
    border-radius:8px;
    margin:auto;
    background:#fff;
    max-width:600px;
}

.form-box h4 {
    font-size:16px;
    font-weight:400;
}

@media (min-width: 575.98px) {
    .form-box h4 {
        font-size:18px;
    }
}

.main-logo{
    display:block
}

.main-logo img {
    width: 90px;
}

.form-cntr {
    display: block;
    width: 100%;
    font-size: 1rem;
    min-height: 3.175rem;
    font-weight: 400;
    line-height: 1;
    color: #212529;
    background-color: #fff !important;
    background-clip: padding-box;
    border: 1px solid #B9B9B9;
    appearance: none;
    border-radius: 0.3rem;
    text-indent:16px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (max-width: 575.98px) {
    .form-cntr {
        text-indent:12px;
    }
}

.form-cntr:focus{
    color: #2c2c2c;
    background-color: #fff;
    border-color: #525252;
    outline: 0;
    box-shadow: unset;
}

.form-cntr::placeholder{
    color: #9A9A9A;
    opacity: 1;
    font-size: 1rem;
    text-indent:16px
}

@media (max-width: 575.98px) {
    .form-cntr::placeholder {
        text-indent:12px
    }
}

.enter-link{
    display:flex;
    justify-content: space-between;
    align-items: end;
}

.enter-link .btn {
    width: 100px;
}

.pw-link {
    text-decoration: none;
    font-size: 15px;
    color: #2c2c2c;
    font-weight: 400;
}

.join-link {
    font-size: 15px;
    margin-top: 2rem;
    font-weight: 300;
    text-align: center;
}

.join-link a{
    color:#006BB9;
}



.custom-pagination {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 */
    border-radius: 8px;
    padding: 4px 8px;
    z-index: 10;
}



.chev-right::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url(../images/icon/chevron-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 8px;
    vertical-align: unset;
}

.chev-right-lg::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(../images/icon/chevron-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 12px;
    vertical-align: unset;
}

@media (max-width: 1199px) {
    .announcement .chev-right-lg::after {
        display:none;
    }
}

.chev-right-cart::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url(../images/icon/chevron-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 4px;
    vertical-align: unset;
}

.offcanvas-end {
    width: 360px !important;
    max-width: 93%;
}

.offcanvas-body {
    padding: 4px 16px 16px 16px;
}

.navbar-toggler-icon {
    background-image: url("../images/icon/open1.svg");
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    background-image: url("../images/icon/close1.svg");
    width: 18px;
    height: 18px;
  }

.course-card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}
.discount-badge {
    background-color: #ff6600;
    color: #fff;
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 3px;
}
.price {
    font-size: 16px;
    font-weight: bold;
}

.course-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    display:block
}

.course-title:hover {
    text-decoration: underline;
}

.course-info {
    font-size: 14px;
    color: #666;
}


/* 모달 백드롭 */
.modal-backdrop {
    --bs-backdrop-opacity: 0.65;
}

/*
.nav {
    padding-left: 0; 
}
*/    



/* 질문게시판 */

.question-board {
    border-top: 2px solid #000000;
    list-style: none;
    padding: 0px
}

.question-board-list {
    padding: 18px 10px;
    font-size: 15px;
    border-bottom: 1px solid #c7c7c7
}

.question-board-list:hover {
    background-color: #f8f9fa;
}

@media (max-width: 575.98px) {
    .question-board-list {
        padding: 10px 10px;
    }
}

@media (min-width: 1919.98px) {
    .question-board-list {
        padding: 18px 28px;
    }
}

.question-board-list-container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    overflow: hidden;
    flex-direction: column;
}

@media (min-width: 575.98px) {
    .question-board-list-container {
        flex-direction: row;
    }
}

.question-board-header {
    padding: 18px 10px;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #c7c7c7
}

@media (max-width: 575.98px) {
    .question-board-header {
        padding: 10px 0px;
    }
}

@media (min-width: 1919.98px) {
    .question-board-header {
        padding: 18px 28px;
    }
}


.submit-header {
    padding: 18px 10px;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #c7c7c7
}

@media (max-width: 575.98px) {
    .sumbit-header {
        padding: 10px 0px;
    }
}

@media (min-width: 1919.98px) {
    .submit-header {
        padding: 18px 28px;
    }
}

.border-bottom-0 {
    border-bottom: none !important
}

.author-date {
    color:#727272
}

@media (max-width: 1200px) {
    .author-date {
        font-size:14px;
    }
}

.author-date .date {
    text-wrap: nowrap;
}

.question-board-body {
    padding: 34px 10px;
    border-bottom: 1px solid #c7c7c7
}

@media (max-width: 575.98px) {
    .question-board-body {
        padding: 28px 0px;
    }
}

@media (min-width: 1919.98px) {
    .question-board-body {
        padding: 40px 28px;
    }
}

.question-board-body p,
.question-board-body div {
    font-size: 15px;
    color: #525252;
    line-height:1.6
}

.question-board-ansr {
    padding: 24px 18px;
    border: 1px solid #c7c7c7
}

@media (max-width: 575.98px) {
    .question-board-ansr {
        padding: 18px 14px;
    }
}

@media (min-width: 1919.98px) {
    .question-board-ansr {
        padding: 30px 28px;
    }
}

.question-board-ansr .fs-base {
    color: #15171A;
}

.question-board-ansr p,
.question-board-ansr div {
    font-size: 15px;
    color: #525252;
    line-height:1.6
}

.board-back-btn {
    border: 1px solid #c7c7c7;
    color: #525252;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0px;
    padding: 6px 16px;
}

.mb-80px {
    margin-bottom: 80px;
}

.reply-header {
    padding: 0px 10px;
}

@media (max-width: 575.98px) {
    .reply-header  {
        padding: 0px 0px;
    }
}

@media (min-width: 1919.98px) {
    .reply-header  {
        padding: 0px 28px;
    }
}

.reply-body {
    border-top: 1px solid #dee2e6
}

.reply-item {
    border-bottom: 1px solid #dee2e6;
    padding: 24px 10px;
}

@media (max-width: 575.98px) {
    .reply-item  {
        padding: 24px 0px;
    }
}

@media (min-width: 1919.98px) {
    .reply-item  {
        padding: 24px 28px;
    }
}

.reply-item .name {
    color: #15171A;
    font-size:15px;
    font-weight:600;
}

.reply-item .date {
    color: #727272;
    font-size:13px;
}

.reply-content p,
.reply-content div {
    font-size: 15px;
    color: #525252;
    line-height:1.6
}

.subject-vertical-line::before {
    content: "";
    display: inline-block;
    width: 3px;
    /* 세로 줄의 두께 */
    height: 1em;
    /* 텍스트 높이에 맞추기 */
    background-color: black;
    /* 세로 줄 색상 */
    margin-right: 5px;
    /* 텍스트와 줄 사이의 간격 */
    vertical-align: middle;
    /* 텍스트와 줄을 정렬 */
    transform: translate(0px, -1px);
}

.course-info-table th,
.course-info-table td{
    background-color:#f8f9fa
}

@media (min-width: 1200px) {
    .container.course-container {
        max-width: 1080px;
    }
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-list li {
    display: flex;
    justify-content: start;
    padding: 3px 0px;
    font-size: 14px;
    background: #f9f9f9;
    margin-bottom: 0px;
}

.info-list .label {
    font-weight: bold;
    font-size: 14px;
    text-wrap:nowrap;
}

/* --- 코스소개 주문 --- */

.order-item {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.order-item:last-child {
    border-bottom: none;
}

.total-price {
    font-weight: bold;
}

.order-summary {
    text-align: right;
}

.btn-group-custom {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* --- 코스소개 탭 정보 --- */


.act-tab {
    background-color: #fff;
    display: flex;
    justify-content: space-around;
}

.act-tab a {
    font-size: 14px;
    padding: 6px 20px;
    cursor: pointer;
    color: #9a9a9a;
    flex-grow: 1;  /* 각 a 태그가 동일한 비율로 공간을 차지하게 합니다. */
    text-align: center;  /* 텍스트를 가운데 정렬 */
    border-bottom: 1px solid #9a9a9a
}

.act-tab a.active {
    color: #161616;
    font-weight:600;
    border-bottom: 2px solid #161616;
}

.act-tab a:hover {
    color: #161616;
    font-weight:600;
}

@media (min-width:575.98px) {
    .act-tab a {
        font-size: 16px;
        padding: 8px 20px;
    }
}

/* --- 코스소개 영상리스트 정보 --- */

.table th {
    color: #808080;
    font-weight: 500;
    font-size: 14px;
}

.table td {
    color: inherit;
    font-weight: 400;
    font-size: 16px;
}

@media (max-width:1024px) {
    .table td {
        font-size: 15px;
    }
}

.table th:first-child {
    width: 8%;
}

.table th:nth-child(2) {
    width: 80%;
}

.table th:last-child {
    width: 12%;
}

/* --- 장바구니 --- */

.shipping-address .form-label,
.shipping-address .form-control {
    font-size:14px;
    margin-bottom:0px;
}

@media (min-width: 992px) {
    .col-lg-12percent {
        width: 12%;
    }
    .col-lg-88percent {
        flex: 1 0 0%;
    }
}

/* --- 부트스트랩 재정의 --- */
.form-check {
    margin-bottom:0px;
}

ol,
ul {
  padding-left: 1rem;
  margin-bottom: 0rem;
}

.form-control:focus{
    box-shadow: unset;
    border-color: #b1b1b1
}

.form-check-input {
    border-color: #b1b1b1
}

/* --- 로그인 --- */
.main__join {
    width: 100%;
    max-width: 400px;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
}

.login-margin {
    margin-top:60px;
    margin-bottom:60px;
}

@media (min-width:1024px) {
    .login-margin {
        margin-top:120px;
        margin-bottom:160px;
    }
}

@media (min-width:1200px) {
    .login-margin {
        margin-top:120px;
        margin-bottom:190px;
    }
}

.login-margin.border:has(.form-check-input:checked) {
    border-color: #b1b1b1 !important; /* 원하는 색상으로 변경 */
}

/*----- 모집안내 -----*/

.contact-banner {
    position: relative;
    width: 100%;
    height: 280px;
    background-image: url(../images/top_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media (min-width:575.98px) {
    .contact-banner {
        height: 320px;
    }
}

@media (min-width:1200px) {
    .contact-banner {
        height: 400px;
    }
}

.contact-banner p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #fff;
    font-weight: 500;
    text-align: center;  /* ← 왼쪽 정렬을 중앙 정렬로 변경 */
    line-height: 1.3;
}

.indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #525252;
    border-radius: 50%;
    margin-right: 7px;;
    margin-bottom:2px;
}



.blue-border {
    border:1px solid #0716A0;
}

@media (min-width:575.98px) {
    .blue-border {
        border:2px solid #0716A0;
    }
}

.contact-p1 {
    font-size: 20px;
    font-weight: 600;
    color: #0716A0;
}

@media (min-width:575.98px) {
    .contact-p1 {
        font-size: 22px;
    }
}

@media (min-width:1200px) {
    .contact-p1 {
        font-size: 26px;
    }
}

.contact-p2 {
    font-size: 17px;
    font-weight: 500;
}

@media (min-width:575.98px) {
    .contact-p2 {
        font-size: 19px;
    }
}

@media (min-width:1200px) {
    .contact-p2 {
        font-size: 22px;
    }
}

.contact-p3 {
    font-size: 15px;
    color: #424242;
}

@media (min-width:575.98px) {
    .contact-p3 {
        font-size: 16px;
    }
}

@media (min-width:1200px) {
    .contact-p3 {
        font-size: 18px;
    }
}

.contact-p4 {
    font-size: 20px;
    font-weight: 600;
}

@media (min-width:361px) {
    .contact-p4 {
        font-size: 22px;
    }
}

@media (min-width:575.98px) {
    .contact-p4 {
        font-size: 28px;
    }
}

@media (min-width:1200px) {
    .contact-p4 {
        font-size: 34px;
    }
}

.fs-contactform {
    font-size: 19px;
    font-weight:500;
}

@media (min-width:361px) {
    .fs-contactform {
        font-size: 20px;
    }
}

@media (min-width:575.98px) {
    .fs-contactform {
        font-size: 24px;
    }
}


/*----- 고객센터 -----*/

.cs-banner {
    position: relative;
    width: 100%;
    height: 250px;
    background-image: url(../images/cs_banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media (max-width: 1200px) {
    .cs-banner {
        height: 250px;
        background-position: 5% 0;
    }
}

.cs-banner p {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1170px;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    text-align: left;
    line-height: 1.3;
}

@media (max-width: 1200px) {
    .cs-banner p {
        font-size: 24px;
        padding-left: 12px;
    }
}

.cs-tab {
    background-color: #fff;
    display: flex;
    justify-content: space-around;
}

.cs-tab a {
    font-size: 15px;
    padding: 10px 2px;
    cursor: pointer;
    color: #9a9a9a;
    width: 50%;  /* 각 항목이 1/3씩 차지 */
    text-align: center;  /* 텍스트를 가운데 정렬 */
    border-bottom: 1px solid #9a9a9a
}


.cs-tab a.active {
    color: #161616;
    font-weight:600;
    border-bottom: 2px solid #161616;
}

.cs-tab a:hover {
    color: #161616;
    font-weight:600;
}

@media (min-width:919.98px) {
    .cs-tab a {
        font-size: 16px;
        padding: 12px 20px;
    }
}

.about-tab {
    background-color: #fff;
    display: flex;
    justify-content: space-around;
}

.about-tab a {
    font-size: 15px;
    padding: 10px 2px;
    cursor: pointer;
    color: #15171A;
    width: 50%;  /* 각 항목이 1/3씩 차지 */
    text-align: center;  /* 텍스트를 가운데 정렬 */
    border-bottom: 1px solid #15171A;
    font-weight:500
}


.about-tab a.active {
    color: #CE2023;
    font-weight:600;
    border-bottom: 2px solid #CE2023
}

.about-tab a:hover {
    color: #CE2023;
    font-weight:600;
}

@media (min-width:919.98px) {
    .about-tab a {
        font-size: 18px;
        padding: 20px 20px;
    }
}


/*----- 에디터 -----*/

.editor-input-wrap{
    width:100%;
} 

.editor-title-input {
    display: block;
    width: 100%;
    padding: 0.375rem 0rem;
    font-size: 16px;;
    font-weight: 500;
    line-height: 1.5;
    color:#2C2C2C;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 0px;
    border:1px solid #c7c7c7;
    text-indent: 10px;;
}

.editor-title-input:focus {
    box-shadow: none;
    outline:none;
}

.editor-title-input::placeholder{
    color: #9c9c9c;
    font-size: 16px;
}


/*----- 서머노트 -----*/
.note-modal-footer {
    padding-bottom:50px;
}

.note-frame {
    font-family: "Pretendard Variable";
    color: #15171A;
    border-radius:0px;
}

.note-toolbar {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-color: #c7c7c7;
}

.note-editor.note-airframe, .note-editor.note-frame {
    border:1px solid #c7c7c7;
}

.note-btn.dropdown-toggle::after {
    display: none !important; /* 중복된 드롭다운 숨기기 */
}

.note-link-dialog .form-check {
    display: none; /* 체크박스 숨기기 */
}

.sn-checkbox-open-in-new-window {
    display:none;
}

.sn-checkbox-use-protocol {
    display:none;
}

.note-modal-footer .btn.disabled,
.note-modal-footer .btn:disabled,
.note-modal-footer .note-btn-primary,
.note-modal-footer .note-btn-primary:focus {
    background-color: #212529;
    border-color: #212529;
    border-radius: 0px;
}

.note-modal-footer .note-btn.disabled,
.note-modal-footer .note-btn[disabled],
.note-modal-footer .fieldset[disabled] 
.note-modal-footer .note-btn {
    opacity: 1;
}

.note-modal-title {
    font-size:16px;
    color:#15171A;
}

.note-modal .note-modal-body label {
    padding: 2px 0px;
}

.note-form-label {
    font-size:14px;
    color:#15171A;
    font-weight:400;
}

.note-modal-header {
    padding: 20px 15px 0px 15px;
    border: none;
}

@media (min-width:575.98px) {
    .note-modal-header {
        padding: 20px 20px 0px 20px;
        border: none;
    }    
}

.note-modal-body {
    padding: 10px 15px;
}

@media (min-width:575.98px) {
    .note-modal-body {
        padding: 20px 30px 20px 30px;
    }   
}

.note-form-group {
    padding-bottom: 10px;
}

.note-group-image-url {
    padding-bottom: 10px;
}

.note-video-url {
    margin-bottom: 10px;
}

.note-image-input {
    border-radius:0px;
}

.note-modal-body .note-input {
    border:1px solid #B9B9B9;
}

.note-modal-body .note-input:focus {
    border:1px solid #B9B9B9;
}

.note-modal-footer {
    padding:0px 15px 50px 15px;
}

.note-editable p {
    color: #15171A;
}


.note-editor .note-editing-area .note-editable a {
    color:blue;
    text-decoration: underline;
}

.note-placeholder {
    color: #9c9c9c;
}

.note-modal-header .close {
    color:#2c2c2c;
    opacity:0.8
}

.note-dropdown-item {
    color:#333333 !important;
    text-decoration: none !important;
}


/* --- 고객센터 질문하기 / 글쓰기페이지 --- */

.cs-ask-write .form-label {
    font-size:15px;
    margin-bottom:0px;
    font-weight:600;
}

@media (min-width: 992px) {
    .col-lg-10percent {
        width: 10%;
    }
    .col-lg-90percent {
        flex: 1 0 0%;
    }
}


/* --- 강사소개 --- */


@media (max-width:765.98px) {
    .tlist-container{
        padding-right: 0 !important;
    }
}

@media (max-width:765.98px) {
    .tlist-rightside{
        height:190px;
        justify-content: space-around;
    }
}

@media (min-width:765.98px) {
    .tlist-rightside{
        height:230px;
        justify-content: space-between;
    }
}

.fs-tlist-toptitle {
    font-size:20px;
}

@media (max-width:765.98px) {
    .fs-tlist-toptitle {
        font-size:14px;
    }
}

.fs-tlist-name {
    font-size:34px;
}

@media (max-width:765.98px) {
    .fs-tlist-name {
        font-size:28px;
    }
}

.fs-tlist-text {
    font-size:14px;
}

@media (min-width:991.98px) {
    .fs-tlist-text {
        font-size:16px
    }
}

.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.video-container {
    position: relative;
    width: 92%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    background: #000;
}

.video-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.close-button {
    position: absolute;
    top: -10px;
    right: -10px;
    background: rgba(255, 255, 255, 0.8);
    color: black;
    border: none;
    font-size: 24px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-button:hover {
    background: white;
}

.teacher-profile .btn-close {
    width: 0.8em;  /* 기본값: 1em → 더 작게 */
    height: 0.8em;
    font-size: 0.8rem; /* 기본값보다 작게 설정 */
}

.tlist-btn {
    border:0;
    padding: 0.25rem 0.5rem;
    background-color: #4D6A92;
    font-size:12px;
}

@media (min-width:1200px) {
    .tlist-btn {
        border:0;
        padding: 0.25rem 1rem;
    }
}

.tlist-tab {
    background-color: #fff;
    display: flex;
    justify-content: space-around;
}

.tlist-tab a {
    font-size: 14px;
    padding: 24px 0px 8px 0px;
    cursor: pointer;
    color: #9a9a9a;
    width: 50%;  /* 각 항목이 1/3씩 차지 */
    text-align: center;  /* 텍스트를 가운데 정렬 */
    border-bottom: 1px solid #9a9a9a
}

.tlist-tab a.active {
    color: #161616;
    font-weight:600;
    border-bottom: 2px solid #161616;
}

.tlist-tab a:hover {
    color: #161616;
    font-weight:600;
}

@media (min-width:575.98px) {
    .tlist-tab a {
        font-size: 16px;
        padding: 30px 0px 10px 0px;
    }
}


/*----- 학원소개 -----*/

.intro-banner {
    position: relative;
    width: 100%;
    height: 1200px;
    background-image: url(../images/main-2.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

@media (max-width: 1200px) {
    .intro-banner {
        height: 250px;
        background-position: 5% 0;
    }
}

.intro-banner p {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1170px;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

@media (max-width: 1200px) {
    .intro p {
            font-size: 24px;
            padding-left: 12px;
            line-height: 0 !important
        }
    }

.yesbefore{
    position:relative
}    


.yesbefore:before {
    background: url(../images/air.png) no-repeat;
    background-size: 320px 320px;
    content: "";
    display: inline-block;
    position: absolute;
    right: 16px;
    top: 50%;
    width: 320px;
    height: 320px;
    transform: translate(0%, -50%);
}

.yesbefore:after {
    background: url(https://acaimg.etoos.com/cs/pc/branch/images/cnt/introduce/brandinfo_bg_ico.png) no-repeat;
    content: "";
    display: inline-block;
    height: 58px;
    left: 16px;
    position: absolute;
    top: 80px;
    width: 93px;
}

.yesyes:after {
    background: url(../images/air.png) no-repeat;
    content: "";
    display: inline-block;
    height: 58px;
    position: absolute;
    top: 0;
    margin-left:18px;
    transform: rotate(180deg);
    width: 93px;
    z-index: -1;
}

.introduce-banner {
    padding:60px 16px 60px 16px;
}

@media (min-width: 991.98px) {
    .introduce-banner {
        padding: 80px 16px 80px 16px;
    }
}

@media (min-width: 1200px) {
    .introduce-banner {
        padding: 100px 16px 100px 16px;
    }
}

.introduce-banner-circle {
    padding: 18px 0px;
    background-color: #0716A0
}

@media (min-width: 991.98px) {
    .introduce-banner-circle {
        padding: 22px 0px;
        background-color: #0716A0
    }
}

@media (min-width: 767.98px) {
    .intro-border-right {
        border-right:1px solid #999
    }
}

.main-text {
    line-height: 1.8;
    font-size: 16px;
    color: #454545;
}

@media (min-width: 991.98px) {
    .main-text {
        line-height: 2;
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    .main-text {
        line-height: 2;
        font-size: 20px;
    }
}

.about-text {
    line-height: 1.8;
    font-size: 16px;
    color: #454545;
}

@media (min-width: 991.98px) {
    .about-text {
        line-height: 2;
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    .mainservice-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 한 줄에 3개 */
        grid-template-rows: repeat(2, auto);
        /* 총 2줄 */
        gap: 28px;
        /* 슬라이드 간 간격 */
    }

    .mainservice-wrapper .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }

    /* 6개까지만 보이도록 설정 */
    .mainservice-wrapper .swiper-slide:nth-child(n+7) {
        display: none;
    }
}

@media (min-width: 1200px) {
    .wikiclass-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 한 줄에 3개 */
        grid-template-rows: repeat(2, auto);
        /* 총 2줄 */
        gap: 36px;
        /* 슬라이드 간 간격 */
    }

    .wikiclass-wrapper .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }

    /* 6개까지만 보이도록 설정 */
    .wikiclass-wrapper .swiper-slide:nth-child(n+7) {
        display: none;
    }
}

@media (max-width: 	767.98px) {
    .mainservice-wrapper {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        /* 한 줄에 3개 */
        grid-template-rows: repeat(3, auto);
        /* 총 2줄 */
        gap: 12px;
        /* 슬라이드 간 간격 */
    }

    .mainservice-wrapper .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }

    /* 6개까지만 보이도록 설정 */
    .mainservice-wrapper .swiper-slide:nth-child(n+7) {
        display: none;
    }
}

@media (min-width: 1200px),
(max-width: 578px) {
    .mainservice-Swiper {
        overflow: visible !important;
        touch-action: auto !important;
    }

    .mainservice-wrapper {
        transform: none !important;
        transition: none !important;
    }
}



@media (min-width: 1200px) {
    .process-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 한 줄에 3개 */
        grid-template-rows: repeat(2, auto);
        /* 총 2줄 */
        gap:48px;
        /* 슬라이드 간 간격 */
    }

    .process-wrapper .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }

    /* 6개까지만 보이도록 설정 */
    .process-wrapperr .swiper-slide:nth-child(n+7) {
        display: none;
    }
}

@media (max-width: 578px) {
    .process-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 한 줄에 3개 */
        grid-template-rows: repeat(3, auto);
        /* 총 2줄 */
        gap: 16px;
        /* 슬라이드 간 간격 */
    }

    .process-wrapper .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }

    /* 6개까지만 보이도록 설정 */
    .process-wrapper .swiper-slide:nth-child(n+7) {
        display: none;
    }
}

@media (min-width: 1200px),
(max-width: 578px) {
    .process-Swiper {
        overflow: visible !important;
        touch-action: auto !important;
    }

    .process-wrapper {
        transform: none !important;
        transition: none !important;
    }
}


@media (min-width: 1200px) {
    .about-text {
        line-height: 1.8;
        font-size: 20px;
    }
}

.about-text-lg {
    line-height: 1.8;
    font-size: 17px;
    color: #454545;
}

@media (min-width: 991.98px) {
    .about-text-lg {
        line-height: 2;
        font-size: 19px;
    }
}

@media (min-width: 1200px) {
    .about-text-lg {
        line-height: 1.8;
        font-size: 22px;
    }
}


.about-padding {
    padding-bottom: 40px;
    padding-top: 60px;
}

@media (min-width: 991.98px) {
    .about-padding {
        padding-bottom: 40px;
        padding-top: 80px;
    }
}



/* ----- 구독 ----- */

.subscribe-banner {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.01),
            rgba(255, 255, 255, 1) 105%),
        radial-gradient(ellipse at top left, rgba(161, 199, 255, 0.5), transparent 50%),
        radial-gradient(ellipse at top right, rgba(255, 228, 132, 0.5), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(214, 51, 132, 0.5), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(214, 51, 132, 0.5), transparent 50%)
}

.price-underline {
    position: relative;
    /* 부모를 기준으로 자식을 배치하기 위해 필요 */
    display: inline-block;
}

.price-underline::after {
    content: "";
    position: absolute;
    bottom: 3px;
    /* 텍스트 바로 아래로 밑줄을 이동 */
    left: 0;
    height: 10px;
    width: 100%;
    background-color: #ff0101;
    z-index: -1;
}

.subscribe-margin {
    margin-top:60px;
}

@media (min-width: 1200.00px) {
    .subscribe-margin {
        margin-top:90px;
    }
}

.sub-display-1 {
    font-size: calc(2rem + 4.5vw);
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .sub-display-1 {
        font-size: 5rem;
    }
}

/*===== 시험 =====*/

.exam {
    height: 100vh
}

.exam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

.exam .offcanvas-backdrop {
    display: none;
}

.exam .offcanvas {
    border: none;
    padding: 1.5rem;
    background: #F2F5FA;
}

.exam .gray-line {
    width: 92%;
    margin: auto;
}

.ans-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid rgb(213, 213, 213);
}

.ans-quest {
    background: #E8EDF3;
    font-size: 18px;
    width: 36px;
    height: 36px;
    text-align: center;
    flex: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(0px, -1px);
}

.ans-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ans-number {
    display: flex;
    justify-content: space-between;
    flex: 70%;
    margin-left: 1rem;
    font-size:18px;
}

.ans-answer {
    display: flex;
    align-items: center;
}

.ans-text {
    flex: 70%;
    margin-left: 1rem;
    transform:translate(0px, -1px);
}

.ans-correct {
    width:100%;
    flex: 70%;
    margin-left: 1rem;
    font-size: 18px;
    display: flex;
    justify-content: center;
}

.exam-form {
    width: 0;
    height: 0;
    position: absolute;
}

.exam-label {
    font-size: 18px;
    text-align: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #d4d4d4;
    text-align: center;
}

.exam-form:checked+label {
    background-color: #0d6efd;
    color: #ffffff;
    font-weight: 400;
    border-color: #d5e6ff;
}

.exam-form[type=radio] {
    border-radius: 50%;
    opacity: 0;
    width: 34px;
    height: 34px;
    transform: translate(0px, -4px);
}

.exam-textbox {
    width: 100%;
    height: 38px;
    font-size: 18px;
    border: 1px solid rgb(213, 213, 213);
    border-radius: 5px;
    text-align:center
}

.exam-textbox:focus {
    outline: none;
}

.exam .btn {
    font-size: 16px;
}

@media (max-width: 575.98px) {
    .exam .btn {
        font-size: 15px;
        padding: 4px 10px;
    }
}

.exam .btn:active,
.exam .btn:focus,
.exam .btn-primary:focus,
.exam .btn-primary:active {
    transform: none;
    box-shadow: none;
    outline: unset;
    border: 1px solid #0d6efd
}


/* 채팅 윈도우*/ 
.chatpage {
    min-height: unset !important;
}

.chatpage header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.student-chat {
    margin-top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position:relative;
}

@media (min-width:575.98px) {
    .student-chat{
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

.student-chat .student-chatwrap{
    flex: 1; 
    overflow-y: scroll;
    margin-top: 70px;
    margin-bottom: 60px;
    -ms-overflow-style: none;
    scrollbar-width: none; 
} 

.student-chatwrap::-webkit-scrollbar {
    display: none; 
}

@media all and (min-width:575.98px) and (max-width:1199.98px) {
    .student-chat .student-chatwrap{
        margin-bottom: 100px;
    } 
}

@media (min-width:1200px) {
    .student-chat .student-chatwrap {
        margin-bottom:100px;
        margin-top: 185px;
    }
}

.student-chatwrap a{
    text-decoration-line:underline;
    text-decoration-color: #0d6efd;
    color:#0d6efd
}

.student-chat .message-wrap{
    margin-top: 20px;
    margin-bottom: 20px;
}

@media (max-width:575.98px) {
    .student-chat .message-wrap {
        margin-top: 16px;
        margin-bottom: 16px;
    }
}

@media (min-width:1200px) {
    .student-chat .message-wrap{
        margin-top: 22px;
        margin-bottom: 22px
    }
}

.student-chat .message-wrap-1{
    display:flex;
    align-items:start;
    margin:0;
}

.student-chat .user-img {
    margin-top:0;
    flex-shrink: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 50%;
    width:44px;
    height:44px;
    margin-right: 1rem
}

@media all and (min-width:575.98px) and (max-width:1199.98px) {
    .student-chat .user-img {
        width:40px;
        height:40px;
    }
}

@media (max-width:575.98px) {
    .student-chat .user-img {
        width:34px;
        height:34px;
        margin-right: .5rem
    }
}

.student-chat .message-wrap-2 {
    padding-right: 0.25rem;
    width:100%
}

@media all and (min-width:575.98px) and (max-width:1399.98px) {
    .student-chat .message-wrap-2 {
        padding-right: .9rem;
    }
}

@media (max-width:575.98px) {
    .student-chat .message-wrap-2 {
        padding-right: .475rem;
        padding-left: .25rem
    }
}

.student-chat .info-box {
    display:flex;
    align-items: center;
}

.student-chat .user-id {
    font-weight: 600;
}

@media (max-width:575.98px) {
    .student-chat .user-id {
        font-size: 17px
    }
}

@media all and (min-width:575.98px) and (max-width:1199.98px) {
    .student-chat .user-id {
        font-size: 18px
    }
}

@media (min-width:1200px) {
    .student-chat .user-id {
        font-size: 19px;
    }
}

.message-time{
    font-size:1rem;
    color:#212529bf;
    margin-left: .5rem
}

@media (max-width:575.98px) {
    .message-time {
        font-size: 0.875rem;
    }
}

.student-chat .message-box {
    width: 100%;
    background-color: white;
    word-break: break-all;
    margin-left: 0
}

@media (min-width:1200px) {
    .student-chat .message-box {
        width: 100%;
        font-size: 18px;
        line-height: 1.6;
        margin-top: 2px
    }
}

@media all and (min-width:575.98px) and (max-width:991.97px) {
    .student-chat .message-box {
        font-size: 16px;
        line-height: 1.5;
    }
}

@media all and (min-width:991.97px) and (max-width:1199.98px) {
    .student-chat .message-box {
        font-size: 17px;
        line-height: 1.6;
    }
}

@media (max-width:575.98px) {
    .student-chat .message-box {
        width: 100%;
        font-size:16px;
        line-height: 1.5;
    }
}

.student-chat .message-box img{
    width: 100% !important;
    border-radius: 10px;
    margin-top:0.375rem;
}

/* 날짜 구분 */

.date-divider {
    width:100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    color:#212529bf;
    flex-shrink:0;
    font-size:16px;
    margin-top: 2rem;
    margin-bottom: 2rem
}

@media (max-width:575.98px) {
    .date-divider  {
        font-size:14px;
        margin-top: 1.25rem;
        margin-bottom: 1.25rem
    }
}

.date-divider::after,
.date-divider::before {
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    border-top: .0625rem solid #e6ecf0;
    margin-top: .0625rem;
    content: ""
}

.date-divider::before {
    margin-right: 1rem
}

.date-divider::after {
    margin-left: 1rem
}

/* ===== 텍스트 윈도우! ===== */ 

.text-window {
    z-index: 3;
    box-shadow: none;
    background: #fff;
    padding-right: 0;
    padding-left: 0;
    position:absolute;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    width:100%;
}

@media (max-width:575.98px) {
    .text-window  {
        padding-right: 8px;
        padding-left: 8px;
    }
}

@media (min-width:575.98px) {
    .text-window  {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}


.text-window .text-box {
    border: 1px solid #dedede;
    background: #fff;
    border-radius:16px;
    display:flex;
    align-items: start;
    width:100%;
    margin-bottom:20px;
}

@media (max-width:575.98px) {
    .text-window .text-box {
        margin-bottom:10px;
        margin-top:8px;
    }
}

/* 텍스트에리아 */
.text-window textarea {
    font-family: "Pretendard Variable";
    resize: none;
    padding: 10px;
    margin: 0px;
    font-size:18px;
    height:82px;
    overflow-y:hidden;
}

@media (max-width:575.98px) {
    .text-window textarea {
        height:46px;
        font-size:16px;
        padding: 12px;
    }
}

.text-window .text-box .form-control {
    border: 0 !important;
    border-radius:1rem;
}

.text-window .text-box .form-control:focus {
    box-shadow: unset;
}


/* 텍스트 윈도우 - 드랍메뉴/아이템들 */ 

.text-window .dropup-center .dropdown-toggle::after {
    display: none;
}

.text-window .text-box-btn {
    display: flex;
    align-items: start;
    margin-top: .5rem
}

@media(max-width: 575.98px) {
    .text-window .text-box-btn {
        margin-top: .35rem
    }
}

.text-window .menu-btn {
    margin-left: .5rem
}

.text-window .btn {
    display: inline-block;
    padding: 0.5rem 0.775rem;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: none;
    border-radius: 10px;
    background-color: #E7E7E7;
    transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out
}

@media(max-width: 575.98px) {
    .text-window .btn {
        padding: 0.3rem 0.475rem;
    }
}
.text-window .bi {
    font-size: 20px;
    color: #888888
}

@media(max-width: 575.98px) {
    .text-window .bi {
        font-size:18px;
    }
}

.text-window .bi::before {
    -webkit-text-stroke: 0.02rem;
}

.text-window .dropdown-menu {
    position: absolute;
    overflow: hidden;
    color: #020202;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border:none;
    z-index: 1000;
    padding: 0.75rem 0rem;
    margin: 0;
    font-size:18px;
    border-radius: 20px;
    width: 300px;
    box-shadow: 0 .4375rem 1.25rem rgba(208, 208, 196, .32);
    margin-bottom: 1rem !important;
}

@media all and (min-width:575.98px) and (max-width:991.98px) {
    .text-window .dropdown-menu  {
        transform: translate(-194px, -50px) !important;
    }
}

@media (max-width: 575.98px) {
    .text-window .dropdown-menu {
        width: 200px;
        font-size:18px;
        transform: translate(-120px, -35px) !important;
    }
}

.text-window .dropdown-menu.show {
    animation: fade-in .2s ease-in-out
}

@keyframes fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.text-window .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.375rem  1.25rem;;
    clear: both;
    font-weight: 400;
    color: #020202;
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    margin-bottom: .25rem
}

.text-window .dropdown-item:focus,
.text-window .dropdown-item:hover {
    color: #454545;
    background-color: rgb(234, 234, 234);
    border:none;
}

.text-window .dropdown-item.active,
.text-window .dropdown-item:active {
    color: #454545;
    text-decoration: none;
    background-color:rgb(234, 234, 234);
    border:none;
}

.text-window .dropdown-item .bi {
    font-size: 20px;
    color: #454545;
    margin-right: 1rem;
}

@media (max-width: 575.98px) {
    .text-window .dropdown-item .bi {
        margin-right: 0.75rem;
    }
}

.text-window .dropdown-item .bi-paperclip::before {
    transform:rotate(45deg)
}

.text-window .dropdown-divider {
    height: 0;
    margin:  0.375rem 0;
    overflow: hidden;
    border-top: 1px solid #e6ecf0;
    margin-right: 1.25rem;
    margin-left: 1.25rem;
}

.text-window .send-btn{
    margin-left: .5rem;
    margin-right: .5rem 
}


/* ===== 팀원보기 모달 ===== */ 

.classmate-modal .modal-content {
    border: none;
    color: #15171A;
    padding:16px;
}

.classmate-modal .modal-header {
    border:none;
    border-bottom:1px solid #E7E7E7;
    font-size:20px;
    font-weight:500
}

.classmate-modal .classname .bi {
    margin-right: 8px
}

.classmate-modal .btn-close{
    width: 16px;   /* 원하는 크기로 조정 */
    height: 16px;  /* 원하는 크기로 조정 */
    background-size: 16px; /* 아이콘 크기 조정 */
}

.classmate-modal .modal-body {
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    max-height:480px;
    overflow-y: auto;
}

@media (max-width: 575.98px) {
    .classmate-modal .modal-body {
        padding-right: 0;
        padding-left: 0 
    }
}

.classmate-modal ul {
    list-style: none;
    padding: 0;
    margin:0;
    overflow: hidden;
}

.classmate-modal ul li {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
}

.classmate-modal .member-img {
    margin-top:0;
    flex-shrink: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 50%;
    width:38px;
    height:38px;
    margin-right: 1rem
}

.classmate-modal .member-name {
    font-size: 17px;
}

.classmate-modal .modal-footer{
    padding-bottom:0.5rem;
    padding-top:0.5rem;
    border-top:1px solid #E7E7E7;
    font-size:16px;
}

.classmate-modal .modal-btn {
    padding:0.375rem 0.75rem;
    border-radius:0.375rem;
    background-color: #454545;
    color: #fff;
    box-shadow: unset;
    border:none;
    font-size: 16px;
}

.choice-to{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

.choice-mb{
    display:flex;
    align-items:center;
}

.modal-btn.choice {
    padding:0.25rem 0.75rem;
    border-radius:0.375rem;
    background-color: #ffffff;
    border: 1px solid #454545;
    color: #454545;
    box-shadow: unset;
    font-size:1.05rem;
    font-weight:400;
}




/* ========== 디렉트 메세지 윈도우 =============*/ 
.direct-message{
    margin-top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position:relative;
}

@media (min-width:575.98px) {
    .direct-message {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

.direct-message a{
    text-decoration-line:underline;
    text-decoration-color: #0d6efd;
    color:#0d6efd
}

.direct-message-wrapper{
    flex: 1; 
    overflow-y: scroll;
    margin-top: 70px;
    margin-bottom: 60px;
    -ms-overflow-style: none;
    scrollbar-width: none; 
} 

.direct-message-wrapper::-webkit-scrollbar {
    display: none; 
}


@media all and (min-width:575.98px) and (max-width:1199.98px) {
    .direct-message-wrapper{
        margin-bottom: 100px;
    } 
}

@media (min-width:1200px) {
    .direct-message-wrapper {
        margin-bottom:100px;
        margin-top:154px;
    }
}

.dm-wrap-left .user-img {
    margin-top:0;
    flex-shrink: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 50%;
    width:44px;
    height:44px;
    margin-right: 0.75rem
}

@media all and (min-width:575.98px) and (max-width:1199.98px) {
    .dm-wrap-left .user-img {
        width:40px;
        height:40px;
    }
}

@media (max-width:575.98px) {
    .dm-wrap-left .user-img {
        width:34px;
        height:34px;
        margin-right: .5rem
    }
}

.dm-wrap-right .user-img {
    margin-top:0;
    flex-shrink: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 50%;
    width:44px;
    height:44px;
    margin-left: 0.75rem
}

@media all and (min-width:575.98px) and (max-width:1199.98px) {
    .dm-wrap-right .user-img {
        width:40px;
        height:40px;
    }
}

@media (max-width:575.98px) {
    .dm-wrap-right .user-img {
        width:34px;
        height:34px;
        margin-left: .5rem
    }
}


.dm-wrap-left {
    display: flex;
    justify-content: start;
    align-items: start;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin: 0
}

@media (max-width:575.98px) {
    .dm-wrap-left{
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

.dm-left {
    display: flex;
    align-items: start;
    flex-direction: column;
    margin-top: 0.125rem;
    margin-left:0.5rem;
    width:100%;
}

.dm-message-box {
    display: flex;
    align-items: end;
    max-width:500px;
    width:100%;
}

.dm-message-box.left{
    justify-content:start;
}

.dm-message-box.right{
    justify-content:end;
}


.dm-message {
    border-radius:0.85rem;
    padding:0.375rem 0.875rem;
    word-break: break-all;
    max-width:500px;
    margin-top: .25rem;
    margin-bottom: .25rem;
}

.dm-message.left{
    background:rgba(216, 216, 216, 0.4);
}

@media (min-width:1200px) {
    .dm-message {
        font-size: 18px;
        line-height: 1.6;
        margin-top: 2px
    }
}

@media all and (min-width:991.97px) and (max-width:1199.98px) {
    .dm-message {
        font-size: 17px;
       line-height: 1.6;
    }
}

@media all and (min-width:575.98px) and (max-width:991.97px) {
    .dm-message {
        font-size: 16px;
       line-height: 1.5;
    }
}

@media all and (min-width:360.02px) and (max-width:575.98px) {
    .dm-message {
        font-size:16px;
        line-height: 1.5;
        max-width:280px;
    }
}

@media (max-width:360px) {
    .dm-message {
        font-size:16px;
        line-height: 1.5;
        max-width:270px;
    }
}

.direct-message .user-id {
    font-weight: 600;
}

@media (max-width:575.98px) {
    .direct-message .user-id {
        font-size: 17px;
    }
}

@media all and (min-width:575.98px) and (max-width:1199.98px) {
    .direct-message .user-id {
        font-size: 18px
    }
}

@media (min-width:1200px) {
    .direct-message .user-id {
        font-size: 19px
    }
}

.dm-time{
    font-size:1rem;
    color:#212529bf;
    white-space: nowrap;
    margin-bottom: .25rem
}

.dm-time.left{
    margin-left: .5rem;
}

.dm-time.right{
    margin-right: .5rem;
}

@media (max-width:575.98px) {
    .dm-time {
        font-size: 0.775rem;
    }
}

.dm-wrap-right{
    display:flex;
    align-items:start;
    justify-content: end;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin:0
} 

@media (max-width:575.98px) {
    .dm-wrap-right{
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

.dm-right{
    display:flex;
    align-items: end;
    flex-direction: column;
    margin-top:0.125rem;
    margin-right:0.5rem;
    width:100%;
}

.dm-message.right{
    background:#EBF2FA;
}

.dm-img-message {
    display:flex;
    padding: 0.375rem 0rem;
    width:100%;
    max-width:500px;
}

.dm-img-message img {
    width:100%;
    height:auto;
    max-width:500px;
    border-radius: 10px;
}

.dm-notice {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: none;
    border-radius:0.85rem;
    border: 0.1rem solid #447DC3;
    background:rgba(68,125,195,0.02);
    max-width: 500px;
    margin-top: 0.375rem;
    width:100%;
}

.dm-notice-header {
    margin: 0rem 1.25rem;
    padding:1rem 0rem;
    border-bottom:0.1rem solid #447DC3;
    font-size:18px;
    font-weight:500
} 

@media (max-width:575.98px) {
    .dm-notice-header{
        margin: 0rem 1.25rem;
        padding:1rem 0rem 0.75rem 0rem;
    }
}

.dm-notice .bi {
    color: #0d6efd;
    margin-right: 0.5rem
}
.dm-notice-body{
    flex: 1 1 auto;
    padding: 1rem  1.25rem 1rem 1.25rem;
}

@media (max-width:575.98px) {
    .dm-notice-body{
        padding: 1rem  1.25rem 1.125rem 1.25rem;
    }
}

.dm-notice-title{
    font-size:1.5rem;
    margin-bottom: .5rem;
    font-weight: 500;
}

@media (max-width:1199.98px) {
    .dm-notice-title{
        font-size: calc(1.275rem + .3vw);
        line-height: 1.5;
    }
}

.dm-notice-text{
    word-break: break-all;
}

@media (min-width:1200px) {
    .dm-notice-text {
        font-size: 18px;
        line-height: 1.6;
    }
}

@media all and (min-width:991.97px) and (max-width:1199.98px) {
    .dm-notice-text {
        font-size: 17px;
       line-height: 1.6;
    }
}

@media all and (min-width:575.98px) and (max-width:991.97px) {
    .dm-notice-text {
        font-size: 16px;
       line-height: 1.5;
    }
}

@media all and (min-width:360.02px) and (max-width:575.98px) {
    .dm-notice-text {
        font-size:16px;
        line-height: 1.5;
    }
}

@media (max-width:360px) {
    .dm-notice-text {
        font-size:16px;
        line-height: 1.5;
    }
}


.dm-time.notice {margin-top:.5rem};

.bi-reply-fill::before {
    color: #fff;
    font-size: 1rem;
    padding-left:1rem;
    margin-right: .5rem !important;
}
.to-who {
    display: inline-block;
    padding: 0.42em 0.72em;
    font-size: 0.875rem;
    font-weight: 500;
    background: #3292ff;
    line-height: 1;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 50rem;
    transform:translate(0rem, -0.075rem);
    margin-right:0.25rem;
}

@media (max-width:575.98px) {
    .to-who {
        font-size: 0.75rem;
        padding: 0.15em 0.72em 0.3em 0.72em;
        transform:translate(0rem, -0.09rem);
    }
}

.to-who i {
    color: #fff;
    font-size: 1rem;
    margin-right: .125rem !important;
}


/* ============ 학습자료 ============ */

/*학습자료 데이터 테이블 검색창*/

.datatable-search{
    margin-bottom: 1rem;
}


.search-box {
    width: 100%;
    background-image: url(../images/datatable/search-glass.png);
    background-position: 0.2rem 0.2rem;
    background-size: 26px;
    background-repeat: no-repeat;
    text-indent: 30px;
    border: 1px solid rgb(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 5px;
    background-color: #fff;
    color: #454545;
    text-decoration: none;
    font-size: 16px;
}

@media (max-width:575.98px) {
    .search-box {
        font-size: 16px;
        background-size: 24px;
        text-indent: 28px;
    }
}

.search-box:focus{
    border: 1px solid rgb(0, 0, 0, 0.3);
    box-shadow: none;
    outline:none;
}

.search-box::placeholder {
    color: #8c8c8c;
    font-size:16px;
}

.carousel-control-prev-icon {
    background-image: url("../images/icon/chevron-left-white.svg");
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #171717;
    border:1px solid #fff
}

.carousel-control-next-icon {
    background-image: url("../images/icon/chevron-right-white.svg");
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #171717;
    border:1px solid #fff
}

@media (max-width:575.98px) {
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 30px;
        height: 30px;
    }
}


.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    padding: 0;
    margin-right: 5px;
    margin-left: 5px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #7b7b7b;
    background-clip: padding-box;
    border: 0;
    opacity: .8;
    transition: opacity .6sease;
}

.carousel-indicators .active {
    width: 34px;
    height: 10px;
    background-color: #171717;
}


.info-change .user-img {
    margin-top:0;
    flex-shrink: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 50%;
    width:60px;
    height:60px;
    margin-right: 13px;
}

.tlist-img {
    width: 100%
}

@media (max-width: 768px) {
    .tlist-img {
        width:220px;
    }
}

.join-process {
    display: none;
}
.join-process.active {
    display: block;
}

.faculty-margin {
    margin-top:60px;
}

@media (min-width: 767px) {
    .faculty-margin {
        margin-top:80px;
    }
}

@media (min-width: 1200px) {
    .faculty-margin {
        margin-top:100px;
        margin-bottom:80px;
    }
}

.fs-openai {
    color: #191918;
    font-size: 26px;
    line-height:1.3
}

@media (min-width: 767px) {
    .fs-openai {
        font-size: 32px;
    }
}

@media (min-width: 1200px) {
    .fs-openai {
        font-size: 38px;
    }
}

.basic-margin {
    margin-top:60px;
    margin-bottom:60px;
}

@media (min-width: 1200px) {
    .basic-margin {
        margin-top:60px;
        margin-bottom:90px;
    }   
}

.mb-80px-50px{
    margin-bottom:50px !important
}

@media (min-width: 1200px) {
    .mb-80px-50px{
        margin-bottom:80px !important
    }
}

.mb-80px-60px{
    margin-bottom:60px !important
}

@media (min-width: 1200px) {
    .mb-80px-60px{
        margin-bottom:80px !important
    }
}

.mt-80px-60px{
    margin-top:60px !important
}

@media (min-width: 1200px) {
    .mt-80px-60px{
        margin-top:80px !important
    }
}


.top-text-shadow {
    line-height: 1.4;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.rounded-4px {
    border-radius: 4px;
}

.rounded-8px {
    border-radius: 8px;
}

.news-index-img {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 768 / 490;
    width:100%;
}

.news-index-text {
    font-weight: 500;
    font-size: 24px;
    padding-top: 16px;
    color: #15171A;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height:1.4
}

.newspage-title {
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
}

.newspage-2lines {
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
}

.bg-top {
    background-position: top;
}

.bg-center {
    background-position: center;
}

.bs-cover {
    background-size: cover;
}

.announcement-date {
    font-size: 14px;
    color: #4a4a4a;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-style: italic;
}

.gal-index-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.zoom-effect-wrapper {
    position: relative;
    transform: translateZ(0);
    overflow: hidden;
    border-radius: 8px;
}

.zoom-effect-img {
    display: block;
    transition: transform .3s ease-in-out
}

@media (min-width: 1200px) {
    .zoom-effect:hover .zoom-effect-img {
        transform: scale(1.04)
    }
    
    .zoom-effect:hover .news-index-text {
    text-decoration: underline;
    }
}


.icon-with-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 26px;  /* 원하는 크기로 조정 */
    height: 26px; /* 원하는 크기로 조정 */
    background-color: #656F77;/* 회색 배경 */
    border-radius: 50%;  /* 동그라미 모양 */
    color: white;  /* 아이콘 색상 */
    font-size: 14px;  /* 아이콘 크기 조정 */
    transform: translate(0px, 1px);
}

.icon-with-circle-lg {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;  /* 원하는 크기로 조정 */
    height: 38px; /* 원하는 크기로 조정 */
    background-color: #656F77;/* 회색 배경 */
    border-radius: 50%;  /* 동그라미 모양 */
    color: white;  /* 아이콘 색상 */
    font-size: 30px;  /* 아이콘 크기 조정 */
}

.icon-with-circle-lg:hover {
    background-color: #1E1E1E;
}

.icon-with-circle-white {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 26px;  /* 원하는 크기로 조정 */
    height: 26px; /* 원하는 크기로 조정 */
    background-color: #fff;/* 회색 배경 */
    border-radius: 50%;  /* 동그라미 모양 */
    color: #000;  /* 아이콘 색상 */
    font-size: 14px;  /* 아이콘 크기 조정 */
    transform: translate(0px, 1px);
}

.icon-with-circle-lg-white {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 38px;  /* 원하는 크기로 조정 */
    height: 38px; /* 원하는 크기로 조정 */
    background-color: #fff;/* 회색 배경 */
    border-radius: 50%;  /* 동그라미 모양 */
    color: #000;  /* 아이콘 색상 */
    font-size: 30px;  /* 아이콘 크기 조정 */
}

.icon-with-circle-lg-white:hover {
    background-color: #c9c9c9;/* 회색 배경 */
}


.index-notice {
    position: relative;
}

.index-notice::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;  /* 밑줄의 두께 */
    background-color: #fff;  /* 밑줄의 색상 */
}

.index-notice:hover {
    color: #000cf7
}

.bg-footer-navy {
    background-color: #05002D
}

.fc-footer {
    color:#C8C8C8
}

.toparea-padding {
    padding-top: 22px;
    padding-bottom: 18px;
}

.mainlogo {
    width:100px;
}

@media (max-width: 1200px) {
    .mainlogo {
        width: 86px;
    }
}

@media (max-width: 1200px) {
    .secondarea-padding {
        padding: 10px 0px;
    }
}

.mobile-mainlogo {
    width:46px;
}

.border-meta-2 {
    border:1px solid #0892D2;
}

.toparea-text {
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
    color: #000cf7
}

.index-title {
    font-size: 30px;
    line-height: 1.5;
    color: #020202;
}

.subpage-title {
    font-size: 30px;
    line-height: 1.5;
    color: #020202;
}



/* three-items에 position: relative 추가 */


.sub-items:hover .submenu {
    display: block; /* 마우스를 올리면 서브 메뉴가 보이도록 */
    visibility: visible;
}

.sub-items:hover .submenu-1 {
    display: block; /* 마우스를 올리면 서브 메뉴가 보이도록 */
    visibility: visible;
}


.submenu {
    display: none;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    color: #000;
    white-space: nowrap;
    z-index: 1001;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1.25rem 2.5rem;
    width: 1320px;
    border-radius: 8px;
}


.twotwo {
    position: absolute; /* 부모 요소를 기준으로 위치 */
    top: 100%; /* 부모 항목 바로 아래에 위치 */
    left: 0;
    right: 0; /* 부모 요소의 오른쪽 끝까지 확장 */
    color:#000;
    z-index: 1000; /* 적당한 z-index 값 설정 */
}



@media (min-width: 1200px) {
    .nav-item{
        padding: 22px 0px;
    }
}

.border-bottom-white {
    border-bottom:1px solid #fff
}

.border-bottom-white-2px {
    border-bottom:4px solid #fff
}

.border-bottom-gray {
    border-bottom:1px solid gray
}

.border-bottom-gray-2px {
    border-bottom:3px solid gray
}

.bg-curri {
    background-color: #f1f1f1;
}

.consultation .form-control {
    border-color: gray
}

.consultation .form-control:focus {
    border-color: #000;
}

.consultation .form-check-input {
    border-color: gray
}

.log-form .form-control {
    border-color: gray
}

.log-form .form-control:focus {
    border-color: #000;
}

.log-form .form-check-input {
    border-color: gray
}

.border-gray {
    border: 1px solid gray
}

.prevBtn:hover {
    border: 1px solid gray
}

.form-control::placeholder {
    font-size: 14px;  /* 원하는 크기로 조정 */
    color: #686868;  /* 플레이스홀더 색상 변경 가능 */
}

.py-100px-68px {
    padding-bottom:68px;
    padding-top:68px;
}

@media (min-width: 1200px) {
    .py-100px-68px {
        padding-bottom:110px;
        padding-top:110px;
    }
}

.pt-100px-68px {
    padding-top:68px;
}

@media (min-width: 1200px) {
    .pt-100px-68px {
        padding-top:100px;
    }
}

.py-80px-48px {
    padding-bottom:48px;
    padding-top:48px;
}

@media (min-width: 1200px) {
    .py-80px-48px {
        padding-bottom:60px;
        padding-top:60px;
    }
    
}

.bg-meta2 {
    background-color: #242AC9
}


.submit th,
.submit td {
    padding: 8px 6px !important;
}

@media (min-width: 767.98px) {
    .submit th,
    .submit td {
        padding: 16px 30px !important;
    }
}


.head-link-line {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

/* hover 대상 변경! .three-items에 hover가 있을 때에도 스타일 적용 */
.sub-items:hover .head-link-line {
    color: #3561ff !important;
}

.sub-items:hover .head-link-line::after {
    width: 100%;
}

.head-link-line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: #3561ff;
    /*
    transition: width 0.3s ease;*/
}

.head-link-line i {
    display: inline-block;
    transform-origin: center center;
    /* or bottom center, depending on look */
    vertical-align: middle;
}

.sub-items:hover .head-link-line i {
    transform: rotate(180deg) translateY(3px);
}

.header-btn-1 {
    padding: 6px 16px;
    border-radius: 4px;
    margin-right: 16px;
    font-weight:600;
}

.header-btn-2 {
    padding: 6px 16px;
    background-color: #212224;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
}

.header-btn-3 {
    padding: 6px 12px;
    background-color: #212224;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    font-size:12px;
}


.binded-content {
    position: relative;
    height: 100%
}

.binded-item {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    flex-direction: column;
    width: 100%;
    height: 100%;
    transition: opacity .35s ease-in-out, visibility .35s ease-in-out;
    visibility: hidden;
    opacity: 0
}

.binded-item.active {
    position: relative;
    visibility: visible;
    opacity: 1
}

.from-bottom {
    transform: translateY(2.25rem)
}

.header-ad-area {
    background-color: #4d66e0;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: 0.5px;
    position: relative;
    z-index: 9999
}

@media (min-width: 1200px) {
    .header-ad-area {
        margin-top: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        z-index: 0
    }
}

.header-main-area {
    position: relative;
    z-index: 9999
}

@media (min-width: 1200px) {
    .header-main-area {
        position: static;
        z-index: -1;
    }
}

@media (min-width: 1200px) { navbar-collapse
    .mb-xl-54px {
        margin-bottom: 54px !important
    }
}

@media (min-width: 1200px) {
    .subservice-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* 한 줄에 3개 */
        grid-template-rows: repeat(2, auto);
        /* 총 2줄 */
        gap: 36px;
        /* 슬라이드 간 간격 */
    }

    .subservice-wrapper .swiper-slide {
        width: 100% !important;
        height: auto !important;
    }

    /* 6개까지만 보이도록 설정 */
    .subservice-wrapper .swiper-slide:nth-child(n+7) {
        display: none;
    }
}

.banner-badge {
    gap: 10px;
    flex-wrap: wrap;
}

@media (min-width: 1200px) {
    .banner-badge {
        gap: 16px;
    }
}


/*
.form-floating>.form-control {
    height: 66px;
    min-height: auto;
    line-height: 1.25;
}

.form-floating>label {
    padding: 1.25rem 1rem;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
    padding: 1.375rem 1rem;
}

.form-floating>.form-control::-moz-placeholder,
.form-floating>.form-control-plaintext::-moz-placeholder {
    color: transparent;
}

.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown) {
    padding-top: 2.25rem;
    padding-bottom: 0.625rem;
}

.form-floating label {
    color: gray
}

.form-control.login {
    border: 1px solid #c5ccd2;
    font-size:17px;
    border-radius: 8px;
}

.form-control.login:focus {
    border: 2px solid gray
}
*/
.container.login-container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
}

.container.join-container {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 500px;
}

@media (max-width: 575.98px) {
    .container.join-container {
        top: 50%;
    }
}


.login-logo {
    width:90px;
}

.login-form-wrapper {
    max-width: 520px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #c5ccd2;
}

@media (max-width: 575.98px) {
    .login-form-wrapper {
        border: none;
    }
}


.login-btn {
    border: none;
    height: 54px;
    margin-top: 30px;
    background-color: #212224;
    color: #fff;
    width: 100%;
    font-size: 17px;
    border-radius: 8px;
}

.fc-gray01 {
    color: #6f6f6f;
}

.fc-gray02 {
    color:#666e7d
}

.text-wrap {
    text-wrap: wrap;
}

.ls-0 {
    letter-spacing: 0px;
}

.term-btn {
    text-decoration: underline;
    color: gray;
    cursor: pointer;
}

.form-check-input.dark:checked {
    background-color: #212224;
    border-color: #212224;
    box-shadow: none;
}

.form-check-input.dark:focus {
    box-shadow: none;
    border-color: #b1b1b1
}

/* collapse가 열렸을 때 rotate 180도 */
.nav-item a[aria-expanded="true"] .rotate {
    transform: rotate(180deg);
}

@media (max-width: 1200px) {
    .nav-item a[aria-expanded="true"] .rotate {
        transform: rotate(180deg);
    }
}

.collapse {
    transition: none !important;
}

.navbar-collapse .dropdown-item {
    background-color: transparent !important;
}

.navbar-collapse .dropdown-item:focus,
.navbar-collapse .dropdown-item:active,
.navbar-collapse .dropdown-item:hover {
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none;
    outline: none;
}

.mobile-mathman-img {
    width:27%;
}

@media (max-width: 575.98px) {
    .mobile-mathman-img {
        width:50%;
    }
}

.main-title {
  font-size: 44px;
  line-height:1.2
}

@media (max-width: 1200px) {
    .main-title {
        font-size: 34px;
    }
}

@media (max-width: 576.98px) {
    .main-title {
        font-size: 30px;
    }
}

@media (max-width: 360.98px) {
    .main-title {
        font-size: 29px;
    }
}

.semi-title {
    font-size:32px;
    font-weight:700
}

@media (max-width: 1200px) {
    .semi-title {
        font-size: 24px;
    }
}

@media (max-width: 360.98px) {
    .semi-title {
        font-size: 22px;
    }
}

.semi-title2 {
    font-size:28px;
    font-weight:700
}

@media (max-width: 1200px) {
    .semi-title2 {
        font-size: 24px;
    }
}

@media (max-width: 360.98px) {
    .semi-title {
        font-size: 22px;
    }
}

.semi-title3 {
    font-size:32px;
    font-weight:600
}

@media (max-width: 1200px) {
    .semi-title3 {
        font-size: 28px;
    }
}

@media (max-width: 360.98px) {
    .semi-title3 {
        font-size: 26px;
    }
}

.semi-title4 {
    font-size:36px;
    font-weight:700
}

@media (max-width: 1200px) {
    .semi-title4 {
        font-size: 24px;
    }
}

@media (max-width: 360.98px) {
    .semi-title4 {
        font-size: 22px;
    }
}

.font-paragraph {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #707070;
}

@media (max-width: 1200px) {
    .font-paragraph {
        font-size: 15px;
    }
}

@media (max-width: 360.98px) {
    .font-paragraph {
        font-size: 15px;
    }
}

.top-paragraph {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
    color: #707070;
}

@media (max-width: 1200px) {
    .top-paragraph {
        font-size: 16px;
        line-height: 1.5;
    }
}

@media (max-width: 360.98px) {
    .top-paragraph {
        font-size: 16px;
        line-height: 1.5;
    }
}

footer {
    position: relative;
    background-color: #fff
}

footer .container {
    max-width: 1240px;
}

.footer-logo {
    width: 80px;
}

.footer-button {
    border: 1px solid gray;
    font-size: 12px;
    font-weight: 600;
    border-radius: 32px;
    text-align: center;
    width: 80px;
    padding: 6px 0px
}

.footer-text-01 {
    letter-spacing: 0px;
    color: rgb(91, 91, 91);
    font-size: 13px;
}

.footer-text-02 {
    letter-spacing: 0px;
    color: rgb(125, 125, 125);
    display: flex;
    font-size: 12px;
}

.footer-text-03 {
    color: rgb(125, 125, 125);
    font-size: 12px;
}

.footer-button-1 {
    border: 1px solid gray;
    font-weight: 600;
    border-radius: 32px;
    text-align: center;
    width: 120px;
    padding: 6px 0px
}